@extends('layouts.admin')

@section('content')
    <div class="row mb-3 align-items-center">
        <div class="col-md-6">
            <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.8rem;">
                <i class="bi bi-wallet2 text-primary mr-2"></i> Gestión de Pagos y Recibos
            </h1>
            <p class="text-muted mb-0">Listado general de cobros y pagos clínicos de pacientes</p>
        </div>
        <div class="col-md-6 text-md-right mt-3 mt-md-0">
            <a href="{{ route('admin.facturas.create') }}" class="btn btn-outline-primary shadow-sm mr-2 font-weight-bold">
                <i class="fas fa-file-invoice-dollar mr-1"></i> Nueva Factura
            </a>
            <a href="{{ route('admin.pacientes.index') }}" class="btn btn-secondary shadow-sm">
                <i class="fas fa-users mr-1"></i> Pacientes
            </a>
        </div>
    </div>

    <div class="card card-outline card-primary shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title font-weight-bold">
                <i class="fas fa-receipt mr-1"></i> Historial de Pagos Registrados
            </h3>
        </div>

        <div class="card-body table-responsive p-0">
            <table id="tablaPagos" class="table table-hover table-striped align-middle mb-0 text-nowrap">
                <thead class="thead-light">
                    <tr>
                        <th class="text-center" style="width: 100px;">N° Recibo</th>
                        <th>Fecha</th>
                        <th>Paciente</th>
                        <th>Cédula</th>
                        <th>Forma de Pago</th>
                        <th>Descripción</th>
                        <th class="text-right">Monto ($)</th>
                        <th class="text-center">Estado</th>
                        <th class="text-center" style="width: 180px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pagos as $pago)
                        <tr>
                            <td class="text-center font-weight-bold">
                                <span class="badge badge-light border text-primary px-2 py-1" style="font-size: 0.9rem;">
                                    #{{ $pago->numero_recibo ?: $pago->id }}
                                </span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($pago->fecha_pago)->format('d/m/Y') }}</td>
                            <td>
                                @if($pago->paciente)
                                    <a href="{{ route('admin.pacientes.show', $pago->paciente->id) }}" class="font-weight-bold text-dark">
                                        {{ $pago->paciente->nombres }} {{ $pago->paciente->apellidos }}
                                    </a>
                                @else
                                    <span class="text-muted">Paciente General</span>
                                @endif
                            </td>
                            <td>{{ $pago->paciente->cedula ?? 'N/A' }}</td>
                            <td>
                                <span class="badge badge-secondary px-2 py-1 text-uppercase">
                                    {{ $pago->forma_pago ?: ($pago->metodo_pago ?: 'Efectivo') }}
                                </span>
                            </td>
                            <td class="small text-muted text-wrap" style="max-width: 200px;">
                                {{ $pago->descripcion ?: 'Consulta Médica / Servicios' }}
                            </td>
                            <td class="text-right font-weight-bold text-success" style="font-size: 1.05rem;">
                                ${{ number_format($pago->monto, 2) }}
                            </td>
                            <td class="text-center">
                                <span class="badge badge-success px-2 py-1">PAGADO</span>
                            </td>
                            <td class="text-center">
                                <div class="btn-group shadow-sm" role="group">
                                    <!-- Facturar Pago -->
                                    <a href="{{ route('admin.facturas.create', ['paciente_id' => $pago->paciente_id, 'pago_id' => $pago->id]) }}" 
                                       class="btn btn-sm btn-primary" title="Emitir Factura Electrónica de este Pago">
                                        <i class="fas fa-file-invoice"></i> Facturar
                                    </a>

                                    <!-- Ver Comprobante -->
                                    <a href="{{ route('admin.pagos.show', $pago->id) }}" class="btn btn-sm btn-info" title="Ver Recibo">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    <!-- PDF Recibo -->
                                    <a href="{{ route('admin.pagos.pdf', $pago->id) }}" target="_blank" class="btn btn-sm btn-success" title="Imprimir Recibo PDF">
                                        <i class="fas fa-print"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted">
                                <i class="bi bi-wallet2" style="font-size: 3rem; color: #cbd5e1;"></i>
                                <h5 class="mt-2 font-weight-bold">No se han registrado pagos aún</h5>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script>
        $(function () {
            if ($("#tablaPagos tbody tr").length > 0 && !$("#tablaPagos td[colspan]").length) {
                $("#tablaPagos").DataTable({
                    "responsive": true,
                    "autoWidth": false,
                    "order": [[0, "desc"]],
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                    }
                });
            }
        });
    </script>
@endsection