{{-- Warranty Lookup Modal --}}
<div x-show="showWarrantyModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    <div class="bg-white rounded-3xl w-11/12 max-w-4xl h-[85vh] shadow-2xl overflow-hidden flex flex-col" @click.outside="showWarrantyModal = false">
        {{-- Modal Header --}}
        <div class="flex items-center justify-between p-6 border-b border-slate-200 bg-slate-50">
            <div class="flex items-center gap-2">
                <span class="text-2xl">🛡️</span>
                <h2 class="text-xl font-bold text-slate-800">Warranty Lookup & Claims</h2>
            </div>
            <button @click="showWarrantyModal = false" class="text-slate-400 hover:text-slate-600 text-3xl font-medium leading-none">&times;</button>
        </div>

        {{-- Modal Body --}}
        <div class="flex-1 overflow-y-auto p-6 space-y-6 bg-slate-50" style="max-height: calc(85vh - 90px);">
            {{-- Search Input Panel --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
                <form @submit.prevent="searchWarranty()" class="flex gap-3">
                    <input type="text" x-model="warrantySearchQuery" placeholder="Scan Barcode / Enter IMEI / Invoice # / Customer Phone..."
                        class="flex-1 px-4 py-2.5 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                    <button type="submit" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition">
                        <span x-show="!warrantyLoading">Lookup</span>
                        <span x-show="warrantyLoading">Searching...</span>
                    </button>
                </form>
            </div>

            {{-- Search Results Table --}}
            <template x-if="warrantySearchResults.length > 0 && !selectedWarrantyItem">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                    <div class="p-4 border-b border-slate-200 bg-slate-50/50">
                        <h3 class="font-bold text-slate-800 text-sm">Select Item from Search Results</h3>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="text-left text-slate-500 border-b border-slate-200 bg-slate-50/20">
                                    <th class="px-4 py-3 font-semibold text-xs uppercase">Invoice #</th>
                                    <th class="px-4 py-3 font-semibold text-xs uppercase">Customer</th>
                                    <th class="px-4 py-3 font-semibold text-xs uppercase">Product / IMEI</th>
                                    <th class="px-4 py-3 font-semibold text-xs uppercase text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="item in warrantySearchResults" :key="item.id">
                                    <tr class="border-b border-slate-100 hover:bg-slate-50">
                                        <td class="px-4 py-3 font-mono font-bold text-blue-600" x-text="'#' + item.invoice_number"></td>
                                        <td class="px-4 py-3">
                                            <p class="font-semibold text-slate-800" x-text="item.customer_name"></p>
                                            <p class="text-xs text-slate-500" x-text="item.customer_phone"></p>
                                        </td>
                                        <td class="px-4 py-3">
                                            <p class="font-semibold text-slate-700" x-text="item.product_name"></p>
                                            <p class="text-xs font-mono text-slate-500" x-text="'IMEI: ' + item.imei_numbers"></p>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <button @click="selectWarrantyItem(item)" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-lg transition">
                                                Select & Claim
                                            </button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </template>

            {{-- No Results --}}
            <template x-if="warrantySearchResults.length === 0 && warrantySearchQuery && !warrantyLoading && !selectedWarrantyItem">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 text-center max-w-md mx-auto">
                    <p class="text-4xl mb-2">🚫</p>
                    <h4 class="font-bold text-slate-800">No Record Found</h4>
                    <p class="text-slate-500 text-xs mt-1">We couldn't find any sold phone listings matching your search.</p>
                </div>
            </template>

            {{-- Claim Form (Item Selected) --}}
            <template x-if="selectedWarrantyItem">
                <div class="space-y-6">
                    {{-- Item Info Panel --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                        {{-- Status Banner --}}
                        <div :class="selectedWarrantyItem.warranty_status === 'active' ? 'bg-green-500 text-white px-6 py-4' : 'bg-red-500 text-white px-6 py-4'">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="text-2xl" x-text="selectedWarrantyItem.warranty_status === 'active' ? '🛡️' : '⚠️'"></span>
                                    <div>
                                        <h3 class="font-bold" x-text="selectedWarrantyItem.warranty_status === 'active' ? 'Warranty Active' : 'Warranty Expired'"></h3>
                                        <p class="text-xs opacity-90" x-text="selectedWarrantyItem.warranty_status === 'active' ? 'This item is currently under active store warranty coverage.' : 'The warranty coverage period for this item has expired.'"></p>
                                    </div>
                                </div>
                                <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full uppercase" x-text="selectedWarrantyItem.warranty_status"></span>
                            </div>
                        </div>

                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                            <div class="space-y-2">
                                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Product Details</p>
                                <div class="bg-slate-50 rounded-xl p-4 border border-slate-100 space-y-2">
                                    <p><span class="text-slate-500">Name:</span> <strong class="text-slate-800" x-text="selectedWarrantyItem.product_name"></strong></p>
                                    <p><span class="text-slate-500">IMEI:</span> <strong class="text-slate-800 font-mono" x-text="selectedWarrantyItem.imei_numbers"></strong></p>
                                    <p><span class="text-slate-500">Warranty Term:</span> <strong class="text-slate-800" x-text="selectedWarrantyItem.warranty_period"></strong></p>
                                    <p><span class="text-slate-500">Sold Date:</span> <strong class="text-slate-800" x-text="selectedWarrantyItem.sold_date"></strong></p>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Customer & Invoice</p>
                                <div class="bg-slate-50 rounded-xl p-4 border border-slate-100 space-y-2">
                                    <p><span class="text-slate-500">Invoice:</span> <strong class="text-slate-800" x-text="'#' + selectedWarrantyItem.invoice_number"></strong></p>
                                    <p><span class="text-slate-500">Customer:</span> <strong class="text-slate-800" x-text="selectedWarrantyItem.customer_name"></strong></p>
                                    <p><span class="text-slate-500">Phone:</span> <strong class="text-slate-800" x-text="selectedWarrantyItem.customer_phone"></strong></p>
                                    <button type="button" @click="selectedWarrantyItem = null" class="text-xs text-blue-600 hover:underline font-bold">← Back to search results</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Claim Ticket Input Form --}}
                    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-6">
                        <h3 class="font-bold text-slate-800 text-base border-b border-slate-100 pb-2">🔧 Create Warranty Claim Ticket</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Issue / Fault Description *</label>
                                <textarea x-model="warrantyClaimForm.issue_description" rows="3" placeholder="Describe the device fault..." required
                                    class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none"></textarea>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
                                <select x-model="warrantyClaimForm.status" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                                    <option value="received">Received from Customer</option>
                                    <option value="sent_to_supplier">Sent to Supplier</option>
                                    <option value="returned_from_supplier">Returned from Supplier</option>
                                    <option value="completed">Completed / Return to Customer</option>
                                </select>
                            </div>
                        </div>

                        {{-- Replacement form controls --}}
                        <div class="border-t border-slate-100 pt-6 space-y-4">
                            <div class="flex items-center gap-2">
                                <input type="checkbox" x-model="warrantyClaimForm.is_replaced" id="pos_is_replaced"
                                    class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500">
                                <label for="pos_is_replaced" class="text-sm font-bold text-slate-800 cursor-pointer">🔄 Issue Replacement from Stock immediately</label>
                            </div>

                            <div x-show="warrantyClaimForm.is_replaced" class="grid grid-cols-1 md:grid-cols-4 gap-6 p-4 bg-slate-50 border border-slate-100 rounded-xl">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Product *</label>
                                    <select x-model="warrantyClaimForm.replacement_product_id" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                                        <option value="">-- Select Product --</option>
                                        <template x-for="prod in warrantyReplacementProducts" :key="prod.id">
                                            <option :value="prod.id" x-text="prod.name_en + ' [SKU: ' + (prod.sku || '') + ']'"></option>
                                        </template>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Branch *</label>
                                    <select x-model="warrantyClaimForm.replacement_branch_id" class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                                        <template x-for="br in warrantyBranches" :key="br.id">
                                            <option :value="br.id" x-text="br.name"></option>
                                        </template>
                                    </select>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Replacement Qty *</label>
                                    <input type="number" step="0.001" x-model.number="warrantyClaimForm.replacement_qty"
                                        class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">Replacement IMEI / Serial</label>
                                    <input type="text" x-model="warrantyClaimForm.replacement_imei" placeholder="New IMEI / Serial"
                                        class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Notes</label>
                            <textarea x-model="warrantyClaimForm.notes" rows="2" placeholder="Internal remarks or claim logs..."
                                class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none"></textarea>
                        </div>

                        <div class="flex gap-3 justify-end border-t border-slate-100 pt-6">
                            <button type="button" @click="selectedWarrantyItem = null" class="px-6 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-medium transition">
                                Cancel
                            </button>
                            <button type="button" @click="submitWarrantyClaim()" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition">
                                Submit Warranty Claim
                            </button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>