@extends('layouts.app')

@section('title', 'Préstamos')

@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-wallet2"></i> Mis Préstamos
    </h1>
</div>

<div class="card-filtros-prestamos mb-4">
    <div class="filtros-titulo-prestamos" data-bs-toggle="collapse" data-bs-target="#filtrosPrestamosCollapse" aria-expanded="false" aria-controls="filtrosPrestamosCollapse" 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="filtrosPrestamosChevron"></i>
    </div>
    <div class="collapse" id="filtrosPrestamosCollapse">
        <form action="{{ route('prestamos.index') }}" method="GET" 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="search"
                           class="filtro-input-prestamos"
                           placeholder="Nombre del cliente..."
                           value="{{ request('search') }}"
                           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>
            <div class="filtro-estado-container">
                <div class="filtro-item-prestamos">
                    <label class="filtro-label-prestamos text-center d-block"><i class="bi bi-check-circle"></i> Estado</label>
                    <select name="estado" class="filtro-input-prestamos" id="estadoFilter">
                        <option value="">Todos</option>
                        <option value="activo" {{ request('estado') == 'activo' ? 'selected' : '' }}>Activo</option>
                        <option value="completado" {{ request('estado') == 'completado' ? 'selected' : '' }}>Completado</option>
                    </select>
                </div>
            </div>
            @if(request()->hasAny(['search', 'modalidad', 'estado']))
            <div class="filtro-limpiar-container">
                <a href="{{ route('prestamos.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 registrados</h3>
            <p class="text-muted">Crea tu primer préstamo para comenzar</p>
            <a href="{{ route('prestamos.create') }}" class="btn btn-primary-custom mt-3">
                <i class="bi bi-plus-circle"></i> Crear Préstamo
            </a>
        </div>
    </div>
@else
    <!-- Mensaje de scroll -->
    <div class="scroll-hint-prestamos">
        <i class="bi bi-arrow-down-circle"></i>
        <span>Desliza para ver todos los préstamos</span>
    </div>

    <div class="prestamos-scroll-container">
        <div class="row g-3" id="prestamosContainer">
        @foreach($prestamos as $prestamo)
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-custom" onclick="window.location='{{ route('prestamos.show', $prestamo) }}'" style="cursor: pointer; 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-calendar3"></i> {{ $prestamo->fecha_entrega->format('d/m/Y') }}
                            </div>
                        </div>
                        @php
                            $cuotasPagadas = $prestamo->cuotas->where('pagado', true)->count();
                            $totalCuotas = $prestamo->cuotas->count();
                            $porcentajePago = $totalCuotas > 0 ? ($cuotasPagadas / $totalCuotas) * 100 : 0;

                            // Verificar si hay cuotas pagadas mediante renovación
                            $tieneRenovacion = $prestamo->cuotas->contains(function($cuota) {
                                return $cuota->pagado && str_contains(strtolower($cuota->observaciones ?? ''), 'renovación');
                            });
                        @endphp
                        <div class="ms-2">
                            @if($cuotasPagadas == $totalCuotas)
                                @if($tieneRenovacion)
                                    <span class="badge" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 0.8rem;">
                                        <i class="bi bi-arrow-repeat"></i> Renovación
                                    </span>
                                @else
                                    <span class="badge bg-success" style="font-size: 0.8rem;">
                                        <i class="bi bi-check-circle-fill"></i> Completo
                                    </span>
                                @endif
                            @else
                                <span class="badge" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; font-size: 0.8rem;">
                                    {{ $cuotasPagadas }}/{{ $totalCuotas }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <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;">Monto</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;">Total a Pagar</div>
                                <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">${{ number_format($prestamo->total_pagar, 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;">Cuota</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">${{ number_format($prestamo->valor_cuota, 0, ',', '.') }}</div>
                            </div>
                        </div>

                        @if($cuotasPagadas < $totalCuotas)
                            <div class="mt-3">
                                <div class="progress" style="height: 6px; border-radius: 10px; background-color: #e5e7eb;">
                                    <div class="progress-bar" role="progressbar" style="width: {{ $porcentajePago }}%; background: linear-gradient(90deg, #d4af37, #b8942c);"></div>
                                </div>
                                <div class="text-muted" style="font-size: 0.7rem; margin-top: 0.25rem;">
                                    {{ number_format($porcentajePago, 1) }}% completado
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
        </div>
    </div>

    <!-- Load More Section -->
    <div class="pagination-custom-prestamos">
        <div class="pagination-info-prestamos" id="prestamosInfo">
            Mostrando <span id="prestamosCount">{{ $prestamos->count() }}</span> de <span id="prestamosTotal">{{ $totalPrestamos }}</span> préstamos
        </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 préstamos
            </button>
        </div>
    </div>

    <a href="{{ route('prestamos.create') }}" class="fab-button">
        <i class="bi bi-plus-lg"></i>
    </a>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const modalidadFilter = document.getElementById('modalidadFilter');
    const estadoFilter = document.getElementById('estadoFilter');
    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); // Espera 500ms después de que el usuario deje de escribir
        });
    }

    // Enviar formulario inmediatamente cuando cambian los filtros
    if (modalidadFilter) {
        modalidadFilter.addEventListener('change', function() {
            searchForm.submit();
        });
    }

    if (estadoFilter) {
        estadoFilter.addEventListener('change', function() {
            searchForm.submit();
        });
    }

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

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

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

    // Load More functionality
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const prestamosContainer = document.getElementById('prestamosContainer');
    const prestamosCountSpan = document.getElementById('prestamosCount');
    const prestamosTotal = parseInt(document.getElementById('prestamosTotal').textContent);
    let currentOffset = {{ $prestamos->count() }};
    let isLoading = false;

    if (loadMoreBtn) {
        // Verificar si hay más préstamos para cargar
        if (currentOffset >= prestamosTotal) {
            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('search', searchInput.value);
            }
            if (modalidadFilter && modalidadFilter.value) {
                urlParams.append('modalidad', modalidadFilter.value);
            }
            if (estadoFilter && estadoFilter.value) {
                urlParams.append('estado', estadoFilter.value);
            }

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

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

                        // Ocultar botón si no hay más préstamos
                        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 createPrestamoCard(prestamo) {
        const renovacionBadge = prestamo.tiene_renovacion
            ? '<span class="badge" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; font-size: 0.8rem;"><i class="bi bi-arrow-repeat"></i> Renovación</span>'
            : '<span class="badge bg-success" style="font-size: 0.8rem;"><i class="bi bi-check-circle-fill"></i> Completo</span>';

        const statusBadge = prestamo.cuotas_pagadas == prestamo.total_cuotas
            ? renovacionBadge
            : `<span class="badge" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; font-size: 0.8rem;">${prestamo.cuotas_pagadas}/${prestamo.total_cuotas}</span>`;

        const progressBar = prestamo.cuotas_pagadas < prestamo.total_cuotas
            ? `<div class="mt-3">
                    <div class="progress" style="height: 6px; border-radius: 10px; background-color: #e5e7eb;">
                        <div class="progress-bar" role="progressbar" style="width: ${prestamo.porcentaje_pago}%; background: linear-gradient(90deg, #d4af37, #b8942c);"></div>
                    </div>
                    <div class="text-muted" style="font-size: 0.7rem; margin-top: 0.25rem;">
                        ${prestamo.porcentaje_pago}% completado
                    </div>
                </div>`
            : '';

        return `
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card-custom" onclick="window.location='${prestamo.url}'" style="cursor: pointer; 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-calendar3"></i> ${prestamo.fecha_entrega}
                            </div>
                        </div>
                        <div class="ms-2">
                            ${statusBadge}
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <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;">Monto</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;">Total a Pagar</div>
                                <div class="fw-bold" style="color: #d4af37; font-size: 0.95rem;">$${prestamo.total_pagar}</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;">Cuota</div>
                                <div class="fw-bold" style="color: #1a1a1a; font-size: 0.95rem;">$${prestamo.valor_cuota}</div>
                            </div>
                        </div>
                        ${progressBar}
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush