@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Order List</title>
@endsection

@php
if (isset(request()->order_status)) {
    $orderStatus = request()->get('order_status');
}
$orderStatuses = App\Models\Order::STATUS_LABEL;
@endphp

@section('subcontent')
    <!-- BEGIN: HTML Table Data -->
    <div class="intro-y box mt-5">
        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">Search & Filters</h2>
            <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0">
                <label class="form-check-label ml-0" for="show-search-filters">Show Search & Filters</label>
                <input id="show-search-filters" data-target="#search-filters" class="toggle-content form-check-input mr-0 ml-3"
                    type="checkbox">
            </div>
        </div>
        <div id="search-filters" class="p-5 hidden">
            <form id="tabulator-html-filter-form-status">
                <div class="grid grid-cols-4 gap-5">
                    <div>
                        <label>Order Status</label><br>
                        <select id="order_status" class="form-select w-full mt-2 sm:mt-0">
                            <option value=""></option>
                            @foreach ($orderStatuses as $key => $status)
                                <option @selected(isset($orderStatus) && $orderStatus == $key) value="{{ $key }}"> {{ $status }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Payment Method</label><br>
                        <select id="payment_method" class="form-select w-full">
                            <option value=""></option>
                            <option value="cod">COD</option>
                            <option value="online">Online</option>
                        </select>
                    </div>
                    <div>
                        <label>Payment Status</label><br>
                        <select id="payment_status" class="form-select w-full">
                            <option value="" selected></option>
                            <option value="paid">Paid</option>
                            <option value="unpaid">Unpaid</option>
                        </select>
                    </div>
                    <div>
                        <label>Order No</label><br>
                        <input id="order_no" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>Email</label><br>
                        <input id="email" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>Phone</label><br>
                        <input id="phone" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>Customer Name</label><br>
                        <input id="customer_name" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>Product Name</label><br>
                        <input id="product_name" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>SKU</label><br>
                        <input id="sku" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
                    </div>
                    <div>
                        <label>From Date</label><br>
                        <input type="text" id="from_date" class="datepicker form-control block" data-single-mode="true">
                    </div>
                    <div>
                        <label>To Date</label><br>
                        <input type="text" id="to_date" class="datepicker form-control block" data-single-mode="true">
                    </div>
                </div>
                <div class="mt-5">
                    <button id="tabulator-html-filter-go-status" type="button" class="btn btn-primary">Search</button>
                    <button id="tabulator-html-filter-reset-status" type="button" class="btn btn-secondary">Reset</button>
                </div>
            </form>
        </div>
    </div>
    <div class="intro-y box p-5 mt-5">
        <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
            <div class="flex mt-5 sm:mt-0">
                <button id="tabulator-print" class="btn btn-outline-secondary w-1/2 sm:w-auto mr-2">
                    <i data-lucide="printer" class="w-4 h-4 mr-2"></i> Print
                </button>
                <div class="dropdown w-1/2 sm:w-auto">
                    <button class="dropdown-toggle btn btn-outline-secondary w-full sm:w-auto" aria-expanded="false"
                        data-tw-toggle="dropdown">
                        <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export <i data-lucide="chevron-down"
                            class="w-4 h-4 ml-auto sm:ml-2"></i>
                    </button>
                    <div class="dropdown-menu w-40">
                        <ul class="dropdown-content">
                            <li>
                                <a id="tabulator-export-xlsx" href="javascript:;" class="dropdown-item">
                                    <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export XLSX
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="overflow-x-auto scrollbar-hidden">
            <div id="tabulator" class="mt-5 table-report table-report--tabulator"></div>
        </div>
    </div>
    <!-- END: HTML Table Data -->
@endsection

@section('script')
    <script>
        let orderListRoute = '{{ route('order.index') }}'
        let orderExportRoute = '{{ route('order.export') }}'
        let customer_id = "";

        function updateOrderRoute(order_id) {
            let url = '{{ route('order.edit', ':order_id') }}';
            return url.replace(':order_id', order_id);
        }
    </script>
    <script src="{{ asset(mix('js/backend/pages/order/index.js')) }}"></script>
@endsection