{{-- resources/views/pages/calendar/list.blade.php --}}
@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- ======= HEADER ======= --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            @if (!empty($is_admin) && $is_admin && empty($gedung_id_active))
                <div class="container mt-3">
                    <div class="alert alert-info">Silakan pilih gedung terlebih dahulu.</div>
                </div>
            @endif

            <div class="row gx-4 align-items-center">
                <div class="col-lg">
                    <div class="d-flex gap-2 align-items-center">
                        <button id="btnToday" type="button" class="btn btn-primary mb-0">Today</button>
                        <button id="btnPrev" type="button" class="btn btn-outline-primary mb-0">Previous</button>
                        <button id="btnNext" type="button" class="btn btn-outline-primary mb-0">Next</button>

                        {{-- FILTER GEDUNG (khusus admin) --}}
                        @if (!empty($is_admin) && $is_admin)
                            <form method="GET" class="d-inline-flex align-items-center gap-2 ms-3">
                                <label for="gedung_id" class="form-label mb-0">Gedung</label>
                                <select name="gedung_id" id="gedung_id" class="form-select form-select-sm"
                                    onchange="this.form.submit()">
                                    <option value="">— Pilih Gedung —</option>
                                    @foreach ($master_gedung ?? [] as $g)
                                        <option value="{{ $g->id }}" @selected((int) ($gedung_id_active ?? 0) === (int) $g->id)>
                                            {{ $g->nama }}
                                        </option>
                                    @endforeach
                                </select>

                                {{-- Pertahankan parameter lain jika ada --}}
                                @foreach (request()->except('gedung_id') as $k => $v)
                                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                @endforeach
                            </form>
                        @endif
                    </div>
                </div>

                <div class="col-lg-auto">
                    <div class="d-flex align-items-center gap-3">

                        {{-- Mode selector: Month / Year --}}
                        <div class="btn-group" role="group" aria-label="Mode">
                            <input type="radio" class="btn-check" name="mode" id="modeMonth" autocomplete="off"
                                checked>
                            <label class="btn btn-outline-primary btn-sm" for="modeMonth">Month</label>

                            <input type="radio" class="btn-check" name="mode" id="modeYear" autocomplete="off">
                            <label class="btn btn-outline-primary btn-sm" for="modeYear">Year</label>
                        </div>

                        {{-- Span untuk mode Month: 1m / 3m / 6m --}}
                        <div id="monthSpanWrap" class="btn-group" role="group" aria-label="Month span">
                            <button type="button" class="btn btn-outline-primary btn-sm span-btn active"
                                data-months="1">1m</button>
                            <button type="button" class="btn btn-outline-primary btn-sm span-btn"
                                data-months="3">3m</button>
                            <button type="button" class="btn btn-outline-primary btn-sm span-btn"
                                data-months="6">6m</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- ======= CALENDAR ======= --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-lg">
                    <div class="card-header pb-2 d-flex justify-content-between align-items-center">
                        <h5 id="monthTitle" class="mb-0 fw-bold"></h5>
                    </div>
                    <div class="card-body">
                        <div id="calendar" style="border: 1px solid #ddd;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addjs')
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/main.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>

    <style>
        /* Background lembut per status */
        .fc-daygrid-day.status-complete {
            background-color: #e6f4ea;
        }

        /* hijau muda */
        .fc-daygrid-day.status-partial {
            background-color: #fff4e5;
        }

        /* oranye muda */
        .fc-daygrid-day.status-none {
            background-color: #fde8e8;
        }

        /* merah muda */

        /* Event bar */
        .event-complete {
            background-color: #34a853 !important;
            border-color: #34a853 !important;
        }

        .event-partial {
            background-color: #fbbc04 !important;
            border-color: #fbbc04 !important;
            color: #111 !important;
        }

        .event-none {
            background-color: #ea4335 !important;
            border-color: #ea4335 !important;
        }

        .fc .fc-daygrid-event {
            padding: 2px 6px;
            font-weight: 600;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const monthTitle = document.getElementById('monthTitle');

            const modeMonth = document.getElementById('modeMonth');
            const modeYear = document.getElementById('modeYear');

            // Data dari controller
            const STATUS_MAP = @json($statusMap ?? []);
            const PRELOAD_FROM = @json($preload_from ?? null); // "YYYY-MM-DD"
            const PRELOAD_TO = @json($preload_to ?? null); // "YYYY-MM-DD"

            // ===== Build events (end = +1 hari lokal → aman TZ) =====
            const EVENTS = [];
            for (const [date, info] of Object.entries(STATUS_MAP)) {
                if (!info || !info.status) continue;

                const cls =
                    info.status === 'complete' ? 'event-complete' :
                    info.status === 'partial' ? 'event-partial' : 'event-none';

                const missing = (info.missing || []).map(labelizeMesin).join(', ');
                const short =
                    info.status === 'complete' ? 'OK' :
                    info.status === 'partial' ? 'Mesin ' + (missing || '-') + ' belum' :
                    'Belum Upload';

                const tooltip =
                    info.status === 'complete' ? 'Semua mesin sudah upload' :
                    info.status === 'partial' ? ('Mesin: ' + (missing || '-') + ' belum upload') :
                    'Belum Upload Sama Sekali';

                EVENTS.push({
                    id: `status-${date}`,
                    start: date,
                    end: addOneDayNoTZ(date),
                    allDay: true,
                    display: 'block',
                    classNames: [cls],
                    extendedProps: {
                        short,
                        tooltip
                    },
                    title: ''
                });
            }

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                duration: {
                    months: 1
                },
                height: 'auto',
                expandRows: true,
                headerToolbar: false,
                showNonCurrentDates: true,
                fixedWeekCount: false,
                weekends: true,

                dayMaxEvents: 1,
                moreLinkClick: 'popover',
                multiMonthTitleFormat: {
                    year: 'numeric',
                    month: 'long'
                },

                dayCellClassNames(arg) {
                    const key = toLocalYMD(arg.date);
                    const item = STATUS_MAP[key];
                    if (!item) return [];
                    return [
                        item.status === 'complete' ? 'status-complete' :
                        item.status === 'partial' ? 'status-partial' : 'status-none'
                    ];
                },

                dayCellDidMount(arg) {
                    const key = toLocalYMD(arg.date);
                    const item = STATUS_MAP[key];
                    if (!item) return;
                    let title = '';
                    if (item.status === 'complete') title = 'Semua mesin sudah upload';
                    else if (item.status === 'partial') title = 'Belum upload: ' + ((item.missing || [])
                        .map(labelizeMesin).join(', ') || '-');
                    else title = 'Tidak ada upload';
                    arg.el.setAttribute('title', title);
                },

                eventContent(arg) {
                    const {
                        short,
                        tooltip
                    } = arg.event.extendedProps;
                    const el = document.createElement('div');
                    el.style.fontWeight = '600';
                    el.style.fontSize = '12px';
                    el.textContent = short;
                    el.title = tooltip;
                    return {
                        domNodes: [el]
                    };
                },

                events: EVENTS,

                datesSet() {
                    updateHeaderTitle();
                    syncControlVisibility();
                }
            });

            calendar.render();

            // ====== STATE ======
            let currentSpanMonths = 1; // 1m/3m/6m

            // ====== MODE SWITCH ======
            modeMonth.addEventListener('change', () => {
                if (modeMonth.checked) enterMonthMode(currentSpanMonths, calendar.getDate());
            });
            modeYear.addEventListener('change', () => {
                if (modeYear.checked) enterYearMode(calendar.getDate().getFullYear());
            });

            // ====== SPAN BUTTONS (1/3/6) ======
            document.querySelectorAll('.span-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.span-btn').forEach(x => x.classList.remove(
                        'active'));
                    this.classList.add('active');
                    currentSpanMonths = parseInt(this.getAttribute('data-months'), 10) || 1;
                    if (modeMonth.checked) enterMonthMode(currentSpanMonths, calendar.getDate());
                });
            });

            // ====== NAV ======
            document.getElementById('btnToday').addEventListener('click', () => {
                const now = new Date();
                if (modeYear.checked) {
                    enterYearMode(now.getFullYear());
                } else {
                    enterMonthMode(currentSpanMonths, now);
                }
            });

            document.getElementById('btnPrev').addEventListener('click', () => {
                const anchor = new Date(calendar.getDate().getTime());
                if (modeYear.checked) {
                    enterYearMode(anchor.getFullYear() - 1);
                } else {
                    anchor.setMonth(anchor.getMonth() - currentSpanMonths);
                    enterMonthMode(currentSpanMonths, anchor);
                }
            });

            document.getElementById('btnNext').addEventListener('click', () => {
                const anchor = new Date(calendar.getDate().getTime());
                if (modeYear.checked) {
                    enterYearMode(anchor.getFullYear() + 1);
                } else {
                    anchor.setMonth(anchor.getMonth() + currentSpanMonths);
                    enterMonthMode(currentSpanMonths, anchor);
                }
            });

            // ====== FUNCTIONS ======
            function enterMonthMode(spanMonths, anchorDate) {
                const d0 = anchorDate || new Date();
                if (spanMonths === 1) {
                    calendar.changeView('dayGridMonth');
                    calendar.gotoDate(d0);
                } else {
                    calendar.setOption('duration', {
                        months: spanMonths
                    });
                    calendar.setOption('multiMonthMaxColumns', 3);
                    calendar.setOption('multiMonthMinWidth', 200);
                    if (calendar.view.type !== 'multiMonth') calendar.changeView('multiMonth');
                    calendar.gotoDate(d0);
                }
                monthTitle.textContent = (spanMonths === 1) ?
                    d0.toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'long'
                    }) :
                    '';
                syncControlVisibility();
            }

            function enterYearMode(year) {
                const y = clampYear(year);
                calendar.setOption('duration', {
                    months: 12
                });
                calendar.setOption('multiMonthMaxColumns', 4);
                calendar.setOption('multiMonthMinWidth', 200);
                if (calendar.view.type !== 'multiMonth') calendar.changeView('multiMonth');
                calendar.gotoDate(new Date(y, 0, 1)); // Jan 1
                monthTitle.textContent = '';
                syncControlVisibility();
            }

            function updateHeaderTitle() {
                if (calendar.view.type === 'dayGridMonth') {
                    const date = calendar.getDate();
                    monthTitle.textContent = date.toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'long'
                    });
                } else {
                    monthTitle.textContent = '';
                }
            }

            function syncControlVisibility() {
                const isYear = modeYear.checked;
                // Hanya sembunyikan tombol span saat Year mode
                document.getElementById('monthSpanWrap').style.display = isYear ? 'none' : '';
            }

            // util tanggal
            function toLocalYMD(dateObj) {
                const y = dateObj.getFullYear();
                const m = String(dateObj.getMonth() + 1).padStart(2, '0');
                const d = String(dateObj.getDate()).padStart(2, '0');
                return `${y}-${m}-${d}`;
            }

            function addOneDayNoTZ(ymd) {
                const [y, m, d] = ymd.split('-').map(Number);
                const t = new Date(y, m - 1, d);
                t.setDate(t.getDate() + 1);
                const yy = t.getFullYear();
                const mm = String(t.getMonth() + 1).padStart(2, '0');
                const dd = String(t.getDate()).padStart(2, '0');
                return `${yy}-${mm}-${dd}`;
            }

            function labelizeMesin(x) {
                const s = String(x);
                const m = s.match(/(\d+)/);
                return m ? m[1] : s.replace(/^Mesin\s*/i, '');
            }

            function clampYear(y) {
                if (!Number.isFinite(y)) return (new Date()).getFullYear();
                // Navigasi bebas; hanya guard 2000..2100
                return Math.max(2000, Math.min(2100, y));
            }

            // ====== INIT: Month mode 1m di tanggal hari ini ======
            enterMonthMode(currentSpanMonths, new Date());
        });
    </script>
@endpush