{% extends "layouts/base.html" %}

{% block title %}Quota Management - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/order.css">
{% endblock %}

{% block content %}
<main class="order-management-layout">
    <section class="quota-overview-card">
        <h2>Optimize Your Team's Storage</h2>
        <p class="subtitle">Flexible cloud monitoring for teams with ease.</p>

        <div class="overview-grid">
            <div class="total-storage-chart">
                <h3>Total Storage Used:</h3>
                <div class="donut-chart-container">
                    {# Placeholder for a donut chart. For simplicity, we'll use text for now. #}
                    <div class="donut-chart-text">
                        <span class="used-gb">{{ user.storage_used_gb }} GB</span> / <span class="total-gb">{{ user.storage_quota_gb }} GB</span>
                    </div>
                    <div class="storage-gauge large">
                        <div class="storage-gauge-bar" style="width: {{ (user.storage_used_gb / user.storage_quota_gb) * 100 }}%;"></div>
                    </div>
                </div>
                <p class="plan-details">Current Plan: Business Plan ({{ user.storage_quota_gb }} GB Capacity, Unlimited Users)</p>
            </div>

            <div class="order-form-card">
                <h3>Adjust Your Quota</h3>
                <form action="/order" method="post" class="order-form">
                    <div class="form-group">
                        <label for="storage_amount">Storage (GB)</label>
                        <custom-slider min="5" max="1000" value="{{ user.storage_quota_gb }}" step="5" name="storage_amount" data-price-per-gb="{{ price_per_gb | tojson }}"></custom-slider>
                        {% if errors.storage_amount %}
                            <p class="error">{{ errors.storage_amount }}</p>
                        {% endif %}
                    </div>
                    <div class="price-display">
                        <p>Estimated Price: <span id="total_price"></span></p>
                    </div>
                    <button type="submit" class="btn-primary">Update Quota</button>
                </form>
            </div>
        </div>
    </section>

    <section class="user-quotas-section">
        <div class="user-quotas-header">
            <h2>User & Department Quotas</h2>
            <button class="btn-primary" id="add-new-user-btn">+ Add New User</button>
        </div>
        <div class="user-quota-list" id="user-quota-list">
            {# User quota items will be dynamically loaded here by JavaScript #}
        </div>
    </section>

    {# Add New User Modal #}
    <div id="add-user-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h3>Add New User</h3>
            <form id="add-user-form">
                <div class="form-group">
                    <label for="new-user-full-name">Full Name</label>
                    <input type="text" id="new-user-full-name" name="full_name" required>
                </div>
                <div class="form-group">
                    <label for="new-user-email">Email</label>
                    <input type="email" id="new-user-email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="new-user-password">Password</label>
                    <input type="password" id="new-user-password" name="password" required>
                </div>
                <div class="form-group">
                    <label for="new-user-confirm-password">Confirm Password</label>
                    <input type="password" id="new-user-confirm-password" name="confirm_password" required>
                </div>
                <button type="submit" class="btn-primary">Add User</button>
                <p id="add-user-message" class="error"></p>
            </form>
        </div>
    </div>

    {# Edit Quota Modal #}
    <div id="edit-quota-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h3>Edit User Quota</h3>
            <form id="edit-quota-form">
                <input type="hidden" id="edit-quota-user-email">
                <div class="form-group">
                    <label for="edit-quota-amount">Storage Quota (GB)</label>
                    <input type="number" id="edit-quota-amount" name="new_quota_gb" min="1" required>
                </div>
                <button type="submit" class="btn-primary">Update Quota</button>
                <p id="edit-quota-message" class="error"></p>
            </form>
        </div>
    </div>

    {# View Details Modal #}
    <div id="view-details-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h3>User Details</h3>
            <div id="user-details-content">
                {# User details will be loaded here #}
            </div>
        </div>
    </div>

</main>
{% endblock %}

{% block scripts %}
    <script src="/static/js/components/order.js"></script>
{% endblock %}