{% include 'partials/header.html' %}

<div class="container-fluid mt-3">
    <div class="row">

        <!-- Sidebar: Agent Filter -->
        <div class="col-md-2">
            <div class="card bg-dark">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-users"></i> Agents</span>
                    <a href="#" class="tmbtn text-muted" data-module="cal" data-action="agents-modal"
                       title="Manage agent colors"><i class="fas fa-cog"></i></a>
                </div>
                <div class="list-group list-group-flush" id="agent-list">
                    {% include 'partials/agent_list.html' %}
                </div>
            </div>
            <div class="mt-2">
                <a href="#" class="btn btn-sm btn-info w-100 tmbtn"
                   data-module="cal" data-action="upload-modal">
                    <i class="fas fa-file-upload"></i> Upload
                </a>
            </div>
        </div>

        <!-- Main: Calendar -->
        <div class="col-md-10">

            <!-- Navigation -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-secondary" onclick="navMonth(-1);">
                    <i class="fas fa-chevron-left"></i> Prev
                </button>

                <div class="text-center">
                    <h3 class="mb-0" id="month-label">{{ month_label|safe }}</h3>
                </div>

                <button class="btn btn-secondary" onclick="navMonth(1);">
                    Next <i class="fas fa-chevron-right"></i>
                </button>
            </div>

            <input type="hidden" id="nav-year" value="{{ year }}">
            <input type="hidden" id="nav-month" value="{{ month }}">
            <input type="hidden" id="nav-agent" value="{{ selected_agent or '' }}">

            <!-- Calendar Grid -->
            <div id="calendar-grid">
                {% include 'partials/grid.html' %}
            </div>

            <!-- Day Detail Panel -->
            <div id="day-detail" class="mt-3"></div>

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

<script>
function navMonth(delta) {
    var y = parseInt($('#nav-year').val());
    var m = parseInt($('#nav-month').val());
    m += delta;
    if (m < 1) { m = 12; y--; }
    if (m > 12) { m = 1; y++; }
    var agent = $('#nav-agent').val();
    dispatchPost('cal', 'grid/' + y + '/' + m, 'agent=' + agent);
    $('#day-detail').html('');
}

function filterAgent(agent) {
    $('#nav-agent').val(agent);
    var y = $('#nav-year').val();
    var m = $('#nav-month').val();
    $('.agent-filter-btn').removeClass('active');
    if (agent === '') {
        $('.agent-filter-btn').first().addClass('active');
    } else {
        $('.agent-filter-btn').each(function() {
            if ($(this).text().trim() === agent) $(this).addClass('active');
        });
    }
    dispatchPost('cal', 'grid/' + y + '/' + m, 'agent=' + agent);
    $('#day-detail').html('');
}

function loadDay(dateStr) {
    var agent = $('#nav-agent').val();
    dispatchPost('cal', 'day/' + dateStr, 'agent=' + agent);
    $('.day-cell').removeClass('day-selected');
    $('.day-cell[data-date="' + dateStr + '"]').addClass('day-selected');
}
</script>

{% include 'partials/footer.html' %}