@extends('admin.layout.index')
@section('title', 'Muftaax | Restaurant Category')
@section('custom-style')
<style>
    .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">
        <!-- 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">Categories List</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Categories</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Restaurant Categories</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row align-items-center mb-4">
            <div class="col-lg-12">
                <div class="card custom-card p-3">
                    <form>
                        <div class="row g-3">
                            <div class="col-xxl-8 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-category">
                                    <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-->
                            <!--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="" selected>Status</option>
                                        <option value="1">Active</option>
                                        <option value="0">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>

        <!-- Start::row-1 -->
        <div class="row">

            <div class="col-xl-12">

                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Manage Restaurants Categories
                        </div>
                        @can('create-restaurant-category')
                        <div class="d-flex">
                            <button class="btn btn-sm btn-primary btn-wave waves-light waves-effect waves-light"
                                data-bs-toggle="modal" href="#createCategory"><i
                                    class="ri-add-line fw-medium align-middle me-1"></i> Create Category
                            </button>

                        </div>
                        @endcan
                    </div>
                    <div class="card-body p-2">
                        <div class="table-responsive">
                            <table class="table text-nowrap" id="category-table">
                                <thead>
                                    <tr>
                                        <th scope="col">ID</th>
                                        <th scope="col">Category</th>
                                        <th scope="col">Slug</th>
                                        <th scope="col">Status</th>
                                        {{-- @canany(['edit-restaurant-category', 'delete-restaurant-category'])
                                                <th scope="col">Action</th>
                                            @endcanany --}}
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer border-top-0">

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

        </div>
        <!--End::row-1 -->

    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="createCategory" tabindex="-1" aria-labelledby="addCategory" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBannerModalLabel">Add Category</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="categoryTitle" class="form-label">Title</label>
                        <input type="text" class="form-control" id="categoryTitle"
                            placeholder=" Enter category title" name="title">
                        <span class="text-danger" id="titleError"></span>
                    </div>
                    <div class="mb-3">
                        <label for="categoryImage" class="form-label">Image</label>
                        <input type="file" class="form-control" id="categoryImage" name="image">
                        <span class="text-danger" id="imageError"></span>
                    </div>
                    <div class="mb-3">
                        <label for="categoryStatus" class="form-label">Status</label>
                        <select class="form-select" id="categoryStatus" name="status">
                            <option value="" selected>Select Status</option>
                            <option value="1">Active</option>
                            <option value="0">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 Category Modal -->
<div class="modal fade" id="editCategory" tabindex="-1" aria-labelledby="editCategoryModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBannerModalLabel">Edit Category</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="categoryTitle" class="form-label">Category</label>
                        <input type="text" class="form-control" id="editTitle" name="title">
                        <span class="text-danger" id="titleEditError"></span>
                    </div>
                    <div class="mb-3">
                        <label for="categoryImage" class="form-label">Image</label>
                        <input type="file" class="form-control" id="editImage" name="image">
                        {{-- <span class="text-danger" id="imageEditError"></span> --}}
                    </div>
                    <div class="mb-3">
                        <label for="categoryStatus" 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>


@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-restaurant-category') }}";
        // var userPermissions = @json(auth()->user()->getPermissionNames()->toArray());
        // // Check permissions from userPermissions array
        // var canEdit = userPermissions.includes('edit-restaurant-category');
        // var canDelete = userPermissions.includes('delete-restaurant-category');

        var t = $('#category-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-category').val(); // Search input value
                    d.status = $('#status').val(); // Status select value
                }
            },
            columns: [{
                    data: 'id'
                },
                {
                    data: 'title'
                },
                {
                    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) {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent rounded-pill">${data.slug}</span>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 2
                },
                {
                    render: function(data, type, row, meta) {
                        if (data.status == 'Active') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-primary-transparent rounded-pill">${data.status}</span>
                        </div>`;
                        } else {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent rounded-pill">${data.status}</span>
                        </div>`;
                        }
                      
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                // {
                //     targets: -1,
                //     data: null,
                //     render: function(data, type, row, meta) {
                //         var url = '{{ route('restaurant-category.show', ':id') }}';
                //         url = url.replace(':id', data.id);
                //         var update = '{{ route('restaurant-category.edit', ':id') }}';
                //         update = update.replace(':id', data.id);
                //         // console.log(canDelete, canEdit);

                //         if (canEdit || canDelete) {
                //             if (canEdit) {

                //                 // }

                //                 var buttons = '<div class="d-flex">';

                //                 // return '<div class="d-flex">' +

                //                 buttons +=
                //                     '<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-slug="' + row.slug + '" data-status="' +
                //                     row
                //                     .status + '" data-category="' + row.category_image +
                //                     '" data-url="' + update +
                //                     '" data-bs-toggle="modal" data-bs-target="#editCategory">' +
                //                     '<i class="ri-edit-line"></i>' +
                //                     '</span>' +
                //                     '</a>';
                //             }
                //             if (canDelete) {

                //                 buttons +=
                //                     '<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>';
                //             }

                //             buttons += '</div>';
                //             return buttons;
                //             // '</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,
                // }
            ]
        });

        // Trigger search on form input change or button click
        $('.header-search-bar, .form-select').on('change keyup', function() {
            t.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('restaurant-category.store') }}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#createCategory').modal('hide');

                    // Update the table content with the new HTML
                    $('#category-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) {
                    $('#createCategory').modal('hide');

                    // Update the table content with the new HTML
                    $('#category-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');
                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');
        }
    });
    // Reload table on filter button click
    window.SearchData = function() {
        t.ajax.reload();
    }
</script>

{{-- Edit Modal Pass --}}
<script>
    $(document).ready(function() {
        $('#editCategory').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var title = button.data('title');
            var slug = button.data('slug');
            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('#editSlug').val(slug);
            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('');

        // 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('restaurant-category.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
                    $('#editCategory').modal('hide');

                    // Update the table content with the new HTML
                    $('#category-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) {
                    $('#editCategory').modal('hide');

                    // Update the table content with the new HTML
                    $('#category-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('');

                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>

{{-- 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');

                        $('#category-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>
@endsection