@php use App\Enums\ProductOrderStatus; @endphp
<x-app-layout>
    @push('styles')
        <style>
            .cancel-btn {
                background-color: #f8d7da;
                color: #721c24;
                border: 1px solid #f5c6cb;
                padding: 8px 16px;
                border-radius: 4px;
                font-weight: bold;
                transition: background-color 0.3s, border-color 0.3s;
            }

            .cancel-btn:hover {
                background-color: #f1b0b7;
                border-color: #e0a0a9;
            }

            .fixed_width {
                width: 12rem;
                margin-right: 1rem;
            }
        </style>
    @endpush

    <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"/>

                @if ($noDataFound)
                    <div x-data="{ show: true }" x-show="show"
                         class="mt-6 rounded-md border border-red-200 bg-red-100 p-4 shadow-sm transition-all duration-300 ease-in-out">
                        <div class="flex justify-between items-start">
                            <div class="flex items-start space-x-3">
                                <div class="flex-shrink-0 pt-0.5">
                                    <svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor"
                                         stroke-width="2"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M12 9v2m0 4h.01m-6.938 4h13.856C18.07 20 20 18.07 20 15.938V8.062C20 5.93 18.07 4 15.938 4H8.062C5.93 4 4 5.93 4 8.062v7.876C4 18.07 5.93 20 8.062 20z"/>
                                    </svg>
                                </div>
                                <div class="text-sm text-red-700">
                                    <p class="font-semibold">No matching records found.</p>
                                    <p class="text-xs mt-1">Try adjusting your search or filter options.</p>
                                </div>
                            </div>
                            <button @click="show = false" class="text-red-500 hover:text-red-700 text-sm font-bold">
                                ×
                            </button>
                        </div>
                    </div>
                @endif


                <h2 class="text-2xl font-semibold mb-4">Product Order Information</h2>
                <div x-data="productOrderFilter({
                                initialBrand: '{{ request('brand_id','All') }}',
                                initialDealer: '{{ request('dealer_id','All') }}',
                                initialCustomer: '{{ request('customer_id','All') }}',
                                initialProduct: '{{ request('product_id','All') }}'
                            })"
                     x-init="init()"
                >
                    <form id="productOrderFormId" action="{{ route('product_order.create') }}" method="GET">
                        <div class="flex w-full" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">

                            @php
                                $isBrandUser = auth()->user()->hasRole(\App\Enums\UserRole::BRAND_USER);
                            @endphp
                            @if($isBrandUser)
                                {{-- Brand (fixed, disabled) --}}
                                {{--                                    <div class="fixed_width">--}}
                                {{--                                        <label for="brand_id" class="block text-sm font-medium text-gray-700">Brand</label>--}}
                                {{--                                        <select id="brand_id" name="brand_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" disabled>--}}
                                {{--                                            <option value="">All</option>--}}
                                {{--                                            @foreach($brands as $brand)--}}
                                {{--                                                <option value="{{ $brand->id }}" selected>{{ $brand->name }}</option>--}}
                                {{--                                            @endforeach--}}
                                {{--                                        </select>--}}
                                {{--                                    </div>--}}
                                {{-- Brand (hidden but value submitted) --}}
                                <input type="hidden" name="brand_id" value="{{ $brands->first()->id ?? '' }}">

                                {{-- Product --}}
                                <div class="fixed_width">
                                    <label for="product_id"
                                           class="block text-sm font-medium text-gray-700">Model</label>
                                    <select id="product_id" name="product_id"
                                            class="block w-full border-gray-300 rounded-md shadow-sm">
                                        <option value="">All</option>
                                        @foreach($productList as $product)
                                            <option value="{{ $product->id }}"
                                                {{ (string) old('product_id', request('product_id')) === (string) $product->id ? 'selected' : '' }}>
                                                {{ $product->product_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                {{-- Dealer & Customer --}}
                                <div x-data="{
                                            // Prepend virtual 'All' option
                                            dealers: [{ id: 'all', proprietor_name: 'All', shop_name: '' }, ...{{ $dealerList->toJson() }}],
                                            customers: [{ id: 'all', cust_nid_name_en: 'All', dealer_id: null }, ...{{ $customerList->toJson() }}],

                                            // Dealer State
                                            selectedDealerId: '{{ old('dealer_id', request('dealer_id')) ?? 'all' }}',
                                            searchDealer: '{{ (old('dealer_id', request('dealer_id')) === null || old('dealer_id', request('dealer_id')) === 'all')
                                                            ? 'All'
                                                            : (optional($dealerList->firstWhere('id', old('dealer_id', request('dealer_id'))))->proprietor_name ?? '')
                                                              . (optional($dealerList->firstWhere('id', old('dealer_id', request('dealer_id'))))->shop_name
                                                                  ? ' (' . optional($dealerList->firstWhere('id', old('dealer_id', request('dealer_id'))))->shop_name . ')'
                                                                  : '')
                                                        }}'
                                                        ,
                                            openDealer: false,

                                            // Customer State
                                            selectedCustomerId: '{{ old('customer_id', request('customer_id')) ?? 'all' }}',
                                            searchCustomer: '{{ (old('customer_id', request('customer_id')) === null || old('customer_id', request('customer_id')) === 'all') ? 'All' : (optional($customerList->firstWhere('id', old('customer_id', request('customer_id'))))->cust_nid_name_en ?? '') }}',
                                            openCustomer: false,

                                            // Filtered Customers based on selected Dealer
                                            get filteredCustomers() {
                                                if (this.selectedDealerId === 'all') {
                                                    return this.customers;
                                                }
                                                return this.customers.filter(c => c.dealer_id == this.selectedDealerId || c.id === 'all');
                                            },

                                            // Select dealer
                                            onDealerSelect(dealer) {
                                                this.selectedDealerId = dealer.id;
                                                this.searchDealer = dealer.shop_name + (dealer.dealer_code ? ' (' + dealer.dealer_code + ')' : '');
                                                this.selectedCustomerId = 'all';
                                                this.searchCustomer = 'All';
                                                this.openDealer = false;
                                            },

                                            // Select customer
                                            onCustomerSelect(customer) {
                                                this.selectedCustomerId = customer.id;
                                                this.searchCustomer = customer.cust_nid_name_en;
                                                this.openCustomer = false;
                                            },

                                            // Smart filtering for dealer dropdown
                                            get visibleDealers() {
                                                if (this.searchDealer.toLowerCase() === 'all') {
                                                    return this.dealers; // Show all dealers including 'All'
                                                }
                                                return this.dealers.filter(d =>
                                                    d.proprietor_name.toLowerCase().includes(this.searchDealer.toLowerCase()) ||
                                                    (d.shop_name && d.shop_name.toLowerCase().includes(this.searchDealer.toLowerCase()))
                                                );
                                            },

                                            // Smart filtering for customer dropdown
                                            get visibleCustomers() {
                                                if (this.searchCustomer.toLowerCase() === 'all') {
                                                    return this.filteredCustomers; // Show all customers including 'All'
                                                }
                                                return this.filteredCustomers.filter(c =>
                                                    c.cust_nid_name_en.toLowerCase().includes(this.searchCustomer.toLowerCase())
                                                );
                                            }
                                        }" class="flex gap-4">

                                    <!-- Dealer Dropdown -->
                                    <div class="flex-1">
                                        <label class="block text-sm font-medium text-gray-700">Dealer</label>
                                        <input type="text"
                                               placeholder="Search Dealer..."
                                               x-model="searchDealer"
                                               @focus="openDealer = true"
                                               @click.outside="openDealer = false"
                                               class="block w-full border-gray-300 rounded-md shadow-sm px-3 py-2">

                                        <ul x-show="openDealer"
                                            class="max-h-40 overflow-y-auto border border-gray-300 rounded-md shadow-sm bg-white z-50 absolute w-full">
                                            <template x-for="dealer in visibleDealers" :key="dealer.id">
                                                <li @click="onDealerSelect(dealer)"
                                                    class="px-2 py-1 cursor-pointer hover:bg-gray-100">
                                                    <span
                                                        x-text="dealer.shop_name + (dealer.dealer_code ? ' - ' + dealer.dealer_code : '')"></span>
                                                </li>
                                            </template>
                                        </ul>

                                        <input type="hidden" name="dealer_id"
                                               :value="selectedDealerId === 'all' ? null : selectedDealerId">
                                    </div>
                                    <!-- Customer Dropdown -->
                                    <div class="flex-1 mr-4">
                                        <label class="block text-sm font-medium text-gray-700">Customer</label>
                                        <input type="text"
                                               placeholder="Search Customer..."
                                               x-model="searchCustomer"
                                               @focus="openCustomer = true"
                                               @click.outside="openCustomer = false"
                                               class="block w-full border-gray-300 rounded-md shadow-sm px-3 py-2">

                                        <ul x-show="openCustomer"
                                            class="max-h-40 overflow-y-auto border border-gray-300 rounded-md shadow-sm bg-white z-50 absolute w-full">
                                            <template x-for="customer in visibleCustomers" :key="customer.id">
                                                <li @click="onCustomerSelect(customer)"
                                                    class="px-2 py-1 cursor-pointer hover:bg-gray-100">
                                                    <span x-text="customer.cust_nid_name_en"></span>
                                                </li>
                                            </template>
                                        </ul>
                                        <input type="hidden" name="customer_id"
                                               :value="selectedCustomerId === 'all' ? null : selectedCustomerId">
                                    </div>
                                </div>
                            @else
                                <!-- Brand -->
                                <div class="fixed_width">
                                    <x-input-label for="brandId" :value="__('Brand')"/>
                                    <select x-model="brandId" @change="onBrandChange()" name="brand_id"
                                            class="w-full border rounded">
                                        <option value="All">All</option>
                                        @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Product -->
                                <div class="fixed_width">
                                    <x-input-label for="productId" :value="__('Model')"/>
                                    <select x-model="productId" name="product_id" class="w-full border rounded">
                                        <option value="All">All</option>
                                        <template x-for="product in products" :key="product.id">
                                            <option :value="product.id" x-text="product.product_name"
                                                    :selected="product.id == productId"></option>
                                        </template>
                                    </select>
                                </div>
                                <!-- Dealer Dropdown (same Alpine parent as customers/products) -->
                                <div class="fixed_width relative" x-data="{ open:false, search:'' }">
                                    <x-input-label for="dealerId" :value="__('Dealer')"/>
                                    <input type="text"
                                           x-model="search"
                                           @focus="open = true"
                                           @blur="setTimeout(() => open = false, 150)"
                                           placeholder="Search dealer..."
                                           class="w-full border rounded px-2 py-2"/>

                                    <!-- Dropdown -->
                                    <div x-show="open"
                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">
                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"
                                             @click="dealerId = 'All'; search='All'; open = false; customerId='All'">
                                            All
                                        </div>

                                        <template
                                            x-for="dealer in dealers.filter(d => (`${d.shop_name} - ${d.dealer_code}`).toLowerCase().includes(search.toLowerCase()))"
                                            :key="dealer.id">
                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"
                                                 @click="dealerId = dealer.id;
                                                     search = `${dealer.shop_name} - ${dealer.dealer_code}`;
                                                     open = false;
                                                     /* reset customer when dealer changes */
                                                     customerId = 'All';
                                                   ">
                                                <span
                                                    x-text="dealer.dealer_code ? `${dealer.shop_name} - ${dealer.dealer_code}` : dealer.shop_name"></span>
                                            </div>
                                        </template>
                                    </div>
                                    <input type="hidden" name="dealer_id" :value="dealerId">
                                </div>
                                <!-- Customer Dropdown -->
                                <div class="fixed_width relative" x-data="{ open:false, search:'' }">
                                    <x-input-label for="customerId" :value="__('Customer')"/>
                                    <input type="text"
                                           x-model="search"
                                           @focus="open = true"
                                           @blur="setTimeout(() => open = false, 150)"
                                           placeholder="Search customer..."
                                           class="w-full border rounded px-2 py-2"/>

                                    <div x-show="open"
                                         class="absolute z-10 w-full bg-white border rounded shadow max-h-60 overflow-auto">
                                        <div class="p-1 hover:bg-gray-100 cursor-pointer"
                                             @click="customerId = 'All'; search='All'; open = false">
                                            All
                                        </div>

                                        <template
                                            x-for="customer in customers
                                                .filter(c => dealerId === 'All' || c.dealer_id == dealerId)
                                                .filter(c => c.cust_nid_name_en.toLowerCase().includes(search.toLowerCase()))"
                                            :key="customer.id">
                                            <div class="p-1 hover:bg-gray-100 cursor-pointer"
                                                 @click="customerId = customer.id; search = customer.cust_nid_name_en; open = false">
                                                <span x-text="customer.cust_nid_name_en"></span>
                                            </div>
                                        </template>
                                    </div>
                                    <input type="hidden" name="customer_id" :value="customerId">
                                </div>
                            @endif

                            <div class="fixed_width">
                                <x-input-label for="start_date" :value="__('Start Date *')"/>
                                <x-text-input id="start_date" class="block w-full flatpickr" type="text"
                                              name="start_date" required
                                              :value="old('start_date', request('start_date'))"
                                              placeholder="dd-mm-yyyy"/>
                                <x-input-error :messages="$errors->get('start_date')" class="mt-2"/>
                            </div>

                            <div class="fixed_width">
                                <x-input-label for="end_date" :value="__('End Date *')"/>
                                <x-text-input id="end_date" class="block w-full flatpickr" type="text"
                                              name="end_date" required
                                              :value="old('end_date', request('end_date'))"
                                              placeholder="dd-mm-yyyy"/>
                                <x-input-error :messages="$errors->get('end_date')" class="mt-2"/>
                            </div>

                            <div class="fixed_width">
                                <x-input-label for="order_status" :value="__('Order Status')"/>
                                <select id="order_status" name="order_status"
                                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">-- Select Status --</option>
                                    @foreach($orderStatuses as $orderStatus)
                                        <option value="{{ $orderStatus }}"
                                            {{ old('order_status', request('order_status')) === $orderStatus ? 'selected' : '' }}>
                                            {{ $orderStatus }}
                                        </option>

                                    @endforeach
                                </select>
                                <x-input-error :messages="$errors->get('order_status')" class="mt-2"/>
                            </div>

                            <div class="fixed_width">
                                <x-input-label for="mobile_or_imei" :value="__('Mobile or IMEI')"/>
                                <x-text-input id="mobile_or_imei" class="block w-full" type="text"
                                              name="mobile_or_imei"
                                              :value="old('mobile_or_imei', request('mobile_or_imei'))"
                                              placeholder="Mobile or IMEI"/>
                                <x-input-error :messages="$errors->get('mobile_or_imei')" 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 text-xs mt-4">
                                <thead>
                                <tr class="bg-gray-200 text-gray-700">
                                    <x-th>SL</x-th>
                                    <x-th>Shop Name</x-th>
                                    <x-th>Shop Code</x-th>
                                    <x-th>Customer</x-th>
                                    <x-th>Service Type</x-th>
                                    <x-th>Product</x-th>
                                    <x-th>IMEI</x-th>
                                    <x-th>Order Number</x-th>
                                    <x-th>Bill Number</x-th>
                                    <x-th>Cash Price</x-th>
                                    <x-th>Interest</x-th>
                                    <x-th>Interest Rate</x-th>
                                    <x-th>Down Payment</x-th>
                                    <x-th>Down Payment (%)</x-th>
                                    <x-th>Security Money</x-th>
                                    <x-th>Security Money (%)</x-th>
                                    <x-th>Total Price</x-th>
                                    <x-th>Tenure</x-th>
                                    <x-th>Order Status</x-th>
                                    <x-th>Order Date</x-th>
                                    <x-th>Action</x-th>
                                </tr>
                                </thead>
                                <tbody id="productOrderTableBody">
                                @if (isset($productOrderListByDealer))
                                    @foreach ($productOrderListByDealer as $productOrder)
                                        <tr>
                                            <x-td class=" text-center">
                                                {{ $loop->iteration }}
                                            </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=" text-center">
                                                {{ $productOrder->customerDetail->service_type }}
                                            </x-td>
                                            <x-td class=" ">
                                                {{ $productOrder->product->product_name }}
                                            </x-td>
                                            <x-td class=" ">
                                                {{ $productOrder->imei_number }}
                                            </x-td>
                                            <x-td class=" text-center">
                                                {{ $productOrder->order_number }}
                                            </x-td>
                                            <x-td class=" text-center">
                                                {{ $productOrder->bill_number }}
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->cash_price }}
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->interest }}
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->interest_rate }}%
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->down_payment }}
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->down_payment_percentage }}%
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->security_money }}
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->security_money_percentage }}%
                                            </x-td>
                                            <x-td class=" text-right">
                                                {{ $productOrder->total_price }}
                                            </x-td>
                                            <x-td class=" text-center">
                                                {{ $productOrder->tenure_months }}
                                            </x-td>
                                            <x-td class=" text-center">
                                                {{ $productOrder->order_status }}
                                            </x-td>

                                            <x-td class=" text-center whitespace-nowrap">
                                                {{ $productOrder->created_at->format('d-m-Y h:i:s A') }}
                                            </x-td>

                                            @php($productOrder->date = $productOrder->created_at->format('d-m-Y h:i:s A'))

                                            @if(in_array($productOrder->order_status, ['Approved', 'Rejected', 'Blocked', 'Cancelled']))
                                                @php($productOrder->byWhom = $productOrder->approvedByUser->name ?? 'Not Available')
                                            @else
                                                @php($productOrder->byWhom = $productOrder->confirmedByUser->name ?? 'Not Available')
                                            @endif

                                            <x-td class=" space-x-4 justify-center">
                                                <!-- View Button -->
                                                <x-buttons.primary
                                                    @click="selectedOrderId = {{ $productOrder->id }}; productOrder = {{json_encode($productOrder)}}; open = true"
                                                    title="View">
                                                    <x-icons.change class="h-5 w-5 text-white"/>
                                                </x-buttons.primary>
                                            </x-td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                            <!-- Pagination -->
                            <div class="mt-1">
                                {{ $productOrderListByDealer->links() }}
                            </div>
                        </div>

                        <!-- Modal -->
                        <template x-if="open">
                            <div
                                class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
                                <div
                                    class="bg-white rounded-lg shadow-lg p-6 w-full max-w-screen-xl my-8 max-h-[90vh] overflow-y-auto">
                                    <h2 class="text-lg font-semibold mb-4">View Product Order Details</h2>

                                    <div x-data="{ tab: 'order' }" class="mt-3 mb-10">
                                        <div class="mb-4 border-b border-gray-200">
                                            <nav class="-mb-px flex space-x-8">
                                                <button type="button" @click="tab = 'order'"
                                                        :class="tab === 'order' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                                                    Order Info
                                                </button>
                                                <button type="button" @click="tab = 'customer'"
                                                        :class="tab === 'customer' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                                                    Customer Info
                                                </button>

                                                <button type="button" @click="tab = 'guarantor'"
                                                        :class="tab === 'guarantor' ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                                                    Guarantor Info
                                                </button>
                                            </nav>
                                        </div>

                                        <!-- Order Info Tab -->
                                        <div x-show="tab === 'order'"
                                             class="grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-2">
                                            <template x-for="field in [
                                                { label: 'Dealer Name', value: productOrder.dealer_detail.proprietor_name },
                                                { label: 'Shop Name', value: productOrder.dealer_detail.shop_name },
                                                { label: 'Shop Code', value: productOrder.dealer_detail.dealer_code },
                                                { label: 'Product Name', value: productOrder.product.product_name },
                                                { label: 'Order Number', value: productOrder.order_number },
                                                { label: 'Bill Number', value: productOrder.bill_number ?? '-' },
                                                { label: 'Cash Price', value: productOrder.cash_price },
                                                { label: 'Interest', value: productOrder.interest },
                                                { label: 'Interest Rate', value: productOrder.interest_rate },
                                                { label: 'Down Payment', value: productOrder.down_payment },
                                                { label: 'Security Money', value: productOrder.security_money },
                                                { label: 'Total Price', value: productOrder.total_price },
                                                { label: 'Tenure Month', value: productOrder.tenure_months },
                                                { label: 'Order Status', value: productOrder.order_status },
                                                { label: 'Order Date', value: productOrder.date },
                                                { label: 'IMEI', value: productOrder.imei_number },
{{--                                                { label: 'Approved Date', value: productOrder.approved_date },--}}
{{--                                                { label: 'Reapplied Date', value: productOrder.reappliedDate },--}}
{{--                                                {--}}
{{--                                                    label: 'Reapplied Date',--}}
{{--                                                    value: productOrder.order_status === 'Reapplied' ? productOrder.reapplied_date : '-'--}}
{{--                                                },--}}

{{--                                                { label: 'Order Time', value: productOrder.dateTime },--}}
{{--                                                { label: 'Approved Date', value: productOrder.approvedDate },--}}

{{--                                                { label: 'Rejected Date', value: productOrder.rejections && productOrder.rejections.length > 0 ? productOrder.rejections[0].created_at : '-' },--}}
{{--                                                { label: 'Rejected Reason', value: productOrder.rejections && productOrder.rejections.length > 0 ? productOrder.rejections[0].reason : '-' },--}}

{{--                                                { label: 'By Whom', value: productOrder.byWhom },--}}

                                            ]" :key="field.label">
                                                <div class="sm:col-span-3">
                                                    <label class="block text-sm/6 font-medium text-gray-900"
                                                           x-text="field.label"></label>
                                                    <div class="mt-2">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="field.value"></span>
                                                    </div>
                                                </div>
                                            </template>
                                            <!-- ...other order fields... -->

                                            {{-- show product image --}}
                                            <div class="sm:col-span-3" x-show="productOrder.product.product_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">Product
                                                    Image</label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}images/products/${productOrder.product.product_image}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}images/products/${productOrder.product.product_image}`"
                                                            alt="Product Image"
                                                            class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>

                                            <!-- Timeline Section -->
                                            <div class="sm:col-span-6 mt-6 text-sm"
                                                 style="background: #f3f4f6; padding-left: 1rem; padding-top: 1rem">
                                                <label class="block text-lg font-medium text-gray-900">Product Order
                                                    History</label>
                                                <div class="mt-2">
                                                    <template x-if="productOrder.rejections.length > 0">
                                                        <div class="timeline">
                                                            <template x-for="log in productOrder.rejections"
                                                                      :key="log.id">
                                                                <div class="mb-4">
                                                                    Status : <span class="text-sm text-gray-500"
                                                                                   x-text="log.status"></span><br>
                                                                    Reason : <span class="text-sm text-gray-500"
                                                                                   x-text="log.reason"></span><br>
                                                                    {{--                                                                    Confirmed : <span class="text-sm text-gray-500" x-text="productOrder.delivery_date"></span><br>--}}
                                                                    {{--                                                                    Reapplied : <span class="text-sm text-gray-500" x-text="productOrder.reapplied_date"></span><br>--}}
                                                                    {{--                                                                    Approved : <span class="text-sm text-gray-500" x-text="productOrder.approved_date"></span><br>--}}
                                                                    Date : <span class="text-sm text-gray-500"
                                                                                 x-text="formatDate(log.created_at)"></span><br>
                                                                    Performed By : <span class="text-sm text-gray-500"
                                                                                         x-text="`${log.rejected_by.name} (${log.rejected_by.username})`"></span><br>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </template>
                                                    <template x-if="productOrder.rejections.length === 0">
                                                        <span>No actions available.</span>
                                                    </template>
                                                </div>
                                            </div>

                                        </div>

                                        <!-- Customer Info Tab -->
                                        <div x-show="tab === 'customer'"
                                             class="grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-2">
                                            <!-- Place customer-related fields here -->
                                            <template x-for="field in [
                                                { label: 'Name', value: productOrder.customer_detail.cust_nid_name_en },
                                                { label: 'Nid Number', value: productOrder.customer_detail.cust_nid_number },
                                                { label: 'Father Name', value: productOrder.customer_detail.cust_nid_father_name_en },
                                                { label: 'Mother Name', value: productOrder.customer_detail.cust_nid_mother_name_en },
                                                { label: 'DOB', value: productOrder.customer_detail.cust_nid_dob },
                                                { label: 'Gender', value: productOrder.customer_detail.gender },
                                                { label: 'Address', value: productOrder.customer_detail.cust_nid_address },
                                                { label: 'Service Type', value: productOrder.customer_detail.service_type },
                                                { label: 'Customer Mobile', value: productOrder.customer_detail.user.mobile_number },
                                            ]" :key="field.label">
                                                <div class="sm:col-span-3">
                                                    <label class="block text-sm/6 font-medium text-gray-900"
                                                           x-text="field.label"></label>
                                                    <div class="mt-1">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="field.value"></span>
                                                    </div>
                                                </div>
                                            </template>

                                            <div
                                                class="sm:col-span-6 grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-2">
                                                <div class="sm:col-span-2">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Nid Front
                                                        Image</label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/nid_image/${productOrder.customer_detail.cust_nid_front_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/nid_image/${productOrder.customer_detail.cust_nid_front_image}`"
                                                                alt="Nid Front" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-2">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Nid Back
                                                        Image</label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/nid_image/${productOrder.customer_detail.cust_nid_back_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/nid_image/${productOrder.customer_detail.cust_nid_back_image}`"
                                                                alt="Nid Back" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-2"
                                                     x-data="{
                                                            files: productOrder.customer_detail.jobh_bank_statement_image || [],
                                                            current: 0,
                                                            prev() { this.current = (this.current === 0 ? this.files.length - 1 : this.current - 1) },
                                                            next() { this.current = (this.current === this.files.length - 1 ? 0 : this.current + 1) }
                                                         }"
                                                     x-show="files.length">

                                                    <label class="block text-sm/6 font-medium text-gray-900 mb-2">Bank Statement Image / PDF</label>

                                                    <div class="relative w-64 h-40 mx-auto">
                                                        <template x-if="files.length">
                                                            <div class="w-full h-full flex items-center justify-center">
                                                                <!-- Image -->
                                                                <template x-if="['jpg','jpeg','png','gif'].includes(files[current].split('.').pop().toLowerCase())">
                                                                    <a :href="`${baseUrl}/images/jobh_bank_statement/${files[current]}`" target="_blank" style="height: 100%">
                                                                        <img :src="`${baseUrl}/images/jobh_bank_statement/${files[current]}`"
                                                                             class="w-full h-full object-contain rounded border" />
                                                                    </a>
                                                                </template>

                                                                <!-- PDF -->
                                                                <template x-if="files[current].split('.').pop().toLowerCase() === 'pdf'">
                                                                    <a :href="`${baseUrl}/images/jobh_bank_statement/${files[current]}`" target="_blank" style="height: 100%"
                                                                       class="flex items-center justify-center w-full h-full bg-gray-200 rounded border text-gray-700">
                                                                        📄 <span x-text="files[current]" class="ml-2"></span>
                                                                    </a>
                                                                </template>
                                                            </div>
                                                        </template>

                                                        <!-- Previous / Next Buttons -->
                                                        <button @click="prev()" class="absolute left-0 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white rounded">‹</button>
                                                        <button @click="next()" class="absolute right-0 top-1/2 transform -translate-y-1/2 px-2 py-1 bg-gray-800 text-white rounded">›</button>
                                                    </div>

                                                    <!-- Indicator -->
                                                    <div class="flex justify-center mt-2 space-x-1">
                                                        <template x-for="(file, index) in files" :key="file">
                                                            <span @click="current = index"
                                                                  :class="{'bg-gray-800': current === index, 'bg-gray-300': current !== index}"
                                                                  class="w-2 h-2 rounded-full cursor-pointer"></span>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>

                                            <hr class="sm:col-span-6"/>

                                            <!-- Job Information -->
                                            <div x-show="productOrder.customer_detail.service_type === 'Job'"
                                                 class="grid grid-cols-2 gap-x-6 sm:grid-cols-6 space-y-2 sm:col-span-6">
                                                <div class="sm:col-span-3">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Company
                                                        Name</label>
                                                    <div class="mt-1">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="productOrder.customer_detail.jobh_company_name ? productOrder.customer_detail.jobh_company_name : 'N/A'"></span>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3">
                                                    <label
                                                        class="block text-sm/6 font-medium text-gray-900">Designation</label>
                                                    <div class="mt-1">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="productOrder.customer_detail.jobh_designation ? productOrder.customer_detail.jobh_designation : 'N/A'"></span>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.jobh_id_card_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        ID Card Front Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/jobh_id_card/${productOrder.customer_detail.jobh_id_card_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/jobh_id_card/${productOrder.customer_detail.jobh_id_card_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.jobh_id_card_back_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        ID Card Back Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/jobh_id_card/${productOrder.customer_detail.jobh_id_card_back_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/jobh_id_card/${productOrder.customer_detail.jobh_id_card_back_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Business Information -->
                                            <div x-show="productOrder.customer_detail.service_type === 'Business'"
                                                 class="grid grid-cols-2 gap-x-6 sm:grid-cols-6 space-y-2 sm:col-span-6">
                                                <div class="sm:col-span-3">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Company
                                                        Name</label>
                                                    <div class="mt-1">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="productOrder.customer_detail.biz_company_name ? productOrder.customer_detail.biz_company_name : 'N/A'"></span>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Trade
                                                        Licence Number</label>
                                                    <div class="mt-1">
                                                        <span
                                                            class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                            x-text="productOrder.customer_detail.biz_trade_licence_number ? productOrder.customer_detail.biz_trade_licence_number : 'N/A'"></span>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3"
                                                     x-show="productOrder.customer_detail.biz_trade_licence_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">Trade
                                                        Licence Image</label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/trade_licence_image/${productOrder.customer_detail.biz_trade_licence_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/trade_licence_image/${productOrder.customer_detail.biz_trade_licence_image}`"
                                                                alt="Trade Licence"
                                                                class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Ride Share -->
                                            <div x-show="productOrder.customer_detail.service_type === 'Ride Share'"
                                                 class="grid grid-cols-2 gap-x-6 sm:grid-cols-6 space-y-2 sm:col-span-6">
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.ride_sharing_app_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        Ride Share App Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/ride_share/${productOrder.customer_detail.ride_sharing_app_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/ride_share/${productOrder.customer_detail.ride_sharing_app_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.driving_license_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        Driving License Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/ride_share/${productOrder.customer_detail.driving_license_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/ride_share/${productOrder.customer_detail.driving_license_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr class="sm:col-span-6"/>

                                            {{--Small Business--}}
                                            <div x-show="productOrder.customer_detail.service_type === 'Small Business'"
                                                 class="grid grid-cols-2 gap-x-6 sm:grid-cols-6 space-y-2 sm:col-span-6">
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.shop_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        Shop Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/shop_image/${productOrder.customer_detail.shop_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/shop_image/${productOrder.customer_detail.shop_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

                                            {{--Student--}}
                                            <div x-show="productOrder.customer_detail.service_type === 'Student'"
                                                 class="grid grid-cols-2 gap-x-6 sm:grid-cols-6 space-y-2 sm:col-span-6">
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.stu_id_card_front_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        Student ID Card Front Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/stu_id_card_image/${productOrder.customer_detail.stu_id_card_front_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/stu_id_card_image/${productOrder.customer_detail.stu_id_card_front_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="sm:col-span-3"
                                                     x-if="productOrder.customer_detail.stu_id_card_back_image">
                                                    <label class="block text-sm/6 font-medium text-gray-900">
                                                        Student ID Card Back Image
                                                    </label>
                                                    <div class="mt-2">
                                                        <a :href="`${baseUrl}/images/stu_id_card_image/${productOrder.customer_detail.stu_id_card_back_image}`"
                                                           target="_blank">
                                                            <img
                                                                :src="`${baseUrl}/images/stu_id_card_image/${productOrder.customer_detail.stu_id_card_back_image}`"
                                                                alt="ID Card" class="w-32 h-auto rounded border"/>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="sm:col-span-6"
                                                 x-show="productOrder.customer_detail.bkash_app_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">
                                                    Bkash Number
                                                </label>
                                                <div class="mt-2">
                                                          <span
                                                              class="block w-full px-3 py-1.5 text-base text-gray-900 bg-gray-100 rounded-md"
                                                              x-text="productOrder.customer_detail.bkash_number ? productOrder.customer_detail.bkash_number : 'N/A'"></span>
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3"
                                                 x-show="productOrder.customer_detail.bkash_app_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">
                                                    Bkash Image
                                                </label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}/images/bkash_app_image/${productOrder.customer_detail.bkash_app_image}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}/images/bkash_app_image/${productOrder.customer_detail.bkash_app_image}`"
                                                            alt="Bkash Image"
                                                            class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3"
                                                 x-show="productOrder.customer_detail.utility_bill">
                                                <label class="block text-sm/6 font-medium text-gray-900">
                                                    Utility Image
                                                </label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}/images/utility_bill/${productOrder.customer_detail.utility_bill}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}/images/utility_bill/${productOrder.customer_detail.utility_bill}`"
                                                            alt="Utility Bill"
                                                            class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>

                                            {{-- Customer Profile Image --}}
                                            <div class="sm:col-span-3"
                                                 x-show="productOrder.customer_detail.user.profile_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">
                                                    Profile Image
                                                </label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}/images/profile_image/${productOrder.customer_detail.user.profile_image}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}/images/profile_image/${productOrder.customer_detail.user.profile_image}`"
                                                            alt="Profile Image"
                                                            class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>

                                        </div>

                                        <!-- guarantor Info Tab -->
                                        <div x-show="tab === 'guarantor'" class="grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-2">
                                            <template x-if="!productOrder.guarantors || productOrder.guarantors.length === 0">
                                                <p class="text-gray-500 text-sm">No guarantors found.</p>
                                            </template>
                                            <table style="width: 77rem">
                                                <thead class="bg-gray-100 text-gray-700">
                                                <tr>
                                                    <th class="border px-3 py-2 text-center w-10">#</th>
                                                    <th class="border px-3 py-2">Relation</th>
                                                    <th class="border px-3 py-2">Name</th>
                                                    <th class="border px-3 py-2">Father Name</th>
                                                    <th class="border px-3 py-2">Mother Name</th>
                                                    <th class="border px-3 py-2">DOB</th>
                                                    <th class="border px-3 py-2">NID Number</th>
                                                    <th class="border px-3 py-2">Address</th>
                                                    <th class="border px-3 py-2">Mobile Number</th>
                                                    <th class="border px-3 py-2">Front Image</th>
                                                    <th class="border px-3 py-2">Back Image</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <template x-for="(guar, index) in productOrder.guarantors" :key="index">
                                                    <tr class="border-t hover:bg-gray-50">
                                                        <td class="border px-3 py-2 text-center" x-text="index + 1"></td>
                                                        <td class="border px-3 py-2" x-text="guar.relation ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_name_en ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_father_name_en ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_mother_name_en ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_dob ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_number ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_nid_address ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2" x-text="guar.guar_mobile_number ?? 'N/A'"></td>
                                                        <td class="border px-3 py-2 text-center">
                                                            <div class="flex justify-center">
                                                                <template x-if="guar.guar_nid_front_image">
                                                                    <a :href="`${baseUrl}/images/nid_image/${guar.guar_nid_front_image}`" target="_blank">
                                                                        <img
                                                                            :src="`${baseUrl}/images/nid_image/${guar.guar_nid_front_image}`"
                                                                            alt="Guarantor nid front image"
                                                                            class="rounded"
                                                                            style="height: 3rem"
                                                                        />
                                                                    </a>
                                                                </template>
                                                                <template x-if="!guar.guar_nid_front_image">
                                                                    <span class="text-gray-400 italic">No Image</span>
                                                                </template>
                                                            </div>
                                                        </td>
                                                        <td class="border px-3 py-2 text-center">
                                                            <div class="flex justify-center">
                                                                <template x-if="guar.guar_nid_front_image">
                                                                    <a :href="`${baseUrl}/images/nid_image/${guar.guar_nid_back_image}`"
                                                                       target="_blank">
                                                                        <img
                                                                            :src="`${baseUrl}/images/nid_image/${guar.guar_nid_back_image}`"
                                                                            alt="Guarantor nid back image"
                                                                            class="rounded" style="height: 3rem"/>
                                                                    </a>
                                                                </template>
                                                                <template x-if="!guar.guar_nid_back_image">
                                                                    <span class="text-gray-400 italic">No Image</span>
                                                                </template>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </template>
                                                </tbody>
                                            </table>

                                            <!-- NID Front Image -->
                                            <div class="sm:col-span-3"
                                                 x-show="productOrder.guarantor.guar_nid_front_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">NID Front
                                                    Image</label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}/images/nid_image/${productOrder.guarantor.guar_nid_front_image}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}/images/nid_image/${productOrder.guarantor.guar_nid_front_image}`"
                                                            alt="NID Front" class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>
                                            <!-- NID Back Image -->
                                            <div class="sm:col-span-3"
                                                 x-show="productOrder.guarantor.guar_nid_back_image">
                                                <label class="block text-sm/6 font-medium text-gray-900">NID Back
                                                    Image</label>
                                                <div class="mt-2">
                                                    <a :href="`${baseUrl}/images/nid_image/${productOrder.guarantor.guar_nid_back_image}`"
                                                       target="_blank">
                                                        <img
                                                            :src="`${baseUrl}/images/nid_image/${productOrder.guarantor.guar_nid_back_image}`"
                                                            alt="NID Back" class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Approved Or Rejected Or Block-->
                                    <form :action="`{{route('product_order.create'). '?id=' . request()->id}}`"
                                          method="POST" class="mb-2">
                                        @csrf
                                        <div class="mt-auto flex justify-center gap-2">
                                            <input type="hidden" name="order_id" :value="selectedOrderId">
                                            <x-buttons.secondary @click="open = false" class="ms-3">
                                                {{ __('Close') }}
                                            </x-buttons.secondary>

                                            @unless ($isBrandUser)
                                                <x-buttons.primary
                                                    x-show="productOrder.order_status === '{{ProductOrderStatus::PENDING->value}}' || productOrder.order_status === '{{ProductOrderStatus::REAPPLIED->value}}'"
                                                    type="submit" name="status"
                                                    value="{{ProductOrderStatus::APPROVED}}"
                                                    class="ms-3 px-4">
                                                    {{__('Approve')}}
                                                </x-buttons.primary>

                                                <x-buttons.warning
                                                    x-show="productOrder.order_status === '{{ProductOrderStatus::PENDING->value}}' || productOrder.order_status === '{{ProductOrderStatus::REAPPLIED->value}}'"
                                                    class="ms-3 px-4"
                                                    @click="open = false; $dispatch('open-reject-modal', { orderId: selectedOrderId })">
                                                    {{ __('Reject') }}
                                                </x-buttons.warning>

                                                <x-buttons.danger
                                                    x-show="productOrder.order_status === '{{ProductOrderStatus::PENDING->value}}' || productOrder.order_status === '{{ProductOrderStatus::REAPPLIED->value}}'"
                                                    class="ms-3 px-4"
                                                    @click="open = false; $dispatch('open-block-modal', { orderId: selectedOrderId })">
                                                    {{ __('Block') }}
                                                </x-buttons.danger>

                                                <x-buttons.secondary
                                                    x-show="productOrder.order_status === '{{ProductOrderStatus::PENDING->value}}' || productOrder.order_status === '{{ProductOrderStatus::REAPPLIED->value}}' ||
                                                    productOrder.order_status === '{{ProductOrderStatus::REJECTED->value}}'"
                                                    class="cancel-btn ms-3 px-4"
                                                    @click="open = false; $dispatch('open-cancel-modal', { orderId: selectedOrderId })">
                                                    {{ __('Cancel') }}
                                                </x-buttons.secondary>
                                            @endunless
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </template>

                        <!-- Rejection Reason Modal -->
                        <div
                            x-data="{ showRejectModal: false, rejectOrderId: null, reason: '' }"
                            x-on:open-reject-modal.window="showRejectModal = true; rejectOrderId = $event.detail.orderId"
                            x-show="showRejectModal"
                            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                            style="display: none;">
                            <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                                <h2 class="text-lg font-semibold mb-4">Reject Order</h2>
                                <form :action="`{{route('product_order.create')}}`"
                                      method="POST" class="mb-2">
                                    @csrf
                                    <input type="hidden" name="order_id" :value="rejectOrderId">
                                    <input type="hidden" name="status" value="{{ProductOrderStatus::REJECTED}}">
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Rejection
                                            Reason</label>
                                        <textarea name="reason" x-model="reason" required
                                                  class="w-full border rounded p-2 text-base"></textarea>
                                    </div>
                                    <div class="flex justify-end gap-2">
                                        <x-buttons.secondary class="ms-3 px-4" type="button"
                                                            @click="showRejectModal = false">
                                            {{ __('Cancel') }}
                                        </x-buttons.secondary>
                                        <x-buttons.warning class="ms-3 px-4" type="submit">
                                            {{ __('Submit') }}
                                        </x-buttons.warning>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Block Reason Modal -->
                        <div
                            x-data="{ showBlockModal: false, blockOrderId: null, reason: '' }"
                            x-on:open-block-modal.window="showBlockModal = true; blockOrderId = $event.detail.orderId"
                            x-show="showBlockModal"
                            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                            style="display: none;">
                            <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                                <h2 class="text-lg font-semibold mb-4">Block Order</h2>
                                <form :action="`{{route('product_order.create')}}`"
                                      method="POST" class="mb-2">
                                    @csrf
                                    <input type="hidden" name="order_id" :value="blockOrderId">
                                    <input type="hidden" name="status" value="{{ProductOrderStatus::BLOCKED}}">
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Customer Order Block
                                            Reason</label>
                                        <textarea name="reason" x-model="reason" required
                                                  class="w-full border rounded p-2 text-base"></textarea>
                                    </div>
                                    <div class="flex justify-end gap-2">
                                        <x-buttons.secondary class="ms-3 px-4" type="button"
                                                            @click="showBlockModal = false">
                                            {{ __('Cancel') }}
                                        </x-buttons.secondary>
                                        <x-buttons.warning class="ms-3 px-4" type="submit">
                                            {{ __('Submit') }}
                                        </x-buttons.warning>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Cancel Reason Modal -->
                        <div
                            x-data="{ showCancelModal: false, cancelOrderId: null, reason: '' }"
                            x-on:open-cancel-modal.window="showCancelModal = true; cancelOrderId = $event.detail.orderId"
                            x-show="showCancelModal"
                            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                            style="display: none;">
                            <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                                <h2 class="text-lg font-semibold mb-4">Cancel Order</h2>
                                <form :action="`{{route('product_order.create')}}`"
                                      method="POST" class="mb-2">
                                    @csrf
                                    <input type="hidden" name="order_id" :value="cancelOrderId">
                                    <input type="hidden" name="status" value="{{ProductOrderStatus::CANCELLED}}">
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Cancel
                                            Reason</label>
                                        <textarea name="reason" x-model="reason" required
                                                  class="w-full border rounded p-2 text-base"></textarea>
                                    </div>
                                    <div class="flex justify-end gap-2">
                                        <x-buttons.secondary class="ms-3 px-4" type="button"
                                                            @click="showCancelModal = false">
                                            {{ __('Cancel') }}
                                        </x-buttons.secondary>
                                        <x-buttons.warning class="ms-3 px-4" type="submit">
                                            {{ __('Submit') }}
                                        </x-buttons.warning>
                                    </div>
                                </form>
                            </div>
                        </div>


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

    @push('scripts')
        <script !src="">
            function formatDate(dateString) {
                const date = new Date(dateString);
                const day = String(date.getDate()).padStart(2, '0');
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const year = date.getFullYear();
                let hours = date.getHours();
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                const ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12; // the hour '0' should be '12'
                hours = String(hours).padStart(2, '0');

                return `${day}-${month}-${year} ${hours}:${minutes}:${seconds} ${ampm}`;
            }

            document.addEventListener('DOMContentLoaded', function () {
                flatpickr('.flatpickr', {
                    dateFormat: 'd-m-Y',
                    allowInput: true,
                });
            });
        </script>

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('productOrderFilter', ({initialBrand, initialDealer, initialCustomer, initialProduct}) => ({
                    brandId: initialBrand,
                    dealerId: initialDealer,
                    customerId: initialCustomer,
                    productId: initialProduct,
                    dealers: [],
                    customers: [],
                    products: [],

                    async init() {
                        await this.loadDealers(true);
                        await this.loadProducts(true);

                        if (this.dealerId !== 'All') {
                            await this.loadCustomers(true);
                        } else {
                            await this.loadCustomers(true);
                        }
                    },

                    async onBrandChange() {
                        this.dealerId = 'All';
                        this.customerId = 'All';
                        this.productId = 'All';

                        await this.loadDealers(false);
                        await this.loadProducts(false);
                        await this.loadCustomers(false);
                    },

                    async loadDealers(isInit = false) {
                        try {
                            this.dealers = [];
                            this.customers = [];
                            if (!isInit) {
                                this.dealerId = 'All';
                                this.customerId = 'All';
                            }

                            const apiUrl = "{{ url('api/product-order/dealers') }}/" + this.brandId;
                            const res = await fetch(apiUrl);
                            if (!res.ok) {
                                console.error('Dealers fetch failed', res.status, apiUrl);
                                return;
                            }
                            const data = await res.json();
                            this.dealers = data.dealers || [];
                            this.customers = data.customers || [];

                            if (isInit && this.dealerId !== 'All') {
                                const exists = this.dealers.some(d => d.id == this.dealerId);
                                if (!exists) this.dealerId = 'All';
                            }
                        } catch (e) {
                            console.error('Dealers network error', e);
                        }
                    },

                    async loadCustomers(isInit = false) {
                        try {
                            this.customers = [];
                            if (!isInit) this.customerId = 'All';

                            let apiUrl;
                            if (this.dealerId === 'All') {
                                apiUrl = "{{ url('api/product-order/customers') }}/All/" + this.brandId;
                            } else {
                                apiUrl = "{{ url('api/product-order/customers') }}/" + this.dealerId + "/" + this.brandId;
                            }

                            const res = await fetch(apiUrl);
                            if (!res.ok) {
                                console.error('Customers fetch failed', res.status, apiUrl);
                                return;
                            }
                            this.customers = await res.json();

                            if (isInit && this.customerId !== 'All') {
                                const exists = this.customers.some(c => c.id == this.customerId);
                                if (!exists) this.customerId = 'All';
                            }
                        } catch (e) {
                            console.error('Customers network error', e);
                        }
                    },

                    async loadProducts(isInit = false) {
                        try {
                            this.products = [];
                            const apiUrl = "{{ url('api/product-order/products') }}/" + this.brandId;
                            const res = await fetch(apiUrl);
                            if (!res.ok) {
                                console.error('Products fetch failed', res.status, apiUrl);
                                return;
                            }
                            this.products = await res.json();

                            if (isInit && this.productId !== 'All') {
                                const exists = this.products.some(p => p.id == this.productId);
                                if (!exists) this.productId = 'All';
                            }
                        } catch (e) {
                            console.error('Products network error', e);
                        }
                    },
                }));
            });
        </script>

    @endpush
</x-app-layout>