@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-header">
                <h1><i class="fas fa-list me-3"></i>Lista de Pagos</h1>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-2">
                            <label for="fecha_desde" class="form-label">Desde</label>
                            <input type="date" name="fecha_desde" id="fecha_desde" class="form-control" value="{{ request('fecha_desde') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="fecha_hasta" class="form-label">Hasta</label>
                            <input type="date" name="fecha_hasta" id="fecha_hasta" class="form-control" value="{{ request('fecha_hasta') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="cliente" class="form-label">Cliente</label>
                            <select name="cliente" id="cliente" class="form-select">
                                <option value="">Todos</option>
                                @foreach($clientes as $cliente)
                                    <option value="{{ $cliente->id }}" {{ request('cliente') == $cliente->id ? 'selected' : '' }}>
                                        {{ $cliente->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="tipo_pago" class="form-label">Método</label>
                            <select name="tipo_pago" id="tipo_pago" class="form-select">
                                <option value="">Todos</option>
                                <option value="efectivo" {{ request('tipo_pago') == 'efectivo' ? 'selected' : '' }}>Efectivo</option>
                                <option value="transferencia" {{ request('tipo_pago') == 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                                <option value="tarjeta" {{ request('tipo_pago') == 'tarjeta' ? 'selected' : '' }}>Tarjeta</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="estado" class="form-label">Estado</label>
                            <select name="estado" id="estado" class="form-select">
                                <option value="">Todos</option>
                                <option value="completado" {{ request('estado') == 'completado' ? 'selected' : '' }}>Completado</option>
                                <option value="pendiente" {{ request('estado') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                <option value="cancelado" {{ request('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">Filtrar</button>
                            <a href="{{ route('finanzas.lista-pagos') }}" class="btn btn-secondary">Limpiar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Resumen -->
    <div class="row mb-3">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h6 class="card-title">Total Filtrado</h6>
                    <h4 class="mb-0">${{ number_format($totalFiltrado, 2) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h6 class="card-title">Cantidad</h6>
                    <h4 class="mb-0">{{ $cantidadPagos }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h6 class="card-title">Promedio</h6>
                    <h4 class="mb-0">${{ number_format($promedioPago, 2) }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h6 class="card-title">Último Pago</h6>
                    <h4 class="mb-0">{{ $ultimoPago ? $ultimoPago->format('d/m/Y') : 'N/A' }}</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de pagos -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Pagos Registrados</h5>
                    <div>
                        <button class="btn btn-success btn-sm" onclick="exportarExcel()">
                            <i class="fas fa-file-excel me-1"></i>Excel
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="exportarPDF()">
                            <i class="fas fa-file-pdf me-1"></i>PDF
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if($pagos->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Fecha</th>
                                        <th>Cliente</th>
                                        <th>Contrato</th>
                                        <th>Monto</th>
                                        <th>Método</th>
                                        <th>Estado</th>
                                        <th>Observaciones</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($pagos as $pago)
                                        <tr>
                                            <td>
                                                <span class="badge bg-secondary">#{{ $pago->id }}</span>
                                            </td>
                                            <td>{{ $pago->fecha_pago->format('d/m/Y H:i') }}</td>
                                            <td>
                                                @if($pago->deuda && $pago->deuda->contrato && $pago->deuda->contrato->cliente)
                                                    {{ $pago->deuda->contrato->cliente->nombre }}
                                                @else
                                                    <span class="text-muted">No disponible</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($pago->deuda && $pago->deuda->contrato)
                                                    <span class="badge bg-info">#{{ $pago->deuda->contrato->id }}</span>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                <strong class="text-success">${{ number_format($pago->monto, 2) }}</strong>
                                            </td>
                                            <td>
                                                <i class="fas fa-{{ 
                                                    $pago->metodo_pago == 'efectivo' ? 'money-bill' : 
                                                    ($pago->metodo_pago == 'transferencia' ? 'exchange-alt' : 
                                                    ($pago->metodo_pago == 'tarjeta' ? 'credit-card' : 'file-invoice'))
                                                }} me-1"></i>
                                                {{ ucfirst($pago->metodo_pago ?? 'N/A') }}
                                            </td>
                                            <td>
                                                <span class="badge bg-{{ 
                                                    $pago->estado == 'completado' ? 'success' : 
                                                    ($pago->estado == 'pendiente' ? 'warning' : 'danger') 
                                                }}">
                                                    {{ ucfirst($pago->estado) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span data-bs-toggle="tooltip" title="{{ $pago->observaciones ?? 'Sin observaciones' }}">
                                                    {{ \Str::limit($pago->observaciones ?? 'Sin observaciones', 30) }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-outline-primary" onclick="verDetalle({{ $pago->id }})" 
                                                            title="Ver detalle">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-success" onclick="imprimirRecibo({{ $pago->id }})"
                                                            title="Imprimir recibo">
                                                        <i class="fas fa-print"></i>
                                                    </button>
                                                    @if($pago->estado != 'completado' && $pago->estado != 'verificado')
                                                        <button type="button" class="btn btn-outline-warning" onclick="editarPago({{ $pago->id }})"
                                                                title="Editar">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-success">
                                    <tr>
                                        <th colspan="4" class="text-end">Total en esta página:</th>
                                        <th class="text-end">${{ number_format($pagos->sum('monto'), 2) }}</th>
                                        <th colspan="4"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        <!-- Paginación -->
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                Mostrando {{ $pagos->firstItem() }} a {{ $pagos->lastItem() }} de {{ $pagos->total() }} pagos
                            </div>
                            <div>
                                {{ $pagos->appends(request()->query())->links() }}
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-search fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No se encontraron pagos con los filtros aplicados</h5>
                            <a href="{{ route('finanzas.lista-pagos') }}" class="btn btn-primary">Ver todos los pagos</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detalle de Pago -->
<div class="modal fade" id="modalDetallePago" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalle de Pago</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="contenidoDetallePago">
                <!-- Se carga dinámicamente -->
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Inicializar tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    function verDetalle(id) {
        console.log('Cargando detalle del pago #' + id);
        
        // Cargar detalle del pago
        fetch(`/finanzas/pagos/${id}/detalle`)
            .then(response => {
                console.log('Respuesta recibida:', response.status);
                if (!response.ok) {
                    throw new Error('Error al cargar el detalle: ' + response.status);
                }
                return response.text();
            })
            .then(html => {
                console.log('HTML recibido, mostrando modal');
                document.getElementById('contenidoDetallePago').innerHTML = html;
                var modalElement = document.getElementById('modalDetallePago');
                var modal = new bootstrap.Modal(modalElement);
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al cargar el detalle del pago: ' + error.message);
            });
    }

    function imprimirRecibo(id) {
        console.log('Imprimiendo recibo del pago #' + id);
        // Abrir ventana de impresión del recibo
        window.open(`/finanzas/pagos/${id}/recibo`, '_blank');
    }

    function editarPago(id) {
        console.log('Editando pago #' + id);
        // Redirigir a página de edición
        window.location.href = `/pagos/${id}/edit`;
    }

    function exportarExcel() {
        console.log('Exportando a Excel...');
        // Construir URL con filtros
        const params = new URLSearchParams(window.location.search);
        window.location.href = `{{ route('finanzas.pagos.exportar-excel') }}?${params.toString()}`;
    }

    function exportarPDF() {
        console.log('Exportando a PDF...');
        // Construir URL con filtros
        const params = new URLSearchParams(window.location.search);
        window.open(`{{ route('finanzas.pagos.exportar-pdf') }}?${params.toString()}`, '_blank');
    }
</script>
@endpush
@endsection