@extends('layouts.app')

@section('content')
    <div class="container">

        <div class="row">
            <div class="col-md-12">
                @include('layouts/partials/status')
            </div>
        </div>
        @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) || auth()->user()->can_create_form)
            <div class="row mb-5">
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info elevation-1"><i class="fas fa-file-alt"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">@lang('messages.forms')</span>
                            <span class="info-box-number">{{ $form_count }}</span>
                        </div>
                    </div>
                </div>

                @if (!auth()->user()->hasRole(\App\Enums\User\RoleEnum::ADMIN->value))
                    <div class="col-12 col-sm-6 col-md-3">
                        <div class="info-box">
                            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-align-justify"></i></span>

                            <div class="info-box-content">
                                <span class="info-box-text">@lang('messages.templates')</span>
                                <span class="info-box-number">{{ $template_count }}</span>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-green elevation-1"><i class="fas fa-hand-pointer"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">@lang('messages.submissions')</span>
                            <span class="info-box-number">{{ $submission_count }}</span>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-6 col-md-3">
                    <button type="button" data-href="{{ action([\App\Http\Controllers\FormController::class, 'create']) }}"
                        class="btn btn-primary float-right col-md-9 createForm mt-3">
                        <i class="fas fa-plus" aria-hidden="true"></i> @lang('messages.new_form')</button>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12 col-sm-12">
                <div class="card card-primary card-outline card-outline-tabs">
                    <div class="card-header p-0 border-bottom-0">
                        <ul class="nav nav-tabs
                        @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) || auth()->user()->can_create_form) nav-justified @endif"
                            id="custom-tabs-four-tab" role="tablist">
                            @if (auth()->user()->hasRole([\App\Enums\User\RoleEnum::SUPERVISOR->value]) || auth()->user()->can_create_form)
                                <li class="nav-item">
                                    <a class="nav-link active" id="custome-tabs-all-forms" data-toggle="pill"
                                        href="#custome-tabs-forms" role="tab" aria-controls="custome-tabs-forms"
                                        aria-selected="true">
                                        <i class="fas fa-file-alt" aria-hidden="true"></i> @lang('messages.all_forms')
                                    </a>
                                </li>
                                @if (!auth()->user()->hasRole(\App\Enums\User\RoleEnum::ADMIN->value))
                                    <li class="nav-item">
                                        <a class="nav-link" id="custome-tabs-all-templates" data-toggle="pill"
                                            href="#custome-tabs-templates" role="tab"
                                            aria-controls="custome-tabs-templates">
                                            <i class="fas fa-align-justify" aria-hidden="true"></i> @lang('messages.all_templates')
                                        </a>
                                    </li>
                                @endif
                            @endif
                            <li class="nav-item">
                                <a class="nav-link
                                @if (!auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) && !auth()->user()->can_create_form) active @endif
                                "
                                    id="custome-tabs-shared-forms" data-toggle="pill"
                                    href="#custome-tabs-shared-forms-assigned" role="tab"
                                    aria-controls="custome-tabs-shared-forms-assigned"
                                    @if (!auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) && !auth()->user()->can_create_form) aria-selected="true" @endif>
                                    <i class="fas fa-file-alt" aria-hidden="true"></i> @lang('messages.assigned_forms')
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-four-tabContent">
                            @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) || auth()->user()->can_create_form)
                                <div class="tab-pane fade active show" id="custome-tabs-forms" role="tabpanel"
                                    aria-labelledby="custome-tabs-all-forms">
                                    <div class="table-responsive">
                                        <table class="table" id="form_table" style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>@lang('messages.description')</th>
                                                    <th>@lang('messages.name')</th>
                                                    <th>@lang('messages.created_at')</th>
                                                    <th>@lang('messages.submissions')</th>
                                                    <th>@lang('messages.action')</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="custome-tabs-templates" role="tabpanel"
                                    aria-labelledby="custome-tabs-all-templates">
                                    <div class="table-responsive">
                                        <table class="table" id="template_table" style="width: 100%;">
                                            <thead>
                                                <tr>
                                                    <th>@lang('messages.description')</th>
                                                    <th>@lang('messages.name')</th>
                                                    @if (auth()->user()->can('superadmin'))
                                                        <th>
                                                            @lang('messages.is_global_template')
                                                            <i class="fas fa-info-circle" data-toggle="tooltip"
                                                                title="@lang('messages.is_global_template_tooltip')"></i>
                                                        </th>
                                                    @endif
                                                    <th>@lang('messages.action')</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif
                            <div class="tab-pane fade
                                @if (!auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value) || !auth()->user()->can_create_form) active show @endif
                            "
                                id="custome-tabs-shared-forms-assigned" role="tabpanel"
                                aria-labelledby="custome-tabs-shared-forms">
                                <div class="table-responsive">
                                    <table class="table" id="assigned_form_table" style="width: 100%;">
                                        <thead>

                                            <tr>
                                                <th>@lang('messages.description')</th>
                                                <th>@lang('messages.name')</th>
                                                @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value))
                                                    <th>@lang('messages.created_by')</th>
                                                @endif
                                                <th>@lang('messages.action')</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="collab_modal" role="dialog" aria-hidden="true"></div>
@endsection

@section('footer')
    <script type="text/javascript">
        $(document).ready(function() {
            var lang = `{{ session()->get('locale') }}`
            var titleColName = 'name';
            if (lang === 'est') {
                titleColName = 'name_est'
            } else if (lang === 'ru') {
                titleColName = 'name_ru'
            }

            var descColName = 'description';
            if (lang === 'est') {
                descColName = 'description_est'
            } else if (lang === 'ru') {
                descColName = 'description_ru'
            }

            // form dataTable
            var form_table = $('#form_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/home',
                buttons: [],
                dom: 'lfrtip',
                fixedHeader: false,
                aaSorting: [
                    [1, 'desc']
                ],
                "columnDefs": [{
                        "width": "22%",
                        "targets": 0
                    },
                    {
                        "width": "40%",
                        "targets": 1
                    },
                    {
                        "width": "15%",
                        "targets": 2
                    },
                    {
                        "width": "3%",
                        "targets": 3
                    },
                    {
                        "width": "20%",
                        "targets": 4
                    }
                ],
                columns: [{
                        data: descColName,
                        name: descColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.name
                            }
                        },
                    },
                    {
                        data: titleColName,
                        name: titleColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.name
                            }
                        },
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'data_count',
                        name: 'data_count',
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        sortable: false
                    }
                ]
            });

            // template dataTable
            var template_table = $('#template_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/home-template',
                buttons: [],
                dom: 'lfrtip',
                fixedHeader: false,
                columns: [{
                        data: descColName,
                        name: descColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.name
                            }
                        },
                    },
                    {
                        data: titleColName,
                        name: titleColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.name
                            }
                        },
                    },
                    @if (auth()->user()->can('superadmin'))
                        {
                            data: 'is_global_template',
                            name: 'is_global_template',
                            sortable: false,
                            searchable: false
                        },
                    @endif {
                        data: 'action',
                        name: 'action',
                        sortable: false
                    }
                ]
            });

            //delete form
            $(document).on('click', '.delete_form', function() {
                var url = $(this).data("href");
                var result = confirm('Are You Sure?');
                if (result == true) {
                    $.ajax({
                        method: "DELETE",
                        url: url,
                        dataType: "json",
                        success: function(result) {
                            if (result.success == true) {
                                toastr.success(result.msg);
                                form_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                }
            });

            //delete template
            $(document).on('click', '.delete_template', function() {
                var url = $(this).data("href");
                var result = confirm('Are You Sure?');
                if (result == true) {
                    $.ajax({
                        method: "DELETE",
                        url: url,
                        dataType: "json",
                        success: function(result) {
                            if (result.success == true) {
                                toastr.success(result.msg);
                                template_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
                }
            });

            // create form
            $(document).on('click', '.createForm', function() {
                var url = $(this).data('href');
                $.ajax({
                    method: "GET",
                    url: url,
                    dataType: "html",
                    success: function(response) {
                        $("#modal_div").html(response).modal("show");
                    }
                });
            });

            // create widget
            $(document).on('click', '.generate_widget', function() {
                var url = $(this).data('href');
                $.ajax({
                    method: "GET",
                    url: url,
                    dataType: "html",
                    success: function(response) {
                        $("#modal_div").html(response).modal("show");
                    }
                });
            });

            //copy form
            $(document).on('click', '.copy_form', function() {
                var url = $(this).data('href');
                $.ajax({
                    method: "GET",
                    url: url,
                    dataType: "html",
                    success: function(response) {
                        $("#modal_div").html(response).modal("show");
                    }
                });
            });

            //assigned form to user
            var assigned_form_table = $('#assigned_form_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '/home-assigned-forms',
                buttons: [],
                dom: 'lfrtip',
                fixedHeader: false,
                aaSorting: [
                    [0, 'desc']
                ],
                "columnDefs": [{
                        "width": "25%",
                        "targets": 0
                    },
                    {
                        "width": "40%",
                        "targets": 1
                    },
                    @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value))
                        {
                            "width": "15%",
                            "targets": 2
                        },
                    @endif {
                        "width": "20%",
                        "targets": @php
                            echo auth()
                                ->user()
                                ->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value)
                                ? 3
                                : 2;
                        @endphp
                    }
                ],
                columns: [{
                        data: descColName,
                        name: 'forms.' + descColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.description
                            }
                        },
                    },
                    {
                        data: titleColName,
                        name: 'forms.' + titleColName,
                        createdCell: function(td, cellData, rowData, row, col) {
                            if (td.innerHTML.length === 0) {
                                td.innerHTML = rowData.name
                            }
                        },
                    },
                    @if (auth()->user()->hasRole(\App\Enums\User\RoleEnum::SUPERVISOR->value))
                        {
                            data: 'created_by',
                            name: 'forms.created_by'
                        },
                    @endif {
                        data: 'action',
                        name: 'action',
                        sortable: false
                    }
                ]
            });


            //form collaborate
            $(document).on('click', '.collab_btn', function() {
                var url = $(this).data('href');
                $.ajax({
                    method: "GET",
                    url: url,
                    dataType: "html",
                    success: function(response) {
                        $("#collab_modal").html(response).modal("show");
                    }
                });
            });

            $("#collab_modal").on('shown.bs.modal', function() {
                if ($("#form_design").length) {
                    $(document).on('change', '#form_design', function() {
                        if ($("#form_design").is(":checked")) {
                            $("#form_view").attr('checked', true);
                        } else {
                            $("#form_view").attr('checked', false);
                        }
                    });
                }
            });

            $(document).on('submit', 'form#collaborate_form', function(e) {
                e.preventDefault();
                var data = $("form#collaborate_form").serialize();
                var url = $("form#collaborate_form").attr('action');
                var ladda = Ladda.create(document.querySelector('.submit_btn'));
                ladda.start();
                $.ajax({
                    method: "POST",
                    url: url,
                    dataType: "json",
                    data: data,
                    success: function(response) {
                        ladda.stop();
                        if (response.success) {
                            $("#collab_modal").modal('hide');
                            toastr.success(response.msg);
                        } else {
                            toastr.error(response.msg);
                        }
                    }
                });
            });

            $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
                var target = $(e.target).attr('href');
                if (target == '#custome-tabs-forms') {
                    if (typeof form_table != 'undefined') {
                        form_table.ajax.reload();
                    }
                } else if (target == '#custome-tabs-templates') {
                    if (typeof template_table != 'undefined') {
                        template_table.ajax.reload();
                    }
                } else if (target == '#custome-tabs-shared-forms-assigned') {
                    if (typeof assigned_form_table != 'undefined') {
                        assigned_form_table.ajax.reload();
                    }
                }
            });

            @if (auth()->user()->can('superadmin'))
                $(document).on('click', '.toggle_global_template', function() {
                    $.ajax({
                        method: "POST",
                        url: "{{ route('toggle.global.template') }}",
                        dataType: "json",
                        data: {
                            is_checked: $(this).is(":checked") ? 1 : 0,
                            form_id: $(this).data("form_id"),
                        },
                        success: function(response) {
                            if (response.success) {
                                template_table.ajax.reload();
                            } else {
                                toastr.error(response.msg);
                            }
                        }
                    });
                });
            @endif
        });
    </script>
@endsection