{% extends 'base.html' %}
{% load humanize %}

{% block title %}Expense PDF Reports - HAVEN GRAZURI{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">

    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900">Expense PDF Reports</h1>
            <p class="mt-1 text-sm text-gray-500">
                Generate and download detailed expense reports filtered by period.
            </p>
        </div>
        <a href="{% url 'expenses:expenses_list' %}"
           class="inline-flex items-center rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200">
            ← Back to Expenses
        </a>
    </div>

    <!-- Quick Period Presets -->
    <div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">

        <a href="{% url 'expenses:expenses_report_pdf' %}?preset=daily"
           class="group flex flex-col items-center justify-center rounded-xl border-2 p-4 text-center transition-all
                  {% if preset == 'daily' %}border-blue-600 bg-blue-50{% else %}border-gray-200 bg-white hover:border-blue-400 hover:bg-blue-50{% endif %}">
            <span class="text-2xl mb-1">📅</span>
            <span class="text-sm font-semibold {% if preset == 'daily' %}text-blue-700{% else %}text-gray-700{% endif %}">Daily</span>
            <span class="text-xs text-gray-400 mt-0.5">Today only</span>
        </a>

        <a href="{% url 'expenses:expenses_report_pdf' %}?preset=monthly"
           class="group flex flex-col items-center justify-center rounded-xl border-2 p-4 text-center transition-all
                  {% if preset == 'monthly' %}border-green-600 bg-green-50{% else %}border-gray-200 bg-white hover:border-green-400 hover:bg-green-50{% endif %}">
            <span class="text-2xl mb-1">🗓️</span>
            <span class="text-sm font-semibold {% if preset == 'monthly' %}text-green-700{% else %}text-gray-700{% endif %}">Monthly</span>
            <span class="text-xs text-gray-400 mt-0.5">This month</span>
        </a>

        <a href="{% url 'expenses:expenses_report_pdf' %}?preset=6months"
           class="group flex flex-col items-center justify-center rounded-xl border-2 p-4 text-center transition-all
                  {% if preset == '6months' %}border-purple-600 bg-purple-50{% else %}border-gray-200 bg-white hover:border-purple-400 hover:bg-purple-50{% endif %}">
            <span class="text-2xl mb-1">📆</span>
            <span class="text-sm font-semibold {% if preset == '6months' %}text-purple-700{% else %}text-gray-700{% endif %}">6 Months</span>
            <span class="text-xs text-gray-400 mt-0.5">Last 6 months</span>
        </a>

        <a href="{% url 'expenses:expenses_report_pdf' %}?preset=yearly"
           class="group flex flex-col items-center justify-center rounded-xl border-2 p-4 text-center transition-all
                  {% if preset == 'yearly' %}border-orange-600 bg-orange-50{% else %}border-gray-200 bg-white hover:border-orange-400 hover:bg-orange-50{% endif %}">
            <span class="text-2xl mb-1">📊</span>
            <span class="text-sm font-semibold {% if preset == 'yearly' %}text-orange-700{% else %}text-gray-700{% endif %}">Yearly</span>
            <span class="text-xs text-gray-400 mt-0.5">This year</span>
        </a>

        <a href="#custom-section"
           onclick="document.getElementById('custom-section').scrollIntoView({behavior:'smooth'})"
           class="group flex flex-col items-center justify-center rounded-xl border-2 p-4 text-center transition-all
                  {% if not preset and date_from %}border-red-500 bg-red-50{% else %}border-gray-200 bg-white hover:border-red-400 hover:bg-red-50{% endif %}">
            <span class="text-2xl mb-1">🔧</span>
            <span class="text-sm font-semibold {% if not preset and date_from %}text-red-700{% else %}text-gray-700{% endif %}">Custom</span>
            <span class="text-xs text-gray-400 mt-0.5">Any date range</span>
        </a>

    </div>

    <!-- Preview card (shown when a preset is selected or custom dates are set) -->
    {% if preset or date_from %}
    <div class="mb-6 rounded-xl border border-blue-200 bg-blue-50 p-5">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-blue-600">Report Preview</p>
                <p class="mt-1 text-lg font-bold text-blue-900">
                    {{ expense_count|intcomma }} expense{{ expense_count|pluralize }}
                    &nbsp;·&nbsp;
                    KES {{ total_amount|floatformat:2|intcomma }}
                </p>
                <p class="text-sm text-blue-700">
                    {% if preset == 'daily' %}Today · {{ today }}
                    {% elif preset == 'monthly' %}This month from {{ month_start }}
                    {% elif preset == '6months' %}Last 6 months to {{ today }}
                    {% elif preset == 'yearly' %}This year from {{ year_start }}
                    {% elif date_from and date_to %}{{ date_from }} to {{ date_to }}
                    {% elif date_from %}From {{ date_from }}
                    {% elif date_to %}Up to {{ date_to }}
                    {% else %}All time{% endif %}
                </p>
            </div>

            <!-- Download button -->
            <a href="{% url 'expenses:expenses_report_pdf' %}?{% if preset %}preset={{ preset }}{% endif %}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if branch_filter %}&branch={{ branch_filter }}{% endif %}&download=1"
               class="inline-flex items-center gap-2 rounded-lg bg-blue-700 px-5 py-3 text-sm font-semibold text-white shadow-md hover:bg-blue-800 active:scale-95 transition-all">
                <i class="fas fa-file-pdf"></i>
                Download PDF Report
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Extra Filters (category / status / branch) -->
    {% if preset or date_from %}
    <div class="mb-6 rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
        <p class="mb-3 text-sm font-semibold text-gray-700">Narrow this report further (optional)</p>
        <form method="get" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            {% if preset %}<input type="hidden" name="preset" value="{{ preset }}">{% endif %}
            {% if not preset %}
                {% if date_from %}<input type="hidden" name="date_from" value="{{ date_from }}">{% endif %}
                {% if date_to %}<input type="hidden" name="date_to" value="{{ date_to }}">{% endif %}
            {% endif %}

            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Category</label>
                <select name="category"
                        class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Categories</option>
                    {% for val, label in categories %}
                    <option value="{{ val }}" {% if category_filter == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                <select name="status"
                        class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Statuses</option>
                    {% for val, label in statuses %}
                    <option value="{{ val }}" {% if status_filter == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Branch</label>
                <select name="branch"
                        class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">All Branches</option>
                    {% for b in branches %}
                    <option value="{{ b.pk }}" {% if branch_filter == b.pk|stringformat:"s" %}selected{% endif %}>{{ b.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="sm:col-span-3 flex gap-2">
                <button type="submit"
                        class="inline-flex items-center rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800">
                    Apply Filters
                </button>
                <a href="{% url 'expenses:expenses_report_pdf' %}{% if preset %}?preset={{ preset }}{% endif %}"
                   class="inline-flex items-center rounded-md bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200">
                    Clear
                </a>
            </div>
        </form>
    </div>
    {% endif %}

    <!-- Custom Date Range Section -->
    <div id="custom-section" class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
        <h2 class="text-base font-semibold text-gray-900 mb-4">
            <span class="mr-2">🔧</span> Custom Date Range Report
        </h2>
        <form method="get" class="space-y-4">

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
                    <input type="date" id="date_from" name="date_from"
                           value="{{ date_from }}"
                           class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                </div>
                <div>
                    <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
                    <input type="date" id="date_to" name="date_to"
                           value="{{ date_to }}"
                           class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select name="category"
                            class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="">All Categories</option>
                        {% for val, label in categories %}
                        <option value="{{ val }}" {% if category_filter == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <select name="status"
                            class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="">All Statuses</option>
                        {% for val, label in statuses %}
                        <option value="{{ val }}" {% if status_filter == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Branch</label>
                    <select name="branch"
                            class="block w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="">All Branches</option>
                        {% for b in branches %}
                        <option value="{{ b.pk }}" {% if branch_filter == b.pk|stringformat:"s" %}selected{% endif %}>{{ b.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- Preview or Download -->
            <div class="flex gap-3 pt-2">
                <button type="submit"
                        class="inline-flex items-center gap-2 rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800">
                    Preview
                </button>
                <button type="submit" name="download" value="1"
                        class="inline-flex items-center gap-2 rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-red-700">
                    <i class="fas fa-file-pdf"></i> Download PDF
                </button>
            </div>
        </form>
    </div>

    <!-- What's included note -->
    <div class="mt-6 rounded-lg bg-gray-50 border border-gray-200 p-4 text-sm text-gray-600">
        <p class="font-medium text-gray-800 mb-1">📄 What's included in the report:</p>
        <ul class="list-disc list-inside space-y-1">
            <li>Summary totals — total, approved, and pending amounts</li>
            <li>Category breakdown with counts and totals</li>
            <li>Full transaction table — date, title, category, amount, payment method, paid to, branch, staff, status, reference</li>
            <li>Status highlighted rows (green = approved, yellow = pending, red = rejected)</li>
            <li>Branded header and confidential footer</li>
        </ul>
    </div>

</div>
{% endblock %}