@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card shadow-sm">

        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <span class="fw-bold fs-6">
                <i class="bi bi-person-vcard"></i> Detalle de Trámite
                @if($tramite->nombre)
                    <span class="text-muted">— {{ $tramite->nombre }}</span>
                @endif
            </span>
            <div class="d-flex gap-2">
                <a href="{{ route('tramites.edit', $tramite) }}" class="btn btn-warning btn-sm">
                    <i class="bi bi-pencil"></i> Editar
                </a>
                <a href="{{ route('tramites.index') }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> Regresar
                </a>
            </div>
        </div>

        <div class="card-body">

            {{-- ===== SECCIÓN 1: DATOS DEL TITULAR ===== --}}
            <h6 class="text-secondary border-bottom pb-1 mb-3 mt-1">
                <i class="bi bi-person-vcard"></i> Datos del Titular
            </h6>
            <div class="row g-3 mb-4">

                @if($tramite->cliente)
                    <div class="col-md-6">
                        <p class="mb-0 text-muted small">Cliente vinculado</p>
                        <a href="{{ route('clientes.show', $tramite->cliente) }}" class="fw-bold">
                            {{ $tramite->cliente->nombre_completo }}
                        </a>
                    </div>
                @endif

                <div class="col-md-6">
                    <p class="mb-0 text-muted small">Nombre Completo</p>
                    <strong>{{ $tramite->nombre ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Teléfono 1</p>
                    <strong>{{ $tramite->tel1 ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Teléfono 2</p>
                    <strong>{{ $tramite->tel2 ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Correo 1</p>
                    <strong>{{ $tramite->email1 ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Correo 2</p>
                    <strong>{{ $tramite->email2 ?? '—' }}</strong>
                </div>

            </div>

            {{-- ===== SECCIÓN 2: TRÁMITE ===== --}}
            <h6 class="text-secondary border-bottom pb-1 mb-3">
                <i class="bi bi-file-earmark-text"></i> Trámite
            </h6>
            <div class="row g-3 mb-4">

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Institución</p>
                    <strong>{{ $tramite->institucion ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Estatus</p>
                    @php
                        $statusBadge = match($tramite->status) {
                            'Completado'  => 'success',
                            'En proceso'  => 'primary',
                            'Pendiente'   => 'warning',
                            'Cancelado'   => 'danger',
                            'En espera'   => 'secondary',
                            default       => 'light',
                        };
                    @endphp
                    <span class="badge bg-{{ $statusBadge }}">{{ $tramite->status ?? '—' }}</span>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Trámite</p>
                    <strong>{{ $tramite->tramite ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Fecha Inicio</p>
                    <strong>{{ $tramite->tramite_ini?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Fecha Fin</p>
                    <strong>{{ $tramite->tramite_fin?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-4">
                    <p class="mb-0 text-muted small">Cambio de Número</p>
                    <strong>{{ $tramite->cambio_numero ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Costo</p>
                    <strong>${{ number_format($tramite->costo ?? 0, 2) }}</strong>
                </div>

                <div class="col-12"><hr class="my-1"></div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Pasaporte — Fecha Cita</p>
                    <strong>{{ $tramite->pasaporte_fec_cita?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Pasaporte — Fecha Entrega</p>
                    <strong>{{ $tramite->pasaporte_fec_entrega?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Visa — Cita Embajada</p>
                    <strong>{{ $tramite->visa_cita_embajada?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Visa — Cita CAS</p>
                    <strong>{{ $tramite->visa_cita_cas?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Visa — Confirmación</p>
                    <strong>{{ $tramite->visa_confirmacion ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Visa — Fecha Entrega</p>
                    <strong>{{ $tramite->visa_fec_entrega?->format('d/m/Y') ?? '—' }}</strong>
                </div>

                <div class="col-md-3">
                    <p class="mb-0 text-muted small">Placas</p>
                    <strong>{{ $tramite->placas ?? '—' }}</strong>
                </div>

            </div>

            {{-- ===== SECCIÓN 3: ADICIONAL ===== --}}
            <h6 class="text-secondary border-bottom pb-1 mb-3">
                <i class="bi bi-info-circle"></i> Información Adicional
            </h6>
            <div class="row g-3 mb-4">

                <div class="col-md-4">
                    <p class="mb-0 text-muted small">Referido Por</p>
                    <strong>{{ $tramite->referido_por ?? '—' }}</strong>
                </div>

                @if($tramite->nota)
                    <div class="col-12">
                        <p class="mb-0 text-muted small">Nota</p>
                        <div class="border rounded p-2 bg-light">{{ $tramite->nota }}</div>
                    </div>
                @endif

            </div>

            {{-- ===== SECCIÓN 4: PAGOS ===== --}}
            @php
                $totalPagado = $pagos->sum('monto');
                $costo       = $tramite->costo ?? 0;
                $saldo       = $costo - $totalPagado;
            @endphp

            <h6 class="text-secondary border-bottom pb-1 mb-3">
                <i class="bi bi-cash-stack"></i> Pagos
            </h6>

            @if($pagos->isEmpty())
                <p class="text-muted small">Sin pagos registrados.</p>
            @else
                <div class="table-responsive mb-2">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Fecha</th>
                                <th class="text-end">Monto</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pagos as $pago)
                                <tr>
                                    <td class="text-muted small">{{ $pago->id }}</td>
                                    <td class="small">{{ $pago->fecha->format('d/m/Y') }}</td>
                                    <td class="text-end fw-semibold">${{ number_format($pago->monto, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-secondary fw-bold">
                            <tr>
                                <td colspan="2" class="text-end">Total pagado:</td>
                                <td class="text-end text-success">${{ number_format($totalPagado, 2) }}</td>
                            </tr>
                            @if($costo > 0)
                            <tr>
                                <td colspan="2" class="text-end">Costo:</td>
                                <td class="text-end">${{ number_format($costo, 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-end">Saldo pendiente:</td>
                                <td class="text-end {{ $saldo <= 0 ? 'text-success' : 'text-danger' }}">
                                    ${{ number_format(max($saldo, 0), 2) }}
                                    @if($saldo <= 0)
                                        <span class="badge bg-success ms-1">Saldado</span>
                                    @endif
                                </td>
                            </tr>
                            @endif
                        </tfoot>
                    </table>
                </div>
            @endif

        </div>{{-- /card-body --}}

        <div class="card-footer text-muted small d-flex gap-4">
            <span>Registrado: {{ $tramite->created_at?->format('d/m/Y H:i') ?? '—' }}</span>
            <span>Actualizado: {{ $tramite->updated_at?->format('d/m/Y H:i') ?? '—' }}</span>
        </div>

    </div>{{-- /card --}}
</div>

@endsection

@extends('../layouts/partials/footer')