@extends('layouts.layoutapp')

@section('content')
    <style>
        #sidenav-main,
        #navbarBlur {
            display: none !important;
        }

        .main-content {
            margin-left: 0 !important;
            background-color: white;
            padding: 20px;
        }

        .col-md-5th {
            width: 20%;
            float: left;
        }

        .bg-gradient-cool-breeze {
            /* background-image: linear-gradient(310deg, #f53939 0%, #fbcf33 100%); */
            background-color: #5b90c6;
            color: white;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            opacity: 1 !important;
            display: inline-block;
        }

        input[type="number"] {
            -moz-appearance: number-input;
        }

        /* Offcanvas toggle icon styles */
        #toggleOffcanvas {
            background: none;
            border: none;
            font-size: 24px;
            color: white;
            cursor: pointer;
            position: absolute;
            top: 8%;
            right: 0;
            transform: translateY(-50%);
            z-index: 1050;
            padding: 10px;
            background-color: #f53939;
            border-radius: 50% 0 0 50%;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        }

        /* Remove card styling */
        .content-container {
            background-color: white;
            /* padding: 10px; */
            border-radius: 8px;
        }

        .edit-order {
            cursor: pointer;
            background-color: #f0f0f0;
        }

        .edit-order:hover {
            background-color: #d0f0d0;
        }

        /* Add these styles to your existing style block */
        #product-list {
            background-color: #d9ecff;
            border-radius: 8px;
            padding: 10px !important;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;
            width: 100%;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .product-image-container {
            height: 100px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-info {
            padding: 8px;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .product-name {
            font-size: 0.75rem;
            margin: 0;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }

            .product-image-container {
                height: 80px;
            }
        }

        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            }

            .product-name {
                font-size: 0.65rem;
            }
        }

        body,
        .main-content,
        .content-container,
        .menu {
            /* background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); */
            background-color: #d9ecff;
            border-radius: 17px;
        }

        .scroll-container {
            max-height: 600px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .scroll-container::-webkit-scrollbar {
            display: none;
        }

        @media (max-width: 767.98px) {
            .note-row td {
                padding-left: 10px !important;
            }
        }
    </style>
    <div class="main-content">

        <button id="toggleOffcanvas" title="Drafts">
            <i class="fas fa-file-alt"></i>
        </button>

        <div class="content-container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <!-- Category Column -->
                        {{-- <div class="col-lg-2 col-md-4">
                            <h5 class="text-center mb-4">Category</h5>

                            <div class="scroll-container" style="max-height: 600px; overflow-y: auto; overflow-x: hidden;">
                                <div class="d-flex flex-column">
                                    @foreach ($category as $item)
                                    <button type="button" class="btn bg-gradient-cool-breeze btn-sm mb-2 category-link"
                                        data-categoryID="{{ $item->id }}">
                                        {{ $item->name ?? '' }}
                                    </button>
                                    @endforeach
                                </div>
                            </div>
                        </div> --}}

                        <!-- Menu Column -->
                        <div class="col-lg-6 col-md-8">
                            <div class="d-flex flex-column flex-md-row justify-content-between gap-2 mb-2">
                                <div class="d-flex align-items-center gap-2">
                                    <h4 class="mb-0">Menus</h4>
                                    <select class="form-select select2 category-link" id="categorySelect"
                                        style="min-width: 200px;">
                                        <option value="">Select Category</option>
                                        @foreach ($category as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div>
                                    <input type="text" class="form-control form-control-sm menu-item"
                                        placeholder="Search items by Name (or) Code" style="max-width: 230px;">
                                </div>
                            </div>

                            <div id="product-list" class="p-3 mb-3 menu scroll-container"
                                style="max-height: 600px; overflow-y: auto; overflow-x: hidden; background-color: #d9ecff; border-radius: 8px;">
                                <p class="text-center">Select a category to view products.</p>
                            </div>
                        </div>


                        <!-- Order Details Column -->
                        <div class="col-lg-6 col-md-12" style="background-color: white; border-radius: 17px;">
                            <form class="submit">
                                <input type="hidden" name="order_id" id="order_id">
                                @csrf
                                <div
                                    class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between mb-3 pt-2 gap-2">
                                    <h4 class="mb-0 me-md-3 flex-shrink-0">Order Details</h4>
                                    <div class="w-100">
                                        <div class="invalid-feedback client_num" style="display:none"></div>
                                        <select name="client_number" id="client-number" class="form-select select2-mobile"
                                            required>
                                            <option value="">Enter Client Number</option>
                                            @foreach ($clients as $item)
                                                <option value="{{$item->user->phone}}">{{$item->user->phone}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                    <div>
                                        <a href="javascript:void(0)" class="btn bg-gradient-cool-breeze btn-sm new-order">
                                            New Order
                                        </a>
                                    </div>

                                </div>


                                <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                                    <table class="table table-striped" id="order-table">
                                        <thead class="table-light">
                                            <tr class="sticky-top">
                                                <th class="text-xs">Product</th>
                                                <th class="text-xs">Qty</th>
                                                <th class="text-xs">Price</th>
                                                <th class="text-xs">Total</th>
                                                <th class="text-xs">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="firstRow">
                                                <td colspan="5" class="text-center">Select the Menu Items for order.
                                                </td>
                                            </tr>
                                        </tbody>

                                    </table>
                                </div>
                                <div class="container mt-3">
                                    <div class="row mb-2">
                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Order Type:</label>
                                            <select name="order_type" id="order_type"
                                                class="form-select form-select-sm w-100">
                                                <option value="">Select Order Type</option>
                                                @foreach ($order_type as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-6 table-wrapper" style="display: none;">
                                            <label class="fw-bold me-2 mb-0">Table:</label>
                                            <select name="avl_table" id="avl_table"
                                                class="form-select form-select-sm w-100">
                                                <option value="">Select Table</option>
                                                <!-- Options will be loaded via AJAX -->
                                            </select>
                                        </div>


                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Sub-Total Amount:</label>
                                            <input type="text" name="sub_total"
                                                class="form-control form-control-sm subTotal" readonly>
                                        </div>

                                        <div class="col-md-6 additional-fields" style="display: none;">
                                            <label class="fw-bold me-2 mb-0">Discount Amount:</label>
                                            <input type="number" name="discount"
                                                class="form-control form-control-sm discount">
                                        </div>
                                    </div>
                                    <div class="row mb-2 additional-fields" style="display: none;">
                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Tax Amount:</label>
                                            <input type="text" class="form-control form-control-sm tax" value="" readonly>
                                            <input type="hidden" class="tax-value"
                                                value="{{$tax->show_flg == 'Y' ? $tax->value : 0}}">
                                            <input type="hidden" name="tax_value"
                                                value="{{$tax->show_flg == 'Y' ? $tax->id : 0}}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Total Amount:</label>
                                            <input type="text" name="total_amount"
                                                class="form-control form-control-sm total-amount" readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-2 additional-fields" style="display: none;">
                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Payment Type:</label>
                                            <select name="payment_type" id="payment_type" class="form-select form-select-sm"
                                                required>
                                                <option value="">Select Payment Type</option>
                                                @foreach ($payment_mode as $item)
                                                    <option value="{{$item->id}}" {{ $item->name == 'Cash' ? 'selected' : '' }}>
                                                        {{$item->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="fw-bold me-2 mb-0">Charges</label>
                                            <input type="text" name="paid_amount" id="payment"
                                                class="form-control form-control-sm payment-amount" required>
                                        </div>
                                         <div class="col-md-12">
                                            <input type="checkbox" class="mt-3" name="copy" id="copy" value="Y">
                                            <label for="order_copy">If You want Order's copy, Check This.</label>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-wrap justify-content-end gap-2 mb-2 mt-2">
                                        {{-- <button type="button"
                                            class="btn bg-gradient-cool-breeze btn-sm saveDraft flex-grow-1 flex-md-grow-0">
                                            Save Draft
                                        </button> --}}
                                        <button type="button"
                                            class="btn bg-gradient-cool-breeze btn-sm saveOrder flex-grow-1 flex-md-grow-0">
                                            Save
                                        </button>
                                        <button type="button" style="display: none;"
                                            class="btn bg-gradient-cool-breeze btn-sm saveinvoice flex-grow-1 flex-md-grow-0">
                                            Convert
                                        </button>
                                        <a href="{{ route('order-index') }}"
                                            class="btn btn-secondary btn-sm flex-grow-1 flex-md-grow-0">
                                            Cancel
                                        </a>
                                    </div>

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

    <div class="offcanvas offcanvas-end" tabindex="-1" id="notificationPanel">
        <!-- Offcanvas content -->
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Order's</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <!-- Draft content will be loaded here -->
        </div>
    </div>
@endsection

@push('scripts')

    <script>
        $(document).ready(function () {
            let categoryID = 0;
            let productID = 0;
            loadProducts();
            loadOrder();
            $('.payment-amount').val((0).toFixed(2));

            $('.category-link').on('change', function () {
                // categoryID = $(this).data('categoryid');
                categoryID = $(this).val();

                loadProducts(categoryID);
            });
            $(document).on('click', '.select-product', function () {
                let productID = $(this).data('id');

                $.ajax({
                    url: '{{ route('get-products-details') }}',
                    type: 'GET',
                    data: { product_id: productID },
                    success: function (data) {
                        let product = data.product;
                        let existingRow = $('#order-table tbody').find(`tr[data-id="${product.id}"]`);

                        if (existingRow.length > 0) {
                            let qtyInput = existingRow.find('.qty-input');
                            let currentQty = parseInt(qtyInput.val()) || 0;
                            let newQty = currentQty + 1;

                            qtyInput.val(newQty);

                            let price = parseFloat(qtyInput.data('price')) || 0;
                            let newTotal = (newQty * price).toFixed(2);
                            existingRow.find('.total-cell input').val(newTotal);

                            updateSubTotal();
                        } else {
                            $('#order-table tbody .firstRow').remove();

                            let rowHTML = `
                                                <tr data-id="${product.id}">
                                                    <td class="text-xs">
                                                        <input 
                                                            type="text"
                                                            name="products[${product.id}][name]"
                                                            class="form-control form-control-sm"
                                                            value="${product.name}"
                                                            data-bs-toggle="tooltip"
                                                            title="${product.name}"
                                                            readonly
                                                        />                                                                                 
                                                    </td>
                                                    <td class="text-xs">
                                                        <input 
                                                            type="number"
                                                            name="products[${product.id}][quantity]"
                                                            class="form-control form-control-sm qty-input"
                                                            value="1"
                                                            min="1"
                                                            data-price="${product.unit_price}"
                                                        />
                                                    </td>
                                                    <td class="text-xs">
                                                        <input 
                                                            type="text"
                                                            name="products[${product.id}][unit_price]"
                                                            class="form-control form-control-sm"
                                                            value="${product.unit_price.toFixed(2)}"
                                                            readonly
                                                        />
                                                    </td>
                                                    <td class="text-xs total-cell">
                                                        <input 
                                                            type="text"
                                                            name="products[${product.id}][total]"
                                                            class="form-control form-control-sm"
                                                            value="${product.unit_price.toFixed(2)}"
                                                            readonly
                                                        />
                                                    </td>
                                                    <td class="text-xs text-center">
                                                        <i class="fa fa-trash text-danger remove-row mt-2" style="cursor: pointer;"></i>
                                                    </td>
                                                </tr>
                                                <tr class="note-row" data-id="${product.id}">
                                                <td colspan="5">
                                                    <input 
                                                        type="text"
                                                        name="products[${product.id}][note]"
                                                        class="form-control form-control-sm product-note"
                                                        placeholder="Enter a note"
                                                        data-bs-toggle="tooltip"
                                                        title=""
                                                    />
                                                </td>
                                            </tr>
                                            `;

                            $('#order-table tbody').append(rowHTML);
                            initializeTooltips();
                            updateSubTotal();
                        }
                    },
                    error: function (xhr) {
                        console.error("Error fetching product details.");
                    }
                });
            });

            $('.new-order').on('click', function () {
                clearFormFields();
            });

            $(document).on('input', '.qty-input', function () {
                let $row = $(this).closest('tr');
                recalculateRowTotal($row);
                updateSubTotal();
            });


            // Remove Row
            $(document).on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
                updateSubTotal();
                if ($('#order-table tbody tr').length === 0) {
                    $('#order-table tbody').append(`<tr class="firstRow"><td colspan="5" class="text-center">Select the menu items for order.</td></tr>`);
                }
            });

            // calculate discount
            $('.discount').on('input', function () {
                updateSubTotal();
            });

            $('.menu-item').on('change', function () {
                let searchItem = $(this).val();
                loadProducts('', searchItem);

            });

            $(document).ready(function () {
                setTimeout(() => {
                    $('#client-number').select2({
                        placeholder: "Search or Type client number",
                        allowClear: true,
                        tags: true,
                        tokenSeparators: [',', ' '],
                        width: '60%',
                        createTag: function (params) {
                            if (params.term.trim() === '') return null;
                            return { id: params.term, text: params.term };
                        }
                    });
                }, 500);
            });
            $('.saveOrder').on('click', function () {

                let form = $('.submit')[0];
                let formData = new FormData(form);
                if (!validate()) {
                    return;
                }
                saveOrder(formData);
            });

            // $(document).on('click', '.edit-order', function () {
            //     let orderID = $(this).data('id');
            //     let hasProductRows = $('#order-table tbody tr').not('.firstRow').length > 0;

            //     if (hasProductRows) {
            //         clearFormFields();
            //     }
            //     $('.additional-fields').hide();
            //     fetchOrder(orderID);
            // });
            $(document).on('click', '.edit-order', function () {
                let orderID = $(this).data('id');
                let form = $('.submit')[0];
                let formData = new FormData(form);

                let hasProductRows = $('#order-table tbody tr').not('.firstRow').length > 0;
                let selectedTable = $('#avl_table').val();

                if (hasProductRows && selectedTable) {
                    saveOrder(formData).then(function (success) {
                        if (success) {
                            clearFormFields();
                            $('.additional-fields').hide();
                            fetchOrder(orderID);
                            closeOffcanvas();
                        }
                    });
                } else {
                    clearFormFields();
                    $('.additional-fields').hide();
                    fetchOrder(orderID);
                    closeOffcanvas();
                }
            });

            // $(document).on('click', '.convert-order', function () {
            //     let orderID = $(this).data('id');
            //     let hasProductRows = $('#order-table tbody tr').not('.firstRow').length > 0;

            //     if (hasProductRows) {
            //         clearFormFields();
            //     }
            //     $('.additional-fields').show();
            //     $('.saveOrder').hide();
            //     $('.saveinvoice').show();
            //     fetchOrder(orderID);

            // });
            $(document).on('click', '.convert-order', function () {
                let orderID = $(this).data('id');
                let form = $('.submit')[0];
                let formData = new FormData(form);

                let hasProductRows = $('#order-table tbody tr').not('.firstRow').length > 0;
                let selectedTable = $('#avl_table').val();

                // Only save if there are product rows AND a table is selected
                if (hasProductRows && selectedTable) {
                    saveOrder(formData).then(function (success) {
                        if (success) {
                            clearFormFields();
                            $('.additional-fields').show();
                            $('.saveOrder').hide();
                            $('.saveinvoice').show();
                            fetchOrder(orderID);
                            closeOffcanvas();
                        }
                    });
                } else {
                    // Just clear and load the order for conversion without saving
                    clearFormFields();
                    $('.additional-fields').show();
                    $('.saveOrder').hide();
                    $('.saveinvoice').show();
                    fetchOrder(orderID);
                    closeOffcanvas();
                }
            });

            $('.saveinvoice').on('click', function () {

                let form = $('.submit')[0];
                let formData = new FormData(form);
                if (!validate()) {
                    return;
                }
                $.ajax({
                    url: '{{ route("order-convert") }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            $('.saveOrder').show();
                            $('.saveinvoice').hide();
                            $('.additional-fields').hide();
                            window.open(response.redirect_url, '_blank');
                            clearFormFields();
                            loadOrder();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.error || 'Unknown error occurred.'
                            });
                        }
                    },
                    error: function (xhr) {
                        let errorMsg = "Something went wrong!";

                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            errorMsg = Object.values(errors).map(errArray => errArray.join('\n')).join('\n\n');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error!',
                            text: errorMsg,
                            customClass: {
                                popup: 'text-start'
                            }
                        });
                        console.log(xhr.responseText);
                    }


                });
            });

            $('#order_type').on('change', function () {
                const orderType = $(this).val();

                if (orderType == 1) {
                    $('.table-wrapper').show();
                    loadTables();
                } else {
                    $('.table-wrapper').hide();
                    $('#avl_table').empty();
                }
            });




        });

        function updateSubTotal() {
            let subTotal = 0;
            $('#order-table tbody tr').each(function () {
                rowTotal = parseFloat($(this).find('.total-cell input').val() || 0);

                subTotal += rowTotal;
            });

            $('.subTotal').val(subTotal.toFixed(2));
            updateTaxAmount(subTotal);
        }

        function recalculateRowTotal($row) {
            let qty = parseFloat($row.find('.qty-input').val());
            let price = parseFloat($row.find('.qty-input').data('price'));
            let total = (qty * price).toFixed(2);
            $row.find('.total-cell input').val(total);
        }
        function updateTaxAmount(subTotal) {
            const taxPercent = parseFloat($('.tax-value').val()) || 0;
            let taxAmount = 0;

            if (taxPercent > 0) {
                const taxValue = taxPercent / 100;
                taxAmount = subTotal * taxValue;
            }

            $('.tax').val(taxAmount.toFixed(2));
            totalAmount(subTotal, taxAmount);
        }

        function totalAmount(subTotal, taxAmount) {
            let discount = 0;
            discount = $('.discount').val();
            let total_amount = (subTotal + taxAmount) - discount;
            $('.total-amount').val(Math.floor(total_amount).toFixed(2));
            $('.payment-amount').val(Math.floor(total_amount).toFixed(2));
        }

        function initializeTooltips() {
            const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.forEach(tooltipTriggerEl => {
                new bootstrap.Tooltip(tooltipTriggerEl);
            });

            $('.product-note').off('input').on('input', function () {
                const tooltipInstance = bootstrap.Tooltip.getInstance(this);
                const note = this.value;

                this.setAttribute('title', note);

                if (tooltipInstance) {
                    tooltipInstance.setContent({ '.tooltip-inner': note });
                }
            });
        }
        function loadProducts(categoryID = null, searchItem = null) {
            let requestData = {};

            if (categoryID !== null) {
                requestData.category_id = categoryID;
            }

            if (searchItem !== null && searchItem.trim() !== '') {
                requestData.search = searchItem.trim();
            }

            $.ajax({
                url: '{{ route('get-products') }}',
                type: 'GET',
                data: requestData,
                success: function (data) {
                    $('#product-list').empty();

                    if (data.product.length === 0) {
                        $('#product-list').html(`
                                        <div class="empty-state text-center py-4">
                                            <i class="fas fa-utensils fa-3x text-muted mb-3"></i>
                                            <p class="text-muted">No menu items found</p>
                                        </div>
                                    `);
                    } else {
                        let productGrid = $('<div class="product-grid"></div>');

                        $(data.product).each(function (index, product) {
                            let imageUrl = product.products_image || '/assets/img/cart.png';
                            let productCard = $(`
                                            <div class="product-card">
                                                <a href="javascript:void(0);" data-id="${product.id}" class="select-product text-decoration-none">
                                                    <div class="product-image-container">
                                                        <img src="${imageUrl}" class="product-image" alt="${product.name}" loading="lazy">
                                                    </div>
                                                    <div class="product-info">
                                                        <p class="product-name mb-0">${product.name}</p>                                   
                                                    </div>
                                                </a>
                                            </div>
                                        `);

                            productGrid.append(productCard);
                        });

                        $('#product-list').append(productGrid);
                    }
                },
                error: function () {
                    $('#product-list').html(`
                                    <div class="error-state text-center py-4">
                                        <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                                        <p class="text-danger">Error loading products. Please try again.</p>
                                    </div>
                                `);
                }
            });
        }
        function clearFormFields() {
            $('.submit')[0].reset();
            $('#client-number').val(null).trigger('change');
            $('.client_num').hide();
            $('#order-table tbody').empty();
            $('#order_type').val('').trigger('change');
            $('#order_id').val('');
            $('.additional-fields').hide();
            if ($('#order-table tbody tr').length === 0) {
                $('#order-table tbody').append(`<tr class="firstRow"><td colspan="5" class="text-center">Select the menu items for order.</td></tr>`);
            }
        }
        $('#client-number').on('change', function () {
            validate();
        })

        function saveOrder(formData) {
            return new Promise(function (resolve, reject) {
                let selectedTable = $('#avl_table').val();
                let productCount = $('#order-table tbody tr').not('.firstRow').length;

                $('.error-message').remove();
                let hasError = false;

                // if (!selectedTable) {
                //     $('#avl_table').after('<div class="text-danger error-message mt-1">Please select a table.</div>');
                //     hasError = true;
                // }

                if (productCount === 0) {
                    $('#order-table').before('<div class="text-danger text-center error-message mt-1">Please add at least one menu item.</div>');
                    hasError = true;
                }

                if (hasError) {
                    resolve(false);
                    return;
                }

                $.ajax({
                    url: '{{ route("order-store") }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            clearFormFields();
                            loadOrder();
                            loadTables();
                            resolve(true);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.error || 'Unknown error occurred.'
                            });
                            resolve(false);
                        }
                    },
                    error: function (xhr) {
                        let errorMsg = "Something went wrong!";
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            errorMsg = Object.values(errors).map(errArray => errArray.join('\n')).join('\n\n');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error!',
                            text: errorMsg,
                            customClass: {
                                popup: 'text-start'
                            }
                        });
                        resolve(false);
                    }
                });
            });
        }

        function loadOrder() {
            $.ajax({
                url: '{{ route('get-orders') }}',
                type: 'GET',
                success: function (data) {

                    $('.offcanvas-body').empty();

                    if (data.order.length === 0) {
                        $('.offcanvas-body').html(`
                                            <div class="alert alert-info">No orders found</div>
                                        `);
                        return;
                    }

                    let tableHTML = `
                                            <div class="table-responsive">
                                                <table class="table table-hover table-sm text-xxs">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th class="text-wrap">Table (or) Type</th>
                                                            <th>Order ID</th>
                                                            <th>Date</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                        `;

                    $(data.order).each(function (index, item) {
                        let orderDate = item.created_at ? new Date(item.created_at).toLocaleDateString() : 'N/A';                       

                        tableHTML += `
                                        <tr>
                                            <td>${item.table?.table_name || item.order_type?.name || '—'}</td>
                                            <td>${item.order_id}</td>
                                            <td>${orderDate}</td>
                                            <td class="text-nowrap text-center">
                                                <a href="javascript:void(0)" class="edit-order me-2 text-info" data-id="${item.id}" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="convert-order text-success" data-id="${item.id}" title="Convert">
                                                    <i class="fa-solid fa-right-left"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    `;
                    });


                    tableHTML += `
                                                </tbody>
                                            </table>
                                        </div>
                                    `;

                    $('.offcanvas-body').html(tableHTML);
                },
                error: function (xhr) {
                    $('.offcanvas-body').html(`
                                        <div class="alert alert-danger">Failed to load orders. Please try again.</div>
                                    `);
                }
            });
        }

        function closeOffcanvas() {
            const offcanvasEl = document.getElementById('notificationPanel');
            const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl) || bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);
            offcanvas.hide();
        }

        function fetchOrder(orderID) {
            $.ajax({
                url: '{{ route('get-orders') }}',
                type: 'GET',
                data: { ordersId: orderID },
                success: function (data) {
                    if (data.order && data.order.length > 0) {
                        let draft = data.order[0];
                        $('#order_id').val(draft.id);
                        if (draft.order_type) {
                            $('#order_type').val(draft.order_type.id).trigger('change');
                        }
                        $('#avl_table').val(draft.table_id);
                        loadTables(draft.table_id);
                        $('#note').val(draft.note);
                        let items = draft.orders_item;
                        if (draft.client) {
                            $('#client-number').val(draft.client.user.phone).trigger('change');
                        }
                        $('#order-table tbody .firstRow').remove();
                        $('#order-table tbody').empty();

                        $(items).each(function (index, product) {
                            let rowHTML = `
                                        <tr data-id="${product.product_id}">
                                            <td class="text-xs">
                                        <input type="text"
                                               name="products[${product.product_id}][name]"
                                               class="form-control form-control-sm"
                                               value="${product.product_name}"
                                               data-bs-toggle="tooltip"
                                               title="${product.product_name}"
                                               readonly /><br>
                                        <input 
                                            type="text"
                                            name="products[${product.product_id}][note]"
                                            class="form-control form-control-sm product-note"
                                            value="${product.note || ''}"
                                            placeholder="Enter a note"
                                            data-bs-toggle="tooltip"
                                            title="${product.note || 'Enter a note'}"
                                        />
                                    </td>

                                            <td class="text-xs">
                                                <input type="number"
                                                        name="products[${product.product_id}][quantity]"
                                                        class="form-control form-control-sm qty-input"
                                                        value="${product.quantity}"
                                                        min="1"
                                                        data-price="${product.price}" />
                                            </td>
                                            <td class="text-xs">
                                                <input type="text"
                                                        name="products[${product.product_id}][unit_price]"
                                                        class="form-control form-control-sm"
                                                        value="${parseFloat(product.price).toFixed(2)}"
                                                        readonly />
                                            </td>
                                            <td class="text-xs total-cell">
                                                <input type="text"
                                                        name="products[${product.product_id}][total]"
                                                        class="form-control form-control-sm"
                                                        readonly />
                                            </td>
                                            <td class="text-xs text-center">
                                                <i class="fa fa-trash text-danger remove-row mt-2"></i>
                                            </td>
                                        </tr>`;
                            $('#order-table tbody').append(rowHTML);
                        });

                        // Recalculate totals
                        $('#order-table tbody tr').each(function () {
                            recalculateRowTotal($(this));
                        });

                        initializeTooltips();
                        updateSubTotal();
                    }
                },
                error: function (xhr) {
                    console.error('Error loading draft:', xhr);
                }
            });
        }


        function validate() {
            let client_number = $('#client-number').val();

            if (!client_number) {
                $('.client_num').text('Client number is required.').show();

                $('#client-number').addClass('is-invalid');

                return false;
            } else {
                $('.client_num').text('').hide();
                $('#client-number').removeClass('is-invalid');
                return true;
            }
        }

        function loadTables(selectedTableId = null) {
            $.ajax({
                url: '{{ route("get-tables") }}',
                type: 'GET',
                success: function (response) {
                    $('#avl_table').empty().append(`<option value="">Select Table</option>`);

                    $.each(response.tables, function (index, table) {
                        if (table.table_status == 1 || table.id == selectedTableId) {
                            const isSelected = selectedTableId && table.id == selectedTableId ? 'selected' : '';
                            let label = table.table_name;

                            if (table.table_status != 1 && table.id == selectedTableId) {
                                label += ' (Occupied)';
                            }

                            $('#avl_table').append(
                                `<option value="${table.id}" ${isSelected}>${label}</option>`
                            );
                        }
                    });
                },
                error: function () {
                    alert('Error loading tables');
                }
            });
        }

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleButton = document.getElementById('toggleOffcanvas');
            const offcanvasElement = document.getElementById('notificationPanel');
            const offcanvas = new bootstrap.Offcanvas(offcanvasElement);

            // Toggle offcanvas on icon click
            toggleButton.addEventListener('click', () => {
                if (offcanvasElement.classList.contains('show')) {
                    offcanvas.hide();
                } else {
                    offcanvas.show();
                }
            });

            // Change icon when offcanvas is shown/hidden (optional)
            offcanvasElement.addEventListener('shown.bs.offcanvas', () => {
                toggleButton.innerHTML = '<i class="fas fa-times"></i>';
            });

            offcanvasElement.addEventListener('hidden.bs.offcanvas', () => {
                toggleButton.innerHTML = '<i class="fas fa-file-alt"></i>';
            });
        });
    </script>



@endpush