<x-app-layout>
    <x-slot name="css">
        <link rel="stylesheet" href="{{ asset('assets/css/components/custom-modal.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/flatpickr/flatpickr.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/flatpickr/custom-flatpickr.css') }}">
        <style>
            .layout-top-spacing {
                min-height: calc(100vh - 230px) !important;
            }

            .modalDilogFilter {
                margin: 114px 44px 0 auto !important;
            }

            .modal-sm {
                max-width: 450px;
            }

            .flatpickr-calendar.open {
                z-index: 1050;
            }
        </style>
    </x-slot>
    <!-- Modal -->
    <div class="modal fade" id="filterModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modalDilogFilter" role="document">
            <div class="modal-content">
                <div class="modal-header border-remove-model">
                    <h3 class="modal-title fw-bold" id="exampleModalLabel">
                        <strong>{{ __('common.filter') }}</strong>
                    </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-x">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <form id="filter_form">
                    @csrf
                    <div class="modal-body py-0 row">
                        <div class="col-6">
                            <div class="form-group mb-0">
                                <label for="order_from" class="form-label">{{ __('common.from') }}</label>
                                <input id="order_from" class="form-control flatpickr flatpickr-input active"
                                    type="text" placeholder="Select from date.." name="order_from"
                                    readonly="readonly">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-0">
                                <label for="order_to" class="form-label">{{ __('common.to') }}</label>
                                <input id="order_to" class="form-control flatpickr flatpickr-input active"
                                    type="text" placeholder="Select to date.." name="order_to" readonly="readonly">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-start border-remove-model">
                        <a href="" id="filter-reset" class="btn btn-coffee-dark">{{ __('common.clear') }}</a>
                        <button id="filter-save" class="btn btn-coffee-light"
                            style="text-transform: capitalize !important;" data-dismiss="modal"
                            aria-label="Close">{{ __('common.applyFilter') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @if ($cafeDashboard == URL::previous() && $viewMore == 'true')
    <x-app-breadcrumb>
        <li class="breadcrumb-item active" aria-current="page">{{ __('common.AllOrders') }}</li>
    </x-app-breadcrumb>
    @endif
    <div class="page-header row">
        <div class="page-title col-12 d-flex mt-4 pr-4">
            <h3 class="my-auto">{{ __('common.OrderHistory') }}</h3>
            <button class="d-flex ml-auto btn btn-coffee-dark py-2 px-3" data-toggle="modal" data-target="#filterModel">
                <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-bar-chart" style="transform: rotate(270deg);">
                    <line x1="12" y1="20" x2="12" y2="10"></line>
                    <line x1="18" y1="20" x2="18" y2="4"></line>
                    <line x1="6" y1="20" x2="6" y2="16"></line>
                </svg>
                <span class="my-1">{{ __('common.filter') }}</span>
            </button>
        </div>
    </div>

    <div class="row layout-top-spacing">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget-content widget-content-area br-6">
                <table id="order_history" class="table dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ __('common.no.') }}</th>
                            <th>{{ __('common.orderId') }}</th>
                            <th>{{ __('common.customerName') }}</th>
                            <th>{{ __('common.orderAmount') }}</th>
                            <th>{{ __('common.orderTime') }}</th>
                            <th>Order Items</th>
                            <th>{{ __('common.status') }}</th>
                            <th class="no-content"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <x-slot name="script">
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            const getData = "{{ $dataUrl }}";
            const tableElement = document.getElementById('order_history');
        </script>
        <script src="{{ asset('plugins/flatpickr/flatpickr.js') }}"></script>
        <script src="{{ asset('plugins/fullcalendar/moment.min.js') }}"></script>
        <script src="{{ asset('assets/js/cafe/order-history.js') }}"></script>
        <script src="{{ asset('assets/js/tableAction.js') }}"></script>
    </x-slot>
</x-app-layout>