@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 Installment Update')}}
                </h2>

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

                        <div class="">
                            <x-input-label for="search"
                                           :value="__('Order 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">Sale 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 whitespace-nowrap">{{Carbon::parse($productOrder->delivery_date)->format(DateTimeFormats::CLIENT_DATE_TIME) }}</x-td>
                                    <x-td class="text-center">
                                        <!-- Revert Button -->
                                        {{--                                                <x-buttons.success--}}
                                        {{--                                                    @click="$dispatch('order-installment-update-modal', { id: {{ $productOrder->id }}, order: {{$productOrder->toJson()}} })"--}}
                                        {{--                                                    title="Order Installment Edit">--}}
                                        {{--                                                    <x-icons.pencil class="h-4 w-4 text-white"/>--}}
                                        {{--                                                </x-buttons.success>--}}
                                        <x-buttons.link
                                            href="{{ route('order_installment_update.edit', $productOrder->id) }}">
                                            <x-icons.pencil class="h-4 w-4 text-white"/>
                                        </x-buttons.link>
                                    </x-td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

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

                </div>
            </div>
        </div>
    </div>
</x-app-layout>