@extends('layouts.app')

@section('title', 'Facturación y Cuentas por Cobrar')

@section('content')
<div class="container-fluid p-0">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('finanzas.dashboard') }}">Finanzas</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Facturación</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0"><i class="fa-solid fa-receipt me-2" style="color: #C9A227;"></i> Facturación y Cuentas por Cobrar</h2>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('estado-cuenta.index') }}" class="btn fw-semibold rounded-pill px-4" style="background: #F5F1E8; color: #0B1F3A; border: 1.5px solid #C9A227;">
                <i class="fa-solid fa-file-invoice-dollar me-1" style="color: #C9A227;"></i> Estado de Cuenta
            </a>
            <button class="btn btn-primary-gradient fw-semibold rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalNuevaFactura">
                <i class="fa-solid fa-plus me-1"></i> Nueva Factura / Deuda
            </button>
        </div>
    </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
    @if($errors->any())
        <div class="alert alert-danger border-0 rounded-3 mb-4">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-0">
            <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;">Factura</th>
                            <th style="color: #F5F1E8;">Cliente</th>
                            <th style="color: #F5F1E8;">Concepto</th>
                            <th style="color: #F5F1E8;">Emisión</th>
                            <th style="color: #F5F1E8;">Estado</th>
                            <th class="text-end" style="color: #F5F1E8;">Monto Acordado</th>
                            <th class="text-end" style="color: #F5F1E8;">Total Abonado</th>
                            <th class="text-end" style="color: #F5F1E8;">Deuda Restante</th>
                            <th class="text-end pe-4" style="color: #F5F1E8;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($facturas as $fac)
                            @php
                                $totalAbonado = $fac->pagos->sum('monto_pagado');
                            @endphp
                            <tr>
                                <td class="ps-4 fw-bold" style="color: #0B1F3A;">{{ $fac->numero_factura }}</td>
                                <td class="fw-medium">{{ $fac->cliente->nombre_completo }}</td>
                                <td>{{ Str::limit($fac->concepto, 30) }}</td>
                                <td>{{ $fac->fecha_emision->format('d/m/Y') }}</td>
                                <td>
                                    @if($fac->estado == 'Pendiente')
                                        <span class="badge fw-semibold" style="background: #C9A227; color: #0B1F3A;">Pendiente</span>
                                    @elseif($fac->estado == 'Parcial')
                                        <span class="badge fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid #C9A227;">Parcial</span>
                                    @else
                                        <span class="badge fw-semibold" style="background: #0B1F3A; color: #ffffff;">Pagado</span>
                                    @endif
                                </td>
                                {{-- Monto acordado --}}
                                <td class="text-end fw-semibold">S/ {{ number_format($fac->monto_total, 2) }}</td>
                                {{-- Total abonado (suma real de pagos) --}}
                                <td class="text-end fw-semibold" style="color: #0B1F3A;">
                                    S/ {{ number_format($totalAbonado, 2) }}
                                    @if($fac->monto_adelanto > 0)
                                        <br><small class="text-muted fw-normal">
                                            <i class="fa-solid fa-circle-arrow-right fa-xs" style="color: #C9A227;"></i>
                                            Adelanto: S/ {{ number_format($fac->monto_adelanto, 2) }}
                                        </small>
                                    @endif
                                </td>
                                {{-- Deuda restante --}}
                                <td class="text-end fw-bold" style="color: {{ $fac->deuda_restante > 0 ? '#C9A227' : '#0B1F3A' }};">
                                    S/ {{ number_format($fac->deuda_restante, 2) }}
                                </td>
                                <td class="text-end pe-4">
                                    <div class="d-flex justify-content-end gap-2">
                                        <a href="{{ route('facturas.show', $fac->id) }}" class="btn btn-sm btn-outline-primary rounded-pill" title="Ver Detalles">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        @if($fac->deuda_restante > 0)
                                            <button type="button" class="btn btn-sm rounded-pill fw-semibold" style="background: #C9A227; color: #0B1F3A; border: 1px solid #C9A227;" data-bs-toggle="modal" data-bs-target="#modalAbono{{ $fac->id }}" title="Añadir Pago">
                                                <i class="fa-solid fa-hand-holding-dollar"></i>
                                            </button>
                                        @endif
                                        <form action="{{ route('facturas.destroy', $fac->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Seguro que desea eliminar esta factura?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-secondary rounded-pill" title="Eliminar">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- Modal Registrar Abono -->
                            @if($fac->deuda_restante > 0)
                            <div class="modal fade" id="modalAbono{{ $fac->id }}" 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 de la factura --}}
                                            <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> {{ $fac->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($fac->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($fac->deuda_restante, 2) }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <form action="{{ route('pagos.store', $fac->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="{{ $fac->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

                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5 text-muted">
                                    <div class="fs-1 mb-3"><i class="fa-regular fa-folder-open" style="color: #C9A227;"></i></div>
                                    <p class="mb-0">No hay facturas registradas en el sistema.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white border-0 py-3">
            {{ $facturas->links() }}
        </div>
    </div>
</div>

<!-- Modal Nueva Factura -->
<div class="modal fade" id="modalNuevaFactura" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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-file-invoice me-2" style="color: #C9A227;"></i> Registrar Nueva Factura / Cuenta por Cobrar
                </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">
                <form action="{{ route('facturas.store') }}" method="POST" id="formNuevaFactura">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label small fw-semibold text-muted">Cliente *</label>
                            <select class="form-select" name="cliente_id" required>
                                <option value="">Seleccione Cliente...</option>
                                @foreach($clientes as $cli)
                                    <option value="{{ $cli->id }}">{{ $cli->nombre_completo }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label small fw-semibold text-muted">Concepto *</label>
                            <input type="text" class="form-control" name="concepto" placeholder="Ej: Honorarios por caso civil..." required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-semibold text-muted">Monto Total Acordado (S/) *</label>
                            <input type="number" class="form-control" name="monto_total" id="inputMontoTotal" step="0.01" min="0.01" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Fecha de Emisión *</label>
                            <input type="date" class="form-control" name="fecha_emision" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold text-muted">Fecha de Vencimiento (Opcional)</label>
                            <input type="date" class="form-control" name="fecha_vencimiento">
                        </div>

                        {{-- ============ SECCIÓN ADELANTO ============ --}}
                        <div class="col-12">
                            <hr class="my-1">
                            <div class="d-flex align-items-center gap-2 my-2">
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                           id="switchAdelanto" onchange="toggleAdelanto(this)">
                                    <label class="form-check-label fw-semibold text-muted" for="switchAdelanto">
                                        <i class="fa-solid fa-hand-holding-dollar me-1" style="color: #C9A227;"></i>
                                        ¿El cliente entrega un adelanto?
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div id="seccionAdelanto" class="col-12" style="display:none;">
                            <div class="card rounded-3 p-3" style="background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.4) !important;">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold text-muted">Monto del Adelanto (S/) *</label>
                                        <input type="number" class="form-control" name="monto_adelanto"
                                               id="inputAdelanto" step="0.01" min="0.01" placeholder="0.00">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold text-muted">Método de Pago del Adelanto</label>
                                        <select class="form-select" name="metodo_adelanto">
                                            <option value="Efectivo">Efectivo</option>
                                            <option value="Transferencia">Transferencia</option>
                                            <option value="Yape/Plin">Yape / Plin</option>
                                            <option value="Cheque">Cheque</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label small fw-semibold text-muted">Referencia (Opcional)</label>
                                        <input type="text" class="form-control" name="referencia_adelanto"
                                               placeholder="Nro operación, etc.">
                                    </div>
                                    {{-- Resumen en tiempo real --}}
                                    <div class="col-12">
                                        <div class="rounded-3 bg-white border p-2 d-flex justify-content-around text-center" id="resumenAdelanto" style="border-color: rgba(201, 162, 39, 0.3) !important;">
                                            <div>
                                                <div class="small text-muted">Monto Acordado</div>
                                                <div class="fw-bold" id="resMontoTotal" style="color: #0B1F3A;">S/ 0.00</div>
                                            </div>
                                            <div class="vr"></div>
                                            <div>
                                                <div class="small text-muted">Adelanto</div>
                                                <div class="fw-bold" id="resAdelanto" style="color: #C9A227;">S/ 0.00</div>
                                            </div>
                                            <div class="vr"></div>
                                            <div>
                                                <div class="small text-muted">Quedaría a Deber</div>
                                                <div class="fw-bold" id="resDeuda" style="color: #0B1F3A;">S/ 0.00</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- ========================================= --}}

                    </div>
                    <hr class="my-4">
                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary-gradient rounded-pill px-4">Generar Factura</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleAdelanto(checkbox) {
    const seccion = document.getElementById('seccionAdelanto');
    const inputAdelanto = document.getElementById('inputAdelanto');
    if (checkbox.checked) {
        seccion.style.display = 'block';
        inputAdelanto.setAttribute('required', 'required');
    } else {
        seccion.style.display = 'none';
        inputAdelanto.removeAttribute('required');
        inputAdelanto.value = '';
        actualizarResumen();
    }
}

function actualizarResumen() {
    const total   = parseFloat(document.getElementById('inputMontoTotal').value) || 0;
    const adelanto = parseFloat(document.getElementById('inputAdelanto').value) || 0;
    const deuda   = Math.max(total - adelanto, 0);

    document.getElementById('resMontoTotal').textContent = 'S/ ' + total.toFixed(2);
    document.getElementById('resAdelanto').textContent   = 'S/ ' + adelanto.toFixed(2);
    document.getElementById('resDeuda').textContent      = 'S/ ' + deuda.toFixed(2);
}

document.getElementById('inputMontoTotal').addEventListener('input', actualizarResumen);
document.getElementById('inputAdelanto').addEventListener('input', actualizarResumen);
</script>
@endpush

@endsection