@extends('layouts.app')

@section('title', 'History Data')
@section('page-title', 'History Data')

@section('styles')
<style>
    /* ═══ Drill grid — kartu tahun/bulan/tanggal ═══ */
    .drill-grid {
        display: grid;
        gap: 14px;
        margin-bottom: 24px;
    }
    .drill-grid.years  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .drill-grid.months { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .drill-grid.dates  { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

    /* Kartu menarik dengan aksen warna & gradient */
    .drill-card {
        position: relative;
        background: white;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        padding: 18px 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.25s;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .drill-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), #67e8f9);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s;
    }
    .drill-card:hover {
        border-color: var(--primary);
        background: var(--primary-light);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }
    .drill-card:hover::before { transform: scaleX(1); }

    .drill-card .dc-icon {
        font-size: 24px;
        color: var(--primary);
        display: block;
        margin-bottom: 8px;
        transition: transform 0.25s;
    }
    .drill-card:hover .dc-icon { transform: scale(1.15); }

    .drill-card .dc-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.3;
        font-family: 'Poppins', sans-serif;
    }
    .drill-card .dc-sub {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 3px;
    }

    /* Kartu tanggal — bentuk kalender mini */
    .drill-grid.dates .drill-card {
        padding: 14px 8px;
    }
    .drill-grid.dates .dc-icon {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .drill-grid.dates .dc-label {
        font-size: 18px;
    }

    .drill-loading {
        text-align: center;
        padding: 40px;
        color: var(--text-muted);
        font-size: 13px;
    }
    .drill-loading .spinner-border {
        width: 24px; height: 24px;
        border-width: 2px;
        color: var(--primary);
    }

    .drill-empty {
        text-align: center;
        padding: 48px 20px;
        color: var(--text-muted);
    }
    .drill-empty i { font-size: 40px; display: block; margin-bottom: 10px; opacity: 0.4; }

    /* ═══ Tabel ═══ */
    .tabel-wrapper {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .tabel-header {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8fafc;
        gap: 12px;
        flex-wrap: wrap;
    }
    .tabel-header-nav {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }
    .btn-nav-sm {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: white;
        color: var(--text-main);
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-nav-sm:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }
    .btn-nav-sm.btn-nav-primary {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    .btn-nav-sm.btn-nav-primary:hover {
        background: var(--primary-dark);
        color: white;
    }
    .btn-nav-sm:disabled, .btn-nav-sm.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
    .tabel-header-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .tabel-count {
        font-size: 11px;
        background: var(--primary-light);
        color: var(--primary);
        padding: 2px 10px;
        border-radius: 20px;
        font-weight: 600;
    }
    .table-responsive { overflow-x: auto; }

    /* Jam pada kolom waktu — warna gelap agar terbaca */
    .waktu-cell {
        color: #2d3748 !important;
        font-weight: 500;
    }

    /* ═══ Navigasi Kembali / Lanjut ═══ */
    .drill-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        gap: 10px;
    }
    .btn-nav {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 20px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: white;
        color: var(--text-main);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }
    .btn-nav:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }
    .btn-nav.btn-nav-primary {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    .btn-nav.btn-nav-primary:hover {
        background: var(--primary-dark);
        color: white;
    }
    .btn-nav:disabled, .btn-nav.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
</style>
@endsection

@section('content')

<div id="drill-area">

    {{-- LEVEL 1: Tahun --}}
    <div id="view-years">
        <div class="section-label mb-3"><i class="bi bi-calendar3 me-2"></i>Pilih Tahun</div>
        @if(count($years) > 0)
            <div class="drill-grid years">
                @foreach($years as $year)
                <div class="drill-card" onclick="selectYear({{ $year }})">
                    <i class="bi bi-calendar-year dc-icon"></i>
                    <div class="dc-label">{{ $year }}</div>
                    <div class="dc-sub">Tahun</div>
                </div>
                @endforeach
            </div>
        @else
            <div class="drill-empty">
                <i class="bi bi-inbox"></i>
                Belum ada data history tersedia.
            </div>
        @endif
    </div>

    {{-- LEVEL 2: Bulan --}}
    <div id="view-months" style="display:none;">
        <div class="section-label mb-3"><i class="bi bi-calendar-month me-2"></i>Pilih Bulan</div>
        <div class="drill-loading" id="loading-months">
            <div class="spinner-border mb-2"></div><br>Memuat bulan...
        </div>
        <div class="drill-grid months" id="grid-months" style="display:none;"></div>
        <div class="drill-empty d-none" id="empty-months">
            <i class="bi bi-calendar-x"></i> Tidak ada data di tahun ini.
        </div>
        <div class="drill-nav" id="nav-months" style="display:none;">
            <button class="btn-nav" onclick="goRoot()">
                <i class="bi bi-arrow-left"></i> Kembali ke Tahun
            </button>
        </div>
    </div>

    {{-- LEVEL 3: Tanggal --}}
    <div id="view-dates" style="display:none;">
        <div class="section-label mb-3"><i class="bi bi-calendar-day me-2"></i>Pilih Tanggal</div>
        <div class="drill-loading" id="loading-dates">
            <div class="spinner-border mb-2"></div><br>Memuat tanggal...
        </div>
        <div class="drill-grid dates" id="grid-dates" style="display:none;"></div>
        <div class="drill-empty d-none" id="empty-dates">
            <i class="bi bi-calendar-x"></i> Tidak ada data di bulan ini.
        </div>
        <div class="drill-nav" id="nav-dates" style="display:none;">
            <button class="btn-nav" onclick="goYear()">
                <i class="bi bi-arrow-left"></i> Kembali ke Bulan
            </button>
        </div>
    </div>

    {{-- LEVEL 4: Tabel --}}
    <div id="view-records" style="display:none;">
        <div class="tabel-wrapper">
            <div class="tabel-header">
                <div class="tabel-header-title">
                    <i class="bi bi-table"></i>
                    Data Sensor
                    <span class="tabel-count" id="record-count">0 data</span>
                </div>
                <div class="tabel-header-nav">
                    <button class="btn-nav-sm" id="btn-prev-date" onclick="navigateDate(-1)">
                        <i class="bi bi-chevron-left"></i> Sebelumnya
                    </button>
                    <button class="btn-nav-sm btn-nav-primary" id="btn-next-date" onclick="navigateDate(1)">
                        Selanjutnya <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>
            <div class="drill-loading" id="loading-records">
                <div class="spinner-border mb-2"></div><br>Memuat data...
            </div>
            <div class="table-responsive" id="table-wrapper" style="display:none;">
                <table class="table table-clean mb-0">
                    <thead>
                        <tr>
                            <th style="width:50px;">No</th>
                            <th>Sensor</th>
                            <th>Nilai</th>
                            <th>Status</th>
                            <th>Keterangan</th>
                            <th>Waktu</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-records"></tbody>
                </table>
            </div>
            <div class="drill-empty d-none" id="empty-records">
                <i class="bi bi-inbox"></i> Tidak ada data di tanggal ini.
            </div>
        </div>

        {{-- Navigasi Kembali --}}
        <div class="drill-nav">
            <button class="btn-nav" onclick="goMonth()">
                <i class="bi bi-arrow-left"></i> Kembali ke Tanggal
            </button>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
let state = { year: null, month: null, monthLabel: null, date: null };

const NAMA_BULAN = [
    '','Januari','Februari','Maret','April','Mei','Juni',
    'Juli','Agustus','September','Oktober','November','Desember'
];

/* ══════════════════════════════════════════════
   NAVIGASI DRILL-DOWN
══════════════════════════════════════════════ */
function showView(id) {
    ['view-years','view-months','view-dates','view-records'].forEach(v => {
        document.getElementById(v).style.display = v === id ? 'block' : 'none';
    });
}

function updateBreadcrumb() {
    // Breadcrumb dihapus dari tampilan — fungsi ini sengaja dikosongkan
    // agar pemanggilan di tempat lain tidak menyebabkan error.
}

function formatDate(dateStr) {
    const d = new Date(dateStr);
    return d.getDate() + ' ' + NAMA_BULAN[d.getMonth() + 1] + ' ' + d.getFullYear();
}

function goRoot() {
    state = { year: null, month: null, monthLabel: null, date: null };
    updateBreadcrumb();
    showView('view-years');
}

function goYear() {
    if (!state.year) return;
    state.month = null; state.monthLabel = null; state.date = null;
    updateBreadcrumb();
    loadMonths(state.year);
}

function goMonth() {
    if (!state.month) return;
    state.date = null;
    updateBreadcrumb();
    loadDates(state.year, state.month);
}

function selectYear(year) {
    state.year = year;
    state.month = null; state.monthLabel = null; state.date = null;
    updateBreadcrumb();
    loadMonths(year);
}

async function loadMonths(year) {
    showView('view-months');
    document.getElementById('loading-months').style.display = 'block';
    document.getElementById('grid-months').style.display    = 'none';
    document.getElementById('empty-months').classList.add('d-none');
    document.getElementById('nav-months').style.display     = 'none';

    try {
        const res  = await fetch(`{{ route('history.months') }}?year=${year}`);
        const json = await res.json();
        document.getElementById('loading-months').style.display = 'none';
        document.getElementById('nav-months').style.display     = 'flex';

        if (!json.success || json.data.length === 0) {
            document.getElementById('empty-months').classList.remove('d-none');
            return;
        }

        const grid = document.getElementById('grid-months');
        grid.innerHTML = json.data.map(m => `
            <div class="drill-card" onclick="selectMonth(${m.month}, '${m.label}')">
                <i class="bi bi-calendar2-month dc-icon"></i>
                <div class="dc-label">${m.label}</div>
                <div class="dc-sub">${year}</div>
            </div>
        `).join('');
        grid.style.display = 'grid';

    } catch (e) {
        document.getElementById('loading-months').style.display = 'none';
        document.getElementById('empty-months').classList.remove('d-none');
        document.getElementById('nav-months').style.display     = 'flex';
    }
}

function selectMonth(month, label) {
    state.month = month;
    state.monthLabel = label;
    state.date = null;
    updateBreadcrumb();
    loadDates(state.year, month);
}

async function loadDates(year, month) {
    showView('view-dates');
    document.getElementById('loading-dates').style.display = 'block';
    document.getElementById('grid-dates').style.display    = 'none';
    document.getElementById('empty-dates').classList.add('d-none');
    document.getElementById('nav-dates').style.display     = 'none';

    try {
        const res  = await fetch(`{{ route('history.dates') }}?year=${year}&month=${month}`);
        const json = await res.json();
        document.getElementById('loading-dates').style.display = 'none';
        document.getElementById('nav-dates').style.display     = 'flex';

        if (!json.success || json.data.length === 0) {
            document.getElementById('empty-dates').classList.remove('d-none');
            return;
        }

        // Simpan daftar tanggal untuk navigasi sebelumnya/selanjutnya
        window._dateList = json.data.map(d => d.date);

        const grid = document.getElementById('grid-dates');
        grid.innerHTML = json.data.map(d => `
            <div class="drill-card" onclick="selectDate('${d.date}')">
                <i class="bi bi-calendar-check dc-icon"></i>
                <div class="dc-label">${d.day}</div>
            </div>
        `).join('');
        grid.style.display = 'grid';

    } catch (e) {
        document.getElementById('loading-dates').style.display = 'none';
        document.getElementById('empty-dates').classList.remove('d-none');
        document.getElementById('nav-dates').style.display     = 'flex';
    }
}

function selectDate(date) {
    state.date = date;
    updateBreadcrumb();
    loadRecords(date);
    updateDateNavButtons();
}

/* Navigasi tanggal sebelumnya/selanjutnya di view tabel */
function navigateDate(direction) {
    if (!window._dateList || !state.date) return;
    const idx = window._dateList.indexOf(state.date);
    const newIdx = idx + direction;
    if (newIdx < 0 || newIdx >= window._dateList.length) return;
    selectDate(window._dateList[newIdx]);
}

function updateDateNavButtons() {
    const btnPrev = document.getElementById('btn-prev-date');
    const btnNext = document.getElementById('btn-next-date');
    if (!window._dateList || !state.date) return;

    const idx = window._dateList.indexOf(state.date);
    btnPrev.classList.toggle('disabled', idx <= 0);
    btnNext.classList.toggle('disabled', idx >= window._dateList.length - 1);
}

async function loadRecords(date) {
    showView('view-records');
    document.getElementById('loading-records').style.display = 'block';
    document.getElementById('table-wrapper').style.display   = 'none';
    document.getElementById('empty-records').classList.add('d-none');
    document.getElementById('record-count').textContent = '0 data';

    try {
        const res  = await fetch(`{{ route('history.records') }}?date=${date}`);
        const json = await res.json();
        document.getElementById('loading-records').style.display = 'none';

        if (!json.success || json.data.length === 0) {
            document.getElementById('empty-records').classList.remove('d-none');
            return;
        }

        document.getElementById('record-count').textContent = json.data.length + ' data';

        const tbody = document.getElementById('tbody-records');
        tbody.innerHTML = json.data.map(r => {
            const badgeClass =
                r.status === 'normal'        ? 'badge-normal' :
                r.status === 'bahayakurang'  ? 'badge-bahayakurang' : 'badge-bahayalebih';
            const rowClass =
                r.status === 'bahayakurang'  ? 'row-bahayakurang' :
                r.status === 'bahayalebih'   ? 'row-bahayalebih'  : '';
            const statusLabel =
                r.status === 'normal'        ? 'Normal' :
                r.status === 'bahayakurang'  ? 'Bahaya Kurang' : 'Bahaya Lebih';
            return `
                <tr class="${rowClass}">
                    <td>${r.no}</td>
                    <td><strong>${r.sensor}</strong></td>
                    <td>${r.nilai}</td>
                    <td><span class="${badgeClass}">${statusLabel}</span></td>
                    <td>${r.keterangan}</td>
                    <td class="waktu-cell">${r.waktu}</td>
                </tr>
            `;
        }).join('');

        document.getElementById('table-wrapper').style.display = 'block';

    } catch (e) {
        document.getElementById('loading-records').style.display = 'none';
        document.getElementById('empty-records').classList.remove('d-none');
    }
}
</script>
@endsection