{% extends "layouts/mobile_base.twig" %}

{% set active_nav = 'schedule' %}
{% set currency = currency_symbol ?? '€' %}

{% block title %}{{ translations.schedule ?? 'Schedule' }}{% endblock %}
{% block page_title %}{{ translations.weekly_schedule ?? 'Weekly Schedule' }}{% endblock %}
{% block page_subtitle %}{{ translations.network_overview ?? 'Network overview' }}{% endblock %}

{% block topbar_actions %}
<div class="d-flex align-items-center gap-1 w-100">
    <button type="button" id="btnPrevWeek"
            class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center flex-shrink-0"
            style="width:32px;height:32px;">
        <i class="bi bi-chevron-left" style="font-size:.8rem;"></i>
    </button>
    <button type="button" id="btnWeekLabel"
            class="btn btn-sm btn-light rounded-pill px-2 flex-grow-1"
            style="font-size:.75rem;font-weight:700;">
        <i class="bi bi-calendar-week me-1"></i><span id="weekLabelText">…</span>
    </button>
    <input type="date" id="weekDatePicker"
           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;">
    <button type="button" id="btnNextWeek"
            class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center flex-shrink-0"
            style="width:32px;height:32px;">
        <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
    </button>
    <button type="button" id="btnToday"
            class="btn btn-sm btn-primary rounded-pill px-2 flex-shrink-0"
            style="font-size:.72rem;font-weight:700;display:none;">
        {{ translations.today ?? 'Today' }}
    </button>
</div>
{% endblock %}

{% block head %}
<style>
    /* ─── TOPBAR: dwurzędowy dla schedule ─── */
    .emp-topbar-inner {
        justify-content: flex-start;
        padding: 8px 0;
        row-gap: 4px;
    }
    /* Tytuł — pełna szerokość, pierwsza linia */
    .emp-topbar-inner > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* Akcje — pełna szerokość, druga linia */
    .emp-topbar-inner > div:last-child {
        flex: 1 1 100%;
        min-width: 0;
    }
    .emp-topbar-inner .emp-title    { font-size: .95rem; }
    .emp-topbar-inner .emp-subtitle { font-size: .78rem; }

    /* ─── HERO SUMMARY ─── */
    .sched-hero {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-radius: 20px; color: #fff;
        padding: 16px 18px; margin-bottom: 12px;
        position: relative; overflow: hidden;
    }
    .sched-hero::before {
        content:''; position:absolute; top:-40px; right:-40px;
        width:160px; height:160px; background:rgba(255,255,255,.07); border-radius:50%;
    }
    .hero-kpi-grid {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 8px; margin-top: 12px;
    }
    .hero-kpi {
        background: rgba(255,255,255,.12); border-radius: 12px; padding: 9px 10px;
        text-align: center;
    }
    .hero-kpi-val { font-size: 1.2rem; font-weight: 900; line-height:1; }
    .hero-kpi-lbl { font-size: .6rem; opacity: .7; text-transform: uppercase; letter-spacing:.05em; margin-top:2px; }

    /* ─── ALERT BANNER ─── */
    .alert-banner {
        border-radius: 14px; padding: 10px 14px; margin-bottom: 10px;
        display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600;
    }
    .alert-shortage { background: #fee2e2; color: #991b1b; }
    .alert-warning  { background: #fef3c7; color: #92400e; }

    /* ─── NETWORK BAR CHART ─── */
    .net-chart-card {
        background:#fff; border-radius:16px; padding:14px 16px;
        margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    .net-chart-title {
        font-size:.7rem; font-weight:700; text-transform:uppercase;
        letter-spacing:.07em; color:#6c757d; margin-bottom:10px;
        display:flex; justify-content:space-between;
    }
    .net-bars { display:flex; gap:4px; align-items:flex-end; height:64px; }
    .net-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
    .net-bar {
        width:100%; border-radius:4px 4px 0 0; min-height:4px;
        transition: height .4s ease;
        background: linear-gradient(180deg,#6a11cb,#2575fc);
    }
    .net-bar.today-bar { background: linear-gradient(180deg,#f7971e,#ffd200); }
    .net-bar-lbl { font-size:.58rem; color:#adb5bd; text-transform:uppercase; font-weight:700; }
    .net-bar-val { font-size:.62rem; color:#6c757d; font-weight:700; }

    /* ─── SEKCJA / TYTUŁ ─── */
    .section-title {
        font-size:.72rem; font-weight:700; text-transform:uppercase;
        letter-spacing:.08em; color:#6c757d; padding:10px 4px 6px;
        display:flex; justify-content:space-between; align-items:center;
    }

    /* ─── SHOP SCHEDULE CARD ─── */
    .shop-sched-card {
        background:#fff; border-radius:16px; margin-bottom:10px;
        box-shadow:0 2px 8px rgba(0,0,0,.05); overflow:hidden;
    }
    .ssc-header {
        display:flex; align-items:center; gap:10px;
        padding:12px 14px 10px; border-bottom:1px solid #f2f4f8;
    }
    .ssc-shop-name { font-size:.9rem; font-weight:700; }
    .ssc-shop-city { font-size:.68rem; color:#6c757d; }
    .ssc-week-stats {
        margin-left:auto; text-align:right; flex-shrink:0;
    }
    .ssc-week-hours { font-size:.88rem; font-weight:800; color:#435ebe; }
    .ssc-week-sub   { font-size:.62rem; color:#adb5bd; }

    /* ─── SIATKA 7 DNI ─── */
    .days-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
    .day-cell {
        padding: 8px 4px; text-align: center;
        border-right: 1px solid #f2f4f8; cursor:pointer;
        transition: background .15s;
        position: relative;
        min-height: 70px;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        gap: 2px;
    }
    .day-cell:last-child { border-right: none; }
    .day-cell:active { background: #f0f4ff; }

    /* Weekend highlight */
    .day-cell.weekend { background: #fafafa; }
    .day-cell.today-col { background: #f0f4ff; }

    .day-name {
        font-size: .58rem; font-weight: 700; text-transform: uppercase;
        letter-spacing:.04em; color: #adb5bd; margin-bottom: 1px;
    }
    .day-date {
        font-size: .65rem; font-weight: 700; color: #6c757d;
    }
    .day-cell.today-col .day-date { color: #435ebe; }

    /* Bubble z liczbą pracowników */
    .emp-bubble {
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .75rem; font-weight: 900; margin: 4px auto 0;
        transition: transform .15s;
        flex-shrink:0;
    }
    .emp-bubble:active { transform: scale(.9); }

    .day-hours {
        font-size: .58rem; color: #adb5bd; font-weight:600;
        white-space: nowrap;
    }

    /* ─── BOTTOM SHEET (detal dnia) ─── */
    .bottom-sheet-overlay {
        position:fixed; inset:0; background:rgba(0,0,0,.4);
        z-index:1000; opacity:0; pointer-events:none;
        transition: opacity .25s;
    }
    .bottom-sheet-overlay.active { opacity:1; pointer-events:all; }

    .bottom-sheet {
        position:fixed; left:0; right:0; bottom:0;
        background:#fff; border-radius:20px 20px 0 0;
        z-index:1001; padding:0 0 env(safe-area-inset-bottom,16px);
        transform:translateY(100%);
        transition:transform .3s cubic-bezier(.32,.72,0,1);
        max-height:80vh; overflow-y:auto;
    }
    .bottom-sheet.active { transform:translateY(0); }

    .bs-handle {
        width:40px; height:4px; border-radius:2px; background:#e2e8f0;
        margin:12px auto 0;
    }
    .bs-header {
        padding:14px 18px 10px;
        border-bottom:1px solid #f2f4f8;
        display:flex; align-items:center; gap:8px;
    }
    .bs-title { font-size:1rem; font-weight:800; }
    .bs-sub   { font-size:.72rem; color:#6c757d; margin-top:1px; }
    .bs-close {
        margin-left:auto; width:32px; height:32px; border-radius:50%;
        background:#f0f0f5; border:none; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        font-size:.9rem; color:#6c757d; flex-shrink:0;
    }
    .bs-body { padding:14px 18px; }

    .employee-row {
        display:flex; align-items:center; gap:10px;
        padding:9px 0; border-bottom:1px solid #f8f9fa;
    }
    .employee-row:last-child { border-bottom:none; }
    .emp-avatar {
        width:34px; height:34px; border-radius:10px;
        background:linear-gradient(135deg,#6a11cb,#2575fc);
        display:flex; align-items:center; justify-content:center;
        color:#fff; font-weight:800; font-size:.78rem; flex-shrink:0;
    }
    .emp-name   { font-size:.85rem; font-weight:700; }
    .emp-hours  { font-size:.7rem; color:#6c757d; }
    .emp-cost   { margin-left:auto; font-size:.8rem; font-weight:700; color:#435ebe; flex-shrink:0; }

    .bs-empty { text-align:center; padding:30px; color:#adb5bd; font-size:.85rem; }
    .bs-spinner { text-align:center; padding:24px; color:#6c757d; }

    /* ─── EMPTY STATE ─── */
    .empty-state { text-align:center; padding:40px 20px; color:#adb5bd; }
    .empty-state i { font-size:2.5rem; display:block; margin-bottom:8px; }
</style>
{% endblock %}

{% block content %}

{# ── SKELETON ── #}
<div id="sched-skeleton">
    <div class="skeleton-hero" style="min-height:140px;"></div>
    <div class="skeleton-card" style="min-height:90px;margin-bottom:10px;">
        <div class="skeleton-line" style="width:40%;height:12px;"></div>
        <div class="skeleton-line" style="height:60px;border-radius:8px;"></div>
    </div>
    <div class="skeleton-card" style="min-height:110px;margin-bottom:10px;">
        <div class="skeleton-line" style="width:50%;height:12px;"></div>
        <div class="skeleton-line" style="height:70px;border-radius:8px;"></div>
    </div>
    <div class="skeleton-card" style="min-height:110px;">
        <div class="skeleton-line" style="width:50%;height:12px;"></div>
        <div class="skeleton-line" style="height:70px;border-radius:8px;"></div>
    </div>
</div>

{# ── TREŚĆ ── #}
<div id="sched-content" style="display:none;" class="page-content-loaded"></div>

{# ── BOTTOM SHEET: detal dnia ── #}
<div class="bottom-sheet-overlay" id="bsOverlay"></div>
<div class="bottom-sheet" id="bottomSheet" role="dialog" aria-modal="true">
    <div class="bs-handle"></div>
    <div class="bs-header">
        <div>
            <div class="bs-title" id="bsTitle">…</div>
            <div class="bs-sub"  id="bsSub">…</div>
        </div>
        <button class="bs-close" id="bsClose" aria-label="{{ translations.close ?? 'Close' }}"><i class="bi bi-x"></i></button>
    </div>
    <div class="bs-body" id="bsBody">
        <div class="bs-spinner"><i class="bi bi-arrow-repeat" style="animation:spin 1s linear infinite;display:inline-block;"></i> {{ translations.loading ?? 'Loading\u2026' }}</div>
    </div>
</div>

<style>@keyframes spin { to { transform:rotate(360deg); } }</style>

{% endblock %}

{% block scripts %}
<script>
(function () {
    const ROOT     = window.__ownerRoot || '';
    const currency = {{ currency | json_encode | raw }};
    const initWeek = {{ week | json_encode | raw }};
    const today    = new Date().toISOString().slice(0, 10);
    const langCode = {{ (lang_code ?? 'en') | json_encode | raw }};
    const TRANS    = {{ translations | json_encode | raw }};
    const DAY_NAMES = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
    const DAY_NAMES_FULL = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];

    let currentWeek = initWeek;

    // ── Helpers ──
    function mondayOf(dateStr) {
        const d   = new Date(dateStr + 'T00:00:00');
        const dow = d.getDay() === 0 ? 7 : d.getDay(); // 1=Mon..7=Sun
        d.setDate(d.getDate() - (dow - 1));
        return d.toISOString().slice(0, 10);
    }

    function addDays(dateStr, n) {
        const d = new Date(dateStr + 'T00:00:00');
        d.setDate(d.getDate() + n);
        return d.toISOString().slice(0, 10);
    }

    function fmtDate(dateStr) {
        const [y, m, d] = dateStr.split('-');
        return `${d}.${m}`;
    }

    function fmtMonth(dateStr) {
        const d = new Date(dateStr + 'T00:00:00');
        return d.toLocaleDateString('pl', { month: 'long', year: 'numeric' });
    }

    function fmt(n, dec = 0) {
        return parseFloat(n || 0).toLocaleString(undefined, {
            minimumFractionDigits: dec,
            maximumFractionDigits: dec,
        });
    }

    function getInitials(name) {
        return (name || '?').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
    }

    // ── Nawigacja tygodniami ──
    function updateWeekLabel(weekStr) {
        const end = addDays(weekStr, 6);
        document.getElementById('weekLabelText').textContent = `${fmtDate(weekStr)}–${fmtDate(end)}`;
        const todayMon = mondayOf(today);
        document.getElementById('btnToday').style.display = weekStr !== todayMon ? '' : 'none';
    }

    function loadWeek(weekStr) {
        currentWeek = weekStr;
        updateWeekLabel(weekStr);
        renderSkeleton();

        OwnerAjax.load({
            endpoint: '/owner/network/schedule/weekly',
            params:   { week: weekStr },
            skeleton: '#sched-skeleton',
            target:   '#sched-content',
            onSuccess: renderSchedule,
        });
    }

    function renderSkeleton() {
        document.getElementById('sched-skeleton').style.display = '';
        document.getElementById('sched-content').style.display  = 'none';
    }

    // ── Render główny ──
    function renderSchedule(data) {
        const summary = data.summary || {};
        const shops   = data.shops   || [];
        const network = data.network || [];
        const days    = data.days    || [];

        let html = `
        <div class="sched-hero">
            <div style="font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">
                <i class="bi bi-calendar-week me-1"></i>${TRANS.week_summary ?? 'Week summary'} · ${TRANS.network_overview ?? 'network'}
            </div>
            <div style="font-size:1.6rem;font-weight:900;letter-spacing:-.02em;line-height:1;">
                ${fmt(summary.total_hours, 1)} <span style="font-size:.9rem;opacity:.6;font-weight:600;">${TRANS.hours_planned ?? 'h planned'}</span>
            </div>
            <div class="hero-kpi-grid">
                <div class="hero-kpi">
                    <div class="hero-kpi-val">${summary.shops_count || 0}</div>
                    <div class="hero-kpi-lbl">${TRANS.shops ?? 'shops'}</div>
                </div>
                <div class="hero-kpi">
                    <div class="hero-kpi-val">${fmt(summary.total_cost, 0)} ${currency}</div>
                    <div class="hero-kpi-lbl">${TRANS.planned_cost ?? 'planned cost'}</div>
                </div>
                <div class="hero-kpi">
                    <div class="hero-kpi-val">${summary.max_day_employees || 0}</div>
                    <div class="hero-kpi-lbl">${TRANS.peak_headcount ?? 'peak headcount'}</div>
                </div>
            </div>
        </div>`;

        // ── WYKRES SIECI (słupki) ──
        const maxEmp = Math.max(...network.map(n => n.employee_count), 1);
        html += `
        <div class="net-chart-card">
            <div class="net-chart-title">
                <span><i class="bi bi-people me-1"></i>${TRANS.network_headcount_per_day ?? 'Network headcount per day'}</span>
                <span style="font-weight:400;">${TRANS.employees_scheduled ?? 'employees scheduled'}</span>
            </div>
            <div class="net-bars mt-4">`;

        network.forEach((n, i) => {
            const barH    = Math.max(4, Math.round((n.employee_count / maxEmp) * 56));
            const isToday = n.date === today;
            const dow     = i; // 0=Mon..6=Sun
            const isWknd  = dow >= 5;
            html += `
                <div class="net-bar-col">
                    <div class="net-bar-val" style="font-size:.62rem;color:${n.employee_count===0?'#e2e8f0':'#6c757d'}">${n.employee_count || '–'}</div>
                    <div class="net-bar ${isToday ? 'today-bar' : ''}" style="height:${barH}px;"></div>
                    <div class="net-bar-lbl" style="color:${isWknd?'#f59e0b':(isToday?'#435ebe':'#adb5bd')}">${DAY_NAMES[i]}</div>
                </div>`;
        });

        html += `</div>
            <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:.62rem;color:#adb5bd;">
                <span>${fmtDate(days[0] || '')} — ${fmtDate(days[6] || '')}</span>
                <span>${TRANS.total ?? 'Total'}: ${fmt(summary.total_hours, 1)}h · ${fmt(summary.total_cost, 0)} ${currency}</span>
            </div>
        </div>`;

        // ── SIATKA PER SKLEP ──
        html += `<div class="section-title">
            <span><i class="bi bi-shop me-1"></i>${TRANS.shops_schedule ?? 'Shops schedule'}</span>
            <span style="font-weight:400;color:#adb5bd;">${shops.length} ${TRANS.shops ?? 'shops'}</span>
        </div>`;

        shops.forEach(shop => {
            html += `
            <div class="shop-sched-card">
                <div class="ssc-header">
                    <div>
                        <div class="ssc-shop-name">${shop.shop_name}</div>
                        <div class="ssc-shop-city"><i class="bi bi-geo-alt me-1"></i>${shop.shop_city}</div>
                    </div>
                    <div class="ssc-week-stats">
                        <div class="ssc-week-hours">${fmt(shop.week_hours, 1)}h</div>
                        <div class="ssc-week-sub">${shop.week_shifts} ${TRANS.shifts ?? 'shifts'}</div>
                    </div>
                </div>
                <div class="days-grid">`;

            shop.days.forEach((cell, i) => {
                const isToday = cell.date === today;
                const isWknd  = i >= 5;
                const hasStaff = cell.employee_count > 0;
                const colCls  = `${isWknd ? 'weekend' : ''} ${isToday ? 'today-col' : ''}`;

                html += `
                <div class="day-cell ${colCls}"
                     onclick="openDayDetail(${shop.shop_id}, '${cell.date}', '${shop.shop_name}')">
                    <div class="day-name" style="${isWknd ? 'color:#f59e0b' : ''}">${DAY_NAMES[i]}</div>
                    <div class="day-date">${fmtDate(cell.date)}</div>
                    <div class="emp-bubble" style="${hasStaff ? 'background:#e0e7ff;color:#3730a3;' : 'background:#f0f0f5;color:#adb5bd;'}">
                        ${cell.employee_count > 0 ? cell.employee_count : '–'}
                    </div>
                    ${cell.total_hours > 0 ? `<div class="day-hours">${fmt(cell.total_hours, 1)}h</div>` : ''}
                </div>`;
            });

            html += `</div></div>`;
        });

        if (shops.length === 0) {
            html += `<div class="empty-state"><i class="bi bi-calendar-x"></i>${TRANS.no_schedule_for_week ?? 'No schedule data for this week.'}</div>`;
        }

        document.getElementById('sched-content').innerHTML = html;
    }

    // ── BOTTOM SHEET: detal dnia ──
    function openDayDetail(shopId, date, shopName) {
        const bs      = document.getElementById('bottomSheet');
        const overlay = document.getElementById('bsOverlay');
        const d       = new Date(date + 'T00:00:00');
        const dayName = d.toLocaleDateString(langCode, { weekday: 'long', day: 'numeric', month: 'long' });

        document.getElementById('bsTitle').textContent = shopName;
        document.getElementById('bsSub').textContent   = dayName;
        document.getElementById('bsBody').innerHTML    = `<div class="bs-spinner"><i class="bi bi-arrow-repeat" style="animation:spin 1s linear infinite;display:inline-block;"></i> ${TRANS.loading ?? 'Loading\u2026'}</div>`;

        bs.classList.add('active');
        overlay.classList.add('active');
        document.body.style.overflow = 'hidden';

        OwnerAjax.load({
            endpoint: `/shops/${shopId}/owner/schedule/day`,
            params:   { date },
            skeleton: null,
            target:   null,
            onSuccess: (data) => renderDayDetail(data),
            onError:   (msg)  => {
                document.getElementById('bsBody').innerHTML = `<div class="bs-empty"><i class="bi bi-exclamation-triangle me-1"></i>${msg}</div>`;
            },
        });
    }

    function renderDayDetail(data) {
        const employees = data.employees || [];
        const body      = document.getElementById('bsBody');

        if (employees.length === 0) {
            body.innerHTML = `<div class="bs-empty"><i class="bi bi-calendar-x" style="font-size:2rem;display:block;margin-bottom:8px;"></i>${TRANS.no_schedule_for_day ?? 'No schedule for this day.'}</div>`;
            return;
        }

        let html = '';
        employees.forEach(e => {
            const initials = getInitials(e.display_name);
            html += `
            <div class="employee-row">
                <div class="emp-avatar">${initials}</div>
                <div>
                    <div class="emp-name">${e.display_name}</div>
                    <div class="emp-hours"><i class="bi bi-clock me-1"></i>${e.start_hour.slice(0,5)} – ${e.end_hour.slice(0,5)} &nbsp;·&nbsp; ${fmt(e.hours, 1)}h</div>
                </div>
                ${e.cost > 0 ? `<div class="emp-cost">${fmt(e.cost, 2)} ${currency}</div>` : ''}
            </div>`;
        });

        // Podsumowanie
        html += `
        <div style="margin-top:12px;padding-top:10px;border-top:1px solid #f2f4f8;display:flex;justify-content:space-between;align-items:center;">
            <div style="font-size:.78rem;color:#6c757d;">${employees.length} ${TRANS.employees ?? 'employees'} · ${fmt(data.total_hours, 1)}h ${TRANS.total ?? 'total'}</div>
            ${data.total_cost > 0 ? `<div style="font-size:.88rem;font-weight:800;color:#435ebe;">${fmt(data.total_cost, 2)} ${currency}</div>` : ''}
        </div>`;

        body.innerHTML = html;
    }

    function closeDayDetail() {
        document.getElementById('bottomSheet').classList.remove('active');
        document.getElementById('bsOverlay').classList.remove('active');
        document.body.style.overflow = '';
    }

    // ── Eventy ──
    document.getElementById('bsClose').addEventListener('click', closeDayDetail);
    document.getElementById('bsOverlay').addEventListener('click', closeDayDetail);

    document.getElementById('btnPrevWeek').addEventListener('click', () => {
        loadWeek(addDays(currentWeek, -7));
    });
    document.getElementById('btnNextWeek').addEventListener('click', () => {
        loadWeek(addDays(currentWeek, 7));
    });
    document.getElementById('btnToday').addEventListener('click', () => {
        loadWeek(mondayOf(today));
    });
    document.getElementById('btnWeekLabel').addEventListener('click', () => {
        const picker = document.getElementById('weekDatePicker');
        picker.value = currentWeek;
        picker.showPicker();
    });
    document.getElementById('weekDatePicker').addEventListener('change', function () {
        loadWeek(mondayOf(this.value));
    });

    // Swipe do nawigacji tygodniami
    let touchStartX = 0;
    document.getElementById('sched-content').addEventListener('touchstart', e => {
        touchStartX = e.touches[0].clientX;
    }, { passive: true });
    document.getElementById('sched-content').addEventListener('touchend', e => {
        const diff = touchStartX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 60) {
            loadWeek(addDays(currentWeek, diff > 0 ? 7 : -7));
        }
    }, { passive: true });

    // ── Start ──
    loadWeek(currentWeek);
    window.openDayDetail = openDayDetail;
})();
</script>
{% endblock %}