@extends('admin.layouts.master')
@section('title')
{{ translate('Payments - List') }}
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

        <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
            <div class="grow">
                <h5 class="text-16">{{ translate('Order Lists') }}</h5>
            </div>
            <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                <li class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                    <a href="#!" class="text-slate-400 dark:text-zink-200">{{ translate('Ecommerce') }}</a>
                </li>
                <li class="text-slate-700 dark:text-zink-100">
                    {{ translate('Order Lists') }}
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-x-5 md:grid-cols-2 2xl:grid-cols-12">
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center rounded-md size-12 text-15 bg-custom-50 text-custom-500 dark:bg-custom-500/20 shrink-0"><i data-lucide="boxes"></i></div>
                        <div class="grow">
                            <h5 class="mt-4 mb-2">
                                {{ formatCurrency($totalPayment, $currency) }}
                            </h5>


                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Total Payment') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center rounded-md size-12 text-15 bg-sky-50 text-sky-500 dark:bg-sky-500/20 shrink-0"><i data-lucide="package-plus"></i></div>
                        <div class="grow">
                            <h5 class="mb-1 text-16 counter-value" data-target="{{$packages_count}}"></h5>
                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Package') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
            <div class="order-last md:col-span-2 2xl:col-span-8 2xl:row-span-3 card 2xl:order-none">
                <div class="card-body">
                    <h6 class="mb-4 text-gray-800 text-15 dark:text-zink-50">{{ translate('Monthly Payments') }}</h6>
                    <div id="ordersOverview" class="apex-charts"
                        data-chart-colors='["bg-custom-500"]'
                        data-monthly-payments="{{ json_encode($monthlyPayments) }}"
                         data-currency-symbol="{{ $currency->symbol }}"
                        dir="ltr">
                    </div>
                </div>
            </div><!--end col-->
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center text-yellow-500 rounded-md size-12 text-15 bg-yellow-50 dark:bg-yellow-500/20 shrink-0"><i data-lucide="loader"></i></div>
                        <div class="grow">
                            <h5 class="mt-4 mb-2">
                                {{ formatCurrency($paymentThisMonth, $currency) }}
                            </h5>

                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Payment this month') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center text-purple-500 rounded-md size-12 text-15 bg-purple-50 dark:bg-purple-500/20 shrink-0"><i data-lucide="truck"></i></div>
                        <div class="grow">
                            <h5 class="mt-4 mb-2">
                                {{ formatCurrency($paymentLastMonth, $currency) }}
                            </h5>


                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Payment last month') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center text-green-500 rounded-md size-12 text-15 bg-green-50 dark:bg-green-500/20 shrink-0"><i data-lucide="package-check"></i></div>
                        <div class="grow">
                            <h5 class="mt-4 mb-2">
                                {{ formatCurrency($paymentThisYear, $currency) }}
                            </h5>

                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Payment this year') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
            <div class="2xl:col-span-2 2xl:row-span-1">
                <div class="card">
                    <div class="flex items-center gap-3 card-body">
                        <div class="flex items-center justify-center text-red-500 rounded-md size-12 text-15 bg-red-50 dark:bg-red-500/20 shrink-0"><i data-lucide="package-x"></i></div>
                        <div class="grow">
                            <h5 class="mt-4 mb-2">
                                {{ formatCurrency($paymentLastYear, $currency) }}
                            </h5>

                            <p class="text-slate-500 dark:text-zink-200">{{ translate('Payment last year') }}</p>
                        </div>
                    </div>
                </div>
            </div><!--end col-->
        </div><!--end grid-->

        <div class="card" id="ordersTable">
            <div class="card-body">
                <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
                    {{-- <div class="lg:col-span-3">
                        <div class="relative">
                            <input type="text" name="search" value="{{ request('search') }}" class="ltr:pl-8 rtl:pr-8 search form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="Search for ..." autocomplete="off">
                            <i data-lucide="search" class="inline-block size-4 absolute ltr:left-2.5 rtl:right-2.5 top-2.5 text-slate-500 dark:text-zink-200 fill-slate-100 dark:fill-zink-600"></i>
                        </div>
                    </div> --}}
                    <!--end col-->
                    <div class="lg:col-span-2 lg:col-start-11">
                        <div class="ltr:lg:text-right rtl:lg:text-left">
                            @if($permissionForPayments !== null && $permissionForPayments->can_create == '1')
                                <a href="#!" data-modal-target="addOrderModal" type="button" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20"><i data-lucide="plus" class="inline-block size-4"></i> <span class="align-middle">{{ translate('Add Order') }}</span></a>
                            @endif
                        </div>
                    </div>
                </div><!--col grid-->

                <ul class="flex flex-wrap w-full mt-5 text-sm font-medium text-center text-gray-500 nav-tabs">
                    @if ($order_status=="all")
                        <li class="group active">
                            <a href="{{route('admin.all_orders', ['order' => 'all'])}}" data-tab-toggle data-target="allOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="boxes" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle"></span>{{ translate('All Orders') }}</span></a>
                        </li>
                        @else
                        <li class="group">
                            <a href="{{route('admin.all_orders', ['order' => 'all'])}}" data-tab-toggle data-target="allOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="boxes" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('All Orders') }}</span></a>
                        </li>
                    @endif



                        @if ($order_status=="Pending")
                        <li class="group active">
                            <a href="{{route('admin.get_orders', ['order' => 'Pending'])}}" data-tab-toggle data-target="pendingOrder" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="loader" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Pending') }}</span></a>
                        </li>
                        @else
                        <li class="group">
                            <a href="{{route('admin.get_orders', ['order' => 'Pending'])}}" data-tab-toggle data-target="pendingOrder" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="loader" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Pending') }}</span></a>
                        </li>
                        @endif


                            @if ($order_status=="Delivered")
                            <li class="group active">
                                <a href="{{route('admin.get_orders', ['order' => 'Delivered'])}}" data-tab-toggle data-target="deliveredOrder" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="package-check" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Delivered') }}</span></a>
                            </li>

                            @else
                            <li class="group">
                                <a href="{{route('admin.get_orders', ['order' => 'Delivered'])}}" data-tab-toggle data-target="deliveredOrder" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="package-check" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Delivered') }}</span></a>
                            </li>
                            @endif

                              @if ($order_status=="Returns")
                                <li class="group active">
                                    <a href="{{route('admin.get_orders', ['order' => 'Returns'])}}" data-tab-toggle data-target="returnsOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="refresh-ccw" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Returns') }}</span></a>
                                </li>
                                @else

                                <li class="group">
                                    <a href="{{route('admin.get_orders', ['order' => 'Returns'])}}" data-tab-toggle data-target="returnsOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="refresh-ccw" class="inline-block size-4 ltr:mr-1 rtl:ml-1"></i> <span class="align-middle">{{ translate('Returns') }}</span></a>
                                </li>
                                @endif
                                @if ($order_status=="Cancelled")
                                <li class="group active">
                                    <a href="{{route('admin.get_orders', ['order' => 'Cancelled'])}}" data-tab-toggle data-target="cancelledOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="package-x" class="inline-block size-4 ltr:mr-1 rtl:ml-1 "></i> <span class="align-middle">{{ translate('Cancelled') }}</span></a>
                                </li>
                                @else
                                <li class="group">
                                    <a href="{{route('admin.get_orders', ['order' => 'Cancelled'])}}" data-tab-toggle data-target="cancelledOrders" class="inline-block px-4 py-1.5 text-base transition-all duration-300 ease-linear rounded-md text-slate-500 dark:text-zink-200 border border-transparent group-[.active]:bg-custom-500 group-[.active]:text-white dark:group-[.active]:text-white hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]"><i data-lucide="package-x" class="inline-block size-4 ltr:mr-1 rtl:ml-1 "></i> <span class="align-middle">{{ translate('Cancelled') }}</span></a>
                                </li>
                                @endif
                </ul>

                <div class="mt-5 overflow-x-auto">
                    <table class="w-full whitespace-nowrap">
                        <thead class="ltr:text-left rtl:text-right bg-slate-100 dark:bg-zink-600">
                            <tr>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200">
                                    <div class="flex items-center h-full">
                                        <input id="CheckboxAll" class="size-4 cursor-pointer bg-white border border-slate-200 checked:bg-none dark:bg-zink-700 dark:border-zink-500 rounded-sm appearance-none arrow-none relative after:absolute after:content-['\eb7b'] after:top-0 after:left-0 after:font-remix after:leading-none after:opacity-0 checked:after:opacity-100 after:text-custom-500 checked:border-custom-500 dark:after:text-custom-500 dark:checked:border-custom-800" type="checkbox">
                                    </div>
                                </th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="order_id">#</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="order_date">{{ translate('Member Name') }}</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="delivery_date">{{ translate('Package') }}</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="payment_method">{{ translate('Payment Method') }}</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="amount">{{ translate('Amount') }}</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="delivery_status">{{ translate('Payment Status') }}</th>
                                {{-- <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="customer_name">Payment Code</th> --}}
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200 sort" data-sort="customer_name">{{ translate('Purchase Date') }}</th>
                                <th class="px-3.5 py-2.5 font-semibold text-slate-500 border-b border-slate-200 dark:border-zink-500 dark:text-zink-200">{{ translate('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $a=1;
                            @endphp

                            @foreach ($orders as $order)
                                <tr>
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                        <div class="flex items-center h-full">
                                            <input id="Checkbox1" class="size-4 cursor-pointer bg-white border border-slate-200 checked:bg-none dark:bg-zink-700 dark:border-zink-500 rounded-sm appearance-none arrow-none relative after:absolute after:content-['\eb7b'] after:top-0 after:left-0 after:font-remix after:leading-none after:opacity-0 checked:after:opacity-100 after:text-custom-500 checked:border-custom-500 dark:after:text-custom-500 dark:checked:border-custom-800" type="checkbox">
                                        </div>
                                    </td>
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">{{$a}}</td>
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 order_date"><a href="{{route('admin.payments.get','TWT5015100365')}}" class="transition-all duration-150 ease-linear order_id text-custom-500 hover:text-custom-600">{{$order->user->name}}</a></td>
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 delivery_date">{{$order->package->name}}</td>
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 customer_name">{{$order->payment_method}}</td>


                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 payment_method">{{ formatCurrency($order->amount, $currency) }}</td>


                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 amount">
                                        <span class="delivery_status px-2.5 py-0.5 text-xs inline-block font-medium rounded border
                                        @if($order->payment_status == 1)
                                            bg-green-100 border-green-200 text-green-500 dark:bg-green-500/20 dark:border-green-500/20
                                        @else
                                            bg-red-100 border-red-200 text-red-500 dark:bg-red-500/20 dark:border-red-500/20
                                        @endif">
                                        {{ $order->payment_status == 1 ? 'Paid' : 'Unpaid' }}
                                    </span>

                                    </td>
                                    {{-- <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 payment_method">2312-321323</td> --}}
                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500 payment_method">
                                        {{ formatDate($order->created_at) }}

                                    </td>

                                    <td class="px-3.5 py-2.5 border-y border-slate-200 dark:border-zink-500">
                                        @if($permissionForPayments !== null && $permissionForPayments->can_edit == '1')
                                            <a href="#!"
                                            class="transition-all duration-150 ease-linear text-custom-500 hover:text-custom-600 editOrderBtn"
                                            data-modal-target="editOrderModal"
                                            data-order-id="{{ $order->id }}"
                                            data-order-date="{{ $order->order_date }}"
                                            data-delivery-date="{{ $order->delivery_date }}"
                                            data-payment-method="{{ $order->payment_method }}"
                                            data-customer-id="{{ $order->customer_id }}"
                                            data-package-id="{{ $order->packages_id }}"
                                            data-amount="{{ $order->amount }}"
                                            data-payment-status="{{ $order->payment_status }}"
                                            data-delivery-status="{{ $order->delivery_status }}">
                                            <i class="ri-edit-2-line"></i>
                                            </a>
                                        @endif
                                    </td>

                                </tr>
                                @php
                                  $a++;
                                @endphp
                            @endforeach

                        </tbody>
                    </table>
                    <div class="noresult" style="display: none">
                        <div class="py-6 text-center">
                            <i data-lucide="search" class="w-6 h-6 mx-auto text-sky-500 fill-sky-100 dark:sky-500/20"></i>
                            <h5 class="mt-2 mb-1">{{ translate('Sorry! No Result Found') }}</h5>
                            <p class="mb-0 text-slate-500 dark:text-zink-200">{{ translate('We have searched more than 299+ orders We did not find any orders for you search.') }}</p>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col items-center mt-5 md:flex-row">
                    <div class="mb-4 grow md:mb-0">
                        <p class="text-slate-500 dark:text-zink-200">
                            {!! sprintf(translate('Showing <b>%d</b> of <b>%d</b> Results'), $orders->count(), $orders->total()) !!}
                        </p>

                        {{-- <p class="text-slate-500 dark:text-zink-200">Showing <b>{{ $orders->count() }}</b> of <b>{{ $orders->total() }}</b> Results</p> --}}
                    </div>
                    <ul class="flex flex-wrap items-center gap-2 shrink-0">
                        @foreach($orders->links()->elements[0] as $page => $link)
                            <li>
                                <a href="{{ $link }}" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:bg-slate-100 dark:[&.disabled]:bg-zink-600/20 [&.disabled]:border-transparent">
                                    {{ $page }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div><!--end card-->

    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src='{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}'></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>


<!--addOrderModal-->
<div id="addOrderModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4 show ">
    <div class="w-screen md:w-[30rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="flex items-center justify-between p-4 border-b dark:border-zink-500">
            <h5 class="text-16">{{ translate('Add Order') }}</h5>
                @if($permissionForPayments !== null && $permissionForPayments->can_create == '1')
                    <button data-modal-close="addOrderModal" class="transition-all duration-200 ease-linear text-slate-400 hover:text-red-500">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                @endif
        </div>
        <div class="max-h-[calc(theme('height.screen')_-_180px)] p-4 overflow-y-auto">
            <form action="{{route('admin.order.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">
                    <div class="xl:col-span-12">
                        <label for="orderId" class="inline-block mb-2 text-base font-medium">{{ translate('Order ID') }}</label>
                        <input type="text" name="order_id" id="orderId" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" readonly value="{{ $nextOrderId }}" required>
                    </div>
                    <div class="xl:col-span-6">
                        <label for="orderDateInput" class="inline-block mb-2 text-base font-medium">{{ translate('Order Date') }}</label>
                        <input name="order_date" type="text" id="orderDateInput"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                            value="{{ old('order_date', \Carbon\Carbon::now()->format($general_setting['date_format'])) }}"
                            placeholder="Select date" required>
                        @error('order_date')
                           <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="xl:col-span-6">
                        <label for="deliveryDateInput" class="inline-block mb-2 text-base font-medium">{{ translate('Delivery Date') }}</label>
                        <input type="text" id="deliveryDateInput"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                            value="{{ old('delivery_date') }}"
                            name="delivery_date"
                            placeholder="Select date" required>
                        @error('delivery_date')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="xl:col-span-12">
                        <label for="paymentMethodSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Payment Method') }}</label>
                        <select name="payment_method" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices data-choices-search-false name="paymentMethodSelect" id="paymentMethodSelect" required>
                            <option value="" selected disabled>{{ translate('Select') }}</option>
                            <option value="mollie">{{ translate('Mollie') }}</option>
                            <option value="stripe">{{ translate('Stripe') }}</option>
                        </select>
                        @error('payment_method')
                          <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="xl:col-span-12">
                        <label for="paymentMethodSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Customer') }}</label>
                        <select name="customer_id" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices data-choices-search-false name="paymentMethodSelect" id="paymentMethodSelect" required>
                            <option value="" selected disabled>{{ translate('Select') }}</option>
                            @foreach ($users as $user)
                            <option value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                        </select>
                        @error('customer_id')
                          <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="xl:col-span-12">
                        <label for="paymentMethodSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Packages') }}</label>
                        <select name="package_id" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices data-choices-search-false name="paymentMethodSelect" id="paymentMethodSelect" required>
                            <option value="" selected disabled>{{ translate('Select') }}</option>
                            @foreach ($packages as $package)
                            <option value="{{$package->id}}">{{$package->name}}</option>
                            @endforeach
                            @error('package_id')
                              <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror

                        </select>
                    </div>


                    <div class="xl:col-span-12">
                        <label for="amountInput" class="inline-block mb-2 text-base font-medium">{{ translate('Amount') }}</label>
                        <input type="text" name="amount" id="amountInput" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" placeholder="12345 67890" required>
                    </div>
                    <div class="xl:col-span-12">
                        <label for="deliveryStatusSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Delivery Status') }}</label>
                        <select name="delivery_status" class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200" data-choices data-choices-search-false name="deliveryStatusSelect" id="deliveryStatusSelect" required>
                            <option value="Delivered">{{ translate('Delivered') }}</option>
                            <option value="Shipping">{{ translate('Shipping') }}</option>
                            <option value="New">{{ translate('New') }}</option>
                            <option value="Pending">{{ translate('Pending') }}</option>
                            <option value="Return">{{ translate('Return') }}</option>
                            <option value="Cancelled">{{ translate('Cancelled') }}</option>
                        </select>
                        @error('delivery_status')
                              <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror
                    </div>

                    <div class="xl:col-span-12">
                        <label for="paymentStatusSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Payment Status') }}</label>
                        <select name="payment_status"
                                class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                required>
                            <option value="" selected disabled>{{ translate('Select') }}</option>
                            <option value="1">{{ translate('Paid') }}</option>
                            <option value="0">{{ translate('Unpaid') }}</option>
                        </select>
                        @error('payment_status')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>

                </div>
                <div class="flex justify-end gap-2 mt-4">
                    <button type="reset" data-modal-close="addOrderModal" class="text-red-500 bg-white btn hover:text-red-500 hover:bg-red-100 focus:text-red-500 focus:bg-red-100 active:text-red-500 active:bg-red-100 dark:bg-zink-600 dark:hover:bg-red-500/10 dark:focus:bg-red-500/10 dark:active:bg-red-500/10">{{ translate('Cancel') }}</button>
                    <button type="submit" class="text-white btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">{{ translate('Add Order') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--end-->




<!--editOrderModal-->
<div id="editOrderModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4">
    <div class="w-screen md:w-[30rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="flex items-center justify-between p-4 border-b dark:border-zink-500">
            <h5 class="text-16">{{ translate('Edit Order') }}</h5>
            <button data-modal-close="editOrderModal" class="transition-all duration-200 ease-linear text-slate-400 hover:text-red-500">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="max-h-[calc(theme('height.screen')_-_180px)] p-4 overflow-y-auto">
            <form action="{{route('admin.order.update') }}" method="POST">
                @csrf
                <input type="hidden" name="order_id" id="editOrderId">

                <div class="grid grid-cols-1 gap-4 xl:grid-cols-12">
                    <div class="xl:col-span-6">
                        <label for="editOrderDate" class="inline-block mb-2 text-base font-medium">{{ translate('Order Date') }}</label>
                        <input type="text" name="order_date" id="editOrderDate"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            placeholder="Select date" required>
                    </div>

                    <div class="xl:col-span-6">
                        <label for="editDeliveryDate" class="inline-block mb-2 text-base font-medium">{{ translate('Delivery Date') }}</label>
                        <input type="text" name="delivery_date" id="editDeliveryDate"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            placeholder="Select date" required>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="editPaymentMethod" class="inline-block mb-2 text-base font-medium">{{ translate('Payment Method') }}</label>
                        <select name="payment_method" id="editPaymentMethod"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            required>
                            <option value="mollie">{{ translate('Mollie') }}</option>
                            <option value="stripe">{{ translate('Stripe') }}</option>
                        </select>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="editCustomer" class="inline-block mb-2 text-base font-medium">{{ translate('Customer') }}</label>
                        <select name="customer_id" id="editCustomer"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            required>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="editPackage" class="inline-block mb-2 text-base font-medium">{{ translate('Packages') }}</label>
                        <select name="package_id" id="editPackage"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            required>
                            @foreach ($packages as $package)
                                <option value="{{ $package->id }}">{{ $package->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="editAmount" class="inline-block mb-2 text-base font-medium">{{ translate('Amount') }}</label>
                        <input type="text" name="amount" id="editAmount"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            required>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="editDeliveryStatus" class="inline-block mb-2 text-base font-medium">{{ translate('Delivery Status') }}</label>
                        <select name="delivery_status" id="editDeliveryStatus"
                            class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500"
                            required>
                            <option value="Delivered">{{ translate('Delivered') }}</option>
                            <option value="Shipping">{{ translate('Shipping') }}</option>
                            <option value="New">{{ translate('New') }}</option>
                            <option value="Pending">{{ translate('Pending') }}</option>
                            <option value="Return">{{ translate('Return') }}</option>
                            <option value="Cancelled">{{ translate('Cancelled') }}</option>
                        </select>
                    </div>

                    <div class="xl:col-span-12">
                        <label for="paymentStatusSelect" class="inline-block mb-2 text-base font-medium">{{ translate('Payment Status') }}</label>
                        <select name="payment_status" id="editPaymentStatus"
                                class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 disabled:bg-slate-100 dark:disabled:bg-zink-600 disabled:border-slate-300 dark:disabled:border-zink-500 dark:disabled:text-zink-200 disabled:text-slate-500 dark:text-zink-100 dark:bg-zink-700 dark:focus:border-custom-800 placeholder:text-slate-400 dark:placeholder:text-zink-200"
                                required>
                            <option value="" selected disabled>{{ translate('Select') }}</option>
                            <option value="1">{{ translate('Paid') }}</option>
                            <option value="0">{{ translate('Unpaid') }}</option>
                        </select>
                        @error('payment_status')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>


                </div>

                <div class="flex justify-end mt-4">
                    <button type="submit" class="px-4 py-2 text-white bg-custom-500 rounded-md hover:bg-custom-600">
                        {{ translate('Save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--end-->











<div id="deleteModal" modal-center class="fixed flex flex-col hidden transition-all duration-300 ease-in-out left-2/4 z-drawer -translate-x-2/4 -translate-y-2/4">
    <div class="w-screen md:w-[25rem] bg-white shadow rounded-md dark:bg-zink-600">
        <div class="max-h-[calc(theme('height.screen')_-_180px)] overflow-y-auto px-6 py-8">
            <div class="float-right">
                <button data-modal-close="deleteModal" class="transition-all duration-200 ease-linear text-slate-500 hover:text-red-500"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <img src="data:image/png;base64,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" alt="" class="block h-12 mx-auto">
            <div class="mt-5 text-center">
                <h5 class="mb-1">{{ translate('Are you sure?') }}</h5>
                <p class="text-slate-500 dark:text-zink-200">{{ translate('Are you certain you want to delete this record?') }}</p>
                <div class="flex justify-center gap-2 mt-6">
                    <button type="reset" data-modal-close="deleteModal" class="bg-white text-slate-500 btn hover:text-slate-500 hover:bg-slate-100 focus:text-slate-500 focus:bg-slate-100 active:text-slate-500 active:bg-slate-100 dark:bg-zink-600 dark:hover:bg-slate-500/10 dark:focus:bg-slate-500/10 dark:active:bg-slate-500/10">Cancel</button>
                    <button type="submit" class="text-white bg-red-500 border-red-500 btn hover:text-white hover:bg-red-600 hover:border-red-600 focus:text-white focus:bg-red-600 focus:border-red-600 focus:ring focus:ring-red-100 active:text-white active:bg-red-600 active:border-red-600 active:ring active:ring-red-100 dark:ring-custom-400/20">Yes, Delete It!</button>
                </div>
            </div>
        </div>
    </div>
</div><!--end delete modal-->
<!-- list js-->
<script src="{{asset('admin/assets/libs/list.js/list.min.js')}}"></script>
<!-- apexcharts -->
<script src="{{asset('admin/assets/libs/apexcharts/apexcharts.min.js')}}"></script>

<!--Ecommerce orders init-->
<script src="{{asset('admin/assets/js/pages/apps-ecommerce-orders.init.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

@if(session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Success',
        text: '{{ session('success') }}',
        showConfirmButton: false,
        timer: 3000
    });
</script>
@endif

{{-- <script>
    document.querySelectorAll('[data-modal-close]').forEach(button => {
    button.addEventListener('click', function () {
        const modalId = this.getAttribute('data-modal-close');
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.add('hidden');
            modal.classList.remove('show');
        }
    });
});

document.querySelectorAll('[data-modal-close]').forEach(button => {
    button.addEventListener('click', function () {
        const modalId = this.getAttribute('data-modal-close');
        document.getElementById(modalId).classList.add('hidden');
    });
});

</script> --}}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const editOrderBtns = document.querySelectorAll('.editOrderBtn');
        const editOrderModal = document.getElementById('editOrderModal');
    
        // Inputs in the modal
        const editOrderId = document.getElementById('editOrderId');
        const editOrderDate = document.getElementById('editOrderDate');
        const editDeliveryDate = document.getElementById('editDeliveryDate');
        const editPaymentMethod = document.getElementById('editPaymentMethod');
        const editCustomer = document.getElementById('editCustomer');
        const editPackage = document.getElementById('editPackage');
        const editAmount = document.getElementById('editAmount');
        const editDeliveryStatus = document.getElementById('editDeliveryStatus');
        const editPaymentStatus = document.getElementById('editPaymentStatus');
    
        // Get the date format from settings
        const dateFormat = '{{ $general_setting['date_format'] }}';
    
        /**
         * Format a date string into the specified format
         * @param {string} inputDate - The input date string
         * @param {string} format - Desired date format (e.g., 'd-m-Y', 'Y-m-d')
         * @returns {string} - Formatted date string
         */
        function formatDate(inputDate, format) {
            // Convert input date to a Date object
            const parsedDate = new Date(inputDate);
    
            if (isNaN(parsedDate)) {
                console.warn(`Invalid date: ${inputDate}`);
                return inputDate; // Return as is if the date is invalid
            }
    
            const day = String(parsedDate.getDate()).padStart(2, '0');
            const month = String(parsedDate.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
            const year = parsedDate.getFullYear();
            const longMonth = parsedDate.toLocaleString('en-US', { month: 'long' });
            const dayOfWeek = parsedDate.toLocaleString('en-US', { weekday: 'long' });
    
            // Replace format placeholders
            return format
                .replace('d', day)
                .replace('m', month)
                .replace('Y', year)
                .replace('F', longMonth)
                .replace('l', dayOfWeek);
        }
    
        // Event listener for edit buttons
        editOrderBtns.forEach(function (button) {
            button.addEventListener('click', function () {
                // Populate modal fields with formatted dates
                editOrderId.value = this.dataset.orderId;
                editOrderDate.value = formatDate(this.dataset.orderDate, dateFormat);
                editDeliveryDate.value = formatDate(this.dataset.deliveryDate, dateFormat);
                editPaymentMethod.value = this.dataset.paymentMethod;
                editCustomer.value = this.dataset.customerId;
                editPackage.value = this.dataset.packageId;
                editAmount.value = this.dataset.amount;
                editDeliveryStatus.value = this.dataset.deliveryStatus;
                editPaymentStatus.value = this.dataset.paymentStatus;
    
                // Show modal
                editOrderModal.classList.remove('hidden');
            });
        });
    
        // Close Modal
        document.querySelectorAll('[data-modal-close]').forEach(button => {
            button.addEventListener('click', function () {
                const modalId = this.getAttribute('data-modal-close');
                const modal = document.getElementById(modalId);
                if (modal) modal.classList.add('hidden');
            });
        });
    });
    </script>
    

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<script>
 
    document.addEventListener('DOMContentLoaded', function() {
        const dateFormat = '{{ $general_setting['date_format'] }}'; 

        flatpickr("#orderDateInput", {
            dateFormat: dateFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
               
            }
        });

      
        flatpickr("#deliveryDateInput", {
            dateFormat: dateFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
                
            }
        });
    });

   
    document.getElementById('date_format').addEventListener('change', function() {
        const newFormat = this.value;
        flatpickr("#orderDateInput", {
            dateFormat: newFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
               
            }
        });

        flatpickr("#deliveryDateInput", {
            dateFormat: newFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
            
            }
        });
    });
</script>






<script>
 
    document.addEventListener('DOMContentLoaded', function() {
        const dateFormat = '{{ $general_setting['date_format'] }}'; 

        flatpickr("#editOrderDate", {
            dateFormat: dateFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
               
            }
        });

      
        flatpickr("#editDeliveryDate", {
            dateFormat: dateFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
                
            }
        });
    });

   
    document.getElementById('date_format').addEventListener('change', function() {
        const newFormat = this.value;
        flatpickr("#editOrderDate", {
            dateFormat: newFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
               
            }
        });

        flatpickr("#editDeliveryDate", {
            dateFormat: newFormat.replace('d', 'd').replace('m', 'm').replace('Y', 'Y'),
            onChange: function(selectedDates, dateStr, instance) {
            
            }
        });
    });
</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('addOrderModal');
        const backdrop = document.getElementById('modalBackdrop');
        const closeButton = document.querySelector('[data-modal-close="addOrderModal"]');

        function closeModal() {
            modal.classList.add('hidden'); // Hide the modal
            backdrop.classList.add('hidden'); // Hide the backdrop
        }

        function openModal() {
            modal.classList.remove('hidden'); // Show the modal
            backdrop.classList.remove('hidden'); // Show the backdrop
        }

        if (closeButton) {
            closeButton.addEventListener('click', closeModal);
        }

        // Example of opening the modal
        const openModalButton = document.getElementById('openModalButton');
        if (openModalButton) {
            openModalButton.addEventListener('click', openModal);
        }

        // Close modal when clicking on the backdrop
        backdrop.addEventListener('click', closeModal);
    });
</script>

<style>
    #modalBackdrop {
    backdrop-filter: blur(5px); /* Adjust the blur effect as needed */
}
</style>


@endsection