@extends('layouts.app')

@section('title', 'Detalle de Factura')

@section('content')
<div class="container-fluid p-0">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('finanzas.dashboard') }}">Finanzas</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('facturas.index') }}">Facturación</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $factura->numero_factura }}</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0"><i class="fa-solid fa-file-invoice me-2" style="color: #C9A227;"></i> Factura: {{ $factura->numero_factura }}</h2>
        </div>
        <a href="{{ route('facturas.index') }}" class="btn btn-outline-primary rounded-pill px-4">
            <i class="fa-solid fa-arrow-left me-1"></i> Volver
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 rounded-3 mb-4" role="alert">
            <i class="fa-solid fa-check-circle me-1"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @php
        $totalAbonado = $factura->pagos->sum('monto_pagado');
    @endphp

    <div class="row g-4">
        <!-- ======================== DETALLES ======================== -->
        <div class="col-md-5">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-white border-0 pt-4 pb-0 px-4">
                    <h5 class="fw-bold"><i class="fa-solid fa-circle-info me-2" style="color: #C9A227;"></i> Detalles de la Cuenta</h5>
                </div>
                <div class="card-body p-4">
                    <dl class="row mb-0">
                        <dt class="col-sm-4 text-muted fw-semibold">Cliente:</dt>
                        <dd class="col-sm-8 fw-bold text-dark">{{ $factura->cliente->nombre_completo }}</dd>

                        <dt class="col-sm-4 text-muted fw-semibold">Concepto:</dt>
                        <dd class="col-sm-8">{{ $factura->concepto }}</dd>

                        <dt class="col-sm-4 text-muted fw-semibold">F. Emisión:</dt>
                        <dd class="col-sm-8">{{ $factura->fecha_emision->format('d/m/Y') }}</dd>

                        <dt class="col-sm-4 text-muted fw-semibold">F. Vencimiento:</dt>
                        <dd class="col-sm-8">{{ $factura->fecha_vencimiento ? $factura->fecha_vencimiento->format('d/m/Y') : 'N/A' }}</dd>

                        <dt class="col-sm-4 text-muted fw-semibold mt-3">Estado:</dt>
                        <dd class="col-sm-8 mt-3">
                            @if($factura->estado == 'Pendiente')
                                <span class="badge fw-semibold fs-6" style="background: #C9A227; color: #0B1F3A;">Pendiente</span>
                            @elseif($factura->estado == 'Parcial')
                                <span class="badge fw-semibold fs-6" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid #C9A227;">Parcial</span>
                            @else
                                <span class="badge fw-semibold fs-6" style="background: #0B1F3A; color: #ffffff;">Pagado</span>
                            @endif
                        </dd>
                    </dl>

                    <hr class="my-4">

                    {{-- ======== RESUMEN FINANCIERO DE 3 CIFRAS ======== --}}
                    <div class="d-flex justify-content-between align-items-center py-2 px-3 rounded-3 mb-2" style="background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.25);">
                        <span class="text-muted fw-semibold">
                            <i class="fa-solid fa-file-contract me-1" style="color: #C9A227;"></i> Monto Acordado:
                        </span>
                        <span class="fs-5 fw-bold" style="color: #0B1F3A;">S/ {{ number_format($factura->monto_total, 2) }}</span>
                    </div>

                    @if($factura->monto_adelanto > 0)
                    <div class="d-flex justify-content-between align-items-center py-2 px-3 rounded-3 mb-2" style="background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.35);">
                        <span class="fw-semibold" style="color: #0B1F3A;">
                            <i class="fa-solid fa-circle-arrow-right me-1" style="color: #C9A227;"></i> Adelanto Inicial:
                        </span>
                        <span class="fs-6 fw-bold" style="color: #C9A227;">S/ {{ number_format($factura->monto_adelanto, 2) }}</span>
                    </div>
                    @endif

                    <div class="d-flex justify-content-between align-items-center py-2 px-3 rounded-3 mb-2" style="background: #F5F1E8; border: 1px solid rgba(11, 31, 58, 0.15);">
                        <span class="text-muted fw-semibold">
                            <i class="fa-solid fa-money-bills me-1" style="color: #0B1F3A;"></i> Total Abonado:
                        </span>
                        <span class="fs-5 fw-bold" style="color: #0B1F3A;">S/ {{ number_format($totalAbonado, 2) }}</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center py-3 px-3 rounded-3" style="background: {{ $factura->deuda_restante > 0 ? '#0B1F3A' : '#F5F1E8' }}; border: 1.5px solid #C9A227;">
                        <span class="fw-bold fs-6" style="color: {{ $factura->deuda_restante > 0 ? '#F5F1E8' : '#0B1F3A' }};">
                            <i class="fa-solid fa-scale-balanced me-1" style="color: #C9A227;"></i>
                            Deuda Restante:
                        </span>
                        <span class="fs-4 fw-bold" style="color: #C9A227;">
                            S/ {{ number_format($factura->deuda_restante, 2) }}
                        </span>
                    </div>

                    {{-- Barra de progreso del pago --}}
                    @if($factura->monto_total > 0)
                    @php
                        $porcentaje = min(($totalAbonado / $factura->monto_total) * 100, 100);
                    @endphp
                    <div class="mt-3">
                        <div class="d-flex justify-content-between small text-muted mb-1">
                            <span>Progreso del pago</span>
                            <span class="fw-bold" style="color: #0B1F3A;">{{ number_format($porcentaje, 1) }}%</span>
                        </div>
                        <div class="progress rounded-pill" style="height: 10px; background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.3);">
                            <div class="progress-bar rounded-pill" role="progressbar"
                                 style="width: {{ $porcentaje }}%; background: linear-gradient(90deg, #0B1F3A, #C9A227);"
                                 aria-valuenow="{{ $porcentaje }}" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Botón para registrar abono si aún hay deuda --}}
                    @if($factura->deuda_restante > 0)
                    <div class="d-grid mt-4">
                        <button type="button" class="btn btn-primary-gradient fw-semibold rounded-pill py-2"
                                data-bs-toggle="modal" data-bs-target="#modalAbonoShow">
                            <i class="fa-solid fa-hand-holding-dollar me-1" style="color: #C9A227;"></i> Registrar Abono
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- ======================== HISTORIAL DE PAGOS ======================== -->
        <div class="col-md-7">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-white border-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold"><i class="fa-solid fa-money-bills me-2" style="color: #C9A227;"></i> Historial de Pagos / Abonos</h5>
                    <span class="badge rounded-pill fw-semibold" style="background: #0B1F3A; color: #F5F1E8;">{{ $factura->pagos->count() }} registro(s)</span>
                </div>
                <div class="card-body p-0 mt-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead style="background: #0B1F3A; color: #F5F1E8;">
                                <tr>
                                    <th class="ps-4" style="color: #F5F1E8;">#</th>
                                    <th style="color: #F5F1E8;">Fecha</th>
                                    <th style="color: #F5F1E8;">Tipo</th>
                                    <th style="color: #F5F1E8;">Método</th>
                                    <th style="color: #F5F1E8;">Referencia</th>
                                    <th class="text-end pe-4" style="color: #F5F1E8;">Monto Abonado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($factura->pagos->sortBy('fecha_pago') as $index => $pago)
                                    <tr>
                                        <td class="ps-4 text-muted small">{{ $index + 1 }}</td>
                                        <td>{{ $pago->fecha_pago->format('d/m/Y') }}</td>
                                        <td>
                                            @if($index === 0 && $factura->monto_adelanto > 0 && $pago->monto_pagado == $factura->monto_adelanto)
                                                <span class="badge fw-semibold" style="background: #C9A227; color: #0B1F3A;">Adelanto</span>
                                            @else
                                                <span class="badge fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid rgba(11, 31, 58, 0.2);">Abono</span>
                                            @endif
                                        </td>
                                        <td><span class="badge text-dark border" style="background: #F5F1E8;">{{ $pago->metodo_pago ?? 'N/A' }}</span></td>
                                        <td class="small text-muted">{{ $pago->referencia ?? '—' }}</td>
                                        <td class="text-end pe-4 fw-bold" style="color: #0B1F3A;">+ S/ {{ number_format($pago->monto_pagado, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">
                                            No se han registrado pagos para esta cuenta.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                            @if($factura->pagos->count() > 0)
                            <tfoot style="background: #F5F1E8;">
                                <tr>
                                    <td colspan="5" class="ps-4 fw-bold text-end" style="color: #0B1F3A;">TOTAL ABONADO:</td>
                                    <td class="text-end pe-4 fw-bold fs-6" style="color: #0B1F3A;">
                                        S/ {{ number_format($totalAbonado, 2) }}
                                    </td>
                                </tr>
                            </tfoot>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============ MODAL REGISTRAR ABONO (desde show) ============ --}}
@if($factura->deuda_restante > 0)
<div class="modal fade" id="modalAbonoShow" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 rounded-top-4" style="background: linear-gradient(135deg, #0B1F3A 0%, #162e54 100%); color: #ffffff; border-bottom: 2px solid #C9A227;">
                <h5 class="modal-title fw-bold text-white">
                    <i class="fa-solid fa-hand-holding-dollar me-2" style="color: #C9A227;"></i> Registrar Abono
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                {{-- Resumen --}}
                <div class="rounded-3 border p-3 mb-4" style="background: #F5F1E8; border-color: rgba(201, 162, 39, 0.35) !important;">
                    <div class="fw-bold mb-2" style="color: #0B1F3A;">
                        <i class="fa-solid fa-receipt me-1" style="color: #C9A227;"></i> {{ $factura->numero_factura }}
                    </div>
                    <div class="row text-center g-2">
                        <div class="col-4">
                            <div class="small text-muted">Monto Acordado</div>
                            <div class="fw-bold" style="color: #333333;">S/ {{ number_format($factura->monto_total, 2) }}</div>
                        </div>
                        <div class="col-4">
                            <div class="small text-muted">Total Abonado</div>
                            <div class="fw-bold" style="color: #0B1F3A;">S/ {{ number_format($totalAbonado, 2) }}</div>
                        </div>
                        <div class="col-4">
                            <div class="small text-muted">Deuda Restante</div>
                            <div class="fw-bold" style="color: #C9A227;">S/ {{ number_format($factura->deuda_restante, 2) }}</div>
                        </div>
                    </div>
                </div>
                <form action="{{ route('pagos.store', $factura->id) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Monto a abonar (S/) *</label>
                        <input type="number" class="form-control" name="monto_pagado" step="0.01"
                               max="{{ $factura->deuda_restante }}" placeholder="0.00" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Fecha del pago *</label>
                        <input type="date" class="form-control" name="fecha_pago" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Método de pago</label>
                        <select class="form-select" name="metodo_pago">
                            <option value="Transferencia">Transferencia</option>
                            <option value="Efectivo">Efectivo</option>
                            <option value="Yape/Plin">Yape / Plin</option>
                            <option value="Cheque">Cheque</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label small fw-semibold text-muted">Referencia (Opcional)</label>
                        <input type="text" class="form-control" name="referencia" placeholder="Nro Operación, etc.">
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary-gradient fw-bold rounded-3 py-2">
                            <i class="fa-solid fa-floppy-disk me-1"></i> Guardar Abono
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endif

@endsection