@php use function Laravel\Prompts\warning; @endphp
<x-app-layout>
    @push('styles')
        <style>
            #dealerSearchForm {
                position: sticky;
                top: 0;
                z-index: 50;
                background: white;
            }
        </style>
    @endpush

    <div x-data="dealerModal()" x-init="init()">
        <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="mt-4"/>

                    <!-- Add Dealer Modal Button -->
                    <div class="flex justify-between items-center mb-4">
                        <div class="flex items-center space-x-4">
                            <p class="text-lg font-semibold text-gray-900">Dealer Registration Information</p>
                        </div>

                        <div class="flex items-center space-x-2">
                            <button id="openDealerModalBtn"
                                    class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                Add Dealer
                            </button>
                            <!-- XL Button [Temporary off]-->
                            {{--                                @if (isset($dealerList) && $brands->count() && $bankList->count())--}}
                            {{--                                    <form action="{{ route('dealers.dealer_detail_report_xl') }}" method="POST" target="_blank">--}}
                            {{--                                        @csrf--}}
                            {{--                                        <input type="hidden" name="search" value="{{ request('search') }}">--}}
                            {{--                                        <button type="submit"--}}
                            {{--                                                class="flex items-center px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-sm">--}}
                            {{--                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"--}}
                            {{--                                                 stroke="currentColor" stroke-width="2">--}}
                            {{--                                                <path stroke-linecap="round" stroke-linejoin="round"--}}
                            {{--                                                      d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2zM13 5v5h5"/>--}}
                            {{--                                            </svg>--}}
                            {{--                                            XL--}}
                            {{--                                        </button>--}}
                            {{--                                    </form>--}}
                            {{--                                @endif--}}
                        </div>
                    </div>

                    <!-- Datatable Search server side   (DealerRegistrationController - index a call hoi)-->
                    <div class="top-0 bg-white z-50">
                        <form id="dealerSearchForm" class="flex gap-2" style="width: 40rem; min-width: 25rem;">
                            <input type="text" name="search" id="dealerSearch" value="{{ request('search') }}"
                                   placeholder="Search by Name, Shop, Code, Mobile, Email"
                                   class="w-full px-4 py-2 text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-400"/>
                            <button type="submit"
                                    class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                     viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M21 21l-4.35-4.35m2.35-6.65a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                </svg>
                            </button>
                        </form>
                    </div>

                    <!-- Datatable -->
                    <div class="overflow-x-auto z-0" style="margin-top: -1rem;">
                        <table class="min-w-full table-auto border-collapse border border-gray-300 text-xs mt-10">
                            <thead class="bg-gray-200 text-gray-700 ">
                            <tr class="bg-gray-200 text-gray-700">
                                <x-th>SL</x-th>
                                <x-th>Name</x-th>
                                <x-th>Shop Name</x-th>
                                <x-th>Shop Code</x-th>
                                <x-th>Branch Code</x-th>
                                <x-th>Brand</x-th>

                                <x-th>Mobile</x-th>
                                <x-th>Email</x-th>
                                <x-th>DOB</x-th>

                                <x-th>NID</x-th>
                                <x-th>Trade Licence</x-th>
                                <x-th>TIN</x-th>
                                <x-th>BIN Number</x-th>
                                <x-th>Address</x-th>
                                <x-th>Status</x-th>
                                <x-th>Action</x-th>
                            </tr>
                            </thead>
                            <tbody id="dealerTableBody">
                            @foreach ($dealerList as $dealer)
                                <tr>
                                    <x-td class="text-center">{{ $dealerList->firstItem() + $loop->index }}</x-td>
                                    <x-td>{{ $dealer->proprietor_name }}</x-td>
                                    <x-td>{{ $dealer->shop_name }}</x-td>
                                    <x-td class="text-center">{{ $dealer->dealer_code }}</x-td>
                                    <x-td class="text-center">{{ $dealer->branch_code }}</x-td>
                                    <x-td>{{ $dealer?->brand?->name }}</x-td>
                                    <x-td>{{ $dealer->mobile_number }}</x-td>
                                    <x-td>{{ $dealer?->user?->email }}</x-td>
                                    <x-td
                                        class="text-center whitespace-nowrap">{{ date('d-m-Y', strtotime($dealer->dob)) }}</x-td>
                                    <x-td>{{ $dealer->nid_number }}</x-td>
                                    <x-td>{{ $dealer->trade_licence_number }}</x-td>
                                    <x-td>{{ $dealer->tin_number }}</x-td>
                                    <x-td>{{ $dealer->bin_number }}</x-td>
                                    <x-td>{{ $dealer->present_address }}</x-td>
                                    <x-td class="text-center">
                                        <span class="px-3 py-2 rounded-full text-white {{ $dealer->user->account_status ? 'bg-green-500' : 'bg-red-500' }}">
                                            {{ $dealer->user->account_status ? 'Active' : 'Inactive' }}
                                        </span>
                                    </x-td>
                                    <x-td class="text-center">
                                        <div class="flex space-x-4 justify-center">
                                            <!-- View Button -->
                                            <x-buttons.success
                                                @click="openModal({{ $dealer->id }})"
                                                title="View Dealer Details"
                                            >
                                                <x-icons.eye class="w-4 h-4"/>
                                            </x-buttons.success>

                                            <!-- Active Inactive Button --> 
                                            <x-buttons.warning @click="openStatusModal({{ $dealer->id }}, {{ $dealer->user->account_status ?? 0 }})">
                                                <svg xmlns="http://www.w3.org/2000/svg" 
                                                    class="w-4 h-4" 
                                                    fill="none" 
                                                    viewBox="0 0 24 24" 
                                                    stroke="currentColor" 
                                                    stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" 
                                                        d="M12 2v10m6.364-6.364a8 8 0 11-11.314 0" />
                                                </svg>
                                            </x-buttons.warning>

                                            @if ($dealer->productOrders->isEmpty())
                                                <!-- Edit Button -->
                                                <x-buttons.link
                                                    type="warning"
                                                    href="{{ route('dealers.edit', $dealer->id) }}"
                                                    title="Edit Dealer">
                                                    <x-icons.pencil class="w-4 h-4"/>
                                                </x-buttons.link>

                                                <!-- Delete Button Enabled-->
                                                <x-buttons.danger
                                                    class="delete-btn"
                                                    data-action="{{ route('dealers.destroy', $dealer->id) }}"
                                                    title="Delete Dealer"
                                                >
                                                    <x-icons.trash class="w-4 h-4"/>
                                                </x-buttons.danger>
                                            @endif

                                        </div>
                                    </x-td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <!-- Pagination -->
                        <div class="mt-1">
                            {{ $dealerList->links() }}
                        </div>
                    </div>

                     {{--Account Status Modal --}}
                    <div x-show="statusModalOpen" x-transition
                        class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
                        <div class="bg-white p-6 rounded shadow-md w-96">
                            <h2 class="text-lg font-semibold mb-4"><span class="font-bold" x-text="selectedDealerStatus ? 'Are you sure you want to inactive this Dealer ?' : 'Are you sure you want to active this Dealer ?'"></span></h2>
                            

                            <form method="POST" :action="`{{ url('/dealers/change-status') }}/${selectedDealerId}`">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="account_status" :value="selectedDealerStatus ? 0 : 1">

                                <div class="flex justify-end space-x-2 mt-10">
                                    <button type="button" @click="closeStatusModal()"
                                            class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Cancel
                                    </button>
                                    <button type="submit"
                                            class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Confirm
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- View Modal -->
                    <div
                        x-show="modalOpen"
                        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                        style="display: none;"
                    >
                        <div
                            class="bg-white p-6 rounded-lg shadow-lg w-full max-w-screen-xl max-h-[90vh] overflow-y-auto">
                            <div class="flex justify-between items-center border-b pb-3 mb-4">
                                <h2 class="text-lg font-bold">Dealer Details Information</h2>
                                <button class="text-gray-600 text-2xl" @click="modalOpen = false">&times;</button>
                            </div>

                            <div class="grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-2">
                                <template x-for="field in fields()" :key="field.label">
                                    <div class="sm:col-span-3">
                                        <label class="block text-sm font-medium text-gray-700"
                                               x-text="field.label"></label>
                                        <div class="mt-1">
                                                <span
                                                    class="block w-full px-3 py-1.5 text-sm text-gray-800 bg-gray-100 rounded"
                                                    x-text="field.value || '—'"></span>
                                        </div>
                                    </div>
                                </template>

                                <!-- BIN Image -->
                                <div class="sm:col-span-3 mt-4" x-show="dealer && dealer.bin_image">
                                    <label class="block text-sm font-medium text-gray-700">BIN Image</label>
                                    <div class="mt-2">
                                        <a :href="dealer ? `${baseUrl}images/bin_image/${dealer.bin_image}` : '#'"
                                           target="_blank">
                                            <img
                                                :src="dealer ? `${baseUrl}images/bin_image/${dealer.bin_image}` : ''"
                                                alt="BIN Image"
                                                class="w-32 h-auto rounded border"/>
                                        </a>
                                    </div>
                                </div>

                                <!-- Profile Image -->
                                <div class="sm:col-span-3 mt-4"
                                     x-show="dealer && dealer.user && dealer.user.profile_image">
                                    <label class="block text-sm font-medium text-gray-700">Profile Image</label>
                                    <div class="mt-2">
                                        <a :href="dealer ? `${baseUrl}images/profile_image/${dealer.user.profile_image}` : '#'"
                                           target="_blank">
                                            <img
                                                :src="dealer ? `${baseUrl}images/profile_image/${dealer.user.profile_image}` : ''"
                                                alt="Profile Image"
                                                class="w-32 h-auto rounded border"/>
                                        </a>
                                    </div>
                                </div>

                                <!-- NID Image -->
                                <div class="sm:col-span-3 mt-4" x-show="dealer && dealer.nid_image">
                                    <label class="block text-sm font-medium text-gray-700">NID Image</label>
                                    <div class="mt-2">
                                        <a :href="dealer ? `${baseUrl}images/nid_image/${dealer.nid_image}` : '#'"
                                           target="_blank">
                                            <img
                                                :src="dealer ? `${baseUrl}images/nid_image/${dealer.nid_image}` : ''"
                                                alt="NID Image"
                                                class="w-32 h-auto rounded border"/>
                                        </a>
                                    </div>
                                </div>

                                <!-- Trade Licence Image -->
                                <div class="sm:col-span-3 mt-4" x-show="dealer && dealer.trade_licence_image">
                                    <label class="block text-sm font-medium text-gray-700">Trade Licence
                                        Image</label>
                                    <div class="mt-2">
                                        <a :href="dealer ? `${baseUrl}images/trade_licence_image/${dealer.trade_licence_image}` : '#'"
                                           target="_blank">
                                            <img
                                                :src="dealer ? `${baseUrl}images/trade_licence_image/${dealer.trade_licence_image}` : ''"
                                                alt="Trade Image"
                                                class="w-32 h-auto rounded border"/>
                                        </a>
                                    </div>
                                </div>

                                <!-- TIN Image -->
                                <div class="sm:col-span-3 mt-4" x-show="dealer && dealer.tin_image">
                                    <label class="block text-sm font-medium text-gray-700">TIN Image</label>
                                    <div class="mt-2">
                                        <a :href="dealer ? `${baseUrl}images/tin_image/${dealer.tin_image}` : '#'"
                                           target="_blank">
                                            <img
                                                :src="dealer ? `${baseUrl}images/tin_image/${dealer.tin_image}` : ''"
                                                alt="TIN Image"
                                                class="w-32 h-auto rounded border"/>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- Close Button -->
                            <div class="mt-6 text-right">
                                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
                                        @click="modalOpen = false">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>


                    <!-- Add Dealer Modal -->
                    <div id="dealerModalId"
                         class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden overflow-y-auto px-4 py-6 sm:px-0">
                        <!-- Inner scrollable content wrapper -->
                        <div
                            class="bg-white p-6 sm:p-8 rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
                            <!-- Modal Header -->
                            <div class="flex justify-between items-center top-0 bg-white z-10">
                                <h3 class="text-xl font-semibold">Register Dealer</h3>
                                <button class="text-gray-600 hover:text-gray-800 closeDealerModalBtn">&times;
                                </button>
                            </div>

                            {{--                        <div id="dealerModalErrorBox" class="hidden mb-4 p-3 bg-red-100 text-red-700 rounded"></div>--}} <!-- Error message shown in modal-->
                            <form id="dealerFormId" autocomplete="off">
                                @csrf
                                <div class="">
                                    <div class="border-b border-gray-900/10 pb-12">
                                        <div class="mt-2 grid grid-cols-1 gap-x-6 sm:grid-cols-6 space-y-4">

                                            <div class="sm:col-span-3">
                                                <label for="first-name"
                                                       class="block text-sm/6 font-medium text-gray-900 mt-4">Brand
                                                    *</label>
                                                <div class="mt-1">
                                                    <select name="brand_id" id="brand_id"
                                                            class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                        <option value="">-- Select Brand --</option>
                                                        @foreach ($brands as $brand)
                                                            <option
                                                                value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="shop_name" :value="__('Shop Name *')"/>
                                                <x-text-input id="shop_name" class="block mt-1 w-full" type="text"
                                                              name="shop_name" :value="old('shop_name')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('shop_name')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="proprietor_name"
                                                               :value="__('Proprietor Name *')"/>
                                                <x-text-input id="proprietor_name" class="block mt-1 w-full"
                                                              type="text"
                                                              name="proprietor_name" :value="old('proprietor_name')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('proprietor_name')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="email" :value="__('Email *')"/>
                                                <x-text-input id="email" class="block mt-1 w-full" type="email"
                                                              name="email" :value="old('email')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('email')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="dealer_code" :value="__('Shop Code *')"/>
                                                <x-text-input id="dealer_code" class="block mt-2 w-full" type="text"
                                                              name="dealer_code" :value="old('dealer_code')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('dealer_code')"
                                                               class="mt-2"/>
                                            </div>

                                            @php
                                                $useEmiManager = env('IS_USED_EMI_MANAGER', false);
                                            @endphp
                                            @if ($useEmiManager)
                                                <div class="sm:col-span-3">
                                                    <x-input-label for="branch_code" :value="__('Branch Code *')"/>
                                                    <x-text-input id="branch_code" class="block mt-2 w-full"
                                                                  type="text"
                                                                  name="branch_code" :value="old('branch_code')"
                                                                  autocomplete="off"/>
                                                    <x-input-error :messages="$errors->get('branch_code')"
                                                                   class="mt-2"/>
                                                </div>
                                            @endif

                                            <div class="sm:col-span-3">
                                                <x-input-label for="mobile_number" :value="__('Mobile Number *')"/>
                                                <x-text-input id="mobile_number" name="mobile_number"
                                                              type="text"
                                                              class="block mt-2 w-full"
                                                              maxlength="11"
                                                              inputmode="numeric"
                                                              pattern="[0-9]{11}"
                                                              placeholder="Enter 11-digit mobile number"
                                                              value="{{ old('mobile_number') }}"
                                                              oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 11);"/>
                                                <x-input-error :messages="$errors->get('mobile_number')"
                                                               class="mt-2"/>
                                            </div>


                                            <div class="sm:col-span-3">
                                                <x-input-label for="nid_number" :value="__('NID Number *')"/>
                                                <x-text-input id="nid_number" class="block mt-1 w-full" type="text"
                                                              name="nid_number" :value="old('nid_number')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('nid_number')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="dob" :value="__('DOB *')"/>
                                                <x-text-input id="dob" class="block mt-1 w-full" type="date"
                                                              name="dob" :value="old('dob')" autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('dob')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="present_address"
                                                               :value="__('Present Address')"/>
                                                <x-text-input id="present_address" class="block mt-1 w-full"
                                                              type="text"
                                                              name="present_address" :value="old('present_address')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('present_address')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="contact_person_name"
                                                               :value="__('Contact Person Name *')"/>
                                                <x-text-input id="contact_person_name" class="block mt-1 w-full"
                                                              type="text"
                                                              name="contact_person_name"
                                                              :value="old('contact_person_name')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('contact_person_name')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="contact_person_number"
                                                               :value="__('Contact Person Mobile *')"/>
                                                <x-text-input id="contact_person_number"
                                                              name="contact_person_number"
                                                              type="text"
                                                              class="block mt-2 w-full"
                                                              maxlength="11"
                                                              inputmode="numeric"
                                                              pattern="[0-9]{11}"
                                                              placeholder="Enter 11-digit contact number"
                                                              value="{{ old('contact_person_number') }}"
                                                              oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 11);"/>
                                                <x-input-error :messages="$errors->get('contact_person_number')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="address" :value="__('Contact Person Address')"/>
                                                <x-text-input id="address" class="block mt-1 w-full" type="text"
                                                              name="address" :value="old('address')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('address')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="trade_licence_number"
                                                               :value="__('Trade Licence Number *')"/>
                                                <x-text-input id="trade_licence_number" class="block mt-1 w-full"
                                                              type="text"
                                                              name="trade_licence_number"
                                                              :value="old('trade_licence_number')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('trade_licence_number')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="tin_number" :value="__('TIN Number *')"/>
                                                <x-text-input id="tin_number" class="block mt-1 w-full" type="text"
                                                              name="tin_number" :value="old('tin_number')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('tin_number')" class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="username" :value="__('Login User Name *')"/>
                                                <x-text-input id="username"
                                                              class="block mt-2 w-full bg-gray-100 text-gray-700 cursor-not-allowed"
                                                              type="text"
                                                              name="username" :value="old('username')" readonly
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('username')" class="mt-2"/>
                                            </div>


                                            <div class="sm:col-span-3">
                                                <label for="bank_name"
                                                       class="block text-sm/6 font-medium text-gray-900">Bank Name
                                                    *</label>
                                                <div class="mt-1">
                                                    <select name="bank_name" id="bank_name"
                                                            class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                        <option value="">-- Select Bank --</option>
                                                        @foreach ($bankList as $bank)
                                                            <option value="{{ $bank }}">{{ $bank }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <x-input-label for="account_name"
                                                               :value="__('Bank Account Name *')"/>
                                                <x-text-input id="account_name" name="account_name"
                                                              type="text"
                                                              class="block mt-2 w-full"
                                                              value="{{ old('account_name') }}"
                                                              autocomplete="off"
                                                              placeholder="Enter bank account name"
                                                    {{--                                                          oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"--}}
                                                />
                                                <x-input-error :messages="$errors->get('account_name')"
                                                               class="mt-2"/>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <x-input-label for="account_number"
                                                               :value="__('Bank Account Number *')"/>
                                                <x-text-input
                                                    id="account_number"
                                                    name="account_number"
                                                    type="text"
                                                    class="block mt-2 w-full"
                                                    inputmode="numeric"
                                                    placeholder="Enter digits only"
                                                    value="{{ old('account_number') }}"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                                />
                                                <x-input-error :messages="$errors->get('account_number')"
                                                               class="mt-2"/>
                                            </div>


                                            <div class="sm:col-span-3">
                                                <x-input-label for="branch_name" :value="__('Branch *')"/>
                                                <x-text-input id="branch_name" name="branch_name"
                                                              type="text"
                                                              class="block mt-2 w-full"
                                                              value="{{ old('branch_name') }}"
                                                              autocomplete="off"
                                                              placeholder="Enter branch name"
                                                              oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"/>
                                                <x-input-error :messages="$errors->get('branch_name')"
                                                               class="mt-2"/>
                                            </div>

                                            <div class="sm:col-span-3">
                                                <x-input-label for="routing_number"
                                                               :value="__('Routing Number *')"/>
                                                <x-text-input id="routing_number" name="routing_number"
                                                              type="text"
                                                              class="block mt-2 w-full"
                                                              maxlength="9"
                                                              inputmode="numeric"
                                                              placeholder="Enter 9-digit routing number"
                                                              value="{{ old('routing_number') }}"
                                                              oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 9);"/>
                                                <x-input-error :messages="$errors->get('routing_number')"
                                                               class="mt-2"/>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <x-input-label for="bin_number" :value="__('BIN Number *')"/>
                                                <x-text-input id="bin_number" class="block mt-2 w-full" type="text"
                                                              name="bin_number" :value="old('bin_number')"
                                                              autocomplete="off"/>
                                                <x-input-error :messages="$errors->get('bin_number')" class="mt-2"/>
                                            </div>

                                            <!-- BIN Image -->
                                            <div class="sm:col-span-3 mt-4" x-show="dealer && dealer.bin_image">
                                                <label class="block text-sm font-medium text-gray-700">BIN
                                                    Image</label>
                                                <div class="mt-2">
                                                    <a :href="dealer ? `${baseUrl}images/bin_image/${dealer.bin_image}` : '#'"
                                                       target="_blank">
                                                        <img
                                                            :src="dealer ? `${baseUrl}images/bin_image/${dealer.bin_image}` : ''"
                                                            alt="BIN Image"
                                                            class="w-32 h-auto rounded border"/>
                                                    </a>
                                                </div>
                                            </div>


                                            <div class="sm:col-span-3">
                                                <label for="last-name"
                                                       class="block text-sm/6 font-medium text-gray-900">
                                                    Upload Profile *
                                                </label>
                                                <div class="mt-2">
                                                    <input type="file"
                                                           name="profile_image"
                                                           id="profile_image"
                                                           accept="image/jpeg, image/png, image/jpg"
                                                           class="block w-full text-left pl-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <label for="last-name"
                                                       class="block text-sm/6 font-medium text-gray-900">
                                                    Upload NID *
                                                </label>
                                                <div class="mt-2">
                                                    <input type="file"
                                                           name="nid_image"
                                                           id="nid_image"
                                                           accept="image/jpeg, image/png, image/jpg"
                                                           class="block w-full text-left pl-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <label for="last-name"
                                                       class="block text-sm/6 font-medium text-gray-900">
                                                    Upload Trade Licence *
                                                </label>
                                                <div class="mt-2">
                                                    <input type="file"
                                                           name="trade_licence_image"
                                                           id="trade_licence_image"
                                                           accept="image/jpeg, image/png, image/jpg"
                                                           class="block w-full text-left pl-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <label for="last-name"
                                                       class="block text-sm/6 font-medium text-gray-900">Upload TIN
                                                    *</label>
                                                <div class="mt-2">
                                                    <input type="file"
                                                           name="tin_image"
                                                           id="tin_image"
                                                           accept="image/jpeg, image/png, image/jpg"
                                                           class="block w-full text-left pl-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                </div>
                                            </div>
                                            <div class="sm:col-span-3">
                                                <label for="last-name"
                                                       class="block text-sm/6 font-medium text-gray-900">BIN Image
                                                    *</label>
                                                <div class="mt-2">
                                                    <input type="file"
                                                           name="bin_image"
                                                           id="bin_image"
                                                           accept="image/jpeg, image/png, image/jpg"
                                                           class="block w-full text-left pl-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="dealerModalErrorBox"
                                         class="hidden mb-4 p-3 bg-red-100 text-red-700 rounded"></div>
                                    <!-- Error message shown in modal-->
                                    <div class="flex justify-end space-x-2">
                                        <x-buttons.secondary type="button" class="closeDealerModalBtn ms-3 px-4">
                                            {{ __('Cancel') }}
                                        </x-buttons.secondary>

                                        <x-buttons.primary type="submit" class="ms-3 px-4">
                                            {{ __('Save') }}
                                        </x-buttons.primary>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-confirm-delete-modal
        title="Confirm Delete"
        message="Are you sure you want to delete this Dealer ?"
        x-show="showDeleteModal"
        @confirm-action.window="
                                // Call your delete logic here
                                showDeleteModal = false;
                            "
        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
        style="display: none;"
    />

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const openDealerModalBtn = document.getElementById('openDealerModalBtn');
                const closeDealerModalBtns = document.querySelectorAll('.closeDealerModalBtn');
                const dealerModal = document.getElementById('dealerModalId');
                const dealerForm = document.getElementById('dealerFormId');
                const errorBox = document.getElementById('dealerModalErrorBox');

                // Success message container on main page
                const mainSuccessBox = document.createElement('div');
                mainSuccessBox.className = 'hidden mb-4 p-3 bg-green-100 text-green-700 rounded';
                document.querySelector('.flex.justify-between').after(mainSuccessBox);

                // Open modal
                openDealerModalBtn.addEventListener('click', () => {
                    dealerModal.classList.remove('hidden');
                });

                // Close modal
                closeDealerModalBtns.forEach(btn => {
                    btn.addEventListener('click', () => {
                        dealerModal.classList.add('hidden');
                        errorBox.classList.add('hidden');
                        dealerForm.reset();
                    });
                });

                // Form submission
                dealerForm.addEventListener('submit', async function (e) {
                    e.preventDefault();
                    errorBox.classList.add('hidden');
                    mainSuccessBox.classList.add('hidden');

                    const formData = new FormData(this);

                    try {
                        const response = await fetch("{{ route('dealers.store') }}", {
                            method: 'POST',
                            body: formData,
                            headers: {'X-Requested-With': 'XMLHttpRequest'}
                        });

                        const data = await response.json();

                        if (response.ok && data.success) {
                            dealerModal.classList.add('hidden');
                            dealerForm.reset();

                            mainSuccessBox.textContent = data.message;
                            mainSuccessBox.classList.remove('hidden');

                            location.reload();
                        } else {
                            errorBox.textContent = data.message || 'Something went wrong.';
                            errorBox.classList.remove('hidden');
                        }

                    } catch (error) {
                        console.error('Error:', error);
                        errorBox.textContent = 'An unexpected error occurred. Please try again.';
                        errorBox.classList.remove('hidden');
                    }
                });
            });
        </script>


        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const mobileInput = document.getElementById("mobile_number");
                const usernameInput = document.getElementById("username");
                mobileInput.addEventListener("input", function () {
                    usernameInput.value = this.value;
                });
            });
        </script>

        <script>
            window.addEventListener('confirm-action', (e) => {
                const deleteBtn = document.querySelector('ndelete-btn');
                const url = deleteBtn.getAttribute('data-action');

                fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                }).then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                    }
                });
            });
        </script>

        <!-- View modal for dealer data-->
        <script>
            function dealerModal() {
                return {
                    modalOpen: false,
                    dealer: null,
                    dealerData: @json($dealerList->items()),
                    baseUrl: '{{ asset('') }}',

                    // For Dealer active Inactive
                    statusModalOpen: false,
                    selectedDealerId: null,
                    selectedDealerStatus: null,

                    // Initialize component (called by x-init="init()")
                    init() {
                        // Put any startup logic here (e.g. call downpayments API)
                        // this.fetchDownpayments();
                    },

                    // Return the fields array; if dealer is not set return empty array
                    fields() {
                        if (!this.dealer) return [];

                        return [
                            {label: 'Dealer Name', value: this.dealer.proprietor_name},
                            {label: 'Shop Name', value: this.dealer.shop_name},
                            {label: 'Shop Code', value: this.dealer.dealer_code},
                            {label: 'Branch Code', value: this.dealer.branch_code},
                            {label: 'Brand', value: this.dealer.brand?.name},
                            {label: 'Mobile', value: this.dealer.mobile_number},
                            {label: 'Email', value: this.dealer.user?.email},
                            {label: 'DOB', value: this.dealer.dob},
                            {label: 'NID Number', value: this.dealer.nid_number},
                            {label: 'Trade Licence', value: this.dealer.trade_licence_number},
                            {label: 'TIN', value: this.dealer.tin_number},
                            {label: 'Present Address', value: this.dealer.present_address},
                            {label: 'Contact Person Name', value: this.dealer.contact_person_name},
                            {label: 'Contact Person Mobile', value: this.dealer.contact_person_number},
                            {label: 'Contact Person Address', value: this.dealer.address},
                            {label: 'Bank Name', value: this.dealer.bank_name},
                            {label: 'Account Name', value: this.dealer.account_name},
                            {label: 'Account Number', value: this.dealer.account_number},
                            {label: 'Branch', value: this.dealer.branch_name},
                            {label: 'Routing Number', value: this.dealer.routing_number},
                            {label: 'BIN Number', value: this.dealer.bin_number},
                        ];
                    },

                    openModal(id) {
                        const selected = this.dealerData.find(d => d.id === id);
                        if (selected) {
                            this.dealer = selected;
                            this.modalOpen = true;
                        }
                    },

                    // For Dealer active Inactive
                    openStatusModal(dealerId, currentStatus) {
                        this.selectedDealerId = dealerId;
                        this.selectedDealerStatus = currentStatus;
                        this.statusModalOpen = true;
                    },
                    closeStatusModal() {
                        this.statusModalOpen = false;
                        this.selectedDealerId = null;
                        this.selectedDealerStatus = null;
                    }

                }
            }
        </script>

    @endpush
</x-app-layout>