web-petting/templates/admin/schedule.html

{% extends "admin/layout.html" %}
{% let active_page = "schedule" %}

{% block title %}{{ t.schedule_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.schedule_title }}</h1>
    <a href="/admin/schedule/new?lang={{ lang.code() }}" class="button is-primary is-small">+ {{ t.schedule_new }}</a>
</div>

<div class="form-card" id="calendar-wrap">
    <div id="calendar"></div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.17/index.global.min.js"></script>
{% if lang == Lang::Ru %}
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.17/locales/ru.global.min.js"></script>
{% endif %}
<div class="visit-modal-bg" id="visitModal">
    <div class="visit-modal">
        <h3><span class="color-dot" id="vmDot"></span><span id="vmTitle"></span></h3>
        <div class="meta">
            <div id="vmClient"></div>
            <div id="vmAddress"></div>
            <div id="vmAdmin"></div>
            <div id="vmTime"></div>
            <div id="vmNotes" class="mt-2"></div>
        </div>
        <div id="vmStatus" class="mb-4"></div>
        <a id="vmEditLink" href="#" class="button is-primary is-fullwidth">📋 {{ t.schedule_edit_title }}</a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const lang = '{{ lang.code() }}';
    const calEl = document.getElementById('calendar');
    const statusLabels = {
        scheduled: '{{ t.visit_status_scheduled }}',
        completed: '{{ t.visit_status_completed }}',
        cancelled: '{{ t.visit_status_cancelled }}'
    };

    const calendar = new FullCalendar.Calendar(calEl, {
        locale: lang,
        timeZone: '{{ timezone }}',
        initialView: window.innerWidth < 768 ? 'listWeek' : 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next,today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        events: '/admin/schedule/events',
        eventDidMount: function(info) {
            var status = info.event.extendedProps.status;
            if (status === 'completed') info.el.classList.add('ev-completed');
            if (status === 'cancelled') info.el.classList.add('ev-cancelled');
        },
        eventClick: function(info) {
            info.jsEvent.preventDefault();
            const ev = info.event;
            const p = ev.extendedProps;
            document.getElementById('vmDot').style.background = p.client_color || '#7c6ed4';
            document.getElementById('vmTitle').textContent = p.client_name;
            document.getElementById('vmClient').innerHTML = p.client_phone ? ('<a href="tel:' + p.client_phone + '" class="card-link">📞 ' + p.client_phone + '</a>') : '';
            document.getElementById('vmAddress').textContent = p.client_address ? ('📍 ' + p.client_address) : '';
            document.getElementById('vmAdmin').textContent = '👤 ' + p.admin_name;
            document.getElementById('vmTime').textContent = '🕐 ' + p.time_start + ' — ' + p.time_end;
            document.getElementById('vmNotes').textContent = p.notes || '';
            const badge = '<span class="badge badge-visit-' + p.status + '">' + statusLabels[p.status] + '</span>';
            document.getElementById('vmStatus').innerHTML = badge;
            document.getElementById('vmEditLink').href = '/admin/schedule/' + ev.id + '/edit?lang=' + lang;
            document.getElementById('visitModal').classList.add('is-open');
        },
        dayCellClassNames: function(arg) {
            var dow = arg.date.getDay();
            if (dow === 0 || dow === 6) return ['day-weekend'];
            return [];
        },
        height: 'auto',
        navLinks: true,
        nowIndicator: true,
    });
    calendar.render();

    document.getElementById('visitModal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
});

function closeModal() {
    document.getElementById('visitModal').classList.remove('is-open');
}
</script>
{% endblock %}