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

{% block title %}{{ translations.meetings_overview }}{% endblock %}

{% block head %}
    {# FullCalendar CDN #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css">
    <style>
        /* ── Kalendarz – kompaktowy ─────────────────────────────── */
        .fc .fc-toolbar-title   { font-size: .95rem !important; }
        .fc .fc-button          { padding: .2rem .55rem; font-size: .78rem; }
        .fc .fc-daygrid-day     { min-height: 48px !important; }
        .fc-event               { font-size: .7rem; padding: 1px 3px; }
        .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .6rem; }

        /* ── Filtry tabeli ──────────────────────────────────────── */
        .tbl-filters .form-select { font-size: .8rem; min-width: 120px; max-width: 165px; }

        /* ── Tabela spotkań ─────────────────────────────────────── */
        #meetingsTable          { font-size: .82rem; }
        #meetingsTable thead th {
            font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
            color: #6c757d; font-weight: 600; white-space: nowrap; border-top: none;
        }
        #meetingsTable td       { vertical-align: middle; }
        .meeting-title-cell     { font-weight: 600; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .meeting-sub            { font-size: .71rem; color: #8a96a3; margin-top: 1px; }
        .pill                   {
            display: inline-flex; align-items: center; gap: .22rem;
            font-size: .7rem; padding: .15rem .5rem; border-radius: 2rem;
            white-space: nowrap; line-height: 1.4;
        }

        /* ── Modal ─ profesjonalny ──────────────────────────────── */
        #meetingModal .modal-header {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: #fff; border-radius: .5rem .5rem 0 0; padding: 1rem 1.5rem;
        }
        #meetingModal .modal-header .btn-close { filter: invert(1) brightness(2); }
        #meetingModal .modal-title  { font-weight: 600; letter-spacing: .02em; }
        #meetingModal .modal-footer { background: #f8fafc; border-top: 1px solid #e9ecef; }
        .msect {
            background: #f8fafc; border: 1px solid #e9ecef;
            border-radius: .55rem; padding: 1rem 1.25rem; margin-bottom: .85rem;
        }
        .msect-hdr {
            font-size: .7rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .07em; color: #6c757d;
            display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem;
        }
        #meetingModal .form-label   { font-size: .81rem; font-weight: 600; color: #495057; margin-bottom: .28rem; }
        #meetingModal .form-control,
        #meetingModal .form-select  { font-size: .84rem; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.meetings_overview }}</h3>
        <p class="text-subtitle text-muted">{{ translations.meetings_overview_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">
                    <i class="bi bi-calendar3 me-2"></i>{{ translations.meetings_overview }}
                </h4>
                <button class="btn btn-success btn-sm" id="btnAddMeeting">
                    <i class="bi bi-plus-circle me-1"></i>{{ translations.add_meeting }}
                </button>
            </div>
            <div class="card-body py-3">
                <div id="meetingCalendar"></div>
            </div>
        </div>
    </div>
</div>

{# ─── Tabela spotkań ─── #}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h4 class="card-title mb-0">
                    <i class="bi bi-list-ul me-2"></i>{{ translations.meetings_overview }}
                </h4>
                {# ── Filtry ── #}
                <div class="d-flex flex-wrap gap-2 tbl-filters align-items-center">
                    <select class="form-select form-select-sm" id="filterType">
                        <option value="">{{ translations.filter_type_all }}</option>
                        <option value="individual">{{ translations.type_individual }}</option>
                        <option value="group">{{ translations.type_group }}</option>
                    </select>
                    <select class="form-select form-select-sm" id="filterShop">
                        <option value="">{{ translations.filter_shop_all }}</option>
                    </select>
                    <select class="form-select form-select-sm" id="filterStatus">
                        <option value="active" selected>{{ translations.status_active }}</option>
                        <option value="">{{ translations.filter_status_all }}</option>
                        <option value="cancelled">{{ translations.status_cancelled }}</option>
                    </select>
                </div>
            </div>
            <div class="card-body p-0">
                {% if meetings is not empty %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="meetingsTable">
                        <thead class="table-light">
                        <tr>
                            <th>{{ translations.meeting }}</th>
                            <th>{{ translations.date_and_time }}</th>
                            <th>{{ translations.type }}</th>
                            <th>{{ translations.shop }}</th>
                            <th>{{ translations.participants }}</th>
                            <th>{{ translations.status }}</th>
                            <th class="text-end">{{ translations.actions }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for meeting in meetings %}
                            {% set participants = meeting.getParticipants() %}
                            {% set pCount = participants|length %}
                            <tr class="meeting-row{% if meeting.isCancelled() %} text-muted{% endif %}"
                                data-type="{{ meeting.getType() }}"
                                data-shop="{{ meeting.getShopName()|default('') }}"
                                data-status="{{ meeting.isActive() ? 'active' : 'cancelled' }}">

                                {# Tytuł + lokalizacja #}
                                <td style="max-width:220px">
                                    <div class="meeting-title-cell" title="{{ meeting.getTitle() }}">
                                        {% if meeting.isCancelled() %}<s>{{ meeting.getTitle() }}</s>{% else %}{{ meeting.getTitle() }}{% endif %}
                                    </div>
                                    {% if meeting.getFormattedLocation() %}
                                    <div class="meeting-sub">
                                        <i class="bi bi-geo-alt"></i>
                                        {{ meeting.getFormattedLocation() }}
                                        {% if meeting.getLocationComment() %}
                                            <span title="{{ meeting.getLocationComment() }}" style="cursor:help"><i class="bi bi-info-circle ms-1"></i></span>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                </td>

                                {# Data i godzina #}
                                <td class="text-nowrap">
                                    <div class="fw-semibold">{{ meeting.getMeetingDate() }}</div>
                                    <div class="meeting-sub"><i class="bi bi-clock me-1"></i>{{ meeting.getMeetingTime()|slice(0, 5) }}</div>
                                </td>

                                {# Typ #}
                                <td class="text-nowrap">
                                    {% if meeting.getType() == 'individual' %}
                                        <span class="badge bg-info-subtle text-info border border-info-subtle">{{ translations.type_individual }}</span>
                                    {% else %}
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">{{ translations.type_group }}</span>
                                    {% endif %}
                                </td>

                                {# Sklep #}
                                <td class="text-nowrap">
                                    {% if meeting.getShopName() %}
                                        <span class="text-body">{{ meeting.getShopName() }}</span>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>

                                {# Uczestnicy — maks 2 + licznik #}
                                <td>
                                    {% for p in participants %}
                                        {% if loop.index <= 2 %}
                                            {% if p.participant_type == 'OWNER' %}
                                                <span class="pill bg-warning-subtle text-warning-emphasis border border-warning-subtle me-1 mb-1">
                                                    <i class="bi bi-star-fill"></i>{{ p.display_name }}
                                                </span>
                                            {% else %}
                                                <span class="pill bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle me-1 mb-1">
                                                    <i class="bi bi-person-badge"></i>{{ p.display_name }}
                                                </span>
                                            {% endif %}
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endfor %}
                                    {% if pCount > 2 %}
                                        <span class="pill bg-light text-muted border">+{{ pCount - 2 }}</span>
                                    {% endif %}
                                </td>

                                {# Status #}
                                <td class="text-nowrap">
                                    {% if meeting.isActive() %}
                                        <span class="badge bg-success-subtle text-success border border-success-subtle">
                                            <i class="bi bi-circle-fill me-1" style="font-size:.45rem;vertical-align:middle"></i>{{ translations.status_active }}
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
                                            <i class="bi bi-x-circle me-1" style="font-size:.65rem;vertical-align:middle"></i>{{ translations.status_cancelled }}
                                        </span>
                                    {% endif %}
                                </td>

                                {# Akcje #}
                                <td class="text-end text-nowrap">
                                    {% if meeting.isActive() %}
                                        <button class="btn btn-sm btn-outline-secondary btn-edit-meeting"
                                                data-id="{{ meeting.getId() }}" title="{{ translations.edit_meeting }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-info btn-agenda-meeting ms-1"
                                                data-id="{{ meeting.getId() }}"
                                                data-type="{{ meeting.getType() }}"
                                                data-title="{{ meeting.getTitle()|e('html_attr') }}"
                                                title="{{ translations.agenda_tab }}">
                                            <i class="bi bi-list-check"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger btn-cancel-meeting ms-1"
                                                data-id="{{ meeting.getId() }}" title="{{ translations.cancel_meeting }}">
                                            <i class="bi bi-x-circle"></i>
                                        </button>
                                    {% endif %}
                                    {% if meeting.getGoogleCalendarLink() %}
                                        <a href="{{ meeting.getGoogleCalendarLink() }}" target="_blank"
                                           class="btn btn-sm btn-outline-primary ms-1"
                                           title="{{ translations.google_calendar }}">
                                            <i class="bi bi-google"></i>
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="text-center py-4 text-muted d-none" id="noResultsRow">
                    <i class="bi bi-funnel fs-4 d-block mb-1"></i>
                    <small>{{ translations.no_meetings_matching_filters }}</small>
                </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-calendar-x fs-1 text-muted d-block mb-2"></i>
                        <p class="text-muted">{{ translations.no_meetings_found }}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# ─────────────────────────────────────────────────────────────────── #}
{# MODAL — Dodaj / Edytuj spotkanie                                    #}
{# ─────────────────────────────────────────────────────────────────── #}
<div class="modal fade" id="meetingModal" tabindex="-1" aria-labelledby="meetingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header">
                <h5 class="modal-title" id="meetingModalLabel">
                    <i class="bi bi-calendar-plus me-2"></i>{{ translations.add_meeting }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-4 pt-3 pb-2">
                <div id="meetingFormAlerts"></div>
                <form id="meetingForm" novalidate>
                    <input type="hidden" id="meetingId" name="id" value="">

                    {# ── Sekcja: Podstawowe informacje ── #}
                    <div class="msect">
                        <div class="msect-hdr"><i class="bi bi-info-circle text-primary"></i> {{ translations.basic_info }}</div>
                        <div class="mb-3">
                            <label for="meetingTitle" class="form-label">{{ translations.title }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="meetingTitle" name="title"
                                   placeholder="{{ translations.enter_title }}" maxlength="255" required>
                            <div class="invalid-feedback" id="err_title"></div>
                        </div>
                        <div class="row g-3">
                            <div class="col-sm-6 col-lg-3">
                                <label for="meetingDate" class="form-label">{{ translations.date }} <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="meetingDate" name="meeting_date" required>
                                <div class="invalid-feedback" id="err_meeting_date"></div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <label for="meetingTime" class="form-label">{{ translations.time }} <span class="text-danger">*</span></label>
                                <input type="time" class="form-control" id="meetingTime" name="meeting_time" required>
                                <div class="invalid-feedback" id="err_meeting_time"></div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <label for="meetingType" class="form-label">{{ translations.type }} <span class="text-danger">*</span></label>
                                <select class="form-select" id="meetingType" name="type" required>
                                    <option value="">{{ translations.select_placeholder }}</option>
                                    <option value="individual">{{ translations.type_individual }}</option>
                                    <option value="group">{{ translations.type_group }}</option>
                                </select>
                                <div class="invalid-feedback" id="err_type"></div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <label for="meetingDuration" class="form-label">{{ translations.duration_minutes }}</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="meetingDuration" name="duration_minutes"
                                           placeholder="60" min="1" max="480">
                                    <span class="input-group-text text-muted" style="font-size:.78rem">min</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# ── Sekcja: Sklep (warunkowa — individual) ── #}
                    <div class="msect" id="shopRow" style="display:none">
                        <div class="msect-hdr"><i class="bi bi-shop text-success"></i> {{ translations.linked_shop }}</div>
                        <div class="mb-0">
                            <label for="meetingShop" class="form-label">{{ translations.shop }} <span class="text-danger">*</span></label>
                            <select class="form-select" id="meetingShop" name="id_shop">
                                <option value="">{{ translations.select_shop }}</option>
                            </select>
                            <div class="invalid-feedback" id="err_id_shop"></div>
                        </div>
                    </div>

                    {# ── Sekcja: Agenda i link ── #}
                    <div class="msect">
                        <div class="msect-hdr"><i class="bi bi-card-text text-warning"></i> {{ translations.agenda_and_details }}</div>
                        <div class="mb-3">
                            <label for="meetingAgenda" class="form-label">{{ translations.agenda }} <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="meetingAgenda" name="agenda" rows="3"
                                      placeholder="{{ translations.enter_agenda }}" maxlength="255" required></textarea>
                            <div class="d-flex justify-content-between mt-1">
                                <div class="text-danger small" id="err_agenda" style="min-height:1.1rem"></div>
                                <small class="text-muted ms-auto"><span id="agendaCounter">255</span> {{ translations.characters_remaining }}</small>
                            </div>
                        </div>
                        <div class="mb-0">
                            <label for="meetingLink" class="form-label">{{ translations.external_link }}</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-link-45deg text-muted"></i></span>
                                <input type="url" class="form-control" id="meetingLink" name="external_link"
                                       placeholder="{{ translations.enter_external_link }}">
                            </div>
                            <div class="invalid-feedback" id="err_external_link"></div>
                        </div>
                    </div>

                    {# ── Sekcja: Miejsce spotkania ── #}
                    <div class="msect">
                        <div class="msect-hdr"><i class="bi bi-geo-alt text-danger"></i> {{ translations.meeting_location }}</div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-8">
                                <label for="locationStreet" class="form-label">{{ translations.location_street }}</label>
                                <input type="text" class="form-control" id="locationStreet" name="location_street"
                                       placeholder="np. ul. Kwiatowa" maxlength="255">
                            </div>
                            <div class="col-sm-4">
                                <label for="locationNumber" class="form-label">{{ translations.location_number }}</label>
                                <input type="text" class="form-control" id="locationNumber" name="location_number"
                                       placeholder="12A/3" maxlength="20">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-sm-4">
                                <label for="locationZip" class="form-label">{{ translations.location_zip }}</label>
                                <input type="text" class="form-control" id="locationZip" name="location_zip"
                                       placeholder="00-000" maxlength="10">
                            </div>
                            <div class="col-sm-8">
                                <label for="locationCity" class="form-label">{{ translations.location_city }}</label>
                                <input type="text" class="form-control" id="locationCity" name="location_city"
                                       placeholder="np. Warszawa" maxlength="100">
                            </div>
                        </div>
                        <div class="mb-0">
                            <label for="locationComment" class="form-label">{{ translations.location_comment }}</label>
                            <textarea class="form-control" id="locationComment" name="location_comment" rows="2"
                                      placeholder="np. II piętro, sala konferencyjna A"></textarea>
                        </div>
                    </div>

                    {# ── Sekcja: Uczestnicy ── #}
                    <div class="msect">
                        <div class="msect-hdr"><i class="bi bi-people text-info"></i> {{ translations.meeting_participants }}</div>
                        <div class="mb-3">
                            <label class="form-label">{{ translations.add_participant }}</label>
                            <div class="d-flex gap-2 align-items-start">
                                <div class="flex-grow-1">
                                    <select id="participantSelect" class="form-select">
                                        <option value="">{{ translations.select_participant }}</option>
                                        <optgroup label="{{ translations.participant_owner }}" id="optgroupOwner"></optgroup>
                                        <optgroup label="{{ translations.participant_consultant }}" id="optgroupConsultant"></optgroup>
                                    </select>
                                </div>
                                <button class="btn btn-outline-primary flex-shrink-0" type="button" id="btnAddParticipant"
                                        style="height:42px;min-width:42px">
                                    <i class="bi bi-plus-lg"></i>
                                </button>
                            </div>
                            <div class="form-text text-muted mt-1">{{ translations.participants_hint }}</div>
                        </div>
                        <div id="participantsList" class="d-flex flex-wrap gap-2 mb-1"></div>
                        <input type="hidden" id="participantsJson" name="participants_json" value="[]">
                    </div>
                </form>
            </div>
            <div class="modal-footer gap-2">
                <button type="button" class="btn btn-light border" data-bs-dismiss="modal">
                    <i class="bi bi-x me-1"></i>{{ translations.cancel }}
                </button>
                <button type="button" class="btn btn-primary px-4" id="saveMeetingBtn">
                    <i class="bi bi-check-lg me-1"></i>{{ translations.save }}
                </button>
            </div>
        </div>
    </div>
</div>

{# ─────────────────────────────────────────────────────────────────── #}
{# MODAL — Potwierdzenie anulowania                                    #}
{# ─────────────────────────────────────────────────────────────────── #}
<div class="modal fade" id="cancelMeetingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translations.cancel_meeting }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">{{ translations.confirm_cancel }}</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.cancel }}</button>
                <button type="button" class="btn btn-danger" id="confirmCancelBtn">{{ translations.yes_cancel_it }}</button>
            </div>
        </div>
    </div>
</div>

{# ─────────────────────────────────────────────────────────────────── #}
{# MODAL — Agenda spotkania                                             #}
{# ─────────────────────────────────────────────────────────────────── #}
<div class="modal fade" id="agendaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-list-check me-2"></i>{{ translations.agenda_tab }}:
                    <span id="agendaMeetingTitle" class="fw-normal text-muted"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    {# Lewa: przypisane zgłoszenia #}
                    <div class="col-lg-5">
                        <h6 class="text-muted mb-3"><i class="bi bi-pin-angle me-1"></i>{{ translations.agenda_items }}</h6>
                        <div id="agendaCurrentList">
                            <div class="text-center py-4 text-muted" id="agendaEmptyState">
                                <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                {{ translations.agenda_empty }}
                            </div>
                        </div>
                    </div>
                    {# Prawa: picker nowych zgłoszeń #}
                    <div class="col-lg-7">
                        <h6 class="text-muted mb-3"><i class="bi bi-search me-1"></i>{{ translations.agenda_picker_title }}</h6>
                        <div class="row g-2 mb-3">
                            <div class="col-md-8">
                                <input type="text" class="form-control form-control-sm" id="agendaSearch"
                                       placeholder="{{ translations.agenda_picker_search }}">
                            </div>
                            <div class="col-md-4">
                                <select class="form-select form-select-sm" id="agendaAreaFilter">
                                    <option value="">{{ translations.all_areas }}</option>
                                </select>
                            </div>
                        </div>
                        <div id="agendaPickerList" class="overflow-auto" style="max-height:360px;">
                            <div class="text-center py-3 text-muted" id="agendaPickerLoading">
                                <span class="spinner-border spinner-border-sm me-2"></span>{{ translations.loading }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.cancel }}</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script>
(function () {
    const ROOT = '{{ root }}';
    const T = {
        meeting_created:          '{{ translations.meeting_created }}',
        meeting_updated:          '{{ translations.meeting_updated }}',
        meeting_cancelled:        '{{ translations.meeting_cancelled }}',
        error_creating_meeting:   '{{ translations.error_creating_meeting }}',
        error_updating_meeting:   '{{ translations.error_updating_meeting }}',
        error_cancelling_meeting: '{{ translations.error_cancelling_meeting }}',
        error_loading_meeting:    '{{ translations.error_loading_meeting }}',
        add_meeting:              '{{ translations.add_meeting }}',
        edit_meeting:             '{{ translations.edit_meeting }}',
        type_individual:          '{{ translations.type_individual }}',
        type_group:               '{{ translations.type_group }}',
        status_cancelled:         '{{ translations.status_cancelled }}',
        participant_consultant:   '{{ translations.participant_consultant }}',
        participant_owner:        '{{ translations.participant_owner }}',
        select_participant:       '{{ translations.select_participant }}',
        participant_already_added:'{{ translations.participant_already_added }}',
    };

    // ── Dane spotkań z PHP ────────────────────────────────────────────────────
    const meetings = {{ meetings_json | raw }};

    // ── FullCalendar ──────────────────────────────────────────────────────────
    const calendarEl = document.getElementById('meetingCalendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'pl',
        contentHeight: 400,
        aspectRatio: 2,
        headerToolbar: {
            left:   'prev,next today',
            center: 'title',
            right:  'dayGridMonth,timeGridWeek,listMonth'
        },
        events: meetings.map(m => ({
            id:            m.id,
            title:         (m.status === 'cancelled' ? '❌ ' : '') + m.title,
            start:         m.meeting_date + 'T' + m.meeting_time,
            color:         m.status === 'cancelled' ? '#6c757d' : (m.type === 'group' ? '#0d6efd' : '#198754'),
            extendedProps: m,
        })),
        eventClick: function (info) {
            openEditModal(info.event.id, info.event.extendedProps);
        },
    });
    calendar.render();

    // ── Filtrowanie tabeli ────────────────────────────────────────────────────
    const filterType   = document.getElementById('filterType');
    const filterShop   = document.getElementById('filterShop');
    const filterStatus = document.getElementById('filterStatus');
    const noResultsRow = document.getElementById('noResultsRow');

    // Wypełnij select sklep unikalnymi wartościami z wierszy tabeli
    (function buildShopFilter() {
        const shops = new Set();
        document.querySelectorAll('.meeting-row').forEach(r => {
            const s = r.dataset.shop;
            if (s) shops.add(s);
        });
        [...shops].sort().forEach(s => {
            const o = document.createElement('option');
            o.value = s; o.textContent = s;
            filterShop.appendChild(o);
        });
    })();

    function applyFilters() {
        const fType   = filterType.value;
        const fShop   = filterShop.value;
        const fStatus = filterStatus.value;
        let visible = 0;
        document.querySelectorAll('.meeting-row').forEach(row => {
            const matchType   = !fType   || row.dataset.type   === fType;
            const matchShop   = !fShop   || row.dataset.shop   === fShop;
            const matchStatus = !fStatus || row.dataset.status === fStatus;
            const show = matchType && matchShop && matchStatus;
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        if (noResultsRow) noResultsRow.classList.toggle('d-none', visible > 0);
    }

    filterType.addEventListener('change', applyFilters);
    filterShop.addEventListener('change', applyFilters);
    filterStatus.addEventListener('change', applyFilters);
    // Uruchom od razu z domyślnym filtrem "aktywne"
    applyFilters();

    // ── Kandydaci na uczestników (lazy load) ─────────────────────────────────
    let candidatesLoaded = false;
    let candidatesData   = [];

    async function loadCandidates() {
        if (candidatesLoaded) return;
        initParticipantChoices();
        const resp = await fetch(`${ROOT}/ajax/meetings/participant-candidates`);
        const json = await resp.json();
        candidatesData = json.data ?? [];
        rebuildCandidatesSelect();
        candidatesLoaded = true;
    }

    // ── Choices.js ────────────────────────────────────────────────────────────
    let participantChoices = null;

    function initParticipantChoices() {
        if (participantChoices) return;
        participantChoices = new Choices('#participantSelect', {
            searchEnabled:        true,
            searchPlaceholderValue:'{{ translations.search_by_name }}',
            itemSelectText:       '',
            noChoicesText:        '{{ translations.no_results }}',
            noResultsText:        '{{ translations.participant_not_found }}',
            shouldSort:           false,
            placeholder:          true,
            placeholderValue:     T.select_participant,
        });
    }

    function rebuildCandidatesSelect() {
        const owners      = candidatesData.filter(c => c.participant_type === 'OWNER');
        const consultants = candidatesData.filter(c => c.participant_type === 'CONSULTANT');
        const toChoiceItem = c => ({
            value:            String(c.auth_user_id),
            label:            c.display_name ?? '',
            customProperties: { type: c.participant_type, name: c.display_name ?? '' },
        });
        participantChoices.clearChoices();
        participantChoices.setChoices([
            { value: '', label: T.select_participant, placeholder: true, selected: true, disabled: true },
            { label: T.participant_owner,      choices: owners.map(toChoiceItem) },
            { label: T.participant_consultant, choices: consultants.map(toChoiceItem) },
        ]);
    }

    // ── Stan uczestników ──────────────────────────────────────────────────────
    let selectedParticipants = [];

    function renderParticipants() {
        const list = document.getElementById('participantsList');
        list.innerHTML = '';
        selectedParticipants.forEach((p, idx) => {
            const typeLabel  = p.participant_type === 'OWNER' ? T.participant_owner : T.participant_consultant;
            const colorClass = p.participant_type === 'OWNER' ? 'bg-warning text-dark' : 'bg-secondary text-white';
            const icon       = p.participant_type === 'OWNER' ? 'bi-star-fill' : 'bi-person-badge';
            const badge = document.createElement('span');
            badge.className = `badge ${colorClass} d-flex align-items-center gap-1 px-2 py-1`;
            badge.innerHTML = `<i class="bi ${icon}"></i>${p.display_name} <small class="opacity-75">(${typeLabel})</small>
                               <button type="button" class="btn-close btn-close-sm ms-1" aria-label="Usuń"
                                       style="filter:brightness(0.3)" data-idx="${idx}"></button>`;
            badge.querySelector('.btn-close').addEventListener('click', () => {
                selectedParticipants.splice(idx, 1);
                syncParticipantsInput();
                renderParticipants();
            });
            list.appendChild(badge);
        });
        syncParticipantsInput();
    }

    function syncParticipantsInput() {
        document.getElementById('participantsJson').value = JSON.stringify(selectedParticipants);
    }

    document.getElementById('btnAddParticipant').addEventListener('click', () => {
        if (!participantChoices) return;
        const chosen = participantChoices.getValue(true);
        if (!chosen) return;
        const candidate = candidatesData.find(c => String(c.auth_user_id) === String(chosen));
        if (!candidate) return;
        const userId = parseInt(candidate.auth_user_id);
        if (selectedParticipants.some(p => p.auth_user_id === userId)) {
            alert(T.participant_already_added);
            return;
        }
        selectedParticipants.push({
            auth_user_id:     userId,
            participant_type: candidate.participant_type,
            display_name:     candidate.display_name ?? '',
        });
        participantChoices.setChoiceByValue('');
        renderParticipants();
    });

    let shopsLoaded = false;
    async function loadShops() {
        if (shopsLoaded) return;
        const resp = await fetch(`${ROOT}/ajax/meetings/shops`);
        const json = await resp.json();
        const sel  = document.getElementById('meetingShop');
        if (json.data) {
            json.data.forEach(s => {
                const opt = document.createElement('option');
                opt.value       = s.id ?? '';
                opt.textContent = s.name ?? '';
                sel.appendChild(opt);
            });
        }
        shopsLoaded = true;
    }

    // ── Helpers modalu ────────────────────────────────────────────────────────
    function resetForm() {
        document.getElementById('meetingForm').reset();
        document.getElementById('meetingId').value = '';
        document.getElementById('agendaCounter').textContent = '255';
        clearErrors();
        document.getElementById('shopRow').style.display = 'none';
        document.getElementById('meetingModalLabel').innerHTML =
            '<i class="bi bi-calendar-plus me-2"></i>' + T.add_meeting;
        selectedParticipants = [];
        renderParticipants();
        if (participantChoices) participantChoices.setChoiceByValue('');
    }

    document.getElementById('meetingModal').addEventListener('hidden.bs.modal', () => {
        if (participantChoices) {
            participantChoices.destroy();
            participantChoices = null;
            candidatesLoaded   = false;
        }
    });

    function clearErrors() {
        ['title', 'meeting_date', 'meeting_time', 'type', 'agenda', 'external_link', 'id_shop'].forEach(k => {
            const el    = document.getElementById(`err_${k}`);
            const input = document.querySelector(`[name="${k}"]`);
            if (el)    el.textContent = '';
            if (input) input.classList.remove('is-invalid');
        });
        document.getElementById('meetingFormAlerts').innerHTML = '';
    }

    function showErrors(errors) {
        Object.entries(errors).forEach(([k, v]) => {
            const el    = document.getElementById(`err_${k}`);
            const input = document.querySelector(`[name="${k}"]`);
            if (el)    el.textContent = v;
            if (input) input.classList.add('is-invalid');
        });
    }

    // ── Przycisk "Zaplanuj spotkanie" ─────────────────────────────────────────
    document.getElementById('btnAddMeeting').addEventListener('click', () => {
        resetForm();
        loadShops();
        loadCandidates();
        new bootstrap.Modal(document.getElementById('meetingModal')).show();
    });

    // ── Przyciski edycji w tabeli ─────────────────────────────────────────────
    document.querySelectorAll('.btn-edit-meeting').forEach(btn => {
        btn.addEventListener('click', () => openEditModal(btn.dataset.id));
    });

    async function openEditModal(id, prefetched = null) {
        resetForm();
        loadShops();
        loadCandidates();
        document.getElementById('meetingModalLabel').innerHTML =
            '<i class="bi bi-pencil-square me-2"></i>' + T.edit_meeting;

        let m = prefetched;
        if (!m) {
            try {
                const resp = await fetch(`${ROOT}/ajax/meetings/${id}`);
                const json = await resp.json();
                m = json.data;
            } catch (e) {
                alert(T.error_loading_meeting);
                return;
            }
        }

        document.getElementById('meetingId').value       = m.id;
        document.getElementById('meetingTitle').value    = m.title ?? '';
        document.getElementById('meetingDate').value     = m.meeting_date ?? '';
        document.getElementById('meetingTime').value     = (m.meeting_time ?? '').substring(0, 5);
        document.getElementById('meetingType').value     = m.type ?? '';
        document.getElementById('meetingAgenda').value   = m.agenda ?? '';
        document.getElementById('meetingLink').value     = m.external_link ?? '';
        document.getElementById('meetingDuration').value = m.duration_minutes ?? '';

        document.getElementById('locationStreet').value  = m.location_street  ?? '';
        document.getElementById('locationNumber').value  = m.location_number  ?? '';
        document.getElementById('locationZip').value     = m.location_zip     ?? '';
        document.getElementById('locationCity').value    = m.location_city    ?? '';
        document.getElementById('locationComment').value = m.location_comment ?? '';

        document.getElementById('agendaCounter').textContent = 255 - (m.agenda?.length ?? 0);

        if (m.type === 'individual') {
            document.getElementById('shopRow').style.display = '';
            setTimeout(() => { document.getElementById('meetingShop').value = m.id_shop ?? ''; }, 250);
        }

        if (Array.isArray(m.participants)) {
            selectedParticipants = m.participants.map(p => ({
                auth_user_id:     parseInt(p.auth_user_id),
                participant_type: p.participant_type,
                display_name:     p.display_name ?? '',
            }));
            renderParticipants();
        }

        new bootstrap.Modal(document.getElementById('meetingModal')).show();
    }

    // ── Typ → pokaż / ukryj sklep ─────────────────────────────────────────────
    document.getElementById('meetingType').addEventListener('change', function () {
        const shopRow = document.getElementById('shopRow');
        if (this.value === 'individual') {
            shopRow.style.display = '';
            loadShops();
        } else {
            shopRow.style.display = 'none';
            document.getElementById('meetingShop').value = '';
        }
    });

    // ── Licznik agendy ────────────────────────────────────────────────────────
    document.getElementById('meetingAgenda').addEventListener('input', function () {
        document.getElementById('agendaCounter').textContent = 255 - this.value.length;
    });

    // ── Zapis ─────────────────────────────────────────────────────────────────
    document.getElementById('saveMeetingBtn').addEventListener('click', async () => {
        clearErrors();
        const id     = document.getElementById('meetingId').value;
        const form   = document.getElementById('meetingForm');
        const data   = Object.fromEntries(new FormData(form).entries());
        data.participants = selectedParticipants;
        delete data.participants_json;
        const url    = id ? `${ROOT}/ajax/meetings/${id}` : `${ROOT}/ajax/meetings`;
        const method = id ? 'PATCH' : 'POST';

        try {
            const resp = await fetch(url, {
                method,
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify(data),
            });
            const json = await resp.json();

            if (!resp.ok || json.success === false) {
                if (json.errors) { showErrors(json.errors); return; }
                showAlert('danger', id ? T.error_updating_meeting : T.error_creating_meeting);
                return;
            }

            bootstrap.Modal.getInstance(document.getElementById('meetingModal'))?.hide();
            showToast(id ? T.meeting_updated : T.meeting_created, 'success');
            setTimeout(() => location.reload(), 1200);
        } catch (e) {
            showAlert('danger', id ? T.error_updating_meeting : T.error_creating_meeting);
        }
    });

    // ── Anulowanie ────────────────────────────────────────────────────────────
    let cancelTargetId = null;

    document.querySelectorAll('.btn-cancel-meeting').forEach(btn => {
        btn.addEventListener('click', () => {
            cancelTargetId = btn.dataset.id;
            new bootstrap.Modal(document.getElementById('cancelMeetingModal')).show();
        });
    });

    document.getElementById('confirmCancelBtn').addEventListener('click', async () => {
        if (!cancelTargetId) return;
        try {
            const resp = await fetch(`${ROOT}/ajax/meetings/${cancelTargetId}/cancel`, { method: 'PATCH' });
            bootstrap.Modal.getInstance(document.getElementById('cancelMeetingModal'))?.hide();
            if (resp.ok) {
                showToast(T.meeting_cancelled, 'success');
                setTimeout(() => location.reload(), 1200);
            } else {
                showToast(T.error_cancelling_meeting, 'danger');
            }
        } catch (e) {
            showToast(T.error_cancelling_meeting, 'danger');
        }
    });

    // ── Agenda ────────────────────────────────────────────────────────────────
    let agendaMeetingId   = null;
    let agendaPickerItems = [];
    let agendaAssigned    = new Set();

    document.querySelectorAll('.btn-agenda-meeting').forEach(btn => {
        btn.addEventListener('click', async () => {
            agendaMeetingId = btn.dataset.id;
            const title     = btn.dataset.title;
            document.getElementById('agendaMeetingTitle').textContent = title;
            document.getElementById('agendaSearch').value    = '';
            document.getElementById('agendaCurrentList').innerHTML =
                '<div class="text-center py-4 text-muted" id="agendaEmptyState">' +
                '<i class="bi bi-inbox fs-3 d-block mb-2"></i>' +
                '{{ translations.agenda_empty }}</div>';
            document.getElementById('agendaPickerList').innerHTML =
                '<div class="text-center py-3 text-muted" id="agendaPickerLoading">' +
                '<span class="spinner-border spinner-border-sm me-2"></span>{{ translations.loading }}</div>';
            new bootstrap.Modal(document.getElementById('agendaModal')).show();
            await loadAgendaData();
        });
    });

    async function loadAgendaData(q = '', areaKey = '') {
        try {
            const [agendaResp, pickerResp] = await Promise.all([
                fetch(`${ROOT}/ajax/meetings/${agendaMeetingId}/agenda`),
                fetch(`${ROOT}/ajax/meetings/${agendaMeetingId}/assignable-cases?q=${encodeURIComponent(q)}&area_key=${encodeURIComponent(areaKey)}`),
            ]);
            const agendaJson  = await agendaResp.json();
            const pickerJson  = await pickerResp.json();

            const assignedItems = agendaJson.data ?? [];
            agendaAssigned = new Set(assignedItems.map(a => parseInt(a.id)));
            agendaPickerItems  = pickerJson.data ?? [];

            renderAgendaCurrent(assignedItems);
            renderAgendaPicker(agendaPickerItems);
            rebuildAreaFilter(agendaPickerItems);
        } catch (e) {
            showToast('{{ translations.error_loading_agenda }}', 'danger');
        }
    }

    function renderAgendaCurrent(items) {
        const container = document.getElementById('agendaCurrentList');
        if (!items.length) {
            container.innerHTML =
                '<div class="text-center py-4 text-muted" id="agendaEmptyState">' +
                '<i class="bi bi-inbox fs-3 d-block mb-2"></i>' +
                '{{ translations.agenda_empty }}</div>';
            return;
        }
        container.innerHTML = items.map(c => `
            <div class="d-flex align-items-start border rounded p-2 mb-2 bg-light">
                <div class="flex-grow-1">
                    <div class="fw-semibold text-sm">${escHtml(c.title ?? '—')}</div>
                    <div class="text-muted small">${escHtml(c.ref ?? '')}
                        ${c.shop_name ? ' · ' + escHtml(c.shop_name) : ''}
                        · <span class="badge bg-secondary">${escHtml(c.area_key ?? '')}</span>
                    </div>
                </div>
                <button class="btn btn-sm btn-outline-danger ms-2 btn-unassign-case flex-shrink-0"
                        data-case-id="${c.id}"
                        title="{{ translations.remove_from_agenda }}">
                    <i class="bi bi-dash-circle"></i>
                </button>
            </div>
        `).join('');

        container.querySelectorAll('.btn-unassign-case').forEach(btn => {
            btn.addEventListener('click', () => assignCaseToMeeting(parseInt(btn.dataset.caseId), null));
        });
    }

    function renderAgendaPicker(items) {
        const container = document.getElementById('agendaPickerList');
        const q         = document.getElementById('agendaSearch').value.toLowerCase();
        const area      = document.getElementById('agendaAreaFilter').value;

        const filtered = items.filter(c => {
            const matchQ = !q || (c.title ?? '').toLowerCase().includes(q) || (c.ref ?? '').toLowerCase().includes(q);
            const matchA = !area || c.area_key === area;
            return matchQ && matchA;
        });

        if (!filtered.length) {
            container.innerHTML = '<div class="text-center py-3 text-muted"><i class="bi bi-search"></i> {{ translations.no_matching_cases }}</div>';
            return;
        }

        container.innerHTML = filtered.map(c => {
            const isAssigned   = agendaAssigned.has(parseInt(c.id));
            const meetingBadge = c.current_meeting_title && !isAssigned
                ? `<span class="badge bg-warning text-dark ms-1" title="{{ translations.current_meeting }}">${escHtml(c.current_meeting_title)}</span>`
                : '';
            const btnClass  = isAssigned ? 'btn-success' : 'btn-outline-primary';
            const btnIcon   = isAssigned ? 'bi-check-circle-fill' : 'bi-plus-circle';
            const btnTitle  = isAssigned ? '{{ translations.remove_from_agenda }}' : '{{ translations.add_to_agenda }}';
            return `
                <div class="d-flex align-items-start border rounded p-2 mb-1">
                    <div class="flex-grow-1">
                        <div class="fw-semibold text-sm">${escHtml(c.title ?? '—')} ${meetingBadge}</div>
                        <div class="text-muted small">${escHtml(c.ref ?? '')}
                            ${c.shop_name ? ' · ' + escHtml(c.shop_name) : ''}
                            · <span class="badge bg-secondary">${escHtml(c.area_key ?? '')}</span>
                        </div>
                    </div>
                    <button class="btn btn-sm ${btnClass} ms-2 flex-shrink-0 btn-picker-assign"
                            data-case-id="${c.id}"
                            data-assigned="${isAssigned ? '1' : '0'}"
                            title="${btnTitle}">
                        <i class="bi ${btnIcon}"></i>
                    </button>
                </div>`;
        }).join('');

        container.querySelectorAll('.btn-picker-assign').forEach(btn => {
            btn.addEventListener('click', () => {
                const caseId   = parseInt(btn.dataset.caseId);
                const isAssign = btn.dataset.assigned !== '1';
                assignCaseToMeeting(caseId, isAssign ? agendaMeetingId : null);
            });
        });
    }

    function rebuildAreaFilter(items) {
        const sel    = document.getElementById('agendaAreaFilter');
        const current = sel.value;
        const areas  = [...new Set(items.map(c => c.area_key).filter(Boolean))].sort();
        sel.innerHTML = '<option value="">{{ translations.all_areas }}</option>';
        areas.forEach(a => {
            const opt = document.createElement('option');
            opt.value = a;
            opt.textContent = a;
            if (a === current) opt.selected = true;
            sel.appendChild(opt);
        });
    }

    async function assignCaseToMeeting(caseId, meetingId) {
        try {
            const resp = await fetch(`${ROOT}/ajax/cases/${caseId}/meeting`, {
                method:  'POST',
                headers: { 'Content-Type': 'application/json' },
                body:    JSON.stringify({ id_meeting: meetingId }),
            });
            if (!resp.ok) { showToast('{{ translations.error_assigning_case }}', 'danger'); return; }
            showToast(meetingId ? '{{ translations.case_assigned }}' : '{{ translations.case_unassigned }}', 'success');
            const q       = document.getElementById('agendaSearch').value;
            const areaKey = document.getElementById('agendaAreaFilter').value;
            await loadAgendaData(q, areaKey);
        } catch (e) {
            showToast('{{ translations.error_assigning_case }}', 'danger');
        }
    }

    let agendaSearchTimer = null;
    document.getElementById('agendaSearch').addEventListener('input', () => {
        clearTimeout(agendaSearchTimer);
        agendaSearchTimer = setTimeout(() => { renderAgendaPicker(agendaPickerItems); }, 250);
    });
    document.getElementById('agendaAreaFilter').addEventListener('change', () => {
        renderAgendaPicker(agendaPickerItems);
    });

    function escHtml(str) {
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // ── Helpers UI ────────────────────────────────────────────────────────────
    function showAlert(type, msg) {
        document.getElementById('meetingFormAlerts').innerHTML =
            `<div class="alert alert-${type} py-2">${msg}</div>`;
    }

    function showToast(msg, type = 'success') {
        showSnack(type === 'success', msg);
    }
})();
</script>
{% endblock %}