@extends('layouts.app')

@section('title', 'Control de Pagos')

@section('content')
<div class="page-header">
    <h1 class="page-title">Control de Pagos de Licencias</h1>
</div>

@if(session('success'))
    <div style="background: rgba(35, 134, 54, 0.2); color: #3fb950; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid rgba(35, 134, 54, 0.4);">
        <i class="fa-solid fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

<div style="display: grid; grid-template-columns: 300px 1fr; gap: 20px;">
    <!-- Registrar Pago -->
    <div class="card" style="height: fit-content;">
        <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: var(--text-main);">Registrar Pago</h3>
        <form action="{{ route('pagos.store') }}" method="POST">
            @csrf
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem;">Licencia a Renovar/Pagar</label>
                <select name="licencia_id" required style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
                    @foreach($licencias as $licencia)
                        <option value="{{ $licencia->id }}">{{ $licencia->empresa->razon_social }} ({{ $licencia->tipo }})</option>
                    @endforeach
                </select>
            </div>

            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem;">Monto (S/)</label>
                <input type="number" step="0.01" name="monto" required style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>

            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem;">Método de Pago</label>
                <select name="metodo_pago" required style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
                    <option value="TRANSFERENCIA">Transferencia Bancaria</option>
                    <option value="YAPE">Yape</option>
                    <option value="PLIN">Plin</option>
                    <option value="EFECTIVO">Efectivo</option>
                    <option value="OTROS">Otros</option>
                </select>
            </div>

            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem;">N° de Operación</label>
                <input type="text" name="num_operacion" style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>

            <div style="margin-bottom: 20px;">
                <label style="display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem;">Fecha de Pago</label>
                <input type="date" name="fecha_pago" value="{{ date('Y-m-d') }}" required style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); color-scheme: dark;">
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; text-align: center;">Guardar Pago</button>
        </form>
    </div>

    <!-- Lista de Pagos -->
    <div class="card">
        <h3 style="margin-bottom: 15px; font-size: 1.1rem; color: var(--text-main);">Historial de Pagos</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Empresa</th>
                    <th>Monto</th>
                    <th>Método</th>
                    <th>Ref/Operación</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pagos as $pago)
                <tr>
                    <td>{{ \Carbon\Carbon::parse($pago->fecha_pago)->format('d/m/Y') }}</td>
                    <td>{{ optional($pago->licencia->empresa)->razon_social ?? 'Desconocida' }}</td>
                    <td style="font-weight: 600; color: var(--success);">S/ {{ number_format($pago->monto, 2) }}</td>
                    <td><span class="badge badge-info">{{ $pago->metodo_pago }}</span></td>
                    <td><small style="color: var(--text-muted);">{{ $pago->num_operacion ?? '-' }}</small></td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 30px;">No hay pagos registrados.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<style>
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .table th { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; background: rgba(0,0,0,0.1); }
    .table tr:hover { background: rgba(255,255,255,0.02); }
    .table tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
    .badge-info { background: rgba(88, 166, 255, 0.2); color: var(--primary); }
</style>
@endsection