{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Sales Calendar - {{ brand_name }}{% endblock %}
{% block body_class %}calendar-page{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/hil-pages/calendar.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">{{ brand_name }}</h1>

    <a href="/admin" class="back-link">&larr; Back to Dashboard</a>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <!-- Monthly Summary -->
    <div class="card">
        <h2 class="hil-inline-7568a7a942">{{ month_name }} — Summary</h2>
        <div class="summary-grid">
            <div class="summary-box count">
                <div class="label">Total Sales</div>
                <div class="value">{{ month_total.count }}</div>
            </div>
            <div class="summary-box amount">
                <div class="label">Total Revenue</div>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(month_total.amount) }}</div>
            </div>
        </div>
    </div>

    <!-- Calendar -->
    <div class="card">
        <div class="calendar-header">
            <h2>{{ month_name }}</h2>
            <div class="nav-buttons">
                <a href="/admin/calendar?year={{ prev_year }}&month={{ prev_month }}">&larr; Prev</a>
                <a href="/admin/calendar?year={{ next_year }}&month={{ next_month }}">Next &rarr;</a>
            </div>
        </div>

        <table class="calendar-table">
            <thead>
                <tr>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                    <th>Sun</th>
                </tr>
            </thead>
            <tbody>
                {% for week in weeks %}
                <tr>
                    {% for day in week %}
                        {% if day == 0 %}
                            <td class="empty"></td>
                        {% else %}
                            {% set date_key = "%04d-%02d-%02d"|format(year, month, day) %}
                            <td>
                                <div class="day-number">{{ day }}</div>
                                {% if date_key in sales_by_day %}
                                    <div class="day-sales">
                                        <div class="amount">{{ currency_symbol }}{{ "%.2f"|format(sales_by_day[date_key].amount) }}</div>
                                        <div class="count">{{ sales_by_day[date_key].count }} sale(s)</div>
                                    </div>
                                {% else %}
                                    <div class="no-sales">No sales</div>
                                {% endif %}
                            </td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Delete Section with Date Picker -->
    <div class="card delete-section">
        <h3>Delete Calendar Sales</h3>
        <p class="hil-inline-e70095d0d0">
            Permanently delete sales records older than a selected period. This action cannot be undone.
        </p>

        <div class="date-picker-row">
            <label for="delete-date">Confirm delete up to:</label>
            <input type="date" id="delete-date">
            <span class="hil-inline-2cc1803591">
                Records before this date will be deleted
            </span>
        </div>

        <div class="delete-grid">
            <form method="POST" action="/admin/calendar/delete" onsubmit="return confirmDelete(this, 'week');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="period" value="week">
                <button type="submit" class="btn-danger">Delete Older Than 1 Week</button>
            </form>
            <form method="POST" action="/admin/calendar/delete" onsubmit="return confirmDelete(this, 'month');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="period" value="month">
                <button type="submit" class="btn-danger">Delete Older Than 1 Month</button>
            </form>
            <form method="POST" action="/admin/calendar/delete" onsubmit="return confirmDelete(this, 'year');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="period" value="year">
                <button type="submit" class="btn-danger">Delete Older Than 1 Year</button>
            </form>
        </div>
    </div>
</div>

<script>
function confirmDelete(form, period) {
    const dateInput = document.getElementById('delete-date');
    const selectedDate = dateInput.value;

    let periodLabel = '';
    let cutoffDescription = '';
    const today = new Date();

    if (period === 'week') {
        periodLabel = '1 week';
        const cutoff = new Date(today);
        cutoff.setDate(cutoff.getDate() - 7);
        cutoffDescription = cutoff.toLocaleDateString();
    } else if (period === 'month') {
        periodLabel = '1 month';
        const cutoff = new Date(today);
        cutoff.setDate(cutoff.getDate() - 30);
        cutoffDescription = cutoff.toLocaleDateString();
    } else if (period === 'year') {
        periodLabel = '1 year';
        const cutoff = new Date(today);
        cutoff.setDate(cutoff.getDate() - 365);
        cutoffDescription = cutoff.toLocaleDateString();
    }

    let message = 'Delete all sales records older than ' + periodLabel + '?';
    message += '\n\nCut-off date: ' + cutoffDescription;

    if (selectedDate) {
        message += '\n\nYou selected: ' + selectedDate;
        message += '\nOnly records before this date will be affected.';
    }

    message += '\n\nThis action CANNOT be undone!';

    return confirm(message);
}
</script>
{% endblock %}