{% comment %}
  === REPORT CONFIGURATION MODAL (shared partial) ===
  Renders the "Generate Report" modal and its month-vs-custom-dates
  toggle script. Included by both the Dashboard (index.html) and the
  Report page (report.html) so users can launch a new report from
  either place without duplicating the modal HTML or the JS.

  Requires in the parent template context:
    - `projects`  (queryset of Project, for the project dropdown)
    - `teams`     (queryset of Team, for the team dropdown)

  If those are missing, the dropdowns simply show "All Projects" /
  "All Teams" — no crash.
{% endcomment %}

<div class="modal fade" id="reportConfigModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file-alt me-2" style="color: var(--accent);"></i>Generate Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="get" action="{% url 'generate_report' %}" id="reportForm">
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Date Mode Toggle -->
                        <div class="col-12">
                            <label class="form-label fw-semibold">Date Selection</label>
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="date_mode" id="modeMonth" value="month" checked>
                                <label class="btn btn-outline-secondary" for="modeMonth">
                                    <i class="fas fa-calendar-alt me-1"></i>Month(s)
                                </label>
                                <input type="radio" class="btn-check" name="date_mode" id="modeCustom" value="custom">
                                <label class="btn btn-outline-secondary" for="modeCustom">
                                    <i class="fas fa-calendar-week me-1"></i>Custom Dates
                                </label>
                            </div>
                        </div>

                        <!-- Month Range Picker (shown by default) -->
                        <div class="col-6" id="fromMonthGroup">
                            <label class="form-label fw-semibold">From</label>
                            <input type="month" name="from_month" class="form-control" id="reportFromMonth">
                        </div>
                        <div class="col-6" id="toMonthGroup">
                            <label class="form-label fw-semibold">To</label>
                            <input type="month" name="to_month" class="form-control" id="reportToMonth">
                        </div>

                        <!-- Custom Date Range (hidden by default) -->
                        <div class="col-6 d-none" id="startDateGroup">
                            <label class="form-label fw-semibold">Start Date</label>
                            <input type="date" name="start_date" class="form-control" id="reportStartDate">
                        </div>
                        <div class="col-6 d-none" id="endDateGroup">
                            <label class="form-label fw-semibold">End Date</label>
                            <input type="date" name="end_date" class="form-control" id="reportEndDate">
                        </div>

                        <!-- Project Filter (optional) -->
                        <div class="col-12">
                            <label class="form-label fw-semibold">Project <span class="text-muted fw-normal">(optional)</span></label>
                            <select name="project" class="form-select">
                                <option value="">All Projects</option>
                                {% for p in projects %}
                                <option value="{{ p.id }}">{{ p.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <!-- Team Filter (optional) -->
                        <div class="col-12">
                            <label class="form-label fw-semibold">Team <span class="text-muted fw-normal">(optional)</span></label>
                            <select name="team" class="form-select">
                                <option value="">All Teams</option>
                                {% for t in teams %}
                                <option value="{{ t.id }}">{{ t.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-accent"><i class="fas fa-chart-bar me-1"></i>Generate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--
  === REPORT MODAL — toggle month range vs custom dates ===
  Defaults both month pickers to the current month on page load so
  clicking "Generate" without changing anything produces a
  current-month report. Guarded by `if (!modeMonth)` so it's a no-op
  on pages that don't include the modal.
-->
<script>
(function() {
    var modeMonth = document.getElementById('modeMonth');
    if (!modeMonth) return;  // modal not on this page — skip
    var modeCustom = document.getElementById('modeCustom');
    var fromMonthGroup = document.getElementById('fromMonthGroup');
    var toMonthGroup = document.getElementById('toMonthGroup');
    var startGroup = document.getElementById('startDateGroup');
    var endGroup = document.getElementById('endDateGroup');
    var fromMonth = document.getElementById('reportFromMonth');
    var toMonth = document.getElementById('reportToMonth');

    // Default both month pickers to current month
    var now = new Date();
    var curMonth = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0');
    if (fromMonth) fromMonth.value = curMonth;
    if (toMonth) toMonth.value = curMonth;

    function toggleMode() {
        if (modeMonth.checked) {
            fromMonthGroup.classList.remove('d-none');
            toMonthGroup.classList.remove('d-none');
            startGroup.classList.add('d-none');
            endGroup.classList.add('d-none');
        } else {
            fromMonthGroup.classList.add('d-none');
            toMonthGroup.classList.add('d-none');
            startGroup.classList.remove('d-none');
            endGroup.classList.remove('d-none');
        }
    }

    modeMonth.addEventListener('change', toggleMode);
    if (modeCustom) modeCustom.addEventListener('change', toggleMode);
})();
</script>