@extends('layouts.app', ['title' => term('nav_calendar','Calendario')])

@section('content')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/locales/es.global.min.js"></script>

<div class="calendar-shell">
    <section class="calendar-hero">
        <div>
            <div class="calendar-kicker"><i class="fa-solid fa-calendar-days"></i> Agenda operativa</div>
            <h2>Calendario</h2>
            <p>Cobros, vencimientos de apartados y recordatorios organizados por fecha.</p>
        </div>
        <div class="calendar-legend">
            <span><i class="dot dot-pay"></i> Abonos</span>
            <span><i class="dot dot-res"></i> Apartados</span>
            <span><i class="dot dot-rem"></i> Recordatorios</span>
            <span><i class="dot dot-late"></i> Vencidos</span>
        </div>
    </section>

    <div class="calendar-layout">
        <section class="calendar-card">
            <div id="calendar"></div>
        </section>
    </div>
</div>

@push('scripts')
<style>
.calendar-shell{display:grid;gap:16px}
.calendar-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,244,235,.9));box-shadow:var(--shadow-1);padding:22px}
.calendar-kicker{display:flex;align-items:center;gap:8px;color:var(--gold-dark);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.calendar-hero h2{margin:6px 0 4px;font-family:var(--display);font-size:30px;color:var(--text)}
.calendar-hero p{margin:0;color:var(--muted)}
.calendar-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.calendar-legend span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 11px;font-size:12px;font-weight:800;color:var(--text)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot-pay{background:#c9a84c}.dot-res{background:#3b82f6}.dot-rem{background:#14b8a6}.dot-late{background:#ef4444}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.calendar-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-1);overflow:hidden}
#calendar{min-height:730px;padding:16px}
.fc{font-family:var(--body);color:var(--text)}
.fc .fc-toolbar{gap:10px;align-items:center;margin-bottom:16px}
.fc .fc-toolbar-title{font-family:var(--display);font-size:22px;font-weight:850;color:var(--text);text-transform:capitalize}
.fc .fc-button{background:#fff!important;border:1px solid var(--line)!important;color:var(--text)!important;font-weight:800!important;text-transform:none!important;border-radius:10px!important;padding:8px 12px!important;box-shadow:none!important}
.fc .fc-button-primary:hover,.fc .fc-button-active{background:var(--gold-soft)!important;color:#111!important;border-color:rgba(201,168,76,.48)!important}
.fc-theme-standard td,.fc-theme-standard th,.fc-theme-standard .fc-scrollgrid{border-color:var(--line)!important}
.fc-col-header-cell{background:#f8fafc!important;color:var(--muted)!important;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.fc-daygrid-day{background:#fff!important}
.fc-daygrid-day-frame{min-height:112px;padding:6px!important}
.fc-daygrid-day-number{font-weight:850;color:var(--text);font-size:12px}
.fc-day-other .fc-daygrid-day-number{color:#a8b0bd}
.fc-day-today{background:linear-gradient(180deg,rgba(201,168,76,.16),rgba(255,255,255,.98))!important}
.fc-day-today .fc-daygrid-day-number{background:var(--gold);color:#111;border-radius:999px;min-width:24px;text-align:center;padding:3px 6px}
.fc-event{border:0!important;border-radius:9px!important;padding:3px 6px!important;font-size:11.2px!important;font-weight:850!important;box-shadow:0 6px 16px -14px rgba(15,23,42,.7);cursor:pointer}
.fc-event.event-reminder{background:#14b8a6!important;color:#fff!important}.fc-event.event-payment,.fc-event.event-payment-installment{background:#c9a84c!important;color:#111!important}.fc-event.event-reservation{background:#3b82f6!important;color:#fff!important}.fc-event.event-late{background:#ef4444!important;color:#fff!important}
.fc-list{border:0!important}.fc-list-day-cushion{background:#f8fafc!important;color:var(--text)!important;text-transform:capitalize}.fc-list-event-title,.fc-list-event-time{color:var(--text)!important}.fc-list-event:hover td{background:#fff8e5!important}
@media(max-width:1050px){.calendar-hero{align-items:flex-start;flex-direction:column}.calendar-legend{justify-content:flex-start}#calendar{min-height:640px}}
@media(max-width:720px){.calendar-hero{padding:16px}.calendar-hero h2{font-size:24px}.fc .fc-toolbar{align-items:stretch;flex-direction:column}.fc .fc-toolbar-chunk{display:flex;justify-content:center;flex-wrap:wrap}.fc-daygrid-day-frame{min-height:92px}}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const el = document.getElementById('calendar');
    if (!el) return;

    const fmtMoney = n => Number(n || 0).toLocaleString('es-MX', {style:'currency', currency:'MXN'});
    const fmtDate = value => new Date(value + 'T00:00:00').toLocaleDateString('es-MX', {day:'2-digit', month:'short'});
    const eventTypeName = type => ({
        reminder: 'Recordatorio',
        payment_installment: 'Abono programado',
        reservation: 'Apartado',
        payment: 'Cobro',
        task: 'Tarea'
    }[type] || 'Evento');
    const cleanTitle = title => String(title || 'Evento').replace(/^[^\p{L}\p{N}$]+/u, '').trim();
    const eventClass = info => {
        const p = info.event.extendedProps || {};
        const status = String(p.status || '').toLowerCase();
        const start = info.event.start;
        if (start && start < new Date(new Date().toDateString()) && !status.includes('pagado') && !status.includes('cumplido')) return ['event-late'];
        return ['event-' + String(p.type || 'default').replace(/_/g, '-')];
    };

    const calendar = new FullCalendar.Calendar(el, {
        locale: 'es',
        initialView: 'dayGridMonth',
        firstDay: 1,
        height: 'auto',
        buttonText: {today:'Hoy', month:'Mes', week:'Semana', list:'Agenda'},
        views: {listWeek: {buttonText: 'Agenda'}},
        headerToolbar: {left:'prev,next today',center:'title',right:'dayGridMonth,timeGridWeek,listWeek'},
        noEventsText: 'No hay eventos para mostrar.',
        allDayText: 'Todo el día',
        moreLinkText: n => `+${n} más`,
        eventClassNames: eventClass,
        events: {
            url: '{{ route('calendar.events') }}',
            failure: function(error) {
                console.error('Error cargando eventos del calendario:', error);
                toast('No se pudieron cargar los eventos del calendario.', 'error');
            }
        },
        eventClick: function(info) {
            const p = info.event.extendedProps;
            let body = '';
            if (p.type === 'task') body = 'Asesor: '+(p.advisor||'—')+'\nPrioridad: '+p.priority;
            else if (p.type === 'reminder') body = 'Cliente: '+(p.client||'—')+'\nTipo: '+p.kind;
            else if (p.type === 'payment_installment') body = 'Cliente: '+(p.client||'—')+'\nUnidad: '+(p.unit||'—')+'\nFecha: '+(p.due_date||'—')+'\nMonto: '+fmtMoney(p.amount)+'\nEstado: '+(p.status||'Pendiente');
            else if (p.type === 'reservation') body = 'Cliente: '+(p.client||'—')+'\nUnidad: '+(p.unit||'—')+'\nVence: '+(p.due_date||'—')+'\nSaldo/apartado: '+fmtMoney(p.amount)+'\nEstado: '+(p.status||'Apartado');
            else if (p.type === 'payment') body = 'Monto: '+fmtMoney(p.amount)+'\nEstado: '+p.status;
            toast(cleanTitle(info.event.title) + (body ? '\n'+body : ''), 'ok');
            if (info.event.url) {
                info.jsEvent.preventDefault();
                window.open(info.event.url, '_blank');
            }
        }
    });
    calendar.render();
});
</script>
@endpush
@endsection