@extends('layouts.dashboard.inface', ['section' => 'payments'])

@section('content')
    <div class="min-h-0 flex-1 overflow-y-auto">
    <div class="mx-auto w-full max-w-[1200px] p-4 md:p-8">
        <div class="mb-7 flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-3xl font-black tracking-tight text-[#111318] dark:text-white">Recibos por concepto</h1>
                <p class="mt-2 text-sm text-[#616f89] dark:text-[#a0aec0]">Genera comprobantes independientes, sin asociarlos a una venta, apartado o lote.</p>
            </div>
            <button type="button" onclick="document.getElementById('receipt-form').classList.toggle('hidden')"
                class="flex h-11 items-center rounded-lg bg-primary px-5 text-sm font-bold text-white shadow-md hover:bg-blue-700">
                <span class="material-symbols-outlined mr-2 text-xl">add_circle</span> Nuevo recibo
            </button>
        </div>

        @if (session('success'))
            <div class="mb-5 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-800">{{ session('success') }}</div>
        @endif

        <section id="receipt-form" class="{{ $errors->any() ? '' : 'hidden' }} mb-7 rounded-xl border border-[#dbdfe6] bg-white p-5 shadow-sm dark:border-[#2d3748] dark:bg-[#1a212e]">
            <div class="mb-5">
                <h2 class="text-lg font-bold text-[#111318] dark:text-white">Datos del comprobante</h2>
                <p class="text-sm text-[#616f89]">El folio se asignará automáticamente al guardar.</p>
            </div>

            @if ($errors->any())
                <div class="mb-5 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                    <ul class="list-disc pl-5">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                </div>
            @endif

            <form action="{{ route('realEstate.standaloneReceipts.store') }}" method="POST" class="grid gap-4 md:grid-cols-2">
                @csrf
                @if ($agencies->count() > 1)
                    <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Inmobiliaria *
                        <select name="real_estate_agency_id" required class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                            <option value="">Seleccionar</option>
                            @foreach ($agencies as $agency)<option value="{{ $agency->id }}" @selected((string) old('real_estate_agency_id') === (string) $agency->id)>{{ $agency->name }}</option>@endforeach
                        </select>
                    </label>
                @elseif ($agencies->count() === 1)
                    <input type="hidden" name="real_estate_agency_id" value="{{ $agencies->first()->id }}">
                @endif

                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Fecha de emisión *
                    <input type="date" name="issued_at" required value="{{ old('issued_at', now()->toDateString()) }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Recibí de *
                    <input type="text" name="recipient_name" maxlength="180" required value="{{ old('recipient_name') }}" placeholder="Nombre de la persona o empresa" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Concepto *
                    <input type="text" name="concept" maxlength="180" required value="{{ old('concept') }}" placeholder="Ej. Cuota de mantenimiento" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Monto *
                    <input type="number" name="amount" min="0.01" max="999999999999.99" step="0.01" required value="{{ old('amount') }}" placeholder="0.00" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>

                <div class="grid grid-cols-2 gap-3">
                    <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Moneda *
                        <select name="currency" required class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                            <option value="MXN" @selected(old('currency', 'MXN') === 'MXN')>MXN</option><option value="USD" @selected(old('currency') === 'USD')>USD</option>
                        </select>
                    </label>
                    <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Método
                        <select name="payment_method_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                            <option value="">No especificado</option>
                            @foreach ($paymentMethods as $method)<option value="{{ $method->id }}" @selected((string) old('payment_method_id') === (string) $method->id)>{{ $method->name }}</option>@endforeach
                        </select>
                    </label>
                </div>

                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Correo
                    <input type="email" name="recipient_email" value="{{ old('recipient_email') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">Teléfono
                    <input type="text" name="recipient_phone" maxlength="30" value="{{ old('recipient_phone') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200">RFC / identificación fiscal
                    <input type="text" name="recipient_tax_id" maxlength="20" value="{{ old('recipient_tax_id') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm uppercase dark:bg-slate-800">
                </label>
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-200 md:col-span-2">Observaciones
                    <textarea name="notes" maxlength="2000" rows="3" class="mt-1 w-full rounded-lg border-slate-300 text-sm dark:bg-slate-800">{{ old('notes') }}</textarea>
                </label>
                <div class="flex justify-end gap-3 md:col-span-2">
                    <button type="button" onclick="document.getElementById('receipt-form').classList.add('hidden')" class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700">Cancelar</button>
                    <button type="submit" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-bold text-white">Generar recibo</button>
                </div>
            </form>
        </section>

        <form method="GET" class="mb-4 flex flex-wrap gap-3 rounded-xl border border-[#dbdfe6] bg-white p-4 dark:border-[#2d3748] dark:bg-[#1a212e]">
            <input name="search" value="{{ request('search') }}" placeholder="Buscar folio, persona o concepto" class="min-w-[260px] flex-1 rounded-lg border-slate-300 text-sm dark:bg-slate-800">
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="rounded-lg border-slate-300 text-sm dark:bg-slate-800">
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="rounded-lg border-slate-300 text-sm dark:bg-slate-800">
            <button class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-bold text-white">Filtrar</button>
        </form>

        <div class="overflow-hidden rounded-xl border border-[#dbdfe6] bg-white shadow-sm dark:border-[#2d3748] dark:bg-[#1a212e]">
            <div class="overflow-x-auto"><table class="w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-xs uppercase tracking-wider text-slate-500 dark:bg-slate-800"><tr>
                    <th class="px-5 py-4">Folio</th><th class="px-5 py-4">Recibí de</th><th class="px-5 py-4">Concepto</th><th class="px-5 py-4">Fecha</th><th class="px-5 py-4 text-right">Monto</th><th class="px-5 py-4 text-right">Acciones</th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                    @forelse ($receipts as $receipt)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
                            <td class="px-5 py-4 font-bold text-primary">{{ $receipt->folio }}</td>
                            <td class="px-5 py-4"><p class="font-semibold text-slate-900 dark:text-white">{{ $receipt->recipient_name }}</p><p class="text-xs text-slate-500">{{ $receipt->agency->name }}</p></td>
                            <td class="px-5 py-4 text-slate-600 dark:text-slate-300">{{ $receipt->concept }}</td>
                            <td class="px-5 py-4">{{ $receipt->issued_at->format('d/m/Y') }}</td>
                            <td class="px-5 py-4 text-right font-bold">${{ number_format((float) $receipt->amount, 2) }} {{ $receipt->currency }}</td>
                            <td class="px-5 py-4 text-right"><a href="{{ route('realEstate.standaloneReceipts.show', $receipt) }}" target="_blank" class="inline-flex items-center rounded-lg px-3 py-2 font-semibold text-primary hover:bg-blue-50"><span class="material-symbols-outlined mr-1 text-lg">print</span> Ver / reimprimir</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-5 py-12 text-center text-slate-500">Aún no hay recibos independientes registrados.</td></tr>
                    @endforelse
                </tbody>
            </table></div>
            @if ($receipts->hasPages())<div class="border-t border-slate-200 px-5 py-4">{{ $receipts->links() }}</div>@endif
        </div>
    </div>
    </div>
@endsection