@php
    $hasAdvancedFilters = false;

    if (request()->filled('menu_items') || request()->filled('customers') || request()->filled('staffs') || request()->filled('order_number') || request()->filled('placed_from') ) {
        $hasAdvancedFilters = true;
    }
@endphp
@php $user_session = session('restaurant'); @endphp
@extends('layouts.customer')

@section('content')
<link rel="stylesheet" href="{{ secure_url('css/bootstrap-multiselect.css')}}">
<style type="text/css">
    .placed div.btn-group {
        width: 100%;
    }

    .placed .multiselect.dropdown-toggle.btn.btn-default {
        position: relative;
        border: 1px solid #d7d7d7;
        border-radius: 0.1rem !important;
    }

    .placed .dropdown-toggle::after {
        position: absolute;
        top: 8px;
        right: 5px;
        font-size: 17px;
    }

    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 79%;
    }
    ul.multiselect-container.dropdown-menu.show {
    width: 100%;
}
.dropdown-toggle::after{
    margin-top: 7px;
    font-size: 17px;
}
</style>
<style type="text/css"> 
    #DataTables_Table1 #confirmed_green{background-color: #3e884f !important; }
    #DataTables_Table1 a, #DataTables_Table1 span, #DataTables_Table1  td, #DataTables_Table1 th{font-family: inter !important;}
</style>

<style>
    .sorting_1 a.d-flex {
        padding: 0px !important;
        background: transparent !important;
        border-radius: 0px !important;
    }

    /* .select2-container--bootstrap .select2-results__option[aria-selected="true"] */
    [aria-selected="true"] {
        color: #ffffff !important;
        background-color:rgb(148, 149, 150) !important;
    }

    .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
        width: 100% !important;
    }
</style>

<!-- <main class="default-transition" style="opacity: 1;"> -->
        <div class="container-fluid disable-text-selection">
            <div class="row">
                <div class="col-12">
                    <div class="mb-2">
                        <h1>Orders</h1>
                        <div class="top-right-button-container"></div>
                        <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                            <ol class="breadcrumb pt-0">
                                <li class="breadcrumb-item">
                                    <a href="{{url('/')}}/dashboard">Dashboard</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">All Orders</li>
                            </ol>
                        </nav>

                        <div class="btn-group mb-1 float-right date-filter">
                            <button class="btn btn-secondary btn-sm dropdown-toggle date-filter-submit" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @php
                                    $filter = '';
                                    if( request()->get('filter') ) {
                                        if( request()->get('filter') == 'this_week' ) {
                                            $filter = 'This Pay Period';
                                        } else if( request()->get('filter') == 'last_week' ) {
                                            $filter = 'Last Pay Period';
                                        } else {
                                            $filter = ucfirst(str_replace("_", " ", request()->get('filter')));
                                        }
                                    } else {
                                        $filter = 'Today';
                                    }

                                @endphp
                                {{ $filter }}
                            </button>
                            <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 36px, 0px);cursor: pointer;">
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'today' ) current @endif" data-filter="today">Today</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'yesterday' ) current @endif" data-filter="yesterday">Yesterday</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'this_week' ) current @endif" data-filter="this_week">This Week</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'last_week' ) current @endif" data-filter="last_week">Last Week</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'this_month' ) current @endif" data-filter="this_month">This Month</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'last_month' ) current @endif" data-filter="last_month">Last Month</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'all_time' ) current @endif" data-filter="all_time">All Time</a>
                                <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'custom' ) current @endif" data-filter="custom">Custom</a>
                                <!-- <a class="dropdown-item date-filter-item @if( request()->get('filter') == 'today' ) current @endif">Last Year</a> -->
                                
                            </div>
                            <div class="@if( request()->get('filter') == 'custom' ) d-flex @else d-none @endif align-items-center custom-date-range-filter">                                
                                <label class="mb-0 ml-2 mr-2">From</label>
                                <input max="{{ now()->format('m/d/Y') }}" class="form-control datepicker date custom-from-date mr-2" type="text" style="width: 150px;" value="@if( request()->get('filter') == 'custom' && request()->get('from') ) {{ request()->get('from') }} @else {{ now()->format('m/d/Y') }} @endif">
                                <label class="mb-0 mr-2">To</label>
                                <input min="{{ now()->format('m/d/Y') }}" class="form-control datepicker date custom-to-date mr-2" type="text" style="width: 150px;" value="@if( request()->get('filter') == 'custom' && request()->get('to') ) {{ request()->get('to') }} @else {{ now()->format('m/d/Y') }} @endif">
                                <button class="btn btn-primary custom-form-submit ml-2">Submit</button>
                            </div>
                            {!! Form::open(['method' => 'GET', 'id' => 'date-filter-form', 'style'=>'display:inline']) !!}
                                {{ Form::hidden( 'to', request()->get('to') ?? '' ) }}
                                {{ Form::hidden( 'from', request()->get('from') ?? '' ) }}
                                {{ Form::hidden( 'filter', request()->get('filter') ?? 'today' ) }}

                                <!-- Hidden input containers -->
                                <div id="menu-items-hidden-wrapper"></div>
                                <div id="customers-hidden-wrapper"></div>
                                <div id="staffs-hidden-wrapper"></div>
                                <div id="order-hidden-wrapper"></div>

                                <input type="hidden" name="order_number" id="order_number_hidden" value="{{ request('order_number') }}">

                                <button type="submit" class="btn btn-info" style="display:none">Submit</button>
                            {!! Form::close() !!}

                            <!-- Advanced Filter Toggle Button -->
                            <!-- <div class="d-flex justify-content-end mb-3"> -->
                            <div>
                                <button class="btn btn-outline-primary btn-sm ml-2" id="toggle-advanced-filters">
                                    <i class="simple-icon-equalizer"></i> Advanced Filters

                                    @if ($hasAdvancedFilters)
                                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white">
                                            ●
                                            <span class="sr-only">Filters applied</span>
                                        </span>
                                    @endif
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row">
                <div class="col-12 px-1">
                    <div id="advanced-filters-section" class="card mb-4 {{ $hasAdvancedFilters ? '' : 'd-none' }}">
                        <div class="card-body">
                            <h5 class="mb-4">Advanced Filters</h5>
                            <form class="form-row">
                                <!-- Order Number -->
                                <div class="form-group col-md-3">
                                    <label for="order_number_advanced">Order Number</label>
                                    <input 
                                        type="text" 
                                        name="order_number" 
                                        class="form-control" 
                                        id="order_number_advanced" 
                                        placeholder="Order number" 
                                        value="{{ request('order_number') }}" 
                                    />
                                </div>

                                <!-- Menu Items Multi-Select -->
                                <div class="form-group col-md-3">
                                    <label for="advanced-menu-select">Menu Items</label>
                                    <select id="advanced-menu-select" class="form-control select2-multiple" data-width="100%" data-placeholder="Select Menu Items" name="menu_items[]" multiple>
                                        @foreach($menuItems as $item)
                                            <option value="{{ $item->id }}" {{ in_array($item->id, request()->input('menu_items', [])) ? 'selected' : '' }}>
                                                {{ $item->item_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Customers Multi-Select -->
                                <div class="form-group col-md-3">
                                    <label for="advanced-customer-select">Customers</label>
                                    <select id="advanced-customer-select" class="form-control select2-multiple" data-width="100%" data-placeholder="Select Customers" name="customers[]" multiple>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ in_array($customer->id, request()->input('customers', [])) ? 'selected' : '' }}>
                                                @if('' != trim($customer->name))
                                                    {{ $customer->name }}
                                                @elseif('' != trim($customer->phone))
                                                    {{ $customer->phone }} 
                                                    @if(0 == $customer->user_type)
                                                        <span class="text-muted">
                                                            ({{ $customer->email ?? '' }}) 
                                                        </span>
                                                    @else
                                                        <span class="text-muted">
                                                            {{ '(Guest)' }}
                                                        </span>
                                                    @endif
                                                @else 
                                                    {{ $customer->email ?? 'Guest' }}
                                                @endif
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Staffs Multi-Select -->
                                <div class="form-group col-md-3">
                                    <label for="advanced-staff-select">Staffs</label>
                                    <select id="advanced-staff-select" class="form-control select2-multiple" data-width="100%" data-placeholder="Select Staffs" name="staffs[]" multiple>
                                        @foreach($staffs as $staff)
                                            <option value="{{ $staff->id }}" {{ in_array($staff->id, request()->input('staffs', [])) ? 'selected' : '' }}>
                                                {{ $staff->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group placed col-md-3">
                                    <label for="placed-from">Placed from</label>
                                    <select class="form-control" id="placed-from" name="placed_from[]" data-width="100%" multiple="multiple">
                                        <option value="app" @if( collect(old('placed_from', request()->input('placed_from')))->contains('app') ) selected @endif>APP</option>                         
                                        <option value="pos" @if( collect(old('placed_from', request()->input('placed_from')))->contains('pos') ) selected @endif>POS</option>                         
                                        <option value="website" @if( collect(old('placed_from', request()->input('placed_from')))->contains('website') ) selected @endif>WEBSITE</option>                         
                                    </select>
                                </div>

                                <!-- Date Range -->
                                <!-- <div class="form-group col-md-4">
                                    <label for="date_range">Order Date</label>
                                    <input type="text" class="form-control datepicker" name="date_range" placeholder="Select date range">
                                </div> -->

                                <!-- Apply Button -->
                                <div class="form-group col-md-12 mt-3">
                                    <button type="button" class="btn btn-primary" id="apply-advance-filter">Apply Filters</button>
                                    <a href="{{ url('/orders/ajax-view', []) }}?filter={{ request()->get('filter') ?? 'today' }}" class="btn btn-outline-secondary">Reset</a>
                                </div>

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

            <div class="row mb-4">
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($totalOrders) href="{{ order_page_box_url() }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $totalOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Total Orders</p>
                            </div>
                            <!-- <i class="iconsminds-clock" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($pendingOrders) href="{{ order_page_box_url('pending') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $pendingOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Pending Orders</p>
                            </div>
                            <!-- <i class="iconsminds-clock" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <!-- <i class="fas fa-arrow-right" aria-hidden="true"></i> -->
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($confirmedOrders) href="{{ order_page_box_url('confirmed') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $confirmedOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Confirmed Orders</p>
                            </div>
                            <!-- <i class="iconsminds-clock" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($completedOrders) href="{{ order_page_box_url('completed') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $completedOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Completed Orders</p>
                            </div>
                            <!-- <i class="iconsminds-basket-coins" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($refundedOrders) href="{{ order_page_box_url('refunded') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $refundedOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Refund Requests</p>
                            </div>
                            <!-- <i class="iconsminds-arrow-refresh" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <!-- <i class="fas fa-arrow-right" aria-hidden="true"></i> -->
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($cancelledOrders) href="{{ order_page_box_url('cancelled') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $cancelledOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Cancelled Orders</p>
                            </div>
                            <!-- <i class="simple-icon-close" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <!-- <i class="fas fa-arrow-right" aria-hidden="true"></i> -->
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($unpaidOrders) href="{{ order_page_box_url('unpaid') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">{{ $unpaidOrders ?? '0' }}</p>
                                <p class="card-text mb-0">Payment Failed</p>
                            </div>
                            <!-- <i class="simple-icon-close" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <!-- <i class="fas fa-arrow-right" aria-hidden="true"></i> -->
                        </div>
                    </a>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 px-1">
                    <a @if($totalDiscounts) href="{{ order_page_box_url('discounted') }}" @endif class="card mb-2" style="border-radius: 10px; overflow: hidden;">
                        <div class="card-body" style="display: flex; align-items: center; padding: 10px 15px;">
                            <div class="flex-1" style="flex-direction: column;">
                                <p class="lead">${{ round($totalDiscounts,2) ?? '0' }}</p>
                                <p class="card-text mb-0">Total Discounts</p>
                            </div>
                            <!-- <i class="simple-icon-close" style="font-size: 36px;"></i> -->
                        </div>
                        <div style="background: rgb(169, 42, 63); padding: 5px 15px; display: flex; align-items: center; color: rgb(255, 255, 255);">
                            <div class="flex-1">More info</div>
                            <!-- <i class="fas fa-arrow-right" aria-hidden="true"></i> -->
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">                                    
                            <table class="data-table data-table-no-pagination responsive nowrap" data-order="[[ 0, &quot;desc&quot; ]]"> 
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Customer</th>
                                        <th scope="col">Placed</th>
                                        <th scope="col">Employee</th>
                                        <th scope="col">Placed</th>
                                        <th scope="col">Payment</th>
                                        <th scope="col">Discount</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- </main> -->
@endsection

@section('script')
<script type="text/javascript">   
    ;(function($) {
        // Datatables
        let table;
        const params = {...getDateFilterParams(), ...getUrlParams()}; 
        function loadDataTable() {
            if ($().DataTable) {
                table = $(".data-table-no-pagination").DataTable({
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    ajax: {
                        url: "{{ route('orders.ajax', compact('account')) }}",
                        data: function (d) {
                            const final = buildDateFilterParams(params);
                            Object.assign(d, final);
                        }
                    },
                    responsive: false,
                    pageLength: 10,
                    lengthMenu: [5, 10, 25, 50],
                    columns: [
                        { data: 'id' },
                        { data: 'customer' },
                        { data: 'date' },
                        { data: 'employee' },
                        { data: 'placed' },
                        { data: 'payment' },
                        { data: 'discount' },
                        { data: 'amount' },
                        { data: 'status' },
                        { data: 'action' }
                    ],
                    sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                });
            }
        }

        function getUrlParams() {
            const params = new URLSearchParams(window.location.search);
            const query = {};

            for (const [key, value] of params.entries()) {
                const isArrayKey = key.endsWith('[]');
                const cleanKey = isArrayKey ? key.slice(0, -2) : key;

                if (query[cleanKey]) {
                    query[cleanKey] = [].concat(query[cleanKey], value);
                } else {
                    // Ensure array keys always return arrays
                    query[cleanKey] = isArrayKey ? [value] : value;
                }
            }

            return query;
        }

        // function getUrlParams() {
        //     return Object.fromEntries(new URLSearchParams(window.location.search));
        // }

        function getDateFilterParams() {
            const formData = new FormData(document.getElementById('date-filter-form'));
            return Object.fromEntries(formData.entries());
        }

        $(document).ready(function () {
            loadDataTable();
        });

        function pad(n){ return n < 10 ? '0' + n : '' + n; }
        function fmtLocal(d){
            return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
        }
        // Accepts Date or string; returns YYYY-MM-DD (local) or null
        function normalizeDate(val){
            if (!val) return null;

            // If already in YYYY-MM-DD, quick return
            if (/^\d{4}-\d{2}-\d{2}$/.test(val)) return val;

            // Try parsing (handles common formats like "MM/DD/YYYY" or "YYYY/MM/DD")
            const parsed = new Date(val);
            if (isNaN(parsed)) return null;

            return fmtLocal(parsed);
        }

        function buildDateFilterParams(params = {}) {
            const today = new Date();
            const clone = d => new Date(d);

            const monthRange = (year, month) => {
                const first = new Date(year, month, 1);
                const last  = new Date(year, month + 1, 0);
                return { from: fmtLocal(first), to: fmtLocal(last) };
            };

            const weekRangeContaining = (d) => {
                // Monday..Sunday (ISO-like)
                const dt = clone(d);
                const day = dt.getDay();               // 0=Sun .. 6=Sat
                const isoDay = day === 0 ? 7 : day;    // 1=Mon .. 7=Sun
                const monday = clone(dt); monday.setDate(dt.getDate() - isoDay + 1);
                const sunday = clone(monday); sunday.setDate(monday.getDate() + 6);
                return { from: fmtLocal(monday), to: fmtLocal(sunday) };
            };

            const ranges = {
                today: () => ({ from: fmtLocal(today), to: fmtLocal(today) }),
                yesterday: () => {
                const y = clone(today); y.setDate(today.getDate() - 1);
                return { from: fmtLocal(y), to: fmtLocal(y) };
                },
                this_week: () => weekRangeContaining(today),
                last_week: () => {
                const thisWeek = weekRangeContaining(today);
                const start = new Date(thisWeek.from); start.setDate(start.getDate() - 7);
                const end   = new Date(thisWeek.to);   end.setDate(end.getDate() - 7);
                return { from: fmtLocal(start), to: fmtLocal(end) };
                },
                this_month: () => monthRange(today.getFullYear(), today.getMonth()),
                last_month: () => {
                const prev = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                return monthRange(prev.getFullYear(), prev.getMonth());
                },
                custom: () => ({ from: normalizeDate(params.from) || null, to: normalizeDate(params.to) || null }),
                all_time: () => ({ from: null, to: null, filter: null })
            };

            const key = params.filter;
            const fn = ranges[key];
            if (!fn) return { ...params, from: normalizeDate(params.from) || null, to: normalizeDate(params.to) || null, filter: key ?? null };

            const result = fn();
            const outFilter = key === 'all_time' ? null : key;
            return { ...params, ...result, filter: outFilter };
        }
    })(jQuery);
</script>

<script src="{{ secure_url('js/bootstrap-multiselect.min.js')}}"></script>
<script type="text/javascript">   
    ;(function($){        
        $(document).ready(function() {
            // placed-from
            $('#placed-from').multiselect({
                includeSelectAllOption: true,
                nonSelectedText:'Choose placed from'
            });

            $('.date-filter .date-filter-item').on('click', function() {
                let dateFilterText = $(this).text(),
                    dateFilterItem = $(this).data('filter');
                // Check for base case
                if( $(this).hasClass('current') ) return;

                $(this).addClass('current'); // set current
                $('.date-filter').find('button.date-filter-submit').text( dateFilterText ); 

                $("#date-filter-form").find("[name=filter]")
                    .val( dateFilterItem );
                
                // Don't submit on custom filter
                if( "custom" == dateFilterItem ) {
                    // Display the custom filter
                    $(".custom-date-range-filter").removeClass("d-none").addClass("d-flex");
                    return;
                } else {
                    // Remove fromDate and toDate for other filters
                    $("#date-filter-form").find("[name=to]").remove();
                    $("#date-filter-form").find("[name=from]").remove();
                    
                    // Hide the custom filter
                    $(".custom-date-range-filter").addClass("d-none").removeClass("d-flex");
                }

                $("#date-filter-form").submit();
            });

            $('.custom-form-submit').on('click', function() {
                let fromDate    =   $(".custom-from-date").val(), 
                    toDate      =   $(".custom-to-date").val();
                $("#date-filter-form").find("[name=from]")
                    .val( fromDate.trim() );
                $("#date-filter-form").find("[name=to]")
                    .val( toDate.trim() );
                
                // Then submit the form
                $("#date-filter-form").submit();
            });

            $('#apply-advance-filter').on('click', function() {                
                // Then submit the form
                $("#date-filter-form").submit();
            });

            /*
            // Init Datatable
            if($("#DataTables_Table_00").length){
                // Datatable with rows
                var $dataTableRows = $('#DataTables_Table_00').DataTable({
                    bLengthChange: false,
                    destroy: true,
                    info: false,
                    sDom: '<"row view-filter"<"col-sm-12 mb-2"<"float-left"l><"float-right d-flex align-items-center"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                    drawCallback: function () {
                        $(".dataTables_wrapper .pagination").addClass("d-none");
                        var api = $(this).dataTable().api();
                        $("#pageCountDatatable span").html("Displaying " + parseInt(api.page.info().start + 1) + "-" + api.page.info().end + " of " + api.page.info().recordsTotal + " items");
                    }
                });
                /*
                $("#searchDatatable").on("keyup", function (event) {
                    $dataTableRows.search($(this).val()).draw();
                });

                $("#pageCountDatatable .dropdown-menu a").on("click", function (event) {
                    var selText = $(this).text();
                    $dataTableRows.page.len(parseInt(selText)).draw();
                });* /
            }*/
        });

    })(jQuery);

    $(document).ready(function () {
        // $('#DataTables_Table1').DataTable({
        //     "paging": true,
        //     "ordering": true,
        //     "searching": true,
        //     "info": true,
        //     "lengthChange": true,
        //     "language": {
        //         "paginate": {
        //             "previous": "Previous",
        //             "next": "Next"
        //         },
        //         "search": "Search:",
        //         "lengthMenu": "Show _MENU_ entries",
        //         "info": "Showing _START_ to _END_ of _TOTAL_ entries",
        //         "emptyTable": "No data available in table",
        //         "zeroRecords": "No matching records found",
        //         "loadingRecords": "Loading...",
        //         "processing": "Processing..."
        //     },
        //     // ... (optional column customizations)
        // });

        // Toggle Advanced Filters
        $('#toggle-advanced-filters').click(function() {
            $('#advanced-filters-section').toggleClass('d-none');
        });

        function syncSelections(selectors, wrapper, inputName) {
            let allSelected = [];

            selectors.forEach(function(selector) {
            allSelected = allSelected.concat($(selector).val() || []);
            });

            // Unique values only
            let uniqueSelected = [...new Set(allSelected)];

            // Clear old hidden inputs
            $(wrapper).html('');

            // Add hidden inputs
            uniqueSelected.forEach(function(value) {
            $(wrapper).append(`<input type="hidden" name="${inputName}[]" value="${value}">`);
            });
        }

        function syncAll() {
            syncSelections(['#advanced-menu-select'], '#menu-items-hidden-wrapper', 'menu_items');
            syncSelections(['#advanced-customer-select'], '#customers-hidden-wrapper', 'customers');
            syncSelections(['#advanced-staff-select'], '#staffs-hidden-wrapper', 'staffs');
            syncSelections(['#placed-from'], '#order-hidden-wrapper', 'placed_from');
        }

        // Trigger sync on any change
        $('#advanced-menu-select, #advanced-customer-select, #advanced-staff-select, #placed-from')
            .on('change', function() {
                syncAll();
            });
        // Trigger sync on any changes
        $('#order_number_advanced').on('input', function() {
            $('#order_number_hidden').val($(this).val());
        });

        // Also trigger once when page loads
        syncAll();
    });
</script>
@endsection