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

{% block page_title %}Premium Pass Management{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/premium-pass/assets/css/premium-pass.css">
{% endblock %}

{% block admin_content %}
<div class="blocks-section-tabs mb-5" role="tablist">
    <button type="button" class="blocks-section-tab active" data-tab="passes" role="tab" aria-selected="true">Available Passes</button>
    <button type="button" class="blocks-section-tab" data-tab="subscriptions" role="tab" aria-selected="false">Active Subscriptions</button>
</div>

<script type="application/json" id="premium-pass-passes-data">[]</script>

<div id="passes-tab" class="pp-tab-content active">
    {{ crud::shell_open(config_url="/plugins/premium-pass/assets/admin/passes_list.json", mount_id="premium-pass-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="7" class="crud-empty-state text-center">Loading passes…</td></tr>
        </tbody>
        </table>
    {{ crud::shell_close() }}
</div>

<div id="subscriptions-tab" class="pp-tab-content">
    {{ crud::shell_open(config_url="/plugins/premium-pass/assets/admin/subscriptions_list.json", mount_id="premium-pass-subscriptions-list", custom_mount=true) }}
    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="5" class="crud-empty-state text-center">Loading subscriptions…</td></tr>
        </tbody>
    </table>
    {{ crud::shell_close() }}
</div>

<!-- Create/Edit Modal -->
<div id="pass-modal" class="crud-modal" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title">Create New Pass</h2>
            <button type="button" class="close-modal" aria-label="Close">&times;</button>
        </div>
        <form id="pass-form" onsubmit="savePass(event); return false;">
            <input type="hidden" name="id" id="pass-id">
            <div class="modal-body">
                <div class="form-group">
                    <label for="pass-title">Title</label>
                    <input class="blocks-input" type="text" name="title" id="pass-title" required placeholder="e.g., VIP Catalog Access">
                </div>
                <div class="form-group">
                    <label for="pass-description">Description</label>
                    <textarea class="blocks-input" name="description" id="pass-description" rows="3" placeholder="Describe the benefits of this pass"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="pass-price">Price ({{ currency_symbol }})</label>
                        <input class="blocks-input" type="number" name="price" id="pass-price" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="pass-duration">Duration (Days)</label>
                        <input class="blocks-input" type="number" name="duration_days" id="pass-duration" value="30" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="pass-plugin">Plugin</label>
                        <select class="blocks-input" name="plugin_name" id="pass-plugin" onchange="updateFeatureOptions()">
                            <option value="catalog">Catalog</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="pass-feature">Feature</label>
                        <select class="blocks-input" name="feature_type" id="pass-feature">
                            <option value="collection_discount">Collection Discount</option>
                        </select>
                    </div>
                </div>
                
                <div id="feature-config" class="pp-feature-config-box">
                    <label for="catalog-collection-id">Collection</label>
                    <p class="text-muted small pp-feature-config-hint">Use 0% when the collection already sets member prices; add a percent only for an extra pass discount on top.</p>
                    <div class="form-row">
                        <div class="form-group">
                            <select id="catalog-collection-id" class="blocks-input">
                                {% for coll in collections %}
                                <option value="{{ coll.id }}">{{ coll.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <label class="sr-only" for="catalog-discount">Additional discount percentage</label>
                                <input class="blocks-input" type="number" id="catalog-discount" placeholder="Additional discount (%)" step="1" min="0" max="100" value="0">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group pp-badge-config">
                    <label>Membership badge</label>
                    <p class="pp-badge-config-hint">Shown on member rows and in the user nav when subscribed.</p>
                    <input type="hidden" id="pass-badge-icon" name="badge_icon" value="">
                    <input type="hidden" id="pass-badge-label" name="badge_label" value="">
                    <div id="pass-badge-presets" class="pp-badge-presets" role="group" aria-label="Badge style presets"></div>
                    <div class="pp-badge-color-row">
                        <label for="pass-badge-color">Badge color</label>
                        <input type="color" id="pass-badge-color" name="badge_color" value="#6366f1">
                        <span id="pass-badge-preview" class="pp-membership-badge pp-membership-badge--preview" style="--pp-badge-color: #6366f1" hidden>
                            <i class="fas fa-crown" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="is_active" id="pass-is-active" checked>
                        Active and available for purchase
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="blocks-button blocks-button-secondary cancel-btn">Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary">Save Pass</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/premium-pass/assets/js/premium_pass_list.js"></script>
<script src="/plugins/premium-pass/assets/js/premium-pass.js"></script>
{% endblock %}