@extends('admin.layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">

@endpush


@section('body')
    <!-- start page content-->
    <div class="page-content">

        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Permission</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0 align-items-center">
                        <li class="breadcrumb-item">
                            <a href="javascript:;">
                                <ion-icon name="home-outline"></ion-icon>
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Permission page</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="permissionModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Create Permission</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form id="permissionForm">
                        @csrf
                        <div class="modal-body">

                            <input type="hidden" id="permission_id" name="permission_id">

                            <div class="row mb-3">
                                <label for="name" class="col-sm-3 col-form-label">Permission Name</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name" placeholder="Name" name="name">
                                    <span class="name_validation error-validation" style="color:red;"></span>
                                </div>
                            </div>

                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="addPermission(event)">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Title + Button -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0 text-uppercase">Permission List</h6>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#permissionModal">
                Create
            </button>
        </div>

        <hr>

        <!-- Table -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="permissionTable" class="table table-bordered table-striped w-100">
                        <thead class="table-light">
                            <tr>
                                <th>SI.No</th>
                                <th>Permission Name</th>
                                <th>Edit</th>
                                <th>Delete</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($permissions as $index => $permission)
                                <tr id="permission-row-{{ $permission->id }}">
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $permission->name }}</td>
                                    <td class="text-center">
                                        <a href="javascript:void(0)" class="icon-style-edit" onclick="editPermission({{ $permission->id }})">
                                            <ion-icon name="create-outline"></ion-icon>
                                        </a>
                                    </td>

                                    <td class="text-center">
                                        <a href="javascript:void(0)" class="icon-style-trash" onclick="deletePermission({{ $permission->id }})">
                                            <i class="lni lni-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

@endsection

@push('scripts')

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end', // ✅ top right
        showConfirmButton: false,
        timer: 2000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.onmouseenter = Swal.stopTimer;
            toast.onmouseleave = Swal.resumeTimer;
        }
    });
</script>


<script>
    $(document).ready(function () {
        $('#permissionTable').DataTable({
            pageLength: 10,
            lengthChange: true,
            searching: true,
            ordering: true,
            info: true,
            responsive: true,
            columnDefs: [
                { orderable: false, targets: [0, 1, 2, 3] }
            ],
            language: {
                emptyTable: "No permissions found"
            }
        });
    });

    function addPermission(e) {
        e.preventDefault();
        e.stopPropagation();

        // Clear old validation errors
        $(".error-validation").html('');

        $.ajax({
            type: 'POST',
            url: "{{ route('admin.permissions.store') }}",
            data: {
                _token: "{{ csrf_token() }}",
                name: $('#name').val(),
            },

            beforeSend: function () {
                $("#loader").show();
            },

            complete: function () {
                $("#loader").hide();
            },

            success: function (response) {

                if (response.status === true) {

                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                        confirmButtonText: 'OK'
                    }).then(() => {

                        // Reset form
                        $("#permissionForm")[0].reset();

                        // Close modal
                        const modalEl = document.getElementById('permissionModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        modalInstance.hide();

                        // Reload page or table
                        window.location.reload();
                    });

                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },

            error: function (xhr) {

                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;

                    $('.name_validation').html(errors?.name?.[0]);

                    Swal.fire({
                        icon: 'warning',
                        title: 'Validation Error',
                        text: 'Please fix the highlighted errors'
                    });

                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: 'Something went wrong. Please try again.'
                    });
                }
            }
        });
    }

    function editPermission(id) {

        $(".error-validation").html('');

        let url = "{{ route('admin.permissions.edit', ':id') }}";
        url = url.replace(':id', id);

        $.ajax({
            url: url,
            type: 'GET',

            success: function (response) {

                if (response.status === true) {

                    const permission = response.data;

                    // Fill form fields
                    $('#permission_id').val(permission.id);
                    $('#name').val(permission.name);

                    // Update modal UI
                    $('.modal-title').text('Edit Permission');
                    $('.modal-footer .btn-primary')
                        .text('Update')
                        .attr('onclick', 'updatePermission(event)');

                    // Show modal
                    const modal = new bootstrap.Modal(
                        document.getElementById('permissionModal')
                    );
                    modal.show();
                }
            },

            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load permission'
                });
            }
        });
    }

    function updatePermission(e) {
        e.preventDefault();
        e.stopPropagation();

        // Clear old validation errors
        $(".error-validation").html('');

        $.ajax({
            type: 'PUT',
            url: "{{ route('admin.permissions.update') }}",
            data: {
                _token: "{{ csrf_token() }}",
                permission_id: $('#permission_id').val(),
                name: $('#name').val(),
            },

            beforeSend: function () {
                $("#loader").show();
            },

            complete: function () {
                $("#loader").hide();
            },

            success: function (data) {

                if (data.status === true) {

                    Swal.fire({
                        icon: 'success',
                        title: 'Updated',
                        text: data.message,
                        confirmButtonText: 'OK'
                    }).then(() => {

                        // Reset form & hidden id
                        $("#permissionForm")[0].reset();
                        $('#permission_id').val('');

                        // Hide modal
                        const modalEl = document.getElementById('permissionModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        modalInstance.hide();

                        // Reload page / table
                        window.location.reload();
                    });

                } else {

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message
                    });
                }
            },

            error: function (xhr) {

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON?.errors;

                    $('.name_validation').html(errors?.name?.[0]);

                    Swal.fire({
                        icon: 'warning',
                        title: 'Validation Error',
                        text: 'Please fix the highlighted errors'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: 'Something went wrong'
                    });
                }
            }
        });
    }

    function deletePermission(id) {

        Swal.fire({
            title: 'Are you sure?',
            text: 'This permission will be permanently deleted!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it',
            cancelButtonText: 'Cancel'
        }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ route('admin.permissions.delete', ':id') }}".replace(':id', id),
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: 'DELETE'
                    },

                    beforeSend: function () {
                        $("#loader").show();
                    },

                    success: function (response) {

                        if (response.status === true) {

                            // Remove row from table
                            $('#permission-row-' + id).fadeOut(300, function () {
                                $(this).remove();
                            });

                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted',
                                text: response.message,
                                timer: 1200,
                                showConfirmButton: false
                            });

                        } else {

                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message
                            });
                        }
                    },

                    complete: function () {
                        $("#loader").hide();
                    },

                    error: function () {
                        $("#loader").hide();

                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }
                });
            }
        });
    }


</script>

@endpush