@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        {{-- Include stock navigation tabs --}}
        <div class="mb-4">
            @include('stock.nav', ['tab' => 'expired-items'])
        </div>
        
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                
                {{-- Header --}}
                <div class="flex items-center justify-between gap-4 flex-wrap mb-6">
                    <div>
                        <h2 class="text-xl font-bold text-gray-900">Expired Items Management</h2>
                        <p class="text-sm text-gray-600 mt-1">Manage expired batches: acknowledge, dispose, or recover value</p>
                    </div>
                </div>

                {{-- Summary Stats --}}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <div class="text-2xl font-bold text-red-700">{{ $stats['unnoticed'] ?? 0 }}</div>
                        <div class="text-sm text-red-600">Unnoticed Batches</div>
                    </div>
                    <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
                        <div class="text-2xl font-bold text-amber-700">{{ $stats['pending_resolution'] ?? 0 }}</div>
                        <div class="text-sm text-amber-600">Pending Resolution</div>
                    </div>
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <div class="text-2xl font-bold text-green-700">Rs. {{ number_format($stats['total_recovered_this_month'] ?? 0, 2) }}</div>
                        <div class="text-sm text-green-600">Recovered This Month</div>
                    </div>
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="text-2xl font-bold text-gray-700">Rs. {{ number_format($stats['total_loss_this_month'] ?? 0, 2) }}</div>
                        <div class="text-sm text-gray-600">Net Loss This Month</div>
                    </div>
                </div>

                {{-- Tabs --}}
                <div class="mb-6 border-b border-gray-200">
                    <nav class="flex gap-4">
                        <a href="{{ route('expired-items.index', ['tab' => 'unnoticed']) }}" 
                           class="py-2 px-1 border-b-2 font-medium text-sm {{ $tab === 'unnoticed' ? 'border-red-500 text-red-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                            Unnoticed
                            @if(($stats['unnoticed'] ?? 0) > 0)
                                <span class="ml-1 px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">{{ $stats['unnoticed'] }}</span>
                            @endif
                        </a>
                        <a href="{{ route('expired-items.index', ['tab' => 'pending']) }}"
                           class="py-2 px-1 border-b-2 font-medium text-sm {{ $tab === 'pending' ? 'border-amber-500 text-amber-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                            Pending Resolution
                            @if(($stats['pending_resolution'] ?? 0) > 0)
                                <span class="ml-1 px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700">{{ $stats['pending_resolution'] }}</span>
                            @endif
                        </a>
                        <a href="{{ route('expired-items.index', ['tab' => 'history']) }}"
                           class="py-2 px-1 border-b-2 font-medium text-sm {{ $tab === 'history' ? 'border-gray-500 text-gray-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                            History
                        </a>
                    </nav>
                </div>

                {{-- Flash Messages --}}
                @if(session('success'))
                    <div class="mb-4 p-4 bg-green-100 border border-green-300 text-green-800 rounded-lg">
                        {{ session('success') }}
                    </div>
                @endif
                @if(session('error'))
                    <div class="mb-4 p-4 bg-red-100 border border-red-300 text-red-800 rounded-lg">
                        {{ session('error') }}
                    </div>
                @endif

                {{-- Tab Content --}}
                @if($tab === 'unnoticed')
                    {{-- Unnoticed Expired Batches --}}
                    <div class="bg-white rounded-lg">
                        <div class="text-sm text-gray-600 mb-4">
                            These batches have passed their expiry date and still have stock. 
                            <strong>Mark as "Noticed"</strong> to acknowledge and remove from active stock.
                        </div>

                        @if($unnoticedBatches->isEmpty())
                            <div class="text-center py-8 text-gray-500">
                                ✓ No expired batches need attention
                            </div>
                        @else
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Batch</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expired</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Qty</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Supplier</th>
                                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100">
                                        @foreach($unnoticedBatches as $batch)
                                            @php
                                                $daysExpired = (int) abs(now()->diffInDays(\Carbon\Carbon::parse($batch->expiry_date), false));
                                                $totalCost = (float) $batch->qty * (float) $batch->unit_cost;
                                            @endphp
                                            <tr class="hover:bg-gray-50" data-batch-id="{{ $batch->price_detail_id }}">
                                                <td class="px-4 py-3">
                                                    <div class="font-medium text-gray-900">{{ $batch->name_local ?: $batch->product_name }}</div>
                                                    <div class="text-xs text-gray-500">{{ $batch->barcode }}</div>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <div class="text-sm text-gray-700">{{ $batch->batch_name ?: 'No batch name' }}</div>
                                                    <div class="text-xs text-gray-500">#{{ $batch->price_detail_id }}</div>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <div class="text-sm text-red-600 font-medium">
                                                        {{ \Carbon\Carbon::parse($batch->expiry_date)->format('Y-m-d') }}
                                                    </div>
                                                    <div class="text-xs text-red-500">{{ $daysExpired }} {{ $daysExpired === 1 ? 'day' : 'days' }} ago</div>
                                                </td>
                                                <td class="px-4 py-3 text-right">
                                                    <span class="font-semibold text-gray-900">{{ number_format((float) $batch->qty, 3) }}</span>
                                                </td>
                                                <td class="px-4 py-3 text-right">
                                                    <div class="text-sm text-gray-700">Rs. {{ number_format((float) $batch->unit_cost, 2) }}/ea</div>
                                                    <div class="text-xs text-gray-500">Total: Rs. {{ number_format($totalCost, 2) }}</div>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <span class="text-sm text-gray-600">{{ $batch->supplier_name ?: '-' }}</span>
                                                </td>
                                                <td class="px-4 py-3 text-center">
                                                    <div class="flex flex-col gap-1">
                                                        <button type="button" 
                                                                class="btn-mark-noticed px-3 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition"
                                                                data-batch-id="{{ $batch->price_detail_id }}"
                                                                data-qty="{{ $batch->qty }}"
                                                                data-product="{{ $batch->name_local ?: $batch->product_name }}">
                                                            Mark Expired
                                                        </button>
                                                        <button type="button" 
                                                                class="btn-offpos-sale px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition"
                                                                data-batch-id="{{ $batch->price_detail_id }}"
                                                                data-qty="{{ $batch->qty }}"
                                                                data-product="{{ $batch->name_local ?: $batch->product_name }}">
                                                            Off-POS Sale
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            @if($unnoticedBatches->hasPages())
                                <div class="mt-4">{{ $unnoticedBatches->links() }}</div>
                            @endif
                        @endif
                    </div>

                @elseif($tab === 'pending')
                    {{-- Pending Resolution --}}
                    <div class="bg-white rounded-lg">
                        <div class="text-sm text-gray-600 mb-4">
                            These items have been noticed (stock deducted). Choose how to resolve each one.
                        </div>

                        @if($pendingItems->isEmpty())
                            <div class="text-center py-8 text-gray-500">
                                ✓ No items pending resolution
                            </div>
                        @else
                            <div class="space-y-4">
                                @foreach($pendingItems as $item)
                                    <div class="border border-amber-200 rounded-lg p-4 bg-amber-50" data-action-id="{{ $item->id }}">
                                        <div class="flex flex-wrap items-start justify-between gap-4">
                                            <div class="flex-1 min-w-[200px]">
                                                <div class="flex items-center gap-2">
                                                    <span class="text-xs font-mono bg-gray-200 px-2 py-0.5 rounded">{{ $item->reference_number }}</span>
                                                    <span class="text-xs text-gray-500">Noticed {{ $item->noticed_at?->diffForHumans() }}</span>
                                                </div>
                                                <div class="font-semibold text-gray-900 mt-1">{{ $item->product?->name_local ?: $item->product?->name }}</div>
                                                <div class="text-sm text-gray-600">Batch: {{ $item->batch_name ?: '#' . $item->price_detail_id }}</div>
                                                <div class="text-sm text-gray-600">Expired: {{ $item->expiry_date?->format('Y-m-d') }}</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-lg font-bold text-gray-900">{{ number_format($item->qty, 3) }} units</div>
                                                <div class="text-sm text-gray-600">Cost: Rs. {{ number_format($item->total_cost, 2) }}</div>
                                                @if($item->supplier)
                                                    <div class="text-xs text-gray-500">Supplier: {{ $item->supplier->name }}</div>
                                                @endif
                                            </div>
                                        </div>
                                        
                                        <div class="mt-4 flex flex-wrap gap-2">
                                            <button type="button" 
                                                    class="btn-dispose px-4 py-2 bg-gray-600 text-white text-sm rounded hover:bg-gray-700 transition"
                                                    data-action-id="{{ $item->id }}"
                                                    data-qty="{{ $item->qty }}"
                                                    data-unit-cost="{{ $item->unit_cost }}"
                                                    data-product="{{ $item->product?->name_local ?: $item->product?->name }}">
                                                🗑️ Dispose
                                            </button>
                                            <button type="button" 
                                                    class="btn-refund-cash px-4 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition"
                                                    data-action-id="{{ $item->id }}"
                                                    data-qty="{{ $item->qty }}"
                                                    data-unit-cost="{{ $item->unit_cost }}"
                                                    data-supplier-id="{{ $item->supplier_id }}"
                                                    data-product="{{ $item->product?->name_local ?: $item->product?->name }}">
                                                💵 Refund
                                            </button>
                                            <button type="button" 
                                                    class="btn-exchange-product px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition"
                                                    data-action-id="{{ $item->id }}"
                                                    data-qty="{{ $item->qty }}"
                                                    data-unit-cost="{{ $item->unit_cost }}"
                                                    data-supplier-id="{{ $item->supplier_id }}"
                                                    data-product="{{ $item->product?->name_local ?: $item->product?->name }}">
                                                🔄 Exchange
                                            </button>
                                            <button type="button" 
                                                    class="btn-undo-noticed px-4 py-2 bg-amber-500 text-white text-sm rounded hover:bg-amber-600 transition"
                                                    data-action-id="{{ $item->id }}"
                                                    data-qty="{{ $item->qty }}"
                                                    data-unit-cost="{{ $item->unit_cost }}"
                                                    data-reference="{{ $item->reference_number }}"
                                                    data-product="{{ $item->product?->name_local ?: $item->product?->name }}">
                                                ↩️ Undo
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            
                            @if($pendingItems->hasPages())
                                <div class="mt-4">{{ $pendingItems->links() }}</div>
                            @endif
                        @endif
                    </div>

                @else
                    {{-- History --}}
                    <div class="bg-white rounded-lg">
                        <div class="text-sm text-gray-600 mb-4">
                            History of resolved expired items showing recovery and loss.
                        </div>

                        @if($historyItems->isEmpty())
                            <div class="text-center py-8 text-gray-500">
                                No history records yet
                            </div>
                        @else
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reference</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Qty</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Outcome</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Recovered</th>
                                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Loss</th>
                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Resolved</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100">
                                        @foreach($historyItems as $item)
                                            @php
                                                $loss = $item->total_cost - $item->refund_value;
                                                $recoveryPct = $item->total_cost > 0 ? round(($item->refund_value / $item->total_cost) * 100, 0) : 0;
                                                $outcomeColors = [
                                                    'disposed' => 'bg-gray-100 text-gray-700',
                                                    'refund_cash' => 'bg-green-100 text-green-700',
                                                    'exchange_product' => 'bg-blue-100 text-blue-700',
                                                ];
                                                $outcomeLabels = [
                                                    'disposed' => 'Disposed',
                                                    'refund_cash' => 'Cash Refund',
                                                    'exchange_product' => 'Product Exchange',
                                                ];
                                            @endphp
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-4 py-3">
                                                    <span class="text-xs font-mono">{{ $item->reference_number }}</span>
                                                </td>
                                                <td class="px-4 py-3">
                                                    <div class="font-medium text-gray-900">{{ $item->product?->name_local ?: $item->product?->name }}</div>
                                                    <div class="text-xs text-gray-500">{{ $item->batch_name }}</div>
                                                </td>
                                                <td class="px-4 py-3 text-right">
                                                    {{ number_format($item->qty, 3) }}
                                                </td>
                                                <td class="px-4 py-3">
                                                    <span class="px-2 py-1 text-xs rounded {{ $outcomeColors[$item->outcome_type] ?? 'bg-gray-100' }}">
                                                        {{ $outcomeLabels[$item->outcome_type] ?? $item->outcome_type }}
                                                    </span>
                                                </td>
                                                <td class="px-4 py-3 text-right text-gray-700">
                                                    Rs. {{ number_format($item->total_cost, 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-right">
                                                    <span class="text-green-600">Rs. {{ number_format($item->refund_value, 2) }}</span>
                                                    @if($recoveryPct > 0)
                                                        <span class="text-xs text-green-500">({{ $recoveryPct }}%)</span>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-3 text-right">
                                                    <span class="text-red-600 font-medium">Rs. {{ number_format($loss, 2) }}</span>
                                                </td>
                                                <td class="px-4 py-3 text-sm text-gray-600">
                                                    {{ $item->resolved_at?->format('Y-m-d H:i') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            @if($historyItems->hasPages())
                                <div class="mt-4">{{ $historyItems->links() }}</div>
                            @endif
                        @endif
                    </div>
                @endif

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

{{-- Result Modal (custom in-page popup) --}}
<div id="resultModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; align-items: center; justify-content: center;">
    <div style="background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); max-width: 400px; width: 90%; margin: auto; overflow: hidden;">
        <div id="resultModalHeader" style="padding: 16px 20px; border-bottom: 1px solid #e5e7eb;">
            <h3 id="resultModalTitle" style="margin: 0; font-size: 18px; font-weight: 600;"></h3>
        </div>
        <div style="padding: 20px;">
            <p id="resultModalMessage" style="margin: 0 0 20px 0; font-size: 15px; color: #374151;"></p>
            <button id="resultModalOkBtn" style="width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: opacity 0.2s;">
                OK
            </button>
        </div>
    </div>
</div>

{{-- Mark Noticed Modal --}}
<div id="markNoticedModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Mark as Noticed (Expired)</h3>
        </div>
        <form id="markNoticedForm">
            <div class="px-6 py-4 space-y-4">
                <p class="text-sm text-gray-600">
                    This will <strong class="text-red-600">deduct the stock immediately</strong> from inventory.
                    The item will move to "Pending Resolution" for final action.
                </p>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="noticedProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity to Mark as Expired</label>
                    <input type="number" step="any" name="qty" id="noticedQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="price_detail_id" id="noticedBatchId">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="noticedMaxQty"></span></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Note (optional)</label>
                    <textarea name="note" id="noticedNote" rows="2" class="w-full rounded border-gray-300" placeholder="Any notes..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('markNoticedModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">Mark Noticed & Deduct Stock</button>
            </div>
        </form>
    </div>
</div>

{{-- Mark Off-POS Sale Modal --}}
<div id="offPosSaleModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Mark as Off-POS Sale</h3>
        </div>
        <form id="offPosSaleForm">
            <div class="px-6 py-4 space-y-4">
                <p class="text-sm text-gray-600">
                    This item was <strong class="text-blue-600">sold outside the POS system</strong>.
                    Stock will be deducted and recorded as an unresolved off-POS sale.
                </p>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="offPosProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity Sold Off-POS</label>
                    <input type="number" step="any" name="qty" id="offPosQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="price_detail_id" id="offPosBatchId">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="offPosMaxQty"></span></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Note (optional)</label>
                    <textarea name="note" id="offPosNote" rows="2" class="w-full rounded border-gray-300" placeholder="Customer name, reason, etc..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('offPosSaleModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Record Off-POS Sale</button>
            </div>
        </form>
    </div>
</div>

{{-- Dispose Modal --}}
<div id="disposeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">🗑️ Dispose - Record Loss</h3>
        </div>
        <form id="disposeForm">
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="disposeProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity to Dispose</label>
                    <input type="number" step="any" name="qty" id="disposeQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="action_id" id="disposeActionId">
                    <input type="hidden" id="disposeUnitCost">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="disposeMaxQty"></span> units</p>
                </div>
                <div class="bg-red-50 p-3 rounded">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Loss Amount</label>
                    <div id="disposeCost" class="text-xl font-bold text-red-600"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Note (optional)</label>
                    <textarea name="note" id="disposeNote" rows="2" class="w-full rounded border-gray-300" placeholder="Reason for disposal..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('disposeModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">Confirm Disposal</button>
            </div>
        </form>
    </div>
</div>

{{-- Refund Cash Modal --}}
<div id="refundCashModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">💵 Cash Refund from Supplier</h3>
        </div>
        <form id="refundCashForm">
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="refundProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity to Refund</label>
                    <input type="number" step="any" name="qty" id="refundQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="action_id" id="refundActionId">
                    <input type="hidden" id="refundUnitCost">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="refundMaxQty"></span> units</p>
                </div>
                <div class="bg-gray-50 p-3 rounded">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Original Cost (for this qty)</label>
                    <div id="refundOriginalCost" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Refund Amount Received</label>
                    <input type="number" step="0.01" name="refund_value" id="refundValue" class="w-full rounded border-gray-300" required>
                    <p class="text-xs text-gray-500 mt-1">Enter the amount refunded by the supplier</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Supplier</label>
                    <select name="supplier_id" id="refundSupplierId" class="w-full rounded border-gray-300">
                        <option value="">-- Select Supplier --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->supplier_id }}">{{ $supplier->supplier_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Note (optional)</label>
                    <textarea name="note" id="refundNote" rows="2" class="w-full rounded border-gray-300" placeholder="Reference number, etc..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('refundCashModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Record Refund</button>
            </div>
        </form>
    </div>
</div>

{{-- Exchange Product Modal --}}
<div id="exchangeProductModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">🔄 Exchange for New Product</h3>
        </div>
        <form id="exchangeProductForm">
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="exchangeProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity to Exchange</label>
                    <input type="number" step="any" name="qty" id="exchangeQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="action_id" id="exchangeActionId">
                    <input type="hidden" id="exchangeUnitCost">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="exchangeMaxQty"></span> units</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">New Quantity Received</label>
                    <input type="number" step="any" name="new_qty" id="exchangeNewQty" class="w-full rounded border-gray-300" required min="0.001">
                    <p class="text-xs text-gray-500 mt-1">Usually same as qty exchanged, but may differ</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">New Expiry Date</label>
                    <input type="date" name="new_expiry_date" id="exchangeExpiryDate" class="w-full rounded border-gray-300" required min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Supplier</label>
                    <select name="supplier_id" id="exchangeSupplierId" class="w-full rounded border-gray-300">
                        <option value="">-- Select Supplier --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->supplier_id }}">{{ $supplier->supplier_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Note (optional)</label>
                    <textarea name="note" id="exchangeNote" rows="2" class="w-full rounded border-gray-300" placeholder="Any notes..."></textarea>
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('exchangeProductModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Create New Batch</button>
            </div>
        </form>
    </div>
</div>

{{-- Undo Modal --}}
<div id="undoModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">↩️ Undo - Restore Stock</h3>
        </div>
        <form id="undoForm">
            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Product</label>
                    <div id="undoProductName" class="text-gray-900 font-medium"></div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quantity to Restore</label>
                    <input type="number" step="any" name="qty" id="undoQty" class="w-full rounded border-gray-300" required min="0.001">
                    <input type="hidden" name="action_id" id="undoActionId">
                    <input type="hidden" id="undoUnitCost">
                    <p class="text-xs text-gray-500 mt-1">Available: <span id="undoMaxQty"></span> units</p>
                </div>
                <div class="bg-amber-50 p-3 rounded text-sm text-amber-800">
                    <strong>Note:</strong> This will add the stock back to inventory and remove it from pending resolution.
                </div>
            </div>
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" onclick="closeModal('undoModal')" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-amber-500 text-white rounded hover:bg-amber-600">Restore Stock</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<style>
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideOut {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
    }
    @keyframes fadeOut {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.95); }
    }
</style>
<script>
    const csrfToken = '{{ csrf_token() }}';

    // Show result modal (custom in-page popup)
    function showResult(message, type = 'success', reloadOnClose = true) {
        const modal = document.getElementById('resultModal');
        const title = document.getElementById('resultModalTitle');
        const msg = document.getElementById('resultModalMessage');
        const btn = document.getElementById('resultModalOkBtn');
        const header = document.getElementById('resultModalHeader');
        
        if (type === 'success') {
            title.textContent = '✓ Success';
            title.style.color = '#16a34a';
            header.style.background = '#f0fdf4';
            btn.style.background = '#16a34a';
            btn.style.color = 'white';
        } else {
            title.textContent = '✕ Error';
            title.style.color = '#dc2626';
            header.style.background = '#fef2f2';
            btn.style.background = '#dc2626';
            btn.style.color = 'white';
        }
        
        msg.textContent = message;
        modal.style.display = 'flex';
        
        btn.onclick = () => {
            modal.style.display = 'none';
            if (reloadOnClose && type === 'success') {
                location.reload();
            }
        };
        
        // Also close on backdrop click
        modal.onclick = (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
                if (reloadOnClose && type === 'success') {
                    location.reload();
                }
            }
        };
    }

    // Helper to update stat counters
    function updateStats(unnoticedDelta = 0, pendingDelta = 0) {
        // Update unnoticed count
        const unnoticedEl = document.querySelector('.bg-red-50 .text-2xl');
        if (unnoticedEl) {
            const current = parseInt(unnoticedEl.textContent) || 0;
            unnoticedEl.textContent = Math.max(0, current + unnoticedDelta);
        }
        // Update pending count
        const pendingEl = document.querySelector('.bg-amber-50.border .text-2xl');
        if (pendingEl) {
            const current = parseInt(pendingEl.textContent) || 0;
            pendingEl.textContent = Math.max(0, current + pendingDelta);
        }
        // Update tab badges
        const unnoticedBadge = document.querySelector('a[href*="tab=unnoticed"] .rounded-full');
        if (unnoticedBadge && unnoticedDelta !== 0) {
            const current = parseInt(unnoticedBadge.textContent) || 0;
            const newVal = Math.max(0, current + unnoticedDelta);
            if (newVal === 0) unnoticedBadge.remove();
            else unnoticedBadge.textContent = newVal;
        }
        const pendingBadge = document.querySelector('a[href*="tab=pending"] .rounded-full');
        if (pendingBadge && pendingDelta !== 0) {
            const current = parseInt(pendingBadge.textContent) || 0;
            const newVal = Math.max(0, current + pendingDelta);
            if (newVal === 0) pendingBadge.remove();
            else pendingBadge.textContent = newVal;
        }
    }

    // Helper to update or remove a table row after partial action
    function updateTableRow(batchId, newQty) {
        const row = document.querySelector(`tr[data-batch-id="${batchId}"]`);
        if (!row) return;
        
        if (newQty <= 0) {
            row.style.animation = 'fadeOut 0.3s ease-out';
            setTimeout(() => row.remove(), 300);
        } else {
            // Update the qty display and button data
            const qtyCell = row.querySelector('td:nth-child(4) span');
            if (qtyCell) qtyCell.textContent = newQty.toLocaleString(undefined, {minimumFractionDigits: 3});
            row.querySelectorAll('button[data-qty]').forEach(btn => btn.dataset.qty = newQty);
        }
    }

    // Helper to update or remove a pending card after partial action
    function updatePendingCard(actionId, newQty, newCost) {
        const card = document.querySelector(`div[data-action-id="${actionId}"]`);
        if (!card) return;
        
        if (newQty <= 0) {
            card.style.animation = 'fadeOut 0.3s ease-out';
            setTimeout(() => card.remove(), 300);
            return true; // fully resolved
        } else {
            // Update qty and cost display
            const qtyEl = card.querySelector('.text-lg.font-bold');
            if (qtyEl) qtyEl.textContent = newQty.toLocaleString(undefined, {minimumFractionDigits: 3}) + ' units';
            const costEl = card.querySelector('.text-sm.text-gray-600');
            if (costEl && newCost !== undefined) costEl.textContent = 'Cost: Rs. ' + newCost.toLocaleString(undefined, {minimumFractionDigits: 2});
            // Update button data attributes
            card.querySelectorAll('button[data-qty]').forEach(btn => btn.dataset.qty = newQty);
            return false; // partial
        }
    }

    function openModal(id) {
        document.getElementById(id).classList.remove('hidden');
        document.getElementById(id).classList.add('flex');
    }

    function closeModal(id) {
        document.getElementById(id).classList.add('hidden');
        document.getElementById(id).classList.remove('flex');
    }

    // Mark Noticed buttons
    document.querySelectorAll('.btn-mark-noticed').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('noticedBatchId').value = btn.dataset.batchId;
            document.getElementById('noticedQty').value = btn.dataset.qty;
            document.getElementById('noticedMaxQty').textContent = parseFloat(btn.dataset.qty).toLocaleString(undefined, {minimumFractionDigits: 3}) + ' units';
            document.getElementById('noticedProductName').textContent = btn.dataset.product;
            document.getElementById('noticedNote').value = '';
            openModal('markNoticedModal');
        });
    });

    // Off-POS Sale buttons
    document.querySelectorAll('.btn-offpos-sale').forEach(btn => {
        btn.addEventListener('click', () => {
            document.getElementById('offPosBatchId').value = btn.dataset.batchId;
            document.getElementById('offPosQty').value = btn.dataset.qty;
            document.getElementById('offPosMaxQty').textContent = parseFloat(btn.dataset.qty).toLocaleString(undefined, {minimumFractionDigits: 3}) + ' units';
            document.getElementById('offPosProductName').textContent = btn.dataset.product;
            document.getElementById('offPosNote').value = '';
            openModal('offPosSaleModal');
        });
    });

    // Dispose buttons
    document.querySelectorAll('.btn-dispose').forEach(btn => {
        btn.addEventListener('click', () => {
            const qty = parseFloat(btn.dataset.qty);
            const unitCost = parseFloat(btn.dataset.unitCost);
            document.getElementById('disposeActionId').value = btn.dataset.actionId;
            document.getElementById('disposeProductName').textContent = btn.dataset.product;
            document.getElementById('disposeQty').value = qty;
            document.getElementById('disposeQty').max = qty;
            document.getElementById('disposeUnitCost').value = unitCost;
            document.getElementById('disposeMaxQty').textContent = qty.toLocaleString(undefined, {minimumFractionDigits: 3});
            document.getElementById('disposeCost').textContent = 'Rs. ' + (qty * unitCost).toLocaleString(undefined, {minimumFractionDigits: 2});
            document.getElementById('disposeNote').value = '';
            openModal('disposeModal');
        });
    });

    // Update dispose cost on qty change
    document.getElementById('disposeQty').addEventListener('input', (e) => {
        const qty = parseFloat(e.target.value) || 0;
        const unitCost = parseFloat(document.getElementById('disposeUnitCost').value) || 0;
        document.getElementById('disposeCost').textContent = 'Rs. ' + (qty * unitCost).toLocaleString(undefined, {minimumFractionDigits: 2});
    });

    // Refund Cash buttons
    document.querySelectorAll('.btn-refund-cash').forEach(btn => {
        btn.addEventListener('click', () => {
            const qty = parseFloat(btn.dataset.qty);
            const unitCost = parseFloat(btn.dataset.unitCost);
            document.getElementById('refundActionId').value = btn.dataset.actionId;
            document.getElementById('refundProductName').textContent = btn.dataset.product;
            document.getElementById('refundQty').value = qty;
            document.getElementById('refundQty').max = qty;
            document.getElementById('refundUnitCost').value = unitCost;
            document.getElementById('refundMaxQty').textContent = qty.toLocaleString(undefined, {minimumFractionDigits: 3});
            document.getElementById('refundOriginalCost').textContent = 'Rs. ' + (qty * unitCost).toLocaleString(undefined, {minimumFractionDigits: 2});
            document.getElementById('refundValue').value = (qty * unitCost).toFixed(2);
            document.getElementById('refundNote').value = '';
            if (btn.dataset.supplierId) {
                document.getElementById('refundSupplierId').value = btn.dataset.supplierId;
            }
            openModal('refundCashModal');
        });
    });

    // Update refund cost on qty change
    document.getElementById('refundQty').addEventListener('input', (e) => {
        const qty = parseFloat(e.target.value) || 0;
        const unitCost = parseFloat(document.getElementById('refundUnitCost').value) || 0;
        const cost = qty * unitCost;
        document.getElementById('refundOriginalCost').textContent = 'Rs. ' + cost.toLocaleString(undefined, {minimumFractionDigits: 2});
        document.getElementById('refundValue').value = cost.toFixed(2);
    });

    // Exchange Product buttons
    document.querySelectorAll('.btn-exchange-product').forEach(btn => {
        btn.addEventListener('click', () => {
            const qty = parseFloat(btn.dataset.qty);
            const unitCost = parseFloat(btn.dataset.unitCost);
            document.getElementById('exchangeActionId').value = btn.dataset.actionId;
            document.getElementById('exchangeProductName').textContent = btn.dataset.product;
            document.getElementById('exchangeQty').value = qty;
            document.getElementById('exchangeQty').max = qty;
            document.getElementById('exchangeUnitCost').value = unitCost;
            document.getElementById('exchangeMaxQty').textContent = qty.toLocaleString(undefined, {minimumFractionDigits: 3});
            document.getElementById('exchangeNewQty').value = qty;
            document.getElementById('exchangeNote').value = '';
            if (btn.dataset.supplierId) {
                document.getElementById('exchangeSupplierId').value = btn.dataset.supplierId;
            }
            openModal('exchangeProductModal');
        });
    });

    // Update exchange new qty on qty change
    document.getElementById('exchangeQty').addEventListener('input', (e) => {
        const qty = parseFloat(e.target.value) || 0;
        document.getElementById('exchangeNewQty').value = qty;
    });

    // Undo Noticed buttons - now opens a modal for partial undo
    document.querySelectorAll('.btn-undo-noticed').forEach(btn => {
        btn.addEventListener('click', () => {
            const qty = parseFloat(btn.dataset.qty);
            const unitCost = parseFloat(btn.dataset.unitCost) || 0;
            document.getElementById('undoActionId').value = btn.dataset.actionId;
            document.getElementById('undoProductName').textContent = btn.dataset.product;
            document.getElementById('undoQty').value = qty;
            document.getElementById('undoQty').max = qty;
            document.getElementById('undoUnitCost').value = unitCost;
            document.getElementById('undoMaxQty').textContent = qty.toLocaleString(undefined, {minimumFractionDigits: 3});
            openModal('undoModal');
        });
    });

    // Mark Noticed Form
    document.getElementById('markNoticedForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const batchId = data.get('price_detail_id');
        const markedQty = parseFloat(data.get('qty')) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.mark-noticed") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    price_detail_id: batchId,
                    qty: data.get('qty'),
                    note: data.get('note'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('markNoticedModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Off-POS Sale Form
    document.getElementById('offPosSaleForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const batchId = data.get('price_detail_id');
        const soldQty = parseFloat(data.get('qty')) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.mark-offpos-sale") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    price_detail_id: batchId,
                    qty: data.get('qty'),
                    note: data.get('note'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('offPosSaleModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Dispose Form
    document.getElementById('disposeForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const actionId = data.get('action_id');
        const disposedQty = parseFloat(data.get('qty')) || 0;
        const unitCost = parseFloat(document.getElementById('disposeUnitCost').value) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.resolve-dispose") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action_id: actionId,
                    qty: data.get('qty'),
                    note: data.get('note'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('disposeModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Refund Cash Form
    document.getElementById('refundCashForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const actionId = data.get('action_id');
        const refundedQty = parseFloat(data.get('qty')) || 0;
        const unitCost = parseFloat(document.getElementById('refundUnitCost').value) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.resolve-refund-cash") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action_id: actionId,
                    qty: data.get('qty'),
                    refund_value: data.get('refund_value'),
                    supplier_id: data.get('supplier_id') || null,
                    note: data.get('note'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('refundCashModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Exchange Product Form
    document.getElementById('exchangeProductForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const actionId = data.get('action_id');
        const exchangedQty = parseFloat(data.get('qty')) || 0;
        const unitCost = parseFloat(document.getElementById('exchangeUnitCost').value) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.resolve-exchange-product") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action_id: actionId,
                    qty: data.get('qty'),
                    new_qty: data.get('new_qty'),
                    new_expiry_date: data.get('new_expiry_date'),
                    supplier_id: data.get('supplier_id') || null,
                    note: data.get('note'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('exchangeProductModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Undo Form
    document.getElementById('undoForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = new FormData(form);
        const actionId = data.get('action_id');
        const undoneQty = parseFloat(data.get('qty')) || 0;
        const unitCost = parseFloat(document.getElementById('undoUnitCost')?.value) || 0;
        
        try {
            const response = await fetch('{{ route("expired-items.undo-noticed") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action_id: actionId,
                    qty: data.get('qty'),
                }),
            });
            
            const result = await response.json();
            if (result.ok) {
                closeModal('undoModal');
                showResult(result.message, 'success');
            } else {
                showResult(result.message, 'error');
            }
        } catch (err) {
            showResult('Request failed: ' + err.message, 'error');
        }
    });

    // Close modals on escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            ['markNoticedModal', 'offPosSaleModal', 'disposeModal', 'refundCashModal', 'exchangeProductModal', 'undoModal'].forEach(closeModal);
        }
    });

    // Close modals on backdrop click
    ['markNoticedModal', 'offPosSaleModal', 'disposeModal', 'refundCashModal', 'exchangeProductModal', 'undoModal'].forEach(id => {
        document.getElementById(id).addEventListener('click', (e) => {
            if (e.target.id === id) closeModal(id);
        });
    });
</script>
@endpush

@endsection