@extends('restaurant.layout.index')
@section('title','Muftaax | Offer History')
@section('custom-style')
<style>
    .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')

<!-- 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">Offer List</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">Offer</li>
                        </ol>
                    </nav>
                </div>
            </div>

        </div>
        <!-- Page Header Close -->

        {{-- <div class="row align-items-center mb-4">--}}
        {{-- <div class="col-lg-12">--}}
        {{-- <div class="card custom-card mb-0">--}}
        {{-- <div class="card-header justify-content-between">--}}
        {{-- <div class="card-title">--}}
        {{-- Apply Filters--}}
        {{-- </div>--}}
        {{-- </div>--}}

        {{-- <div class="card-body">--}}
        {{-- <div class="input-group companies-search-input w-20-block">--}}
        {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default"--}}
        {{-- id="choices-single-default">--}}
        {{-- <option value="">Availability</option>--}}
        {{-- <option value="Choice 1">Yes</option>--}}
        {{-- <option value="Choice 2">No</option>--}}
        {{-- </select>--}}
        {{-- <input type="date" class="form-control w-20-block"--}}
        {{-- aria-label="Text input with segmented dropdown button" placeholder="Apply date">--}}
        {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default"--}}
        {{-- id="choices-single-default">--}}
        {{-- <option value="">Offers</option>--}}
        {{-- <option value="Choice 1">Available</option>--}}
        {{-- <option value="Choice 2">Not Available</option>--}}
        {{-- </select>--}}
        {{-- <input type="number" class="form-control w-20-block"--}}
        {{-- aria-label="Text input with segmented dropdown button" placeholder="Price">--}}
        {{-- <select class="form-select rounded-0 " data-trigger name="choices-single-default"--}}
        {{-- id="choices-single-default">--}}
        {{-- <option value="">Status</option>--}}
        {{-- <option value="Choice 1">Active</option>--}}
        {{-- <option value="Choice 2">Inactive</option>--}}
        {{-- </select>--}}
        {{-- <button type="button" class="btn btn-primary"><i class="ri-search-line"></i></button>--}}
        {{-- </div>--}}
        {{-- </div>--}}
        {{-- </div>--}}

        {{-- </div>--}}
        {{-- </div>--}}

        <div class="row align-items-center mb-4">
            <div class="col-lg-12">
                <div class="card custom-card mb-0">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Apply Filters
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- <div class="input-group companies-search-input w-20-block"> -->
                            <!-- <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-search-input">
                            <input type="date" class="form-control w-20-block d-none" aria-label="Apply date" id="datatable-date-input" placeholder="Apply date">
                            <input type="number" class="form-control d-none" placeholder="Price" id="datatable-price-input">
                            <button type="button" class="btn btn-primary" id="search-btn"><i class="ri-search-line"></i></button> -->
                            <div class="d-flex justify-content-end mb-3">
                            <div class="input-group" style="width: 250px;">
                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-search-input">
                                <button type="button" class="btn btn-primary" id="search-btn">
                                    <i class="ri-search-line"></i>
                                </button>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </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 Offer
                        </div>
                        <div class="d-flex">
                            <a class="btn btn-sm btn-primary-light 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
                                Offer</a>
                            <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" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th scope="col">Icon</th>
                                        <th scope="col">Offer</th>
                                        <th scope="col">Description</th>
                                        <th>Price</th>
                                        <th>Expiry Date</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <tr class="invoice-list">--}}
                                    {{-- <td>--}}
                                    {{-- <img src="{{asset('assets/images/media/media-75.jpg')}}"--}}
                                    {{-- class="banner-preview rounded" alt="Banner Preview" height="100"--}}
                                    {{-- width="100">--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"--}}
                                    {{-- aria-controls="offcanvasExample">Super Promotion- 2 Pizzas--}}
                                    {{-- for the price of 1r</a>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- Lorem ipsum dolor sit amet...--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <span class="badge bg-info-transparent">$45.00</span>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <span class="badge bg-success-transparent">Yes</span>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- <span class="badge bg-success-transparent">Active</span>--}}
                                    {{-- </td>--}}

                                    {{-- <td>--}}
                                    {{-- <div class="hstack gap-2 fs-15">--}}
                                    {{-- <a href="javascript:void(0)" data-bs-toggle="tooltip"--}}
                                    {{-- data-bs-custom-class="tooltip-primary"--}}
                                    {{-- aria-label="Edit Menu"--}}
                                    {{-- title="Edit Menu"--}}
                                    {{-- data-modal-target="#editMenu"--}}
                                    {{-- class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                                    {{-- class="ri-edit-line"></i></a>--}}
                                    {{-- <a href="{{route('restaurant-orders')}}" data-bs-toggle="tooltip"--}}
                                    {{-- data-bs-custom-class="tooltip-warning" aria-label="Home"--}}
                                    {{-- data-bs-original-title="Order Detail"--}}
                                    {{-- class="btn btn-warning-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                                    {{-- class="ri-eye-fill"></i></a>--}}
                                    {{-- <button id="alert-confirm" data-bs-toggle="tooltip"--}}
                                    {{-- data-bs-custom-class="tooltip-danger"--}}
                                    {{-- aria-label="Delete"--}}
                                    {{-- title="Delete"--}}
                                    {{-- data-modal-target="#delete-modal"--}}
                                    {{-- class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                                    {{-- class="ri-delete-bin-5-line"></i></button>--}}
                                    {{-- </div>--}}
                                    {{-- </td>--}}
                                    {{-- </tr>--}}


                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{-- <div class="card-footer border-top-0">--}}
                    {{-- <nav aria-label="Page navigation">--}}
                    {{-- <ul class="pagination mb-0 float-end">--}}
                    {{-- <li class="page-item disabled">--}}
                    {{-- <a class="page-link">Previous</a>--}}
                    {{-- </li>--}}
                    {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>--}}
                    {{-- <li class="page-item active" aria-current="page">--}}
                    {{-- <a class="page-link" href="javascript:void(0);">2</a>--}}
                    {{-- </li>--}}
                    {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>--}}
                    {{-- <li class="page-item">--}}
                    {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                    {{-- </li>--}}
                    {{-- </ul>--}}
                    {{-- </nav>--}}
                    {{-- </div>--}}
                </div>
            </div>

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

    </div>
</div>

<div class="modal fade" id="createOffer" tabindex="-1"
    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 Offer
                </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="form-group mb-2">
                        <label for="input-label" class="form-label">Offer</label>
                        <input type="text" class="form-control" name="offer" id="offer">
                        <span class="text-danger d-none" id="offerError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Thumbnail</label>
                        <input type="file" class="form-control" name="thumbnail" id="thumbnail">
                        <span class="text-danger d-none" id="thumbnailError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Description</label>
                        <textarea type="description" class="form-control" name="description" id="description"
                            rows="3"></textarea>
                        <span class="text-danger d-none" id="descriptionError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" 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 class="form-group mb-2">
                        <label for="input-label" class="form-label">Status</label>
                        <select class="form-select" name="status">
                            <option value="">-- Select --</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <span class="text-danger d-none" id="statusError"></span>
                    </div>

                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Offer Start Date</label>
                        <input type="date" class="form-control" name="offer_start_date" id="date" placeholder="07/30/2024">
                        <span class="text-danger d-none" id="offer_start_dateError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Offer Expiry Date</label>
                        <input type="date" class="form-control" name="expire_date" id="date" placeholder="07/30/2024">
                        <span class="text-danger d-none" id="expire_dateError"></span>
                    </div>

                    {{-- <div class="col-12">--}}
                    {{-- <label class="form-label">Add Menu Items</label>--}}
                    {{-- <div class="select-menu-items">--}}
                    {{-- <div class="d-flex align-items-center mb-2">--}}
                    {{-- <select name="menu_item[]" class="form-control me-2" required>--}}
                    {{-- <option value="">Select Menu Item</option>--}}
                    {{-- @foreach ($menu_items as $menu_item)--}}
                    {{-- <option value="{{ $menu_item->id }}">{{ $menu_item->title }}</option>--}}
                    {{-- @endforeach--}}
                    {{-- </select>--}}
                    {{-- <input type="number" min="1" name="quantity[]" class="form-control w-150-px me-2" placeholder="Quantity" required>--}}
                    {{-- <button type="button" class="btn btn-sm btn-danger-light" onclick="handleOnRemoveMenuItem(this)">--}}
                    {{-- <i class="bi bi-x"></i>--}}
                    {{-- </button>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- <div class="select-menu-items">--}}
                    {{-- <div class="row">--}}
                    {{-- <div class="col-7">--}}
                    {{-- <select name="menu_item[]" class="form-control" required>--}}
                    {{-- <option value="">Select Menu Item</option>--}}
                    {{-- @foreach ($menu_items as $menu_item)--}}
                    {{-- <option value="{{ $menu_item->id }}">{{ $menu_item->title }}</option>--}}
                    {{-- @endforeach--}}
                    {{-- </select>--}}
                    {{-- </div>--}}
                    {{-- <div class="col-3">--}}
                    {{-- <input type="number" min="1" name="quantity[]"--}}
                    {{-- class="form-control w-150-px" placeholder="Quantity" required>--}}
                    {{-- </div>--}}
                    {{-- <div class="col-2">--}}
                    {{-- <button type="button" class="btn btn-sm btn-danger-light"--}}
                    {{-- onclick="handleOnRemoveMenuItem($(this))"> <i class="bi bi-x"></i> </button>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- <button type="button" onclick="handleOnAddMenuItem()"--}}
                    {{-- class="btn btn-sm btn-success mt-2 d-flex align-items-center gap-1 rounded-5"> <i--}}
                    {{-- class="bi bi-plus"></i> Add </button>--}}
                    {{-- </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>

<div class="modal fade" id="editOffer" tabindex="-1"
    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 Offer
                </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="form-group mb-2">
                        <label for="input-label" class="form-label">Offer</label>
                        <input type="text" class="form-control" name="offer" id="editOffer">
                        <span class="text-danger" id="offerEditError"></span>
                    </div>
                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label"  class="form-label">Thumbnail</label>--}}
                    {{-- <input type="file" class="form-control" name="thumbnail" id="editThumbnail">--}}

                    {{-- </div>--}}
                    <div class="form-group mb-2">
                        <h5 class="fs-14 mb-1">Thumbnail</h5>
                        <div class="text-center">
                            <div class="position-relative d-inline-block">
                                <div class="position-absolute top-100 start-100 translate-middle">
                                    <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Select Image">
                                        <div class="avatar-xs">
                                            <div class="avatar-title bg-light border rounded-circle text-muted cursor-pointer d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                                <i class="ri-image-fill"></i>
                                            </div>
                                        </div>
                                    </label>
                                    <input class="form-control d-none " id="product-image-input" type="file" accept="image/png, image/gif, image/jpeg" name="thumbnail" onchange="previewImageEdit(event)">
                                </div>
                                <div class="avatar-md">
                                    <div class="avatar-title bg-light rounded">
                                        <img src="" id="product-img-edit" class="avatar-md" style="display:none; width: 80px; height: 80px; object-fit: cover;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Description</label>
                        <textarea type="description" class="form-control" name="description" id="editDescription"
                            rows="3"></textarea>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Price</label>
                        <input type="text" class="form-control" name="price" id="editPrice">
                        <span class="text-danger" id="priceEditError"></span>
                    </div>
                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label" class="form-label">Availability</label>--}}
                    {{-- <select class="form-control" name="availability" id="editAvailability">--}}
                    {{-- <option value="">-- Select --</option>--}}
                    {{-- <option value="Yes">Yes</option>--}}
                    {{-- <option value="No">No</option>--}}
                    {{-- <option value="Out">Out of Order</option>--}}
                    {{-- </select>--}}
                    {{-- <span class="text-danger" id="availabilityEditError"></span>--}}
                    {{-- </div>--}}
                    <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="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <span class="text-danger" id="statusEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Offer Start Date</label>
                        <input type="date" class="form-control" name="offer_start_date" id="editStartDate" placeholder="07/30/2024">
                        <span class="text-danger" id="offer_start_dateEditError"></span>
                    </div>
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Offer Expiry Date</label>
                        <input type="date" class="form-control" name="expire_date" id="editExpireDate" placeholder="07/30/2024">
                        <span class="text-danger" id="expire_dateEditError"></span>
                    </div>
                    {{-- <script>--}}
                    {{-- var menuItemsData = @json($menu_items);  // Pass menu_items data to JS--}}
                    {{-- </script>--}}

                    {{-- <div class="col-12">--}}
                    {{-- <label class="form-label">Update Menu Items</label>--}}
                    {{-- <div class="select-menu-items">--}}
                    {{-- <div class="d-flex align-items-center mb-2">--}}
                    {{-- <select name="menu_item[]" class="form-control me-2" required>--}}
                    {{-- <option value="">Select Menu Item</option>--}}
                    {{-- @foreach ($menu_items as $menu_item)--}}
                    {{-- <option value="{{ $menu_item->id }}">{{ $menu_item->title }}</option>--}}
                    {{-- @endforeach--}}
                    {{-- </select>--}}
                    {{-- <input type="number" min="1" name="quantity[]" class="form-control w-150-px me-2" placeholder="Quantity" required>--}}
                    {{-- <button type="button" class="btn btn-sm btn-danger-light" onclick="handleOnRemoveMenuItem(this)">--}}
                    {{-- <i class="bi bi-x"></i>--}}
                    {{-- </button>--}}
                    {{-- </div>--}}
                    {{-- </div>--}}
                    {{-- <button type="button" onclick="handleOnAddMenuItem()"--}}
                    {{-- class="btn btn-sm btn-success mt-2 d-flex align-items-center gap-1 rounded-5"> <i--}}
                    {{-- class="bi bi-plus"></i> Add </button>--}}
                    {{-- </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>



<!-- 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.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>


<!-- DataTable Search -->
<script>
    $(function() {
        let URL = "{{ route('get-offers') }}";

        var t = $('#offers-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true, // Enable default search functionality
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip', // Remove 'f' to hide the search bar
            dom: '<"d-flex justify-content-between"l<"d-flex">>rt<"d-flex justify-content-between"ip>', // Custom dom layout
            ajax: {
                "type": "GET",
                "url": URL
            },
            columns: [{
                    data: null
                },
                {
                    data: 'offer'
                },
                {
                    data: 'description'
                },
                {
                    data: null
                },
                {
                    data: 'expire_date'
                },
                {
                    data: null
                },
                {
                    data: null
                }
            ],
            columnDefs: [{
                    render: function(data, type, row, meta) {
                        var image = data.thumbnail;
                        return '<div class="d-flex align-items-center">' +
                            '<img class="avatar-sm me-2" style="width: 80px; height:80px" src="' + image + '" alt="No Image Uploaded"/>' +
                            '</div>';
                    },
                    searchable: false,
                    orderable: false,
                    targets: 0
                },
                {
                    targets: 2, // adjust if your description column is elsewhere
                    render: function(data, type, row, meta) {
                        var shortText = data.length > 100 ? data.substring(0, 100) + '...' : 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>
        `;
                    }
                },
                {
                    render: function(data, type, row, meta) {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.price}</span>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 3
                },
                {
                    render: function(data, type, row, meta) {

                        if (data.status === 'Active') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.status}</span>
                        </div>`;
                        }
                        if (data.status === 'Inactive') {
                            return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent">${data.status}</span>
                        </div>`;
                        } else {
                            return `<div class="d-flex align-items-center">

                        </div>`;
                        }
                    },
                    searchable: false,
                    orderable: false,
                    targets: 5
                },
                {
                    render: function(data, type, row, meta) {
                        var url = '{{ route("offers.show", ":id") }}';
                        url = url.replace(':id', data.id);
                        var update = '{{ route("offers.update", ":id") }}';
                        update = update.replace(':id', data.id);
                        var baseUrl = "{{ route('orders.index') }}";


                        return '<div class="d-flex">' +
                            '<a data-id="' + row.id + '" data-offer="' + row.offer + '" data-description="' + row.description + '" data-thumbnail="' + row.thumbnail + '" data-status="' + row.status + '" data-start="' + row.offer_start_date + '" data-expire="' + row.expire_date + '" data-expire="' + row.expire_date + '" data-price="' + row.price + '" data-menu-items=\'' + JSON.stringify(row.menus) + '\' data-quantities=\'' + JSON.stringify(row.quantities) + '\' data-url="' + update + '" data-bs-toggle="modal" data-bs-target="#editOffer" class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn me-2" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Edit Offer">' +
                            '<span type="button"  >' +
                            '<i class="ri-edit-line"></i>' +
                            '</span>' +
                            '</a>' +
                            // '<a href="' + baseUrl + '" class="btn btn-warning-light btn-icon ms-1 btn-sm invoice-btn me-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-warning" title="View Offer">' +
                            // '<i class="ri-eye-fill"></i>' +
                            // '</a>' +
                            '<a data-url="' + url + '" data-bs-toggle="modal" data-bs-target="#deleteCamp" class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Delete Offer">' +
                            '<span type="button">' +
                            '<i class="ri-delete-bin-5-line"></i>' +
                            '</span>' +
                            '</a>' +
                            '</div>';

                    },
                    searchable: false,
                    orderable: false,
                    targets: -1
                }
            ],
            language: {
                paginate: {
                    previous: '&lsaquo;',
                    next: '&rsaquo;'
                }
            },
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
            },
            initComplete: function() {
                // Hook up the search input
                $('#offers-table_filter input').unbind().bind('keyup', function() {
                    t.search(this.value).draw();
                });
            }
        });
    });

    function selectRange() {
        $('.dataTable').DataTable().ajax.reload();
    }
</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>



{{--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('offers.store')}}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#createOffer').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
                    });

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

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

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: 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) {
                $('#offerError').addClass('d-none');
                $('#thumbnailError').addClass('d-none');
                $('#expire_dateError').addClass('d-none');
                $('#offer_start_dateError').addClass('d-none');
                $('#statusError').addClass('d-none');
                $('#priceError').addClass('d-none');
                $('#descriptionError').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 select, #storeForm textarea').on('input change', function() {
        // Replace [] with an escaped version or sanitize the name
        var sanitizedName = $(this).attr('name').replace(/\[\]/g, '');
        var errorID = '#' + sanitizedName + '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

                        // 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 id = button.data('id');
            var offer = button.data('offer');
            var image = button.data('thumbnail');
            var description = button.data('description');
            var status = button.data('status');
            var price = button.data('price');
            var expire = button.data('expire');
            var start = button.data('start');
            var url = button.data('url');
            var menuItems = button.data('menu-items');
            var quantities = button.data('quantities');
            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('#editOffer').val(offer);
            modal.find('#editDescription').val(description);
            modal.find('#editPrice').val(price);
            modal.find('#editExpireDate').val(expire);
            modal.find('#editStatus').val(status);
            modal.find('#editStartDate').val(start);
            modal.find('#product-img-edit').attr('src', imageUrl).show();

            // // Clear existing menu items
            // modal.find('.select-menu-items').empty();
            //
            // // Populate menu items and quantities
            // if (Array.isArray(menuItems) && Array.isArray(quantities)) {
            //     menuItems.forEach(function(menuItem, index) {
            //         var quantity = quantities[index] || 1; // Default to 1 if quantity is not defined
            //
            //         // Create the select option dynamically based on the passed menu items
            //         var menuItemHtml = `
            //     <div class="d-flex align-items-center mb-2">
            //         <select name="menu_item[]" class="form-control me-2" required>
            //             <option value="">Select Menu Item</option>
            // `;
            //
            //         // Loop through the menuItemsData and create options
            //         menuItemsData.forEach(function(item) {
            //             menuItemHtml += `
            //         <option value="${item.id}" ${item.id === menuItem ? 'selected' : ''}>${item.title}</option>
            //     `;
            //         });
            //
            //         menuItemHtml += `
            //         </select>
            //         <input type="number" min="1" name="quantity[]" class="form-control w-150-px me-2" placeholder="Quantity" value="${quantity}" required>
            //         <button type="button" class="btn btn-sm btn-danger-light" onclick="handleOnRemoveMenuItem(this)">
            //             <i class="bi bi-x"></i>
            //         </button>
            //     </div>
            // `;
            //
            //         modal.find('.select-menu-items').append(menuItemHtml);
            //     });
            // }
        });
    });
</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('');
        $('#offer_start_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('offers.update', '') }}/" + 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
                    });

                    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
                    Toast.fire({
                        icon: 'warning',
                        title: 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('');
                $('#offer_start_dateEditError').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>
    function handleOnAddMenuItem() {
        const menuItemHTML = `
        <div class="select-menu-item d-flex align-items-center mb-2">
            <select name="menu_item[]" class="form-control me-2" required>
                <option value="">Select Menu Item</option>
                @foreach ($menu_items as $menu_item)
            <option value="{{ $menu_item->id }}">{{ $menu_item->title }}</option>
                @endforeach
            </select>
            <input type="number" min="1" name="quantity[]" class="form-control w-150-px me-2" placeholder="Quantity" required>
            <button type="button" class="btn btn-sm btn-danger-light" onclick="handleOnRemoveMenuItem(this)">
                <i class="bi bi-x"></i>
            </button>
        </div>`;
        $('.select-menu-items').append(menuItemHTML);
    }

    function handleOnRemoveMenuItem(btn) {
        $(btn).closest('.select-menu-item').remove();
    }
</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