@extends('admin.layout.index')
@section('title', 'Admin | Banners Management')

@section('custom-style')
    <style>
        .banner-preview {
            width: 100%;
            height: auto;
            max-height: 100px;
            object-fit: cover;
            border-radius: 1rem;
        }

        .dataTables_empty {
            text-align: center !important;
        }

        .dataTables_processing {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 9999;
        }
    </style>
@endsection

@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Banners Management</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Banners</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card p-3">
                        <form>
                            <div class="row g-3">
                                <div class="col-xxl-3 col-sm-6">
                                    <div class="header-element header-search">
                                        <!-- Start::header-link -->
                                        <input type="text" class="header-search-bar form-control w-100 m-0"
                                            placeholder="Search for Results..." id="search-banner">
                                        <a href="javascript:void(0);" class="header-search-icon-2 border-0">
                                            <i class="bi bi-search"></i>
                                        </a>
                                        <!-- End::header-link -->
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xxl-3 col-sm-6">
                                    <div>
                                        <input type="date" class="form-control" placeholder="Select date"
                                            id="search-date">
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xxl-2 col-sm-4">
                                    <div>
                                        <select class="form-select form-select-lg" aria-label=".form-select-lg example"
                                            id="type">
                                            <option value="">Type</option>
                                            <option value="web">Web</option>
                                            <option value="mobile">Mobile</option>
                                        </select>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xxl-2 col-sm-4">
                                    <div>
                                        <select class="form-select form-select-lg" aria-label=".form-select-lg example"
                                            id="status">
                                            <option value="">Status</option>
                                            <option value="active">Active</option>
                                            <option value="inactive">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xxl-2 col-sm-4">
                                    <div>
                                        <button type="button" class="btn btn-primary w-100" onclick="SearchData();"><i
                                                class="ri-equalizer-fill me-1 align-bottom"></i>
                                            Filters
                                        </button>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                </div>
            </div>
            <!-- End::row-1 -->

            <!-- Banners Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Banners Overview
                            </div>
                            @can('create-banners')
                                <button class="btn btn-primary btn-sm btn-wave waves-effect waves-light" data-bs-toggle="modal"
                                    data-bs-target="#createBanner">
                                    Add New Banner
                                </button>
                            @endcan
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" style="width: 100%;" id="banner-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Banner Title</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                            <th>Preview</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    {{--                                    <tbody> --}}
                                    {{--                                    <tr> --}}
                                    {{--                                        <td>1</td> --}}
                                    {{--                                        <td>50% Off on All Products</td> --}}
                                    {{--                                        <td>Web</td> --}}
                                    {{--                                        <td><span class="badge bg-success">Active</span></td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <img src="{{asset('assets/images/media/media-75.jpg')}}" --}}
                                    {{--                                                 class="banner-preview" alt="Banner Preview"> --}}
                                    {{--                                        </td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <a href="javascript:void(0)" data-bs-toggle="tooltip" --}}
                                    {{--                                               data-bs-custom-class="tooltip-primary" aria-label="Edit Banner" --}}
                                    {{--                                               data-modal-target="#editBannerModal" --}}
                                    {{--                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                               data-bs-original-title="Edit Banner"> --}}
                                    {{--                                                <i class="ri-edit-line"></i> --}}
                                    {{--                                            </a> --}}
                                    {{--                                            <button id="alert-confirm" data-bs-toggle="tooltip" --}}
                                    {{--                                                    data-bs-custom-class="tooltip-danger" aria-label="Cancel Order" --}}
                                    {{--                                                    data-modal-target="#delete-modal" --}}
                                    {{--                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                                    data-bs-original-title="Delete"> --}}
                                    {{--                                                <i class="ri-delete-bin-5-line"></i> --}}
                                    {{--                                            </button> --}}
                                    {{--                                        </td> --}}
                                    {{--                                    </tr> --}}
                                    {{--                                    <tr> --}}
                                    {{--                                        <td>2</td> --}}
                                    {{--                                        <td>Mobile Exclusive Deals</td> --}}
                                    {{--                                        <td>Mobile</td> --}}
                                    {{--                                        <td><span class="badge bg-danger">Inactive</span></td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <img src="{{asset('assets/images/media/media-75.jpg')}}" --}}
                                    {{--                                                 class="banner-preview" alt="Banner Preview"> --}}
                                    {{--                                        </td> --}}
                                    {{--                                        <td> --}}
                                    {{--                                            <a href="javascript:void(0)" data-bs-toggle="tooltip" --}}
                                    {{--                                               data-bs-custom-class="tooltip-primary" aria-label="Edit Banner" --}}
                                    {{--                                               data-modal-target="#editBannerModal" --}}
                                    {{--                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                               data-bs-original-title="Edit Banner"> --}}
                                    {{--                                                <i class="ri-edit-line"></i> --}}
                                    {{--                                            </a> --}}
                                    {{--                                            <button id="alert-confirm" data-bs-toggle="tooltip" --}}
                                    {{--                                                    data-bs-custom-class="tooltip-danger" aria-label="Cancel Order" --}}
                                    {{--                                                    data-modal-target="#delete-modal" --}}
                                    {{--                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" --}}
                                    {{--                                                    data-bs-original-title="Delete"> --}}
                                    {{--                                                <i class="ri-delete-bin-5-line"></i> --}}
                                    {{--                                            </button> --}}
                                    {{--                                        </td> --}}
                                    {{--                                    </tr> --}}
                                    {{--                                    <!-- Additional rows can be added here --> --}}
                                    {{--                                    </tbody> --}}
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Add Banner Modal -->
            <div class="modal fade" id="createBanner" tabindex="-1" aria-labelledby="addBannerModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addBannerModalLabel">Add New Banner</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form method="post" id="storeForm" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body">

                                <div class="mb-3">
                                    <label for="bannerTitle" class="form-label">Banner Title</label>
                                    <input type="text" class="form-control" id="bannerTitle"
                                        placeholder="Enter Banner Title" name="title">
                                    <span class="text-danger" id="titleError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerType" class="form-label">Banner Type</label>
                                    <select class="form-select" id="bannerType" name="type">
                                        <option value="">Select Type</option>
                                        <option value="web">Web</option>
                                        <option value="mobile">Mobile</option>
                                    </select>
                                    <span class="text-danger" id="typeError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerImage" class="form-label">Upload Banner Image</label>
                                    <input type="file" class="form-control" id="bannerImage" name="image">
                                    <span class="text-danger" id="imageError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerStatus" class="form-label">Status</label>
                                    <select class="form-select" id="bannerStatus" name="status">
                                        <option value="">Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <span class="text-danger" id="statusError"></span>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Edit Banner Modal -->
            <div class="modal fade" id="editBanner" tabindex="-1" aria-labelledby="editBannerModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addBannerModalLabel">Edit Banner</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <form method="post" id="editForm" enctype="multipart/form-data">
                            @csrf
                            {{ method_field('PUT') }}
                            <div class="modal-body">
                                <input type="hidden" id="editId" name="id">
                                <div class="mb-3">
                                    <label for="bannerTitle" class="form-label">Banner Title</label>
                                    <input type="text" class="form-control" id="editTitle"
                                        placeholder="Enter Banner Title" name="title">
                                    <span class="text-danger" id="titleEditError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerType" class="form-label">Banner Type</label>
                                    <select class="form-select" id="editType" name="type">
                                        <option value="">Select Type</option>
                                        <option value="web">Web</option>
                                        <option value="mobile">Mobile</option>
                                    </select>
                                    <span class="text-danger" id="typeEditError"></span>
                                </div>
                                <div class="mb-3">
                                    <label for="bannerImage" class="form-label">Upload Banner Image</label>
                                    <input type="file" class="form-control" id="bannerImage" name="image">
                                </div>
                                <div class="mb-3">
                                    <label for="bannerStatus" class="form-label">Status</label>
                                    <select class="form-select" id="editStatus" name="status">
                                        <option value="">Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                    <span class="text-danger" id="statusEditError"></span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!-- Delete modal -->
            <div class="modal fade flip" id="deleteCamp" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body p-5 text-center">
                            <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                                colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                            </lord-icon>
                            <div class="mt-4 text-center">
                                <h4>Are You Sure?</h4>
                                <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                                <form method="POST" id="deleteCampForm" class="form-submit">
                                    @csrf
                                    {{ method_field('DELETE') }}
                                    <button type="button" class="btn btn-sm btn-outline-danger m-1"
                                        data-bs-dismiss="modal">
                                        Cancel
                                    </button>
                                    <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('custom-script')
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Event delegation for modal triggers
        document.addEventListener('click', function(event) {
            var target = event.target.closest('[data-modal-target]');
            if (target) {
                var modalId = target.getAttribute('data-modal-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            }
        });
    </script>

    {{-- Datatable --}}
    <script>
        $(function() {
            let URL = "{{ route('get-banner') }}";
            // var userPermissions = @json(auth()->user()->getPermissionNames()->toArray());
            // console.log(userPermissions);
            // // Check permissions from userPermissions array
            // var canEdit = userPermissions.includes('edit-banners');
            // var canDelete = userPermissions.includes('delete-banners');
            var t = $('#banner-table').DataTable({


                processing: true,
                serverSide: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                bDestroy: true,
                dom: 'lrtip',
                ajax: {
                    type: "GET",
                    url: URL,
                    data: function(d) {
                        d.search = $('#search-banner').val();
                        d.status = $('#status').val();
                        d.type = $('#type').val();
                        d.date = $('#search-date').val();
                    }
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'type'
                    },
                    {
                        data: null
                    },
                    {
                        data: null
                    },
                    { data: 'action', orderable: false, searchable: false }
                ],
                columnDefs: [{
                        render: function(data, type, row, meta) {
                            return `<div class="d-flex align-items-center">
                            ${meta.row + 1}
                        </div>`;
                        },
                        searchable: false,
                        orderable: false,
                        targets: 0
                    },
                    {
                        render: function(data, type, row, meta) {
                            if (data.status === 'active') {
                                return `<div class="d-flex align-items-center">
                         <span class="badge bg-success">${data.status}</span>
                        </div>`;
                            } else {
                                return `<div class="d-flex align-items-center">
                         <span class="badge bg-danger">${data.status}</span>
                        </div>`;
                            }

                        },
                        searchable: false,
                        orderable: false,
                        targets: 3
                    },
                    {
                        render: function(data, type, row, meta) {
                            return `<div class="d-flex align-items-center">
                    <img src="{{ asset('') }}${row.image}"
                         class="banner-preview"
                         alt="Banner Preview"
                         style="width: 100%; height: auto;max-height:100px; object-fit: cover;border-radius:1rem">
                </div>`;
                        },
                        searchable: false,
                        orderable: false,
                        targets: 4
                    },
                    // {
                    //     render: function(data, type, row, meta) {
                    //         var url = '{{ route('banner.show', ':id') }}';
                    //         url = url.replace(':id', data.id);
                    //         var update = '{{ route('banner.edit', ':id') }}';
                    //         update = update.replace(':id', data.id);


                    //         if (canEdit == true || canDelete == true) {
                    //             if (canEdit == true) {
                    //         return '<div class="d-flex">' +
                    //             '<a class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn me-2" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit">' +
                    //             '<span type="button" data-id="' + row.id + '" data-title="' + row
                    //             .title + '" data-type="' + row.type + '" data-status="' + row
                    //             .status + '" data-image="' + row.image + '" data-url="' + update +
                    //             '" data-bs-toggle="modal" data-bs-target="#editBanner">' +
                    //             '<i class="ri-edit-line"></i>' +
                    //             '</span>' +
                    //             '</a>' +
                    //             '<a class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Delete">' +
                    //             '<span type="button" data-url="' + url +
                    //             '" data-bs-toggle="modal" data-bs-target="#deleteCamp">' +
                    //             '<i class="ri-delete-bin-5-line"></i>' +
                    //             '</span>' +
                    //             '</a>' +
                    //             '</div>';
                    //         }
                    //         } else {
                    //             return `<div class="d-flex align-items-center">
                    //                 <span class="badge bg-light-primary-transparent text-dark rounded-pill">Permission Denied</span></div>`;
                    //         }
                    //     },
                    //     searchable: false,
                    //     orderable: false,
                    //     targets: -1
                    // }
                ],
                language: {
                    processing: "<div class='dt-processing'>Processing...</div>",
                },
            });

            // Trigger search on form input change or button click
            $('.header-search-bar, .form-select').on('change keyup', function() {
                $('#banner-table').DataTable().ajax.reload();
            });
            // Reload table on filter button click
            window.SearchData = function() {
                $('#banner-table').DataTable().ajax.reload();
            }
        });
    </script>


    {{-- Ajax Store --}}
    <script>
        $("#storeForm").on('submit', function(event) {
            event.preventDefault();

            // Disable the submit button and change its text
            var submitButton = $('#storeForm button[type="submit"]');
            submitButton.prop('disabled', true).text('Processing...');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: "{{ route('banner.store') }}",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#createBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-table').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);

                        // Reset the form
                        $('#storeForm')[0].reset();
                    }
                    if (data.error) {
                        $('#createBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-table').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).error(data.message);

                        $('#storeForm')[0].reset();
                    }

                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text(
                    'Submit'); // Change to original text or appropriate label
                },
                error: function(data) {
                    $('#titleError').addClass('d-none');
                    $('#imageError').addClass('d-none');
                    $('#statusError').addClass('d-none');
                    $('#typeError').addClass('d-none');
                    var errors = data.responseJSON;
                    if ($.isEmptyObject(errors) == false) {
                        $.each(errors.errors, function(key, value) {
                            var ErrorID = '#' + key + 'Error';
                            $(ErrorID).removeClass("d-none");
                            $(ErrorID).text(value);
                        });
                    }
                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text(
                    'Submit'); // Change to original text or appropriate label
                }
            });
        });
        // Clear error messages on input change
        $('#storeForm input,#storeForm textarea,#storeForm select').on('input change', function() {
            var errorID = '#' + $(this).attr('name') + 'Error';
            if ($(this).val() !== '') {
                $(errorID).addClass('d-none');
            }
        });
    </script>

    {{-- Ajax Delete --}}
    <script>
        $(document).ready(function() {
            $("#deleteCamp").on('show.bs.modal', function(event) {
                var triggerLink = $(event.relatedTarget);
                var url = triggerLink.data("url");
                $("#deleteCampForm").attr('action', url);

                // Reset the button state
                var submitButton = $("#deleteCampForm button[type='submit']");
                submitButton.prop('disabled', false).text('Yes, Delete It');
            });


            $("#deleteCampForm").on('submit', function(event) {
                event.preventDefault();

                var actionUrl = $(this).attr('action');
                var submitButton = $("#deleteCampForm button[type='submit']");
                submitButton.prop('disabled', true).text('Processing...');

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: $(this).serialize(),
                    success: function(data) {
                        if (data.success) {
                            // Hide the modal
                            $('#deleteCamp').modal('hide');

                            $('#banner-table').DataTable().ajax.reload();

                            // Trigger the success toast notification
                            new Notyf({
                                duration: 3000,
                                position: {
                                    x: 'right',
                                    y: 'top'
                                },
                                ripple: true,
                                dismissible: true
                            }).success(data.message);
                        }
                    },
                    error: function(data) {

                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).error(data.message);

                        // Re-enable the button and reset its text
                        submitButton.prop('disabled', false).text('Yes, Delete It');
                    }
                });
            });
        });
    </script>

    {{-- Edit Modal Pass --}}
    <script>
        $(document).ready(function() {
            $('#editBanner').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var title = button.data('title');
                var type = button.data('type');
                var status = button.data('status');
                var url = button.data('url');

                // Update the modal's form action and fields
                var modal = $(this);
                modal.find('#editForm').attr('action', url);
                modal.find('#editId').val(id);
                modal.find('#editTitle').val(title);
                modal.find('#editType').val(type);
                modal.find('#editStatus').val(status);
            });
        });
    </script>

    {{-- Ajax Update --}}
    <script>
        // Edit record with AJAX POST method
        $("#editForm").on('submit', function(event) {
            event.preventDefault();

            $('#titleEditError').addClass('d-none').text('');
            $('#statusEditError').addClass('d-none').text('');
            $('#typeEditError').addClass('d-none').text('');

            // Re-enable the submit button and reset its text
            var submitButton = $('#editForm button[type="submit"]');
            submitButton.prop('disabled', true).text('Processing...');


            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var rowId = $('#editForm input[name="id"]').val();

            $.ajax({
                type: 'POST',
                url: "{{ route('banner.update', ':id') }}".replace(':id', rowId),
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $('#editBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-table').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);

                        var submitButton = $('#editForm button[type="submit"]');
                        submitButton.prop('disabled', false).text('Submit'); // Reset button state
                    }
                    if (data.error) {
                        $('#editBanner').modal('hide');

                        // Update the table content with the new HTML
                        $('#banner-table').DataTable().ajax.reload();

                        // Trigger the success toast notification
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).error(data.message);

                        var submitButton = $('#editForm button[type="submit"]');
                        submitButton.prop('disabled', false).text('Submit'); // Reset button state
                    }
                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text(
                    'Submit'); // Change to original text or appropriate label
                },
                error: function(data) {
                    // Clear previous error messages
                    $('#titleEditError').addClass('d-none').text('');
                    $('#statusEditError').addClass('d-none').text('');
                    $('#typeEditError').addClass('d-none').text('');

                    var errors = data.responseJSON;
                    if ($.isEmptyObject(errors) == false) {
                        // Display error messages
                        $.each(errors.errors, function(key, value) {
                            var ErrorID = '#' + key + 'EditError'; // Ensure this ID is correct
                            $(ErrorID).removeClass("d-none").text(value);
                        });
                    }

                    // Re-enable the button and reset its text
                    submitButton.prop('disabled', false).text(
                    'Submit'); // Change to original text or appropriate label
                }
            });
        });
        // Clear error messages on input change
        $('#editForm input,#editForm textarea, #editForm select').on('input change', function() {
            var errorID = '#' + $(this).attr('name') + 'EditError';
            if ($(this).val() !== '') {
                $(errorID).addClass('d-none');
            }
        });
    </script>
    <script>
    var userPermissions = @json(auth()->user()->getPermissionNames()->toArray());
    console.log('User Permissions:', userPermissions); // Log to verify
</script>

@endsection