{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block extra_head %}
{% endblock extra_head %}

{% block admin_content %}
<div data-plugin="fee-collection">
<!-- Global Config Elements for Separated Javascript -->
<div id="fee-config" data-currency="{{ currency_symbol | default(value='$') }}"></div>
{% if pending_automated %}
<div id="automated-reminders-data" data-reminders="{{ pending_automated | json_encode }}"></div>
{% endif %}

<div class="fee-collection-container" data-blocks-admin-tabs>
    
    {{ crud::shell_open(config_url="/plugins/fee-collection/assets/admin/fee_page.json", mount_id="fee-collection-header", custom_mount=true) }}
    {{ crud::shell_close() }}

    <!-- Quick Stats Cards Grid -->
    <div class="blocks-metric-grid">
        <div class="blocks-metric-card">
            <div class="stat-icon bg-blue-glow"><i class="fas fa-file-invoice-dollar"></i></div>
            <div class="stat-content">
                <span class="stat-label">Total Outstanding Dues</span>
                <h2 class="stat-val">{{ stats.total_dues_count | default(value=0) }}</h2>
            </div>
        </div>
        <div class="blocks-metric-card">
            <div class="stat-icon bg-green-glow"><i class="fas fa-hand-holding-usd"></i></div>
            <div class="stat-content">
                <span class="stat-label">Fees Collected</span>
                <h2 class="stat-val text-success">{{ currency_symbol }}{{ stats.collected_amount | default(value=0.0) | price }}</h2>
            </div>
        </div>
        <div class="blocks-metric-card">
            <div class="stat-icon bg-red-glow"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="stat-content">
                <span class="stat-label">Pending / Overdue Balance</span>
                <h2 class="stat-val text-warning">{{ currency_symbol }}{{ stats.outstanding_amount | default(value=0.0) | price }}</h2>
            </div>
        </div>
        <div class="blocks-metric-card">
            <div class="stat-icon bg-yellow-glow"><i class="fas fa-clock"></i></div>
            <div class="stat-content">
                <span class="stat-label">Overdue Payments</span>
                <h2 class="stat-val text-danger">{{ stats.overdue_count | default(value=0) }}</h2>
            </div>
        </div>
    </div>

    <!-- Interactive Navigation Tabs -->
    <div class="blocks-section-tabs" role="tablist" aria-label="Fee collection sections">
        <button type="button" class="blocks-section-tab active" role="tab" aria-selected="true" data-tab="section-dues">
            <i class="fas fa-receipt"></i> Payment Ledger
        </button>
        <button type="button" class="blocks-section-tab" role="tab" aria-selected="false" data-tab="section-profiles" tabindex="-1">
            <i class="fas fa-cogs"></i> Fee Profiles
        </button>
        <button type="button" class="blocks-section-tab" role="tab" aria-selected="false" data-tab="section-logs" tabindex="-1">
            <i class="fas fa-history"></i> Notification History
        </button>
    </div>

    <div id="section-dues" class="tab-section active" role="tabpanel" tabindex="0">
        {{ crud::shell_open(config_url="/plugins/fee-collection/assets/admin/dues_list.json", mount_id="fee-dues-list", custom_mount=true) }}
        <div data-crud-toolbar-extra class="section-actions-bar">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="search-dues" placeholder="Search by name, email, or profile...">
            </div>
            <div class="filter-box">
                <label for="filter-status">Status:</label>
                <select id="filter-status">
                    <option value="all">All Payments</option>
                    <option value="unpaid">Unpaid</option>
                    <option value="overdue">Overdue</option>
                    <option value="paid">Paid</option>
                </select>
            </div>
        </div>

        <table class="blocks-admin-table">
            <thead></thead>
            <tbody class="dues-table-body">
                <tr><td colspan="9" class="crud-empty-state text-center">Loading payment ledger…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

    <div id="section-profiles" class="tab-section" role="tabpanel" tabindex="0" hidden>
        {{ crud::shell_open(config_url="/plugins/fee-collection/assets/admin/profiles_list.json", mount_id="fee-profiles-list", custom_mount=true) }}
        <table class="blocks-admin-table">
            <thead></thead>
            <tbody>
                <tr><td colspan="9" class="crud-empty-state text-center">Loading fee profiles…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}

        {{ crud::shell_open(config_url="/plugins/fee-collection/assets/admin/assignments_list.json", mount_id="fee-assignments-list", custom_mount=true) }}
        <table class="blocks-admin-table">
            <thead></thead>
            <tbody>
                <tr><td colspan="5" class="crud-empty-state text-center">Loading assignments…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

    <div id="section-logs" class="tab-section" role="tabpanel" tabindex="0" hidden>
        {{ crud::shell_open(config_url="/plugins/fee-collection/assets/admin/logs_list.json", mount_id="fee-logs-list", custom_mount=true) }}
        <table class="blocks-admin-table">
            <thead></thead>
            <tbody>
                <tr><td colspan="5" class="crud-empty-state text-center">Loading notification history…</td></tr>
            </tbody>
        </table>
        {{ crud::shell_close() }}
    </div>

</div>

<!-- MODAL: ADD PROFILE -->
<div id="add-profile-modal" class="crud-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="add-profile-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="add-profile-modal-title"><i class="fas fa-plus-circle" aria-hidden="true"></i> Create Fee Profile</h3>
            <button type="button" class="btn-close" aria-label="Close" data-fee-modal-close="add-profile-modal">&times;</button>
        </div>
        <form id="add-profile-form">
            <div class="modal-body">
                <div class="blocks-responsive-form-grid">
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="name">Profile Name *</label>
                        <input type="text" id="name" name="name" required placeholder="e.g. Tuition Fee - Grade 10">
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" placeholder="A brief explanation of this charge..."></textarea>
                    </div>
                    <div class="blocks-form-field">
                        <label for="frequency">Frequency *</label>
                        <select id="frequency" name="frequency" required>
                            <option value="one_time">One-Time</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </div>
                    <div class="blocks-form-field">
                        <label for="due_day">Due Day of Month *</label>
                        <input type="number" id="due_day" name="due_day" min="1" max="28" value="5" required>
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="profile-users">Select Users / Payers (by Email)</label>
                        <p class="form-hint">For recurring fees, set <strong>Unpaid since</strong> when onboarding members with prior dues.</p>
                        <div id="profile-users" class="user-assignment-list" role="group" aria-label="Select users and payers">
                            <table class="user-assignment-table">
                                <thead>
                                    <tr>
                                        <th class="col-select" scope="col">Select</th>
                                        <th class="col-name" scope="col">Name</th>
                                        <th class="col-email" scope="col">Email</th>
                                        <th class="col-unpaid-since user-assignment-col-unpaid" scope="col">Unpaid since</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for u in users %}
                                    <tr class="user-assignment-row">
                                        <td class="col-select">
                                            <input type="checkbox" id="profile-user-{{ u.id }}" name="assignment_user_ids" value="{{ u.id }}" data-user-id="{{ u.id }}" aria-label="Assign {{ u.name }}">
                                        </td>
                                        <td class="col-name">
                                            <label for="profile-user-{{ u.id }}" class="user-assignment-name">{{ u.name }}</label>
                                        </td>
                                        <td class="col-email">
                                            <span class="user-assignment-email">{{ u.email }}</span>
                                        </td>
                                        <td class="col-unpaid-since user-assignment-col-unpaid">
                                            <input type="date" class="user-unpaid-since-input" name="assignment_unpaid_since[{{ u.id }}]" data-user-id="{{ u.id }}" title="Backdate obligation start for recurring fees" aria-label="Unpaid since for {{ u.email }}">
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="blocks-form-field">
                        <label for="amount">Standard Amount ({{ currency_symbol }}) *</label>
                        <input type="number" id="amount" name="amount" step="0.01" min="0.01" required placeholder="0.00">
                    </div>
                    <div class="blocks-form-field">
                        <label for="grace_period_days">Grace Period (Days)</label>
                        <input type="number" id="grace_period_days" name="grace_period_days" min="0" value="0">
                    </div>
                    
                    <div class="divider sm:col-span-2">Late Fee Policy</div>

                    <div class="blocks-form-field">
                        <label for="late_fee_type">Late Fee Type</label>
                        <select id="late_fee_type" name="late_fee_type">
                            <option value="none">None</option>
                            <option value="flat">Flat Rate</option>
                            <option value="percentage">Percentage of Base</option>
                        </select>
                    </div>
                    <div class="blocks-form-field">
                        <label for="late_fee_value">Late Fee Value ({{ currency_symbol }} / %)</label>
                        <input type="number" id="late_fee_value" name="late_fee_value" step="0.01" min="0.00" value="0.00">
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="late_fee_frequency">Late Fee Frequency</label>
                        <select id="late_fee_frequency" name="late_fee_frequency">
                            <option value="once">Once (Fixed charge on expiry)</option>
                            <option value="daily">Daily (Accumulates daily overdue)</option>
                        </select>
                    </div>

                    <div class="divider sm:col-span-2">Automated Notifications</div>

                    <div class="blocks-form-field">
                        <label for="reminder_before_days">Remind Before Due (Days)</label>
                        <input type="number" id="reminder_before_days" name="reminder_before_days" min="1" value="3">
                    </div>
                    <div class="blocks-form-field">
                        <label for="reminder_after_days">Remind Overdue Every (Days)</label>
                        <input type="number" id="reminder_after_days" name="reminder_after_days" min="1" value="1">
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="reminder_message">Custom Message Override (Tera Context Available)</label>
                        <textarea id="reminder_message" name="reminder_message" placeholder="Optional. If left blank, standard reminder messages will be automatically constructed."></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-fee-modal-close="add-profile-modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Profile</button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL: EDIT PROFILE -->
<div id="edit-profile-modal" class="crud-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="edit-profile-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="edit-profile-modal-title"><i class="fas fa-edit" aria-hidden="true"></i> Edit Fee Profile</h3>
            <button type="button" class="btn-close" aria-label="Close" data-fee-modal-close="edit-profile-modal">&times;</button>
        </div>
        <form id="edit-profile-form">
            <input type="hidden" id="edit-profile-id" name="id">
            <div class="modal-body">
                <div class="blocks-responsive-form-grid">
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="edit-profile-name">Profile Name *</label>
                        <input type="text" id="edit-profile-name" name="name" required>
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="edit-profile-description">Description</label>
                        <textarea id="edit-profile-description" name="description"></textarea>
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-frequency">Frequency *</label>
                        <select id="edit-profile-frequency" name="frequency" required>
                            <option value="one_time">One-Time</option>
                            <option value="monthly">Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="annually">Annually</option>
                        </select>
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-due-day">Due Day of Month *</label>
                        <input type="number" id="edit-profile-due-day" name="due_day" min="1" max="28" required>
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="edit-profile-users">Select Users / Payers (by Email)</label>
                        <p class="form-hint">For recurring fees, set <strong>Unpaid since</strong> when onboarding members with prior dues.</p>
                        <div id="edit-profile-users" class="user-assignment-list" role="group" aria-label="Select users and payers">
                            <table class="user-assignment-table">
                                <thead>
                                    <tr>
                                        <th class="col-select" scope="col">Select</th>
                                        <th class="col-name" scope="col">Name</th>
                                        <th class="col-email" scope="col">Email</th>
                                        <th class="col-unpaid-since user-assignment-col-unpaid" scope="col">Unpaid since</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for u in users %}
                                    <tr class="user-assignment-row">
                                        <td class="col-select">
                                            <input type="checkbox" id="edit-profile-user-{{ u.id }}" name="assignment_user_ids" value="{{ u.id }}" data-user-id="{{ u.id }}" aria-label="Assign {{ u.name }}">
                                        </td>
                                        <td class="col-name">
                                            <label for="edit-profile-user-{{ u.id }}" class="user-assignment-name">{{ u.name }}</label>
                                        </td>
                                        <td class="col-email">
                                            <span class="user-assignment-email">{{ u.email }}</span>
                                        </td>
                                        <td class="col-unpaid-since user-assignment-col-unpaid">
                                            <input type="date" class="user-unpaid-since-input" name="assignment_unpaid_since[{{ u.id }}]" data-user-id="{{ u.id }}" title="Backdate obligation start for recurring fees" aria-label="Unpaid since for {{ u.email }}">
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-amount">Standard Amount ({{ currency_symbol }}) *</label>
                        <input type="number" id="edit-profile-amount" name="amount" step="0.01" min="0.01" required>
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-grace-period">Grace Period (Days)</label>
                        <input type="number" id="edit-profile-grace-period" name="grace_period_days" min="0">
                    </div>
                    
                    <div class="divider sm:col-span-2">Late Fee Policy</div>

                    <div class="blocks-form-field">
                        <label for="edit-profile-late-fee-type">Late Fee Type</label>
                        <select id="edit-profile-late-fee-type" name="late_fee_type">
                            <option value="none">None</option>
                            <option value="flat">Flat Rate</option>
                            <option value="percentage">Percentage of Base</option>
                        </select>
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-late-fee-value">Late Fee Value ({{ currency_symbol }} / %)</label>
                        <input type="number" id="edit-profile-late-fee-value" name="late_fee_value" step="0.01" min="0.00">
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="edit-profile-late-fee-frequency">Late Fee Frequency</label>
                        <select id="edit-profile-late-fee-frequency" name="late_fee_frequency">
                            <option value="once">Once</option>
                            <option value="daily">Daily</option>
                        </select>
                    </div>

                    <div class="divider sm:col-span-2">Automated Notifications</div>

                    <div class="blocks-form-field">
                        <label for="edit-profile-reminder-before">Remind Before Due (Days)</label>
                        <input type="number" id="edit-profile-reminder-before" name="reminder_before_days" min="1">
                    </div>
                    <div class="blocks-form-field">
                        <label for="edit-profile-reminder-after">Remind Overdue Every (Days)</label>
                        <input type="number" id="edit-profile-reminder-after" name="reminder_after_days" min="1">
                    </div>
                    <div class="blocks-form-field sm:col-span-2">
                        <label for="edit-profile-reminder-message">Custom Message Override</label>
                        <textarea id="edit-profile-reminder-message" name="reminder_message"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-fee-modal-close="edit-profile-modal">Cancel</button>
                <button type="submit" class="btn btn-accent">Save Changes</button>
            </div>
        </form>
    </div>
</div>

</div>
{% endblock admin_content %}