@extends('admin.layout.index')
@section('title', 'Muftaax | Top Deals')
@section('custom-style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
<style>
    #offers-table_filter {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #offers-table_filter label {
        display: flex !important;
        align-items: center !important;
    }

    .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;
    }

    .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        /* Adjust space as needed */
    }
</style>
@endsection
@section('content')

<!-- Start::app-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">Top Deals 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">Top Deals</li>
                        </ol>
                    </nav>
                </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 Deal
                        </div>
                        <div class="d-flex">
                            @can('create-top-deals-category')
                            <a class="btn btn-sm btn-primary btn-wave me-2 waves-effect waves-light"
                                href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#createOffer"> <i
                                    class="bx bx-plus align-middle"></i> Create
                                Top Deal</a>
                            @endcan
                            <div class="dropdown ms-2 d-none">
                                <button class="btn btn-icon btn-secondary-light btn-sm btn-wave waves-light"
                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">All</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Active</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Inctive</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-2 mb-5">
                        <div class="table-responsive">
                            <table class="table" id="offers-table">
                                <thead>
                                    <tr>
                                        <th scope="col">Banner</th>
                                        <th scope="col">Deal</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Expiry Date</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

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

    </div>
</div>

<div class="modal fade" id="createOffer" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Create Top Deal</h6>
                <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="row">
                        <!-- Deal Name -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="deal_name" class="form-label">Deal Name</label>
                                <input type="text" class="form-control" name="deal_name" id="deal_name">
                                <span class="text-danger d-none" id="deal_nameError"></span>
                            </div>
                        </div>

                        <!-- Banner -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="image" class="form-label">Banner</label>
                                <input type="file" class="form-control" name="image" id="image">
                                <span class="text-danger d-none" id="imageError"></span>
                            </div>
                        </div>

                        <!-- Price -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="price" class="form-label">Price</label>
                                <input type="text" class="form-control" name="price" id="price">
                                <span class="text-danger d-none" id="priceError"></span>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="col-md-12">
                            <div class="form-group mb-2">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                                <span class="text-danger d-none" id="descriptionError"></span>
                            </div>
                        </div>

                        <!-- Restaurant -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="restaurant_id" class="form-label">Restaurant</label>
                                <select class="form-select" id="restaurant_id" name="restaurant_id">
                                    <option value="" disabled selected>-- Select --</option>
                                    @foreach ($restaurants as $restaurant)
                                    <option value="{{ $restaurant->id }}">{{ $restaurant->name }}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger d-none" id="restaurant_idError"></span>
                            </div>
                        </div>

                        {{-- <!-- Extras Dropdown -->
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label for="extra_item_id" class="form-label">Extras</label>
                                    <select id="extra_item_id" class="form-select select2" name="extra_item_id[]"
                                        multiple>
                                        <option value="" disabled>-- Select Extra --</option>
                                    </select>
                                    <span class="text-danger d-none" id="extra_item_idError"></span>
                                </div>
                            </div>

                            <!-- Menus Dropdown -->
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label for="menu_id" class="form-label">Menus</label>
                                    <select id="menu_id" class="form-select select2" name="menu_id[]" multiple>
                                        <option value="" disabled>-- Select Menu --</option>
                                    </select>
                                    <span class="text-danger d-none" id="menu_idError"></span>
                                </div>
                            </div> --}}

                        <!-- Deal Start Date -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="start_date" class="form-label">Deal Start Date</label>
                                <input type="date" class="form-control" name="start_date" id="start_date">
                                <span class="text-danger d-none" id="start_dateError"></span>
                            </div>
                        </div>

                        <!-- Deal Expiry Date -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="expire_date" class="form-label">Deal Expiry Date</label>
                                <input type="date" class="form-control" name="expire_date" id="expire_date">
                                <span class="text-danger d-none" id="expire_dateError"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" aria-label=".form-select-lg example"
                                    id="status" name="status">
                                    <option value="" selected>Status</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Modal Footer -->
                <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>


<div class="modal fade" id="editOffer" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Edit Top Deal</h6>
                <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="row">
                        <!-- Deal Name -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="deal_name" class="form-label">Deal Name</label>
                                <input type="text" class="form-control" name="deal_name" id="editName"
                                    value="">
                                <span class="text-danger d-none" id="deal_nameError"></span>
                            </div>
                        </div>

                        <!-- Banner -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="image" class="form-label">Banner</label>
                                <input type="file" class="form-control" name="image" id="image">
                                <span class="text-danger d-none" id="imageError"></span>
                            </div>
                        </div>

                        <!-- Price -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="price" class="form-label">Price</label>
                                <input type="text" class="form-control" name="price" id="editPrice"
                                    value="">
                                <span class="text-danger d-none" id="priceError"></span>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="col-md-12">
                            <div class="form-group mb-2">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="editDescription" rows="3"></textarea>
                                <span class="text-danger d-none" id="descriptionError"></span>
                            </div>
                        </div>

                        <!-- Restaurant -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="restaurant_id" class="form-label">Restaurant</label>
                                <select class="form-select" id="editRestaurantId" name="restaurant_id">
                                    <option value="" disabled>-- Select --</option>
                                    @foreach ($restaurants as $restaurant)
                                    <option value="{{ $restaurant->id }}">{{ $restaurant->name }}</option>
                                    @endforeach
                                </select>
                                <span class="text-danger d-none" id="restaurant_idError"></span>
                            </div>
                        </div>

                        {{-- <!-- Extras Dropdown -->
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label for="extra_item_edit_id" class="form-label">Extras</label>
                                    <select id="extra_item_edit_id" class="form-select select2"
                                        name="extra_item_edit_id[]" multiple>
                                        <option value="" disabled>-- Select Extra --</option>
                                    </select>
                                    <span class="text-danger d-none" id="extra_item_edit_idError"></span>
                                </div>
                            </div>

                            <!-- Menus Dropdown -->
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label for="menu_edit_id" class="form-label">Menus</label>
                                    <select id="menu_edit_id" class="form-select select2" name="menu_edit_id[]" multiple>
                                        <option value="" disabled>-- Select Menu --</option>
                                    </select>
                                    <span class="text-danger d-none" id="menu_edit_idError"></span>
                                </div>
                            </div> --}}

                        <!-- Deal Start Date -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="start_date" class="form-label">Deal Start Date</label>
                                <input type="date" class="form-control" name="start_date" id="editStartDate"
                                    value="">
                                <span class="text-danger d-none" id="start_dateError"></span>
                            </div>
                        </div>

                        <!-- Deal Expiry Date -->
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="expire_date" class="form-label">Deal Expiry Date</label>
                                <input type="date" class="form-control" name="expire_date" id="editExpireDate"
                                    value="">
                                <span class="text-danger d-none" id="expire_dateError"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-2">
                                <label for="input-label" class="form-label">Status</label>
                                <select class="form-select" name="status" id="editStatus">
                                    <option value="">-- Select --</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                                <span class="text-danger" id="statusEditError"></span>
                            </div>
                        </div>
                    </div>
                </div>


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




<!-- Start:: Company Details Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExample">
    <div class="offcanvas-body p-0">
        <div class="d-sm-flex align-items-top p-4 border-bottom border-block-end-dashed main-profile-cover bg-primary">
            <div>
                <span class="avatar avatar-xxl avatar-rounded me-3 bg-light-transparent p-2">
                    <img src="{{ asset('assets/images/company-logos/1.png') }}" alt="">
                </span>
            </div>
            <div class="flex-fill main-profile-info">
                <div class="d-flex align-items-center justify-content-between">
                    <h6 class="fw-medium mb-1 text-fixed-white">Super Promotion- 2 Pizzas
                        for the price of 1</h6>
                    <button type="button" class="btn-close crm-contact-close-btn" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>

                <div class="d-flex mb-0 mt-2">

                    <div class="me-4">
                        <p class="fw-medium fs-20 text-fixed-white text-shadow mb-0">$12.2k</p>
                        <p class="mb-0 fs-11 op-5 text-fixed-white">Orders</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="p-4 border-bottom border-block-end-dashed">
            <div class="mb-0">
                <p class="fs-15 mb-2 fw-medium">Description :</p>
                <p class="text-muted op-8 mb-0">
                    Lorem ipsum dolor sit amet consectetur. Mi pretium lacus dolor lectus. Facilisis amet mi nibh at
                    et in ultricies rhoncus nunc. Sed venenatis lectus leo donec maecenas tortor. Velit et velit
                    amet arcu.
                </p>
            </div>
        </div>

        <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center gap-3">
            <div class="fs-14 fw-medium">Price:</div>
            <div>
                <span class="badge bg-primary-transparent m-1">$8.00</span>
            </div>
        </div>
        <div class="form-group mb-2 p-3">
            <label for="input-label" class="form-label">Availability</label>
            <select class="form-select" name="status">
                <option value="">-- Select --</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
                <option value="Out">Out of Order</option>
            </select>
        </div>
        <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center gap-3">
            <div class="fs-14 fw-medium">Status:</div>
            <div>
                <span class="badge bg-success-transparent m-1">Active</span>
            </div>
        </div>

    </div>
</div>
<!-- End:: Company Details Offcanvas -->

<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>
    $(document).ready(function() {
        let table = $('#offers-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('topDeals.index') }}",
            columns: [{
                    data: 'thumbnail',
                    name: 'thumbnail',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    orderable: false
                },
                {
                    data: 'description',
                    name: 'description',
                    orderable: false
                },
                {
                    data: 'price',
                    name: 'price'
                },
                {
                    data: 'expiry_date',
                    name: 'expiry_date'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            columnDefs: [{
                targets: 2,
                render: function(data, type, row, meta) {
                    var shortText = data.length > 50 ? data.substring(0, 50) + '...' : data;

                    return `
            <div class="description-cell">
                <span class="short-text">${shortText}</span>
                <span class="full-text d-none">${data}</span>
                ${data.length > 100 ? '<a href="#" class="toggle-description">Show more</a>' : ''}
            </div>
        `;
                }
            }, ],
        });

        // Handle Search Button
        $('#search-btn').on('click', function() {
            table.draw();
        });

        // Optional: Search Input (for dynamic search)
        $('#datatable-search-input').on('keyup', function() {
            table.search(this.value).draw();
        });
    });
</script>


<script>
    $(document).ready(function() {
        // Initialize Select2 for all dropdowns
        $('.select2').each(function() {
            $(this).select2({
                dropdownParent: $(this).parent()
            })
        });

        let today = new Date();
        today.setDate(today.getDate());
        let minDate = today.toISOString().split('T')[0];

        $("#start_date").attr("min", minDate);
        $("#expire_date").attr("min", minDate);
        $("#editStartDate").attr("min", minDate);
        $("#editExpireDate").attr("min", minDate);

        $("#editStartDate").on("change", function() {
            let startDate = $(this).val();
            $("#editExpireDate").attr("min", startDate);
        });

        $("#start_date").on("change", function() {
            let startDate = $(this).val();
            $("#expire_date").attr("min", startDate);
        });

        $('#restaurant_id').on('change', function() {
            let restaurantId = $(this).val();

            if (restaurantId) {
                // Perform AJAX request
                $.ajax({
                    url: "{{ route('restaurant.extras_menus', ':id') }}".replace(':id',
                        restaurantId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);

                        // Populate Extras dropdown
                        let extrasSelect = $('#extra_item_id');
                        extrasSelect.empty().append(
                            '<option value="" disabled >-- Select Extra --</option>');
                        $.each(response.extras, function(index, extra) {
                            console.log(extra);

                            extrasSelect.append(
                                `<option value="${extra.id}">${extra.title}</option>`
                            );
                        });

                        // Trigger change for Select2 to recognize new options
                        // extrasSelect.select2('destroy');
                        extrasSelect.trigger('change.select2');
                        // $('#extras-select').select2("destroy");
                        // setTimeout(function () {
                        //     $('#extras-select').select2();
                        // }, 100)


                        // Populate Menus dropdown
                        let menusSelect = $('#menu_id');
                        menusSelect.empty().append(
                            '<option value="" disabled >-- Select Menu --</option>');
                        $.each(response.menus, function(index, menu) {
                            menusSelect.append(
                                `<option value="${menu.id}">${menu.title}</option>`
                            );
                        });

                        // Trigger change for Select2 to recognize new options
                        menusSelect.trigger('change.select2');
                    },
                    error: function(error) {
                        console.log('Error fetching data:', error);
                    }
                });
            }
        });
    });
</script>

{{-- Search btn --}}
<script>
    // Activate the search button
    $('#search-btn').on('click', function() {
        let searchValue = $('#datatable-search-input').val();
        let dateValue = $('#datatable-date-input').val();
        let priceValue = $('#datatable-price-input').val();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

        // Reload DataTable with filter
        $('#offers-table').DataTable().search(filterString).draw();
    });
</script>


<script>
    $(document).ready(function() {
        $('#storeForm').on('submit', function(e) {
            e.preventDefault();

            var submitButton = $('#storeForm button[type="submit"]');
            submitButton.prop('disabled', true).text('Processing...');

            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('top-deals.store') }}", // Route for storing deals
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(response.message);

                        $('#createOffer').modal('hide'); // Close the modal
                        $('#storeForm')[0].reset(); // Reset form fields
                        $('#offers-table').DataTable().ajax.reload();
                    }
                    submitButton.prop('disabled', false).text(
                        'Submit');
                },
                error: function(xhr) {
                    if (xhr.responseJSON.errors) {
                        // let notyf = new Notyf({
                        //     duration: 4000,
                        //     position: {
                        //         x: 'right',
                        //         y: 'top'
                        //     },
                        //     ripple: true,
                        //     dismissible: true
                        // });

                        // $.each(xhr.responseJSON.errors, function(key, value) {
                        //     notyf.error(value[
                        //         0]);
                        // });

                        var errors = xhr.responseJSON;
                        if ($.isEmptyObject(errors) == false) {
                            $.each(errors.errors, function(key, value) {
                                var ErrorID = '#' + key + 'Error';
                                $(ErrorID).removeClass("d-none");
                                $(ErrorID).text(value);
                            });
                        }
                    }
                    submitButton.prop('disabled', false).text(
                        'Submit');
                }
            });
        });
        $('#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'); // Reset to original state
        });

        // Handle form submission for deletion
        $("#deleteCampForm").on('submit', function(event) {
            event.preventDefault(); // Prevent the default form submission

            // Get the action URL from the form, which contains the record ID
            var actionUrl = $(this).attr('action');
            var submitButton = $("#deleteCampForm button[type='submit']");
            submitButton.prop('disabled', true).text('Processing...'); // Disable the button and change text

            $.ajax({
                type: 'POST',
                url: actionUrl, // Use the action URL which includes the record ID
                data: $(this).serialize(), // Serialize the form data
                success: function(data) {
                    if (data.success) {

                        // Hide the modal
                        $('#deleteCamp').modal('hide');

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

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

                        // Trigger the success toast notification
                        // Toast.fire({
                        //     icon: 'success',
                        //     title: data.message
                        // });
                    }

                },
                error: function(data) {
                    // Handle errors here if needed
                    Toast.fire({
                        icon: 'error',
                        title: 'Failed to delete the record!'
                    });

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

{{-- Edit Modal Pass --}}
<script>
    $(document).ready(function() {
        $('#editOffer').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);


            var menus = button.data('menus').toString().split(',');
            var extras = button.data('extras').toString().split(',');

            // Set the menus dropdown
            var menuDropdown = $('#menu_edit_id');
            menuDropdown.val(menus).trigger('change'); // Pre-select options

            // Set the extras dropdown
            var extraDropdown = $('#extra_item_edit_id');
            extraDropdown.val(extras).trigger('change'); // Pre-select options


            var id = button.data('id');
            var title = button.data('title');
            var image = button.data('image');
            var description = button.data('description');
            var start = button.data('start');
            var price = button.data('price')
            var status = button.data('status');
            var restaurant = button.data('restaurant');
            var expire = button.data('expiry');
            var url = button.data('url');
            var imageUrl = `${image}`;

            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editName').val(title);
            modal.find('#editDescription').val(description);
            modal.find('#editPrice').val(price);
            modal.find('#editExpireDate').val(expire);
            modal.find('#editStartDate').val(start);
            modal.find('#editRestaurantId').val(restaurant);
            modal.find('#editStatus').val(status);
            modal.find('#product-img-edit').attr('src', imageUrl).show();

        });
    });
</script>
<script>
    $(document).ready(function() {
        function fetchMenusAndExtras(restaurantId) {
            if (restaurantId) {
                $.ajax({
                    url: "{{ route('restaurant.extras_menus', ':id') }}".replace(':id', restaurantId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        let menusSelect = $('#menu_edit_id');
                        let extrasSelect = $('#extra_item_edit_id');

                        // Clear and populate dropdowns
                        menusSelect.empty().append(
                            '<option value="" disabled>-- Select Menu --</option>');
                        extrasSelect.empty().append(
                            '<option value="" disabled>-- Select Extra --</option>');

                        $.each(response.menus, function(index, menu) {
                            menusSelect.append(
                                `<option value="${menu.id}">${menu.title}</option>`);
                        });

                        $.each(response.extras, function(index, extra) {
                            extrasSelect.append(
                                `<option value="${extra.id}">${extra.title}</option>`);
                        });

                        // Preselect values
                        let menus = menusSelect.data('preselected') || [];
                        let extras = extrasSelect.data('preselected') || [];
                        menusSelect.val(menus).trigger('change');
                        extrasSelect.val(extras).trigger('change');
                    },
                    error: function(error) {
                        console.error('Error fetching menus and extras:', error);
                    }
                });
            }
        }

        $('#editOffer').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);

            // Extract restaurant ID and preselected menus/extras
            var restaurantId = button.data('restaurant');
            var menus = button.data('menus').toString().split(',');
            var extras = button.data('extras').toString().split(',');

            // Set dropdown values
            $('#editRestaurantId').val(restaurantId);
            $('#menu_edit_id').data('preselected', menus);
            $('#extra_item_edit_id').data('preselected', extras);

            // Fetch and populate dropdowns
            fetchMenusAndExtras(restaurantId);
        });

        $('#editRestaurantId').on('change', function() {
            let restaurantId = $(this).val();
            fetchMenusAndExtras(restaurantId);
        });
    });
</script>
{{-- Ajax Update --}}
<script>
    // Edit record with AJAX POST method
    $("#editForm").on('submit', function(event) {
        event.preventDefault();

        // $('#offerEditError').addClass('d-none').text('');
        // $('#statusEditError').addClass('d-none').text('');
        // $('#expire_dateEditError').addClass('d-none').text('');
        // $('#priceEditError').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('top-deals.edit', ':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
                    $('#editOffer').modal('hide');

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

                    // Trigger the success toast notification
                    // Toast.fire({
                    //     icon: 'success',
                    //     title: data.message
                    // });
                    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) {
                    $('#editOffer').modal('hide');

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

                    // Trigger the success toast notification
                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).warning(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
                // $('#offerEditError').addClass('d-none').text('');
                // $('#statusEditError').addClass('d-none').text('');
                // $('#expire_dateEditError').addClass('d-none').text('');
                // $('#priceEditError').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 select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'EditError';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

{{-- Preview Image --}}
<script>
    function previewImageEdit(event) {
        const file = event.target.files[0];
        const imgElement = document.getElementById('product-img-edit');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imgElement.src = e.target.result;
                imgElement.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            imgElement.src = '';
            imgElement.style.display = 'none';
        }
    }
</script>
<script>
    $(document).on('click', '.toggle-description', function(e) {
        e.preventDefault();
        var container = $(this).closest('.description-cell');
        container.find('.short-text, .full-text').toggleClass('d-none');

        if ($(this).text() === 'Show more') {
            $(this).text('Show less');
        } else {
            $(this).text('Show more');
        }
    });
</script>
@endsection