<x-app-layout>
    <x-slot name="css">
    </x-slot>
    <x-app-breadcrumb>
        <li class="breadcrumb-item">
            <a href="{{ $orderHistoryUrl }}" class="breadcrumb_home">
                {{ __('common.OrderHistory') }}
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ __('common.orderDetails') }}</li>
    </x-app-breadcrumb>
    <div class="page-header row">
        <div class="page-title col-12 d-flex pr-4">
            <h3 class="my-auto">{{ __('common.orderDetails') }}</h3>
        </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">
            {{-- <x-flash-message></x-flash-message> --}}
            <div class="row profileContent">
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.orderId') }}</strong></h4>
                    <p class="profile">{{ isset($order_id) && $order_id != '' ? $order_id : ' - ' }}</p>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.customerName') }}</strong></h4>
                    <p class="profile">{{ isset($customer_name) && $customer_name != '' ? $customer_name : ' - ' }}</p>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.groupName') }}</strong></h4>
                    <p class="profile">{{ isset($group_name) && $group_name != '' ? $group_name : ' - ' }}</p>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.orderTime') }}</strong></h4>
                    <p class="profile">{{ isset($order_time) && $order_time != '' ? $order_time : ' - ' }}</p>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.orderDate') }}</strong></h4>
                    <p class="profile">{{ isset($order_date) && $order_date != '' ? $order_date : ' - ' }}</p>
                </div>
                <div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-6 mt-4">
                    <h4 class=""><strong>{{ __('common.TotalNoOfMembers') }}</strong></h4>
                    <p class="profile">{{ isset($members) && $members != '' ? $members : ' - ' }}</p>
                </div>
            </div>
            <div class="row profileContent mt-5">
                <div class="page-title col-12 mx-0 mb-4">
                    <h3 class="my-auto">{{ __('common.MenuOrderList') }}</h3>
                </div>
                <div class="col-12 row countainer bg-light px-3 mx-0 pb-3">
                    <div class="col-12 widget-content widget-content-area br-6">
                    <table id="order_details" class="table dt-table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>{{ __('common.no.') }}</th>
                                <th>{{ __('common.icons') }}</th>
                                <th>{{ __('common.itemName') }}</th>
                                <th>{{ __('common.category') }}</th>
                                <th>{{ __('common.price') }}</th>
                                <th>{{ __('common.description') }}</th>
                                <th>{{ __('common.type') }}</th>
                                <th>{{ __('common.size') }}</th>
                                <th>{{ __('common.quantity') }}</th>
                                <th>{{ __('common.addonItem') }}</th>
                                {{-- <th class="no-content"></th> --}}
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <x-slot name="script">
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            const getData = "{{ $dataUrl }}";
            const orderId = "{{ $orderId }}";
            const tableElement = document.getElementById('order_details');
        </script>
        <script src="{{ asset('assets/js/admin/customer-module/order-details.js') }}"></script>
        <script src="{{ asset('assets/js/tableAction.js') }}"></script>
    </x-slot>
</x-app-layout>