@extends('admin.reportes.pdf.base')

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

@section('content')
<div class="info-section">
    <div class="info-row">
        <span class="info-label">Período:</span>
        <span class="info-value">{{ date('d/m/Y', strtotime($fechaInicio)) }} - {{ date('d/m/Y', strtotime($fechaFin)) }}</span>
    </div>
    @if($estado)
    <div class="info-row">
        <span class="info-label">Estado:</span>
        <span class="info-value">{{ ucfirst($estado) }}</span>
    </div>
    @endif
    @if($metodoPago)
    <div class="info-row">
        <span class="info-label">Método de Pago:</span>
        <span class="info-value">{{ ucfirst($metodoPago) }}</span>
    </div>
    @endif
</div>

<div class="summary-cards">
    <div class="summary-card">
        <h3>{{ $simboloMoneda }}{{ number_format($totalPagos, 2) }}</h3>
        <p>Total Pagos</p>
    </div>
    <div class="summary-card">
        <h3>{{ $simboloMoneda }}{{ number_format($pagosAceptados, 2) }}</h3>
        <p>Pagos Completados</p>
    </div>
    <div class="summary-card">
        <h3>{{ $pagosPendientes }}</h3>
        <p>Pagos Pendientes</p>
    </div>
    <div class="summary-card">
        <h3>{{ $pagosRechazados }}</h3>
        <p>Pagos Rechazados</p>
    </div>
</div>

<h3 style="color: #007bff; margin-bottom: 15px;">Detalle de Pagos</h3>

<table>
    <thead>
        <tr>
            <th>Fecha</th>
            <th>Usuario</th>
            <th>Reserva</th>
            <th>Método</th>
            <th>Estado</th>
            <th class="text-right">Monto</th>
        </tr>
    </thead>
    <tbody>
        @forelse($pagos as $pago)
        <tr>
            <td>{{ $pago->created_at->format('d/m/Y H:i') }}</td>
            <td>
                <div style="font-weight: bold;">{{ $pago->usuario->name ?? 'N/A' }}</div>
                <div style="font-size: 10px; color: #666;">{{ $pago->usuario->email ?? 'N/A' }}</div>
            </td>
            <td>
                @if($pago->reserva)
                    <div style="font-weight: bold;">#{{ $pago->reserva->id }}</div>
                    <div style="font-size: 10px; color: #666;">{{ $pago->reserva->cancha->nombre ?? 'N/A' }}</div>
                @else
                    N/A
                @endif
            </td>
            <td>{{ ucfirst($pago->metodo_pago) }}</td>
            <td>
                <span class="status-badge status-{{ $pago->estado }}">
                    {{ ucfirst($pago->estado) }}
                </span>
            </td>
            <td class="text-right">{{ $simboloMoneda }}{{ number_format($pago->monto, 2) }}</td>
        </tr>
        @empty
        <tr>
            <td colspan="6" class="text-center" style="padding: 20px; color: #666;">
                No se encontraron pagos en el período seleccionado
            </td>
        </tr>
        @endforelse
    </tbody>
</table>

@if($pagos->count() > 0)
<div style="margin-top: 30px; padding: 15px; background-color: #f8f9fa; border-radius: 5px;">
    <h4 style="color: #007bff; margin-bottom: 10px;">Resumen Financiero</h4>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Total de Transacciones:</span>
        <span style="font-weight: bold;">{{ $pagos->count() }}</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Monto Total:</span>
        <span style="font-weight: bold;">{{ $simboloMoneda }}{{ number_format($totalPagos, 2) }}</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Pagos Completados:</span>
        <span style="font-weight: bold; color: #28a745;">{{ $simboloMoneda }}{{ number_format($pagosAceptados, 2) }}</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Pagos Pendientes:</span>
        <span style="font-weight: bold; color: #ffc107;">{{ $simboloMoneda }}{{ number_format($montosPendientes, 2) }}</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Pagos Verificados:</span>
        <span style="font-weight: bold; color: #17a2b8;">{{ $simboloMoneda }}{{ number_format($montosVerificados, 2) }}</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
        <span>Pagos Rechazados:</span>
        <span style="font-weight: bold; color: #dc3545;">{{ $simboloMoneda }}{{ number_format($montosRechazados, 2) }}</span>
    </div>
    <div style="display: flex; justify-content: space-between;">
        <span>Tasa de Éxito:</span>
        <span style="font-weight: bold;">{{ $totalPagos > 0 ? number_format(($pagosAceptados / $totalPagos) * 100, 1) : 0 }}%</span>
    </div>
</div>
@endif

<style>
.status-badge {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-completado {
    background-color: #d4edda;
    color: #155724;
}

.status-pendiente {
    background-color: #fff3cd;
    color: #856404;
}

.status-fallido {
    background-color: #f8d7da;
    color: #721c24;
}

.status-verificado {
    background-color: #d1ecf1;
    color: #0c5460;
}
</style>
@endsection