@php use App\Enums\DateTimeFormats;use Carbon\Carbon; @endphp
<x-app-layout>
    <div class="max-w-full mx-auto sm:px-1 lg:px-1">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 ">
                <x-session-message class="mb-4"/>


                <h2 class="text-2xl font-semibold mb-4">
                    {{__('Order Cancellation')}}
                </h2>

                <form action="{{ url()->current() }}" method="GET">
                    <div class="flex w-full">

                        <div class="">
                            <x-input-label for="search"
                                           :value="__('Order Number or Imei Number')"/>
                            <x-text-input class="w-96" id="search" name="search" :value="request('search')"/>
                            <x-input-error :messages="$errors->get('search')" class="mt-2"/>
                        </div>


                        <div class="flex items-center justify-end mt-7 space-x-2">
                            <x-buttons.primary class="ms-3 px-4">
                                {{ __('Search') }}
                            </x-buttons.primary>
                        </div>
                    </div>
                </form>

                <div x-data="{ open: false, selectedOrderId: null, baseUrl: '{{ asset('') }}' }">
                    <!-- Datatable -->
                    <div class="overflow-x-auto">
                        <table
                            class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-4">
                            <thead class="bg-gray-200 text-gray-700">
                            <tr class="bg-gray-200 text-gray-700">
                                <x-th rowspan="2">SL</x-th>
                                <x-th colspan="3">Dealer</x-th>
                                <x-th colspan="2">Customer</x-th>
                                <x-th colspan="2">Product</x-th>
                                <x-th rowspan="2">Order Number</x-th>
                                <x-th rowspan="2">Order Status</x-th>
                                <x-th rowspan="2">Order Date</x-th>
                                <x-th rowspan="2">Action</x-th>
                            </tr>
                            <tr>
                                <x-th>Name</x-th>
                                <x-th>Shop Name</x-th>
                                <x-th>Shop Code</x-th>

                                <x-th>Name</x-th>
                                <x-th>Phone</x-th>

                                <x-th>Name</x-th>
                                <x-th>Imei</x-th>
                            </tr>
                            </thead>
                            <tbody id="productOrderTableBody">
                            @foreach ($productOrders as $productOrder)
                                <tr>
                                    <x-td class=" text-center">{{ $loop->iteration }}</x-td>
                                    <x-td class="">{{ $productOrder->dealerDetail->proprietor_name }}</x-td>
                                    <x-td class="">{{ $productOrder->dealerDetail->shop_name }}</x-td>
                                    <x-td
                                        class=" text-center">{{ $productOrder->dealerDetail->dealer_code }}</x-td>
                                    <x-td class="">{{ $productOrder->customerDetail->cust_nid_name_en }}</x-td>
                                    <x-td class="">{{ $productOrder->customerDetail->user->mobile_number }}</x-td>
                                    <x-td>{{ $productOrder->product->product_name }}</x-td>
                                    <x-td class="text-center">{{ $productOrder->imei_number }}</x-td>
                                    <x-td class="text-center">{{ $productOrder->order_number }}</x-td>
                                    <x-td class="text-center">{{ $productOrder->order_status }}</x-td>
                                    <x-td
                                        class="text-center whitespace-nowrap">{{ $productOrder->created_at->format(DateTimeFormats::CLIENT_DATE_TIME) }}</x-td>
                                    <x-td class="text-center">
                                        <!-- Revert Button -->
                                        <x-buttons.warning
                                            @click="$dispatch('order-cancellation-modal', { id: {{ $productOrder->id }} })"
                                            title="Order Cancellation">
                                            <x-icons.cross class="h-4 w-4 text-white"/>
                                        </x-buttons.warning>
                                    </x-td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                        <!-- Pagination -->
                        <div class="mt-1">
                            {{ $productOrders->links() }}
                        </div>
                    </div>

                    {{-- approve Modal--}}
                    <div x-data="{ showApproveModal: false, product_order_id: null }"
                         @order-cancellation-modal.window="product_order_id = $event.detail.id; showApproveModal = true;">
                        <div x-show="showApproveModal" x-cloak
                             class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                            <div class="bg-white p-6 rounded shadow-lg w-full max-w-md">
                                <h2 class="text-lg font-semibold mb-4">Order Cancellation</h2>
                                <p class="mb-6">
                                    Are you sure you want to cancel this order? Please provide a reason for the
                                    cancellation.
                                </p>
                                <div>
                                    <form action="{{ route('order_cancellation.store') }}" method="post">
                                        @csrf

                                        <input type="hidden" name="product_order_id" :value="product_order_id">

                                        <div class="mb-4">
                                            <x-input-label for="reason" class="block text-gray-900"
                                                           :value="__('Reason *')"/>
                                            <textarea
                                                name="reason" id="reason"
                                                class="mt-2 block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                                required></textarea>
                                        </div>

                                        <div class="flex justify-end gap-2">
                                            <x-buttons.secondary @click="showApproveModal = false" class="px-4">
                                                {{__('Close')}}
                                            </x-buttons.secondary>
                                            <x-buttons.warning class="px-4">
                                                {{__('Cancel Order')}}
                                            </x-buttons.warning>
                                        </div>
                                    </form>

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

    @push('scripts')

    @endpush
</x-app-layout>