@extends('layouts.app')

@section('title', 'Account Refunds')
@section('no-page-header')

@section('content')
<div class="min-h-screen bg-gray-50 p-3 lg:p-5">
    <div class="mx-auto max-w-7xl space-y-4">
        <div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
            <div>
                <h1 class="text-lg font-semibold text-gray-900">Account Refunds</h1>
                <p class="text-xs text-gray-500">Track key-deposit refunds created when customer accounts are closed.</p>
            </div>
        </div>

        @if (session('success'))
            <div class="rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-800">{{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800">{{ $errors->first() }}</div>
        @endif

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            <div class="rounded-md border border-amber-200 bg-white p-3"><p class="text-xs text-gray-500">Pending Refunds</p><p class="mt-1 text-lg font-semibold text-amber-700">{{ $summary['pending_count'] }}</p></div>
            <div class="rounded-md border border-amber-200 bg-white p-3"><p class="text-xs text-gray-500">Pending Amount</p><p class="mt-1 text-lg font-semibold text-amber-700">RM {{ number_format($summary['pending_amount'], 2) }}</p></div>
            <div class="rounded-md border border-green-200 bg-white p-3"><p class="text-xs text-gray-500">Sent Refunds</p><p class="mt-1 text-lg font-semibold text-green-700">{{ $summary['sent_count'] }}</p></div>
            <div class="rounded-md border border-green-200 bg-white p-3"><p class="text-xs text-gray-500">Sent Amount</p><p class="mt-1 text-lg font-semibold text-green-700">RM {{ number_format($summary['sent_amount'], 2) }}</p></div>
        </div>

        <div class="rounded-md border border-gray-200 bg-white">
            <form method="GET" class="flex flex-col gap-2 border-b border-gray-200 p-3 lg:flex-row lg:items-end">
                <div class="min-w-0 flex-1">
                    <label for="search" class="mb-1 block text-xs font-medium text-gray-600">Search</label>
                    <input id="search" name="search" value="{{ request('search') }}" class="h-9 w-full rounded-md border-gray-300 text-sm" placeholder="Customer, account number or transfer reference">
                </div>
                <div class="sm:w-44">
                    <label for="status" class="mb-1 block text-xs font-medium text-gray-600">Status</label>
                    <select id="status" name="status" class="h-9 w-full rounded-md border-gray-300 text-sm">
                        <option value="all" @selected($status === 'all')>All refunds</option>
                        <option value="pending" @selected($status === 'pending')>Pending</option>
                        <option value="sent" @selected($status === 'sent')>Sent</option>
                    </select>
                </div>
                <div class="sm:w-36">
                    <label for="from_date" class="mb-1 block text-xs font-medium text-gray-600">From</label>
                    <input id="from_date" name="from_date" type="date" value="{{ request('from_date') }}" class="h-9 w-full rounded border border-gray-300 px-2 text-sm">
                </div>
                <div class="sm:w-36">
                    <label for="to_date" class="mb-1 block text-xs font-medium text-gray-600">To</label>
                    <input id="to_date" name="to_date" type="date" value="{{ request('to_date') }}" class="h-9 w-full rounded border border-gray-300 px-2 text-sm">
                </div>
                <div class="sm:w-24">
                    <label for="per_page" class="mb-1 block text-xs font-medium text-gray-600">Rows</label>
                    <select id="per_page" name="per_page" class="h-9 w-full rounded border border-gray-300 px-2 text-sm">
                        @foreach ([10, 20, 50, 100] as $size)<option value="{{ $size }}" @selected((int) request('per_page', 20) === $size)>{{ $size }}</option>@endforeach
                    </select>
                </div>
                <button class="h-9 rounded-md bg-gray-800 px-4 text-sm font-medium text-white hover:bg-gray-900">Filter</button>
                <a href="{{ route('refunds.index') }}" class="inline-flex h-9 items-center justify-center rounded-md border border-gray-300 px-3 text-sm text-gray-700 hover:bg-gray-50">Reset</a>
            </form>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">Customer</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500">Refund</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">Bank Details</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">Requested</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">Transfer</th>
                            <th class="px-3 py-2 text-left text-xs font-medium text-gray-500">Status</th>
                            <th class="px-3 py-2 text-right text-xs font-medium text-gray-500">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white">
                        @forelse ($refunds as $refund)
                            <tr>
                                @if($refund->refund_type === 'locker_change')
                                    <td class="px-3 py-2"><a href="{{ route('customers.show', $refund->client_id) }}" class="text-sm font-medium text-indigo-700 hover:underline">{{ $refund->client->name ?? 'Customer unavailable' }}</a><p class="text-xs text-gray-400">#{{ str_pad($refund->client_id, 4, '0', STR_PAD_LEFT) }}</p><p class="mt-0.5 text-xs font-medium text-blue-700">Locker Change Deposit - {{ $refund->locker_number }}</p></td>
                                @else
                                <td class="px-3 py-2"><a href="{{ route('customers.show', $refund->client_id) }}" class="text-sm font-medium text-indigo-700 hover:underline">{{ $refund->client->name ?? 'Customer unavailable' }}</a><p class="text-xs text-gray-400">#{{ str_pad($refund->client_id, 4, '0', STR_PAD_LEFT) }}</p><p class="mt-0.5 text-xs font-medium {{ $refund->refund_type === 'locker_release' ? 'text-blue-700' : 'text-gray-500' }}">{{ $refund->refund_type === 'locker_release' ? 'Locker Release · ' . $refund->locker_number : 'Account Closure' }}</p></td>
                                @endif
                                <td class="px-3 py-2 text-right text-sm font-semibold text-gray-900">RM {{ number_format($refund->amount, 2) }}</td>
                                <td class="px-3 py-2 text-xs text-gray-700">
                                    <dl class="space-y-0.5">
                                        <div><dt class="inline text-gray-400">Bank:</dt> <dd class="inline font-medium text-gray-900">{{ $refund->bank_name }}</dd></div>
                                        <div><dt class="inline text-gray-400">Account name:</dt> <dd class="inline">{{ $refund->account_name }}</dd></div>
                                        <div><dt class="inline text-gray-400">Account number:</dt> <dd class="inline font-medium text-gray-900">{{ $refund->account_number }}</dd></div>
                                        <div><dt class="inline text-gray-400">IFSC code:</dt> <dd class="inline">{{ $refund->ifsc_code }}</dd></div>
                                    </dl>
                                </td>
                                <td class="px-3 py-2 text-xs text-gray-600">{{ optional($refund->requested_at)->format('d M Y, h:i A') }}</td>
                                <td class="px-3 py-2 text-xs text-gray-600">@if($refund->status === 'sent')<p>{{ optional($refund->sent_at)->format('d M Y') }}</p><p class="font-medium text-gray-800">{{ $refund->transfer_reference }}</p><p class="text-gray-400">{{ $refund->sender->name ?? '-' }}</p>@else<span class="text-gray-400">Not sent</span>@endif</td>
                                <td class="px-3 py-2"><span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $refund->status === 'sent' ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800' }}">{{ ucfirst($refund->status) }}</span></td>
                                <td class="px-3 py-2 text-right">@if($refund->status === 'pending')<button type="button" onclick="openRefundModal({{ $refund->id }}, @js($refund->client->name ?? ''), @js(number_format($refund->amount, 2)))" class="rounded-md bg-green-600 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-green-700">Mark as Sent</button>@else<span class="text-xs text-gray-400">Completed</span>@endif</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-4 py-10 text-center text-sm text-gray-500">No refund records found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($refunds->hasPages())<div class="border-t border-gray-200 px-3 py-2">{{ $refunds->links() }}</div>@endif
        </div>
    </div>
</div>

<div id="refundSentModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-gray-900/60 p-4">
    <div class="w-full max-w-md rounded-lg bg-white shadow-xl">
        <div class="flex items-center justify-between border-b px-4 py-3"><div><h2 class="text-sm font-semibold text-gray-900">Confirm Refund Transfer</h2><p id="refundModalCustomer" class="text-xs text-gray-500"></p></div><button type="button" onclick="closeRefundModal()" class="p-1 text-gray-400 hover:text-gray-700"><i class="fas fa-times"></i></button></div>
        <form id="refundSentForm" method="POST" class="space-y-3 p-4">@csrf
            <div><label for="transfer_reference" class="mb-1 block text-xs font-medium text-gray-700">Bank Transfer Reference <span class="text-red-500">*</span></label><input id="transfer_reference" name="transfer_reference" type="text" required maxlength="100" autocomplete="off" class="block h-9 w-full rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Enter transaction/reference number"></div>
            <div><label for="sent_at" class="mb-1 block text-xs font-medium text-gray-700">Transfer Date <span class="text-red-500">*</span></label><input id="sent_at" name="sent_at" type="text" required maxlength="10" inputmode="numeric" autocomplete="off" pattern="\d{2}-\d{2}-\d{4}" value="{{ today()->format('d-m-Y') }}" placeholder="DD-MM-YYYY" title="Enter the date as DD-MM-YYYY" class="block h-9 w-full rounded border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"></div>
            <p class="rounded-md bg-amber-50 px-3 py-2 text-xs text-amber-800">Confirm only after verifying the bank transfer was successful.</p>
            <div class="flex justify-end gap-2 border-t pt-3"><button type="button" onclick="closeRefundModal()" class="rounded-md border border-gray-300 px-3 py-2 text-sm">Cancel</button><button class="rounded-md bg-green-600 px-3 py-2 text-sm font-medium text-white hover:bg-green-700">Confirm Sent</button></div>
        </form>
    </div>
</div>
<script>
function openRefundModal(id, customer, amount) {
    const modal = document.getElementById('refundSentModal');
    document.getElementById('refundSentForm').action = `{{ url('/refunds') }}/${id}/mark-sent`;
    document.getElementById('refundModalCustomer').textContent = `${customer} · RM ${amount}`;
    modal.classList.remove('hidden'); modal.classList.add('flex');
    document.getElementById('transfer_reference').focus();
}
function closeRefundModal() {
    const modal = document.getElementById('refundSentModal');
    modal.classList.add('hidden'); modal.classList.remove('flex');
    document.getElementById('transfer_reference').value = '';
}
</script>
@endsection