@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('Toolbar.permissions') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('Toolbar.user') }}</li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('Toolbar.permissions') }}</li>
            </ul>
        </div>
        @can('core.permissions.create')
            <button type="button" class="btn btn-sm btn-primary" id="addPermission"><i class="bi bi-plus-lg fs-4"></i>{{ trans('permission.Add') }}</button>
        @endcan
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="permissionSearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('permission.search_placeholder') }}">
                    </div>
                    <span class="badge badge-light-primary fs-7 ms-4">{{ trans('permission.total', ['count' => $totalCount]) }}</span>
                </div>
                <div class="card-toolbar">
                    <select id="moduleFilter" class="form-select form-select-solid form-select-sm w-200px">
                        <option value="">{{ trans('permission.all_modules') }}</option>
                        @foreach ($modules as $module => $label)
                            <option value="{{ $module }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4" id="permissionsTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th>#</th>
                        <th class="min-w-200px">{{ trans('permission.title') }}</th>
                        <th class="min-w-200px">{{ trans('permission.value') }}</th>
                        <th>{{ trans('permission.module') }}</th>
                        <th>{{ trans('permission.roles_count') }}</th>
                        <th class="text-end">{{ trans('permission.Actions') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    {{-- One modal for add and edit; the edit button fills it from permission/{id}/edit. --}}
    <div class="modal fade" id="permissionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-550px">
            <form id="permissionForm" class="modal-content" method="POST" action="{{ route('admin.UserManagement.permission.store') }}"
                  data-store-url="{{ route('admin.UserManagement.permission.store') }}">
                @csrf
                <input type="hidden" name="_method" value="POST" id="permissionMethod">
                <div class="modal-header">
                    <h3 class="modal-title" id="permissionModalTitle">{{ trans('permission.Add') }}</h3>
                    <button type="button" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"><i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i></button>
                </div>
                <div class="modal-body">
                    <div class="mb-6">
                        <label class="required form-label">{{ trans('permission.title_ar') }}</label>
                        <input type="text" name="title_ar" id="title_ar" class="form-control" autocomplete="off">
                    </div>
                    <div class="mb-6">
                        <label class="required form-label">{{ trans('permission.title_en') }}</label>
                        <input type="text" name="title_en" id="title_en" class="form-control" dir="ltr" autocomplete="off">
                    </div>
                    <div>
                        <label class="required form-label">{{ trans('permission.value') }}</label>
                        <input type="text" name="name" id="name" class="form-control" dir="ltr" placeholder="clinic.bookings.view" autocomplete="off">
                        <div class="form-text">{{ trans('permission.name_hint') }}</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ trans('permission.Close') }}</button>
                    <button type="submit" class="btn btn-primary">{{ trans('permission.Save') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\PermissionsRequest', '#permissionForm') !!}
    <script>
        $(document).ready(function () {
            var datatable = $('#permissionsTable').DataTable({
                processing: true,
                serverSide: true,
                dom: "<'table-responsive'tr><'row align-items-center mt-5'<'col-sm-12 col-md-5 d-flex align-items-center gap-3'li><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
                ajax: {
                    url: "{{ route('admin.UserManagement.permission.index') }}",
                    data: function (d) { d.module = $('#moduleFilter').val(); }
                },
                columns: [
                    {data: 'id', name: 'permissions.id', searchable: false},
                    {data: 'title', name: 'title'},
                    {data: 'name', name: 'name', searchable: false},
                    {data: 'module', name: 'module', orderable: false, searchable: false},
                    {data: 'roles_count', name: 'roles_count', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                order: [[0, 'desc']],
                pageLength: 25,
                language: {lengthMenu: '_MENU_'}
            });

            var searchTimer;
            $('#permissionSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                var value = this.value;
                searchTimer = setTimeout(function () { datatable.search(value).draw(); }, 300);
            });
            $('#moduleFilter').on('change', function () { datatable.ajax.reload(); });

            var $form = $('#permissionForm');
            var modal = new bootstrap.Modal(document.getElementById('permissionModal'));

            function openModal(title, action, method, values) {
                $form[0].reset();
                $form.validate().resetForm();
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.attr('action', action);
                $('#permissionMethod').val(method);
                $('#permissionModalTitle').text(title);
                $('#title_ar').val(values.title_ar || '');
                $('#title_en').val(values.title_en || '');
                $('#name').val(values.name || '');
                modal.show();
            }

            $('#addPermission').on('click', function () {
                openModal(@json(trans('permission.Add')), $form.data('store-url'), 'POST', {});
            });

            $('#permissionsTable').on('click', '[data-edit-url]', function () {
                $.getJSON(this.dataset.editUrl, function (permission) {
                    openModal(@json(trans('permission.Edit')), permission.update_url, 'PUT', permission);
                });
            });

            $('#permissionsTable').on('submit', 'form[data-confirm-delete]', function (event) {
                var form = this;
                if (form.dataset.confirmed) {
                    return;
                }
                event.preventDefault();
                Swal.fire({
                    text: form.dataset.confirmDelete,
                    icon: 'warning',
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "{{ trans('forms.delete_btn') }}",
                    cancelButtonText: "{{ trans('dash_site.Cancel') }}",
                    customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
                }).then(function (result) {
                    if (result.isConfirmed) {
                        form.dataset.confirmed = '1';
                        form.submit();
                    }
                });
            });

            @if ($errors->any())
                {{-- Server-side errors after a failed submit: reopen the modal with the typed values. --}}
                openModal(@json(trans('permission.Add')), $form.data('store-url'), 'POST', @json(old()));
            @endif
        });
    </script>
@endsection