@extends('layouts.app')

@section('title', 'Payment Management')

@section('content')

<div class="min-h-screen bg-gray-100 p-4 lg:p-6">

    <div class="max-w-7xl mx-auto">

        <div class="mb-4 flex flex-wrap items-start justify-between gap-2">
            <div><h1 class="text-lg font-semibold text-gray-800">Payments</h1>
            <p class="mt-1 text-xs text-gray-500">Collect outstanding payments or view completed payments.</p></div>
            <a href="{{ route('payment.bulk-recovery') }}" class="rounded-md border border-gray-200 bg-white px-3 py-2 text-xs text-gray-600 hover:bg-gray-50" title="Recover confirmed historical payments">Bulk Recovery</a>
        </div>
        <nav aria-label="Payment views" class="flex flex-wrap gap-2 mb-4">
            @foreach (['pending' => 'Pending Payments', 'paid' => 'Paid Payments'] as $key => $label)
                <a href="{{ route('payment.index', array_merge(request()->except(['page', 'status', 'tab']), ['tab' => $key])) }}"
                    @if ($tab === $key) aria-current="page" @endif
                    class="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium {{ $tab === $key ? 'border-blue-200 bg-blue-50 text-blue-800' : 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50' }}">
                    {{ $label }} <span class="rounded-full bg-white px-2 py-0.5 text-xs">{{ $summary[$key] }}</span>
                </a>
            @endforeach
        </nav>
        <p class="mb-3 text-xs text-gray-500">{{ $tab === 'pending' ? 'Pending and partially paid invoices. Pay the remaining balance to complete an invoice.' : 'Fully paid invoices. Open an invoice to view and download it.' }}</p>
        <!-- Filters -->

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">

            <div class="p-5">

                <form method="GET"
                      action="{{ route('payment.index') }}"
                      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                    <!-- Search -->
                    <div>
                        <label class="text-sm font-medium text-gray-700 mb-1 block">
                            Search
                        </label>
                        <input type="text"
                               name="search"
                               value="{{ request('search') }}"
                               placeholder="Invoice, customer or safebox..."
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                    </div>
                    <!-- Client -->
                    <!-- <div>
                        <label class="text-sm font-medium text-gray-700 mb-1 block">
                            Client
                        </label>
                        <select name="client_id"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                            <option value="">All Clients</option>
                            @foreach($customers as $client)
                                <option value="{{ $client->id }}"
                                    {{ request('client_id') == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                    </div> -->
                    <input type="hidden" name="tab" value="{{ $tab }}">

                    <!-- From -->
                    <div>
                        <label class="text-sm font-medium text-gray-700 mb-1 block">
                            From Date
                        </label>
                        <input type="hidden" id="from_date" name="from_date" value="{{ request('from_date') }}">
                        <input type="text" id="from_date_display" value="{{ request('from_date') ? date('d-m-Y', strtotime(request('from_date'))) : '' }}" placeholder="DD-MM-YYYY" autocomplete="off" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    </div>
                    <!-- To -->
                    <div>
                        <label class="text-sm font-medium text-gray-700 mb-1 block">
                            To Date
                        </label>
                        <input type="hidden" id="to_date" name="to_date" value="{{ request('to_date') }}">
                        <input type="text" id="to_date_display" value="{{ request('to_date') ? date('d-m-Y', strtotime(request('to_date'))) : '' }}" placeholder="DD-MM-YYYY" autocomplete="off" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    </div>
                    <!-- Buttons -->
                    <div class="flex gap-2 items-end">
                        <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 transition">
                            <!-- <i class="fas fa-filter mr-2"></i> -->
                            Filters
                        </button>
                        <a href="{{ route('payment.index', ['tab' => $tab]) }}" class="bg-gray-200 text-gray-700 px-5 py-2 rounded-lg hover:bg-gray-300 transition">
                            Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Table -->

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">

            <div class="overflow-x-auto">

                <table class="min-w-full divide-y divide-gray-200 text-xs text-gray-600">
                    <thead class="bg-gray-50 text-gray-600">
                        <tr>
                            @foreach (['Invoice / Date', 'Customer', 'Safebox', 'Type', 'Amount (RM)', 'Paid (RM)', 'Balance (RM)', 'Status', 'Invoice'] as $heading)
                                <th class="px-3 py-2 text-left font-semibold whitespace-nowrap">{{ $heading }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse ($invoices as $invoice)
                            @php
                                $status = strtolower(trim((string) $invoice->status));
                                $paidAmount = (float) ($invoice->paid_amount ?? 0);
                                if ($paidAmount <= 0) {
                                    $paidAmount = (float) ($invoice->received_payment_amount ?? 0);
                                }
                                $balanceAmount = max(0, (float) $invoice->total_amount - $paidAmount);
                                $statusClass = match ($status) {
                                    'paid' => 'bg-green-50 text-green-800',
                                    'pending' => 'bg-yellow-50 text-yellow-800',
                                    'partial' => 'bg-blue-50 text-blue-800',
                                    default => 'bg-gray-100 text-gray-700',
                                };
                                $invoiceUrl = route('customers.invoice.show', [
                                    'client' => $invoice->client_id,
                                    'registration' => $invoice->registration_id,
                                    'invoice_id' => $invoice->id,
                                ]);
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-3 py-2 whitespace-nowrap">
                                    <span class="font-medium text-gray-800">{{ $invoice->invoice_number }}</span>
                                    <div class="text-gray-500">{{ $invoice->invoice_date?->format('d-m-Y') ?? 'N/A' }}</div>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="font-medium text-gray-700">{{ $invoice->client_name ?? 'N/A' }}</div>
                                    <div class="text-gray-500">{{ $invoice->client_phone ?? 'N/A' }}</div>
                                    @foreach ($invoice->customer?->customerMembers ?? [] as $member)
                                        <div class="text-gray-500 whitespace-nowrap">{{ $member->proof_type === 'ic_number' ? 'IC Number' : ucwords(str_replace('_', ' ', $member->proof_type ?? 'ID')) }}: {{ $member->proof_number ?? 'N/A' }}</div>
                                    @endforeach
                                </td>
                                <td class="px-3 py-2">{{ $invoice->locker_number ?? 'N/A' }}</td>
                                <td class="px-3 py-2 whitespace-nowrap">{{ ['create' => 'Registration', 'add' => 'Locker Add', 'renewal' => 'Renewal', 'change' => 'Change'][$invoice->payment_type] ?? ucwords(str_replace('_', ' ', $invoice->payment_type ?? 'N/A')) }}</td>
                                <td class="px-3 py-2 tabular-nums whitespace-nowrap">{{ number_format($invoice->total_amount, 2) }}</td>
                                <td class="px-3 py-2 tabular-nums whitespace-nowrap">{{ number_format($paidAmount, 2) }}</td>
                                <td class="px-3 py-2 tabular-nums whitespace-nowrap font-medium">{{ number_format($balanceAmount, 2) }}</td>
                                <td class="px-3 py-2"><span class="inline-flex rounded-full px-2 py-0.5 whitespace-nowrap {{ $statusClass }}">{{ $status === 'partial' ? 'Partially Paid' : ucfirst($status ?: 'Unknown') }}</span></td>
                                <td class="px-3 py-2">
                                    @if ($invoice->customer && $invoice->lockerRegistration)
                                        <div class="flex items-center gap-2 whitespace-nowrap">
                                            <a href="{{ $invoiceUrl }}" class="rounded border border-gray-200 px-2 py-1 text-gray-700 hover:bg-gray-100">{{ $status === 'paid' ? 'View / Download' : 'View' }}</a>
                                            @if (in_array($status, ['pending', 'partial'], true) && $balanceAmount > 0)
                                                <form action="{{ route('customers.payment.initiate', $invoice->client_id) }}" method="POST" onsubmit="return confirm('Are you sure you want to pay this invoice?')">
                                                    @csrf
                                                    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                                                    <input type="hidden" name="locker_registration_id" value="{{ $invoice->registration_id }}">
                                                    <input type="hidden" name="payment_type" value="{{ $invoice->payment_type ?? 'registration_fee' }}">
                                                    <input type="hidden" name="amount" value="{{ $balanceAmount }}">
                                                    <input type="hidden" name="payment_date" value="{{ now()->format('Y-m-d') }}">
                                                    <input type="hidden" name="notes" value="{{ $invoice->payment_type ?? 'payment' }}">
                                                    <button type="submit" class="rounded border border-blue-200 bg-blue-50 px-2 py-1 text-blue-700 hover:bg-blue-100">Pay Invoice</button>
                                                </form>

                                            @endif
                                        </div>
                                    @else
                                        <span class="text-gray-500">Registration unavailable</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="9" class="px-3 py-8 text-center text-gray-500">No invoices match your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>

            </div>

            <!-- Pagination -->

            <div class="px-6 py-4 border-t bg-gray-50">

                {{ $invoices->appends(request()->query())->links() }}

            </div>

        </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<style>
    .ui-datepicker {
        z-index: 9999 !important;
    }
</style>

<script>
    (function() {
        function formatIsoToDisplay(isoDate) {
            if (!isoDate) return '';
            if (/^\d{4}-\d{2}-\d{2}$/.test(isoDate)) {
                var parts = isoDate.split('-');
                return parts[2] + '-' + parts[1] + '-' + parts[0];
            }
            if (/^\d{2}-\d{2}-\d{4}$/.test(isoDate)) {
                return isoDate;
            }
            return '';
        }

        function formatDisplayToIso(displayDate) {
            if (!displayDate) return '';
            if (/^\d{4}-\d{2}-\d{2}$/.test(displayDate)) {
                return displayDate;
            }
            if (/^\d{2}-\d{2}-\d{4}$/.test(displayDate)) {
                var parts = displayDate.split('-');
                return parts[2] + '-' + parts[1] + '-' + parts[0];
            }
            return '';
        }

        function init() {
            var fromIsoEl = document.getElementById('from_date');
            var toIsoEl = document.getElementById('to_date');
            var fromDisplayEl = document.getElementById('from_date_display');
            var toDisplayEl = document.getElementById('to_date_display');

            if (!fromIsoEl || !toIsoEl || !fromDisplayEl || !toDisplayEl) return;

            fromDisplayEl.value = formatIsoToDisplay(fromIsoEl.value);
            toDisplayEl.value = formatIsoToDisplay(toIsoEl.value);

            if (!window.jQuery || !jQuery.fn || !jQuery.fn.datepicker) return;

            jQuery(fromDisplayEl).datepicker({
                dateFormat: 'dd-mm-yy',
                onSelect: function(dateText) {
                    fromIsoEl.value = formatDisplayToIso(dateText);
                }
            });

            jQuery(toDisplayEl).datepicker({
                dateFormat: 'dd-mm-yy',
                onSelect: function(dateText) {
                    toIsoEl.value = formatDisplayToIso(dateText);
                }
            });

            fromDisplayEl.addEventListener('change', function() {
                fromIsoEl.value = formatDisplayToIso(this.value);
            });

            toDisplayEl.addEventListener('change', function() {
                toIsoEl.value = formatDisplayToIso(this.value);
            });
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }
    })();
</script>

@endsection