@extends('layouts.app')

@section('title', 'Renovar Préstamo')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/renovaciones-create.css') }}">
@endpush

@section('content')
<div class="mb-3">
    <a href="{{ route('renovaciones.index') }}" class="btn btn-sm btn-outline-light">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<h1 class="section-title">
    Renovar Préstamo
</h1>

<form action="{{ route('renovaciones.store', $prestamoAnterior->id) }}" method="POST" id="renovacionForm">
    @csrf

    <!-- Resumen del Préstamo Anterior -->
    <div class="card-custom mb-3" style="background: transparent; box-shadow: none;">
        <div class="card-header-custom prestamo-anterior-header">
            <i class="bi bi-file-earmark-text"></i> PRÉSTAMO A RENOVAR
        </div>
        <div class="card-body p-3 p-md-4 prestamo-anterior-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="info-label-small">Cliente</div>
                    <div class="info-value-large">{{ $prestamoAnterior->cliente_nombre_completo }}</div>
                </div>
                <div class="col-md-3">
                    <div class="info-label-small">Préstamo Actual</div>
                    <div class="info-value-monto">${{ number_format($prestamoAnterior->monto_credito, 0, ',', '.') }}</div>
                </div>
                <div class="col-md-3">
                    <div class="info-label-small">Modalidad</div>
                    <div class="info-value-capitalize">{{ $prestamoAnterior->modalidad_pago }} ({{ $prestamoAnterior->numero_cuotas }} cuotas)</div>
                </div>
                <div class="col-md-3">
                    <div class="info-label-small">Última Cuota Pendiente</div>
                    <div class="info-value-monto-red">${{ number_format($saldoUltimaCuota, 0, ',', '.') }}</div>
                </div>
            </div>
            <div class="mt-3 vencimiento-box">
                <div class="vencimiento-text">
                    <i class="bi bi-info-circle-fill"></i>
                    <strong>Vence:</strong> {{ $ultimaCuota->fecha_pago->format('d/m/Y') }} ({{ $ultimaCuota->fecha_pago->diffForHumans() }})
                </div>
            </div>
        </div>
    </div>

    <!-- Resumen de Cliente y Codeudor (Colapsado) -->
    <div class="card-custom mb-3">
        <div class="card-header-custom collapsible-header" data-bs-toggle="collapse" data-bs-target="#datosCliente">
            <i class="bi bi-person-fill"></i> Datos del Cliente (Pre-llenados)
            <i class="bi bi-chevron-down float-end"></i>
        </div>
        <div class="collapse" id="datosCliente">
            <div class="card-body p-3">
                <h6 class="fw-bold mb-3" style="color: #d4af37;">{{ $prestamoAnterior->cliente_nombre_completo }}</h6>

                <div class="row g-0">
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Cédula:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->cliente_cedula }}</div>
                    </div>
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Ciudad:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->cliente_ciudad }}</div>
                    </div>
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Celular:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">
                            <i class="bi bi-telephone-fill"></i> {{ $prestamoAnterior->cliente_celular }}
                        </div>
                    </div>
                    @if($prestamoAnterior->cliente_email)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Email:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">
                            <i class="bi bi-envelope-fill"></i> {{ $prestamoAnterior->cliente_email }}
                        </div>
                    </div>
                    @endif
                    @if($prestamoAnterior->cliente_referencia_personal)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Referencia:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->cliente_referencia_personal }}</div>
                    </div>
                    @endif
                    @if($prestamoAnterior->cliente_direccion_residencia)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Dir. Residencia:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->cliente_direccion_residencia }}</div>
                    </div>
                    @endif
                    @if($prestamoAnterior->cliente_direccion_trabajo)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Dir. Trabajo:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->cliente_direccion_trabajo }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="card-custom mb-3">
        <div class="card-header-custom collapsible-header" data-bs-toggle="collapse" data-bs-target="#datosCodeudor">
            <i class="bi bi-people-fill"></i> Datos del Codeudor (Pre-llenados)
            <i class="bi bi-chevron-down float-end"></i>
        </div>
        <div class="collapse" id="datosCodeudor">
            <div class="card-body p-3">
                <h6 class="fw-bold mb-3" style="color: #d4af37;">{{ $prestamoAnterior->codeudor_nombre_completo }}</h6>

                <div class="row g-0">
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Cédula:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->codeudor_cedula }}</div>
                    </div>
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Ciudad:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->codeudor_ciudad }}</div>
                    </div>
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Celular:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">
                            <i class="bi bi-telephone-fill"></i> {{ $prestamoAnterior->codeudor_celular }}
                        </div>
                    </div>
                    @if($prestamoAnterior->codeudor_email)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Email:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">
                            <i class="bi bi-envelope-fill"></i> {{ $prestamoAnterior->codeudor_email }}
                        </div>
                    </div>
                    @endif
                    @if($prestamoAnterior->codeudor_referencia_personal)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Referencia:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->codeudor_referencia_personal }}</div>
                    </div>
                    @endif
                    @if($prestamoAnterior->codeudor_direccion_residencia)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Dir. Residencia:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->codeudor_direccion_residencia }}</div>
                    </div>
                    @endif
                    @if($prestamoAnterior->codeudor_direccion_trabajo)
                    <div class="col-6 p-2" style="border-bottom: 1px solid #e5e7eb;">
                        <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Dir. Trabajo:</div>
                        <div style="font-size: 0.95rem; font-weight: 600;">{{ $prestamoAnterior->codeudor_direccion_trabajo }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Datos del Nuevo Préstamo -->
    <div class="card-custom mb-3">
        <div class="card-header-custom">
            <i class="bi bi-calculator"></i> Datos del Nuevo Préstamo
        </div>
        <div class="card-body p-3 p-md-4">
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Monto del Nuevo Crédito</label>
                    <div class="input-group">
                        <span class="input-group-text input-group-text-left">$</span>
                        <input type="text" id="montoCredito" class="form-control form-control-custom form-control-rounded-right @error('monto_credito') is-invalid @enderror" value="{{ old('monto_credito') }}" required autocomplete="off">
                        <input type="hidden" name="monto_credito" id="montoCreditoRaw">
                        @error('monto_credito')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <small class="text-muted">Mínimo: ${{ number_format($saldoUltimaCuota, 0, ',', '.') }} (saldo de última cuota)</small>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Fecha del Primer Pago</label>
                    <input type="date" name="fecha_primer_pago" class="form-control form-control-custom @error('fecha_primer_pago') is-invalid @enderror" value="{{ old('fecha_primer_pago') }}" required id="fechaPrimerPago">
                    @error('fecha_primer_pago')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Modalidad de Pago</label>
                    <select name="modalidad_pago" class="form-select form-control-custom @error('modalidad_pago') is-invalid @enderror" required id="modalidad">
                        <option value="">Seleccione...</option>
                        <option value="semanal" {{ old('modalidad_pago') == 'semanal' ? 'selected' : '' }}>Semanal</option>
                        <option value="quincenal" {{ old('modalidad_pago') == 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                        <option value="mensual" {{ old('modalidad_pago') == 'mensual' ? 'selected' : '' }}>Mensual</option>
                    </select>
                    @error('modalidad_pago')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label-custom">Número de Cuotas</label>
                    <input type="number" name="numero_cuotas" class="form-control form-control-custom @error('numero_cuotas') is-invalid @enderror" min="1" value="{{ old('numero_cuotas') }}" required id="numeroCuotas">
                    @error('numero_cuotas')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <input type="hidden" name="tasa_interes" id="tasaInteresInput" value="20">
            </div>
        </div>
    </div>

    <!-- Cálculo de Renovación -->
    <div class="card-custom mb-3" id="calculoRenovacion" style="display: none;">
        <div class="card-header-custom calculo-renovacion-header">
            <i class="bi bi-calculator-fill"></i> CÁLCULO DE RENOVACIÓN
        </div>
        <div class="card-body p-3 p-md-4">
            <div class="row g-3 text-center">
                <div class="col-md-4">
                    <div class="calculo-box calculo-box-nuevo">
                        <div class="calculo-label">Nuevo Crédito Aprobado</div>
                        <div id="nuevoCredito" class="calculo-amount">$0</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="calculo-box calculo-box-descuento">
                        <div class="calculo-label">(-) Última Cuota Anterior</div>
                        <div class="calculo-amount-red">$<span id="descuentoCuota">{{ number_format($saldoUltimaCuota, 0, ',', '.') }}</span></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="calculo-box calculo-box-recibe">
                        <div class="calculo-label-white">(=) CLIENTE RECIBE</div>
                        <div id="clienteRecibe" class="calculo-amount-white">$0</div>
                    </div>
                </div>
            </div>

            <div class="mt-4 detalle-calculo">
                <div class="row g-2 text-center">
                    <div class="col-6 col-md-3">
                        <div class="detalle-label">Tasa de Interés</div>
                        <div id="tasaInteres" class="detalle-value">20%</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="detalle-label">Interés Total</div>
                        <div id="totalInteres" class="detalle-value">$0</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="detalle-label">Total a Pagar</div>
                        <div id="totalPagar" class="detalle-value">$0</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="detalle-label">Valor Cuota</div>
                        <div id="valorCuota" class="detalle-value">$0</div>
                    </div>
                </div>
            </div>

            <!-- Tabla de Cuotas -->
            <div class="card-custom mt-3">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead style="background-color: #f9fafb;">
                                <tr>
                                    <th class="p-3" style="font-weight: 600;">Cuota</th>
                                    <th class="p-3" style="font-weight: 600;">Fecha de Pago</th>
                                    <th class="p-3 text-center" style="font-weight: 600;">% Pagado</th>
                                    <th class="p-3 text-end" style="font-weight: 600;">Monto</th>
                                </tr>
                            </thead>
                            <tbody id="tablaCuotas">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Botones -->
    <div class="row g-2 mb-4">
        <div class="col-6">
            <a href="{{ route('renovaciones.index') }}" class="btn btn-outline-light w-100 btn-lg d-flex align-items-center justify-content-center">
                <i class="bi bi-x-circle me-2"></i> Cancelar
            </a>
        </div>
        <div class="col-6">
            <button type="submit" class="btn btn-primary-custom w-100 btn-lg d-flex align-items-center justify-content-center" id="btnProcesar">
                <i class="bi bi-arrow-repeat me-2"></i> Procesar Renovación
            </button>
        </div>
    </div>
</form>

@push('scripts')
    <script>
        // Inyectar variable PHP a JavaScript
        window.saldoUltimaCuota = {{ $saldoUltimaCuota }};
    </script>
    <script src="{{ asset('js/renovaciones-create.js') }}"></script>
@endpush
@endsection