@extends('layouts.app')

@section('title', 'Calendario de Cuotas')

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

@section('content')
<div class="calendario-container">
    <!-- Header -->
    <div class="header-calendario">
        <h1><i class="bi bi-calendar-month"></i> Calendario de Cuotas</h1>
        <p class="mb-0">Visualización de vencimientos por fecha</p>
    </div>

    <!-- Navegación de mes -->
    <div class="navegacion-mes">
        <a href="{{ route('calendario.index', ['mes' => $mesAnterior->month, 'anio' => $mesAnterior->year]) }}" class="btn-nav">
            <i class="bi bi-chevron-left"></i> Anterior
        </a>
        <div class="mes-actual">
            <h2>{{ \Carbon\Carbon::create($anio, $mes, 1)->locale('es')->isoFormat('MMMM YYYY') }}</h2>
        </div>
        <a href="{{ route('calendario.index', ['mes' => $mesSiguiente->month, 'anio' => $mesSiguiente->year]) }}" class="btn-nav">
            Siguiente <i class="bi bi-chevron-right"></i>
        </a>
    </div>

    <!-- Resumen del mes -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card-resumen total">
                <div class="resumen-icon"><i class="bi bi-receipt"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Total Cuotas</div>
                    <div class="resumen-value">{{ $totalCuotas }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-resumen mora">
                <div class="resumen-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">En Mora</div>
                    <div class="resumen-value">{{ $cuotasMora }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-resumen proxima">
                <div class="resumen-icon"><i class="bi bi-clock-history"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Próximas (7 días)</div>
                    <div class="resumen-value">{{ $cuotasProximas }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card-resumen monto">
                <div class="resumen-icon"><i class="bi bi-currency-dollar"></i></div>
                <div class="resumen-info">
                    <div class="resumen-label">Monto Total</div>
                    <div class="resumen-value">${{ number_format($totalMonto, 0, ',', '.') }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Leyenda -->
    <div class="leyenda-calendario mb-4">
        <div class="leyenda-item">
            <div class="leyenda-color hoy"></div>
            <span>Hoy</span>
        </div>
        <div class="leyenda-item">
            <div class="leyenda-color con-cuotas"></div>
            <span>Días con cuotas pendientes</span>
        </div>
        <div class="leyenda-item" style="color: #9ca3af; font-size: 0.85rem; font-style: italic;">
            <i class="bi bi-info-circle"></i>
            <span>Haz clic en un día para ver el estado de cada cuota</span>
        </div>
    </div>

    <!-- Calendario GRID (Desktop) -->
    <div class="calendario-grid-container d-none d-lg-block">
        <!-- Cabecera días de la semana -->
        <div class="calendario-header">
            <div class="dia-semana">Lun</div>
            <div class="dia-semana">Mar</div>
            <div class="dia-semana">Mié</div>
            <div class="dia-semana">Jue</div>
            <div class="dia-semana">Vie</div>
            <div class="dia-semana">Sáb</div>
            <div class="dia-semana">Dom</div>
        </div>

        <!-- Grid de días -->
        <div class="calendario-grid">
            @php
                $diaActual = 1;
                $hoyDia = $hoy->day;
                $hoyMes = $hoy->month;
                $hoyAnio = $hoy->year;
                $esEsteMes = ($mes == $hoyMes && $anio == $hoyAnio);
            @endphp

            <!-- Días vacíos antes del primer día -->
            @for($i = 0; $i < $primerDiaSemana; $i++)
                <div class="dia-vacio"></div>
            @endfor

            <!-- Días del mes -->
            @for($dia = 1; $dia <= $diasEnMes; $dia++)
                @php
                    $tieneCuotas = isset($cuotasPorDia[$dia]);
                    $totalDia = $tieneCuotas ? $cuotasPorDia[$dia]['total'] : 0;
                    $cantidadCuotas = $tieneCuotas ? count($cuotasPorDia[$dia]['cuotas']) : 0;
                    $esHoy = $esEsteMes && $dia == $hoyDia;
                @endphp

                <div class="dia-celda {{ $esHoy ? 'hoy' : ($tieneCuotas ? 'tiene-cuotas' : '') }}"
                     @if($tieneCuotas)
                        onclick="mostrarDetalleDia('{{ $anio }}-{{ str_pad($mes, 2, '0', STR_PAD_LEFT) }}-{{ str_pad($dia, 2, '0', STR_PAD_LEFT) }}')"
                        style="cursor: pointer;"
                     @endif>
                    <div class="dia-numero">{{ $dia }}</div>
                    @if($tieneCuotas)
                        <div class="dia-info">
                            <div class="cuotas-badge">
                                <i class="bi bi-receipt"></i> {{ $cantidadCuotas }}
                            </div>
                            <div class="monto-dia">
                                ${{ number_format($totalDia, 0, ',', '.') }}
                            </div>
                        </div>
                    @endif
                </div>
            @endfor
        </div>
    </div>

    <!-- VISTA LISTA (Móvil) -->
    <div class="calendario-lista-mobile d-lg-none">
        @php
            $hoyDia = $hoy->day;
            $hoyMes = $hoy->month;
            $hoyAnio = $hoy->year;
            $esEsteMes = ($mes == $hoyMes && $anio == $hoyAnio);

            // Crear array de días con cuotas ordenado
            $diasConCuotas = [];
            foreach($cuotasPorDia as $dia => $data) {
                $esHoy = $esEsteMes && $dia == $hoyDia;
                $diasConCuotas[] = [
                    'dia' => $dia,
                    'fecha' => \Carbon\Carbon::create($anio, $mes, $dia),
                    'cuotas' => $data['cuotas'],
                    'total' => $data['total'],
                    'cantidad' => count($data['cuotas']),
                    'esHoy' => $esHoy
                ];
            }

            // Ordenar por día
            usort($diasConCuotas, function($a, $b) {
                return $a['dia'] - $b['dia'];
            });
        @endphp

        @forelse($diasConCuotas as $diaData)
            <div class="dia-card-mobile {{ $diaData['esHoy'] ? 'hoy' : '' }}"
                 onclick="mostrarDetalleDia('{{ $anio }}-{{ str_pad($mes, 2, '0', STR_PAD_LEFT) }}-{{ str_pad($diaData['dia'], 2, '0', STR_PAD_LEFT) }}')">
                <div class="dia-card-header">
                    <div class="dia-fecha">
                        <div class="dia-numero-mobile">{{ $diaData['dia'] }}</div>
                        <div class="dia-nombre">
                            {{ $diaData['fecha']->locale('es')->isoFormat('dddd') }}
                            @if($diaData['esHoy'])
                                <span class="badge-hoy">HOY</span>
                            @endif
                        </div>
                    </div>
                    <div class="dia-stats">
                        <div class="stat-item">
                            <i class="bi bi-receipt"></i>
                            <span>{{ $diaData['cantidad'] }}</span>
                        </div>
                        <div class="stat-monto">
                            ${{ number_format($diaData['total'], 0, ',', '.') }}
                        </div>
                    </div>
                </div>
                <div class="dia-card-footer">
                    <span>Ver detalles</span>
                    <i class="bi bi-chevron-right"></i>
                </div>
            </div>
        @empty
            <div class="sin-cuotas">
                <i class="bi bi-calendar-x"></i>
                <p>No hay cuotas pendientes para este mes</p>
            </div>
        @endforelse
    </div>
</div>

<!-- Modal para detalle del día -->
<div class="modal fade" id="modalDetalleDia" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-calendar-day"></i> Cuotas del día <span id="fechaModal"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detalleContenido">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="w-100 d-flex justify-content-between align-items-center">
                    <div style="color: #f3f4f6;">
                        <strong style="color: #f3f4f6;">Total del día:</strong>
                        <span id="totalDiaModal" style="color: #10b981; font-weight: 700; margin-left: 0.5rem;"></span>
                    </div>
                    <button type="button" class="btn" style="background: #6b7280; color: white; border: none; padding: 0.5rem 1.5rem; border-radius: 8px;" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let fechaActual = null;
let offsetActual = 0;
const LIMIT = 10;

function mostrarDetalleDia(fecha) {
    fechaActual = fecha;
    offsetActual = 0;

    // Formatear fecha para mostrar
    const fechaObj = new Date(fecha + 'T00:00:00');
    const opciones = { day: '2-digit', month: 'long', year: 'numeric' };
    const fechaFormateada = fechaObj.toLocaleDateString('es-ES', opciones);

    document.getElementById('fechaModal').textContent = fechaFormateada;

    // Limpiar contenido anterior
    document.getElementById('detalleContenido').innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-warning" role="status">
                <span class="visually-hidden">Cargando...</span>
            </div>
        </div>
    `;

    // Mostrar modal
    const modal = new bootstrap.Modal(document.getElementById('modalDetalleDia'));
    modal.show();

    // Cargar datos iniciales
    cargarCuotas(fecha, 0, true);
}

function cargarCuotas(fecha, offset, esInicial = false) {
    fetch('{{ route('calendario.detalleDia') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            fecha: fecha,
            offset: offset,
            limit: LIMIT
        })
    })
    .then(response => response.json())
    .then(data => {
        const contenido = document.getElementById('detalleContenido');

        if (data.total_cuotas === 0) {
            contenido.innerHTML = '<p class="text-center text-muted">No hay cuotas para este día</p>';
            document.getElementById('totalDiaModal').textContent = '$0';
            return;
        }

        let html = '';

        // Si es inicial, crear el contenedor y el contador
        if (esInicial) {
            html = `
                <div style="background: #1a1a1a; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 3px solid #d4af37;">
                    <div style="color: #9ca3af; font-size: 0.85rem; margin-bottom: 0.25rem;">Total de cuotas:</div>
                    <div style="color: #f3f4f6; font-weight: 700; font-size: 1.1rem;">
                        <i class="bi bi-receipt"></i>
                        <span id="contadorCuotas">${data.mostrando}</span> de ${data.total_cuotas}
                    </div>
                </div>
                <div class="list-group" id="listaCuotas">
            `;
        }

        // Renderizar cuotas
        data.cuotas.forEach(cuota => {
            html += renderizarCuota(cuota);
        });

        if (esInicial) {
            html += '</div>';

            // Agregar botón "Cargar más" si hay más cuotas
            if (data.tiene_mas) {
                html += `
                    <div class="text-center mt-3" id="botonCargarMasContainer">
                        <button onclick="cargarMasCuotas()" class="btn" style="background: linear-gradient(135deg, #d4af37, #b8942c); color: #1a1a1a; border: none; padding: 0.6rem 1.5rem; border-radius: 8px; font-weight: 600;">
                            <i class="bi bi-arrow-down-circle"></i> Cargar más cuotas
                        </button>
                    </div>
                `;
            }

            contenido.innerHTML = html;
        } else {
            // Agregar al final de la lista existente
            document.getElementById('listaCuotas').insertAdjacentHTML('beforeend', html);

            // Actualizar contador
            const nuevoMostrando = offset + data.mostrando;
            document.getElementById('contadorCuotas').textContent = nuevoMostrando;

            // Actualizar o eliminar botón "Cargar más"
            const botonContainer = document.getElementById('botonCargarMasContainer');
            if (botonContainer) {
                if (data.tiene_mas) {
                    // Mantener el botón
                } else {
                    // Eliminar el botón
                    botonContainer.remove();
                }
            }
        }

        // Actualizar total
        document.getElementById('totalDiaModal').textContent = '$' + data.total.toLocaleString('es-CO');
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('detalleContenido').innerHTML =
            '<p class="text-center text-danger">Error al cargar los datos</p>';
    });
}

function cargarMasCuotas() {
    offsetActual += LIMIT;
    cargarCuotas(fechaActual, offsetActual, false);
}

function renderizarCuota(cuota) {
    let estadoBadge = '';
    if (cuota.estado === 'mora') {
        estadoBadge = '<span class="badge bg-danger"><i class="bi bi-exclamation-triangle-fill"></i> Mora: ' + cuota.dias_diferencia + ' día(s)</span>';
    } else if (cuota.estado === 'proximo') {
        estadoBadge = '<span class="badge bg-warning"><i class="bi bi-clock"></i> Vence en ' + cuota.dias_diferencia + ' día(s)</span>';
    } else {
        estadoBadge = '<span class="badge bg-success"><i class="bi bi-calendar-check"></i> Programado</span>';
    }

    return `
        <a href="${cuota.url}" class="list-group-item list-group-item-action" style="text-decoration: none;">
            <div class="d-flex w-100 justify-content-between align-items-start mb-2">
                <h6 class="mb-1" style="color: #f3f4f6;">
                    <i class="bi bi-person-circle" style="color: #d4af37;"></i> ${cuota.cliente}
                </h6>
                ${estadoBadge}
            </div>
            <div class="row g-2">
                <div class="col-6 col-md-3">
                    <small style="color: #9ca3af; display: block; margin-bottom: 0.25rem;">Cuota:</small>
                    <div style="color: #f3f4f6; font-weight: 700;">#${cuota.numero_cuota}</div>
                </div>
                <div class="col-6 col-md-3">
                    <small style="color: #9ca3af; display: block; margin-bottom: 0.25rem;">Monto:</small>
                    <div style="color: #10b981; font-weight: 700;">$${cuota.monto}</div>
                </div>
                <div class="col-6 col-md-3">
                    <small style="color: #9ca3af; display: block; margin-bottom: 0.25rem;">Modalidad:</small>
                    <div style="color: #f3f4f6; font-weight: 700; text-transform: capitalize;">${cuota.modalidad}</div>
                </div>
                <div class="col-6 col-md-3">
                    <small style="color: #9ca3af; display: block; margin-bottom: 0.25rem;">Préstamo:</small>
                    <div style="color: #f3f4f6; font-weight: 700;">#${cuota.prestamo_id}</div>
                </div>
            </div>
        </a>
    `;
}
</script>
@endpush