@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">Permission List</h2>
                       <div class="d-flex justify-content-end">
                         <button class="btn btn-primary btn-squared me-2" data-bs-toggle="modal" data-bs-target="#modal-basic">
                           Add Permission   <i class="fa-solid fa-plus ms-2"></i>
                        </button>
                         <button class="btn btn-primary " id="toggleFilter">
                         Advance Filter  <i class="fas fa-filter ms-2"></i>
                       </button>
                       </div>
                    </div>
                </div>
                <div>
                        <div class="card card-default filter-card  p-3 mb-3">
                            <form>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="formGroupExampleInput" class="il-gray fs-14 fw-500 align-center mb-10">Name</label>
                                            <input type="text" class="form-control ih-medium ip-gray radius-xs b-light px-15" id="formGroupExampleInput">
                                        </div>
                                    </div>
                                      <div class="col-md-4">
                                            <label class="il-gray fs-14 fw-500 align-center mb-10">Category</label>
                                            <div class="mb-25 select-style2">
                                                <div class="dm-select ">
                                                <select name="select-alerts2" id="select-alerts2" class="form-control ">
                                                    <option value="01">Option 1</option>
                                                    <option value="02">Option 2</option>
                                                    <option value="03">Option 3</option>
                                                    <option value="04">Option 4</option>
                                                    <option value="05">Option 5</option>
                                                </select>
                                                </div>
                                            </div>
                                      </div>
                                                  <div class="col-md-4">
                                                 <div class="form-group form-group-calender mb-20">
                                        <label for="datepicker8" class="il-gray fs-14 fw-500 align-center mb-10">Date</label>
                                        <div class="position-relative">
                                        <input type="text" class="form-control  ih-medium ip-gray radius-xs b-light" id="datepicker8" placeholder="01/10/2021">
                                        <a href="#"><i class="fas fa-calendar-alt"></i></a>
                                        </div>
                                        </div>
                                  </div>
                                </div>
                                <div class="mt-3 d-flex justify-content-end">
                                  <button type="submit" class="btn btn-success me-2">Apply</button>
                                  <button type="reset" class="btn btn-danger">Reset</button>
                                </div>
                          </form>
                        </div>
                      </div>
                </div>

                <div class="col-xxl-12">
                    <div class="userDatatable global-shadow border-light-0 w-100 ">
                        <div class="table-responsive">
                            {{-- <div id="filter-form-container"></div> --}}
                            <table class="table mb-0 table-borderless  table-striped" data-sorting="true"
                                data-filter-container="#filter-form-container" data-paging-current="1"
                                data-paging-position="right" data-paging-size="10">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th><span class="userDatatable-title">S.No.</span></th>
                                        <th><span class="userDatatable-title">Permission Name</span></th>
                                        <th><span class="userDatatable-title d-flex justify-content-end">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($permissions as $key => $permission)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $permission->name }}</td>
                                        <td>
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                                @can('update permission')
                                                <li>
                                                    <a href="javascript:void(0)" class="edit text-success edit-permission-btn"
                                                        data-id="{{ $permission->id }}"
                                                        data-name="{{ $permission->name }}"
                                                        title="Edit">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                @endcan

                                                @can('delete permission')
                                                <li>
                                                    <a href="{{ url('permissions/'.$permission->id.'/delete') }}"
                                                        class="remove text-danger mx-2" title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                </li>
                                                @endcan
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1" aria-labelledby="modalBasicLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Create Permission Management</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="permissionForm" class="p-3">
                            @csrf
                            <input type="hidden" name="permission_id" id="permission_id">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="permission_name" class="il-gray fs-14 fw-500 align-center mb-10">
                                            Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" id="permission_name" name="name"
                                            class="form-control ih-medium ip-light radius-xs b-light px-15"
                                            placeholder="Enter Permission Name">
                                    </div>
                                    <button type="submit" id="permissionSubmit"
                                        class="btn btn-primary btn-default btn-rounded w-100 mx-auto mt-3">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(function () {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $('[data-bs-target="#modal-basic"]').on('click', function () {
                    $('#modal-basic .modal-title').text('Create Permission Management');
                    $('#permissionForm')[0].reset();
                    $('#permission_id').val('');
                    $('#permissionSubmit').text('Save');
                });

                $(document).on('click', '.edit-permission-btn', function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');

                    $('#modal-basic .modal-title').text('Edit Permission');
                    $('#permission_id').val(id);
                    $('#permission_name').val(name);
                    $('#permissionSubmit').text('Update');
                    $('#modal-basic').modal('show');
                });

                // AJAX form submission (Add/Update)
                $('#permissionForm').on('submit', function (e) {
                    e.preventDefault();

                    const id = $('#permission_id').val();
                    const name = $('#permission_name').val();
                    const url = id ? `permissions/${id}` : 'permissions';
                    const method = id ? 'PUT' : 'POST';

                    $.ajax({
                        url: url,
                        method: method,
                        data: {
                            name: name,
                            _method: method
                        },
                        success: function (response) {
                            $('#modal-basic').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: id ? 'Permission updated successfully!' : 'Permission created successfully!',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        },
                        error: function (xhr) {
                            const message = xhr.responseJSON?.message || 'Something went wrong!';
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: message
                            });
                        }
                    });
                });
            });

            // ============================
             $("#toggleFilter").click(function(){
             $(".filter-card").slideToggle("fast");
          });
        </script>
    </div>
</div>
@endsection