@extends('layouts.app')

@section('title', 'Renovaciones')

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

@section('content')
<div class="mb-4">
    <h1 class="section-title">
        <i class="bi bi-arrow-repeat"></i> Renovaciones de Préstamos
        @if ($totalPrestamos > 0)
            <span class="badge" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; font-size: 0.9rem; padding: 0.4rem 0.8rem; border-radius: 8px; margin-left: 0.5rem;">
                {{ $totalPrestamos }}
            </span>
        @endif
    </h1>
    <p style="color: #9ca3af; font-size: 0.95rem; margin-top: 0.5rem;">Clientes elegibles para renovación de crédito</p>
</div>

<div class="card-filtros-prestamos mb-4">
    <div class="filtros-titulo-prestamos" data-bs-toggle="collapse" data-bs-target="#filtrosRenovacionesCollapse" aria-expanded="false" aria-controls="filtrosRenovacionesCollapse" style="cursor: pointer;">
        <i class="bi bi-funnel-fill"></i>
        <span>Filtro de Búsqueda</span>
        <i class="bi bi-chevron-down ms-auto" id="filtrosRenovacionesChevron"></i>
    </div>
    <div class="collapse" id="filtrosRenovacionesCollapse">
        <form method="GET" action="{{ route('renovaciones.index') }}" id="searchForm">
            <div class="filtros-grid-prestamos">
                <div class="filtro-item-prestamos">
                    <label class="filtro-label-prestamos"><i class="bi bi-search"></i> Buscar Cliente</label>
                    <input type="text"
                           name="buscar"
                           class="filtro-input-prestamos"
                           placeholder="Nombre o cédula..."
                           value="{{ request('buscar') }}"
                           id="searchInput">
                </div>
                <div class="filtro-item-prestamos">
                    <label class="filtro-label-prestamos"><i class="bi bi-arrow-repeat"></i> Modalidad</label>
                    <select name="modalidad" class="filtro-input-prestamos" id="modalidadFilter">
                        <option value="">Todas</option>
                        <option value="semanal" {{ request('modalidad') == 'semanal' ? 'selected' : '' }}>Semanal</option>
                        <option value="quincenal" {{ request('modalidad') == 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                        <option value="mensual" {{ request('modalidad') == 'mensual' ? 'selected' : '' }}>Mensual</option>
                    </select>
                </div>
            </div>
            @if(request()->hasAny(['buscar', 'modalidad']))
            <div class="filtro-limpiar-container">
                <a href="{{ route('renovaciones.index') }}" class="btn-limpiar-prestamos">
                    <i class="bi bi-x-lg"></i> Limpiar Filtros
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

@if($prestamos->isEmpty())
    <div class="card-custom">
        <div class="card-body text-center py-5">
            <i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i>
            <h3 class="mt-3 text-muted">No hay préstamos para renovar</h3>
            <p class="text-muted">No existen préstamos que cumplan los criterios de renovación en este momento.</p>
        </div>
    </div>
@else
    <!-- Mensaje de scroll -->
    <div class="scroll-hint-prestamos">
        <i class="bi bi-arrow-down-circle"></i>
        <span>Desliza para ver todas las renovaciones</span>
    </div>

    <div class="prestamos-scroll-container">
        <div class="row g-3" id="renovacionesContainer">
        @foreach($prestamos as $prestamo)
            @php
                $ultimaCuota = $prestamo->cuotas->first();
                $saldoCuota = $prestamo->getSaldoUltimaCuota();

                $hoy = now()->startOfDay();
                $fechaVencimiento = $ultimaCuota->fecha_pago->copy()->startOfDay();

                // Determinar color y texto del indicador
                if ($fechaVencimiento < $hoy) {
                    $diasVencida = $hoy->diffInDays($fechaVencimiento);
                    $textoVencimiento = 'Vencida hace ' . $diasVencida . ' día(s)';
                    $colorVencimiento = '#ef4444';
                    $bgVencimiento = '#fef2f2';
                } elseif ($fechaVencimiento->equalTo($hoy)) {
                    $textoVencimiento = 'Vence hoy';
                    $colorVencimiento = '#f59e0b';
                    $bgVencimiento = '#fffbeb';
                } else {
                    $diasRestantes = $hoy->diffInDays($fechaVencimiento);
                    if ($diasRestantes == 1) {
                        $textoVencimiento = 'Vence mañana';
                        $colorVencimiento = '#f59e0b';
                        $bgVencimiento = '#fffbeb';
                    } elseif ($diasRestantes <= 7) {
                        $textoVencimiento = 'Vence en ' . $diasRestantes . ' días';
                        $colorVencimiento = '#fbbf24';
                        $bgVencimiento = '#fefce8';
                    } else {
                        $textoVencimiento = 'Vence en ' . $diasRestantes . ' días';
                        $colorVencimiento = '#10b981';
                        $bgVencimiento = '#f0fdf4';
                    }
                }
            @endphp

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-custom" style="height: 100%;">
                    <div class="card-header-custom d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <div style="font-weight: 600; font-size: 0.95rem;">{{ $prestamo->cliente_nombre_completo }}</div>
                            <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                                <i class="bi bi-credit-card-2-front"></i> {{ $prestamo->cliente_cedula }}
                            </div>
                        </div>
                        <div class="ms-2">
                            <span class="badge" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; font-size: 0.8rem;">
                                <i class="bi bi-arrow-repeat"></i> Renovar
                            </span>
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <!-- Alerta de vencimiento -->
                        <div class="mb-3" style="background: {{ $bgVencimiento }}; border-left: 4px solid {{ $colorVencimiento }}; padding: 0.75rem; border-radius: 6px;">
                            <div style="font-size: 0.75rem; font-weight: 700; color: {{ $colorVencimiento }}; display: flex; align-items: center; gap: 0.5rem;">
                                <i class="bi bi-calendar-event"></i>
                                {{ $textoVencimiento }}
                            </div>
                            <div style="font-size: 0.7rem; color: #6b7280; margin-top: 0.25rem;">
                                Fecha: {{ $ultimaCuota->fecha_pago->format('d/m/Y') }}
                            </div>
                        </div>

                        <div class="row g-0">
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Préstamo Actual</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${{ number_format($prestamo->monto_credito, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Última Cuota</div>
                                <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">${{ number_format($saldoCuota, 0, ',', '.') }}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Modalidad</div>
                                <div class="fw-bold text-capitalize" style="color: #1a1a1a; font-size: 0.95rem;">
                                    <i class="bi bi-arrow-repeat"></i> {{ $prestamo->modalidad_pago }}
                                </div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Cuotas</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">{{ $prestamo->numero_cuotas }}</div>
                            </div>
                        </div>

                        <!-- Botón de renovar -->
                        <div class="mt-3">
                            <a href="{{ route('renovaciones.create', $prestamo->id) }}"
                               class="btn w-100"
                               style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.5rem 1rem; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s ease;"
                               onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(212, 175, 55, 0.4)';"
                               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                                <i class="bi bi-arrow-repeat"></i> Renovar Préstamo
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        </div>
    </div>

    <!-- Load More Section -->
    <div class="pagination-custom-prestamos">
        <div class="pagination-info-prestamos" id="renovacionesInfo">
            Mostrando <span id="renovacionesCount">{{ $prestamos->count() }}</span> de <span id="renovacionesTotal">{{ $totalPrestamos }}</span> renovaciones
        </div>
        <div class="pagination-buttons-prestamos" id="loadMoreContainer">
            <button class="btn-pagination-prestamos" id="loadMoreBtn" style="width: auto; padding: 0.5rem 1.5rem;">
                <i class="bi bi-arrow-down-circle"></i> Cargar más renovaciones
            </button>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const modalidadFilter = document.getElementById('modalidadFilter');
    const searchForm = document.getElementById('searchForm');

    let searchTimeout;

    // Búsqueda en tiempo real con debounce para el campo de texto
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                searchForm.submit();
            }, 500);
        });
    }

    // Enviar formulario inmediatamente cuando cambia la modalidad
    if (modalidadFilter) {
        modalidadFilter.addEventListener('change', function() {
            searchForm.submit();
        });
    }

    // Manejar el chevron del acordeón
    const filtrosRenovacionesCollapse = document.getElementById('filtrosRenovacionesCollapse');
    const filtrosRenovacionesChevron = document.getElementById('filtrosRenovacionesChevron');

    if (filtrosRenovacionesCollapse && filtrosRenovacionesChevron) {
        filtrosRenovacionesCollapse.addEventListener('show.bs.collapse', function() {
            filtrosRenovacionesChevron.classList.remove('bi-chevron-down');
            filtrosRenovacionesChevron.classList.add('bi-chevron-up');
        });

        filtrosRenovacionesCollapse.addEventListener('hide.bs.collapse', function() {
            filtrosRenovacionesChevron.classList.remove('bi-chevron-up');
            filtrosRenovacionesChevron.classList.add('bi-chevron-down');
        });
    }

    // Load More functionality
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const renovacionesContainer = document.getElementById('renovacionesContainer');
    const renovacionesCountSpan = document.getElementById('renovacionesCount');
    const renovacionesTotal = parseInt(document.getElementById('renovacionesTotal')?.textContent || 0);
    let currentOffset = {{ $prestamos->count() }};
    let isLoading = false;

    if (loadMoreBtn) {
        // Verificar si hay más renovaciones para cargar
        if (currentOffset >= renovacionesTotal) {
            loadMoreBtn.style.display = 'none';
        }

        loadMoreBtn.addEventListener('click', function() {
            if (isLoading) return;
            isLoading = true;

            // Cambiar el texto del botón a "Cargando..."
            const originalText = loadMoreBtn.innerHTML;
            loadMoreBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Cargando...';
            loadMoreBtn.disabled = true;

            // Construir URL con filtros
            const urlParams = new URLSearchParams();
            urlParams.append('offset', currentOffset);

            if (searchInput && searchInput.value) {
                urlParams.append('buscar', searchInput.value);
            }
            if (modalidadFilter && modalidadFilter.value) {
                urlParams.append('modalidad', modalidadFilter.value);
            }

            fetch('{{ route("renovaciones.loadMore") }}?' + urlParams.toString())
                .then(response => response.json())
                .then(data => {
                    if (data.prestamos && data.prestamos.length > 0) {
                        data.prestamos.forEach(prestamo => {
                            const card = createRenovacionCard(prestamo);
                            renovacionesContainer.insertAdjacentHTML('beforeend', card);
                        });

                        currentOffset += data.prestamos.length;
                        renovacionesCountSpan.textContent = currentOffset;

                        // Ocultar botón si no hay más renovaciones
                        if (!data.hasMore) {
                            loadMoreBtn.style.display = 'none';
                        }
                    } else {
                        loadMoreBtn.style.display = 'none';
                    }

                    loadMoreBtn.innerHTML = originalText;
                    loadMoreBtn.disabled = false;
                    isLoading = false;
                })
                .catch(error => {
                    console.error('Error:', error);
                    loadMoreBtn.innerHTML = originalText;
                    loadMoreBtn.disabled = false;
                    isLoading = false;
                });
        });
    }

    function createRenovacionCard(prestamo) {
        return `
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-custom" style="height: 100%;">
                    <div class="card-header-custom d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <div style="font-weight: 600; font-size: 0.95rem;">${prestamo.cliente_nombre_completo}</div>
                            <div style="font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem;">
                                <i class="bi bi-credit-card-2-front"></i> ${prestamo.cliente_cedula}
                            </div>
                        </div>
                        <div class="ms-2">
                            <span class="badge" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; font-size: 0.8rem;">
                                <i class="bi bi-arrow-repeat"></i> Renovar
                            </span>
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <div class="mb-3" style="background: ${prestamo.bg_vencimiento}; border-left: 4px solid ${prestamo.color_vencimiento}; padding: 0.75rem; border-radius: 6px;">
                            <div style="font-size: 0.75rem; font-weight: 700; color: ${prestamo.color_vencimiento}; display: flex; align-items: center; gap: 0.5rem;">
                                <i class="bi bi-calendar-event"></i>
                                ${prestamo.texto_vencimiento}
                            </div>
                            <div style="font-size: 0.7rem; color: #6b7280; margin-top: 0.25rem;">
                                Fecha: ${prestamo.fecha_vencimiento}
                            </div>
                        </div>

                        <div class="row g-0">
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Préstamo Actual</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">$${prestamo.monto_credito}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Última Cuota</div>
                                <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">$${prestamo.saldo_cuota}</div>
                            </div>
                            <div class="col-6 p-2 border-libreta">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Modalidad</div>
                                <div class="fw-bold text-capitalize" style="color: #1a1a1a; font-size: 0.95rem;">
                                    <i class="bi bi-arrow-repeat"></i> ${prestamo.modalidad_pago}
                                </div>
                            </div>
                            <div class="col-6 p-2 border-libreta border-left-mobile">
                                <div class="text-muted" style="font-size: 0.85rem; font-weight: 700;">Cuotas</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${prestamo.numero_cuotas}</div>
                            </div>
                        </div>

                        <div class="mt-3">
                            <a href="${prestamo.url}"
                               class="btn w-100"
                               style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border-radius: 8px; font-weight: 600; padding: 0.5rem 1rem; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s ease;"
                               onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(212, 175, 55, 0.4)';"
                               onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                                <i class="bi bi-arrow-repeat"></i> Renovar Préstamo
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush