{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">{% trans "Application Settings" %}</h2>
                <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> {% trans "Back to Dashboard" %}
                </a>
            </div>

            <form method="post" enctype="multipart/form-data" class="card shadow-sm border-0">
                {% csrf_token %}
                <div class="card-body p-4">
                    <h5 class="card-title mb-4 border-bottom pb-2">{% trans "General Information" %}</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ form.app_name.label }}</label>
                            {{ form.app_name }}
                            {% if form.app_name.errors %}<div class="text-danger small">{{ form.app_name.errors }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ form.slogan.label }}</label>
                            {{ form.slogan }}
                            {% if form.slogan.errors %}<div class="text-danger small">{{ form.slogan.errors }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ form.logo.label }}</label>
                            {{ form.logo }}
                            {% if form.logo.errors %}<div class="text-danger small">{{ form.logo.errors }}</div>{% endif %}
                            {% if form.instance.logo %}
                                <div class="mt-2">
                                    <img src="{{ form.instance.logo.url }}" alt="Logo" class="img-thumbnail" style="height: 50px;">
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <h5 class="card-title mt-5 mb-4 border-bottom pb-2">{% trans "Contact & Legal" %}</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ form.registration_number.label }}</label>
                            {{ form.registration_number }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ form.tax_number.label }}</label>
                            {{ form.tax_number }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ form.contact_phone.label }}</label>
                            {{ form.contact_phone }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ form.contact_email.label }}</label>
                            {{ form.contact_email }}
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ form.contact_address.label }}</label>
                            {{ form.contact_address }}
                        </div>
                    </div>

                    <h5 class="card-title mt-5 mb-4 border-bottom pb-2">{% trans "Subscription Fees" %}</h5>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            {{ form.subscription_enabled }}
                            <label class="form-check-label" for="{{ form.subscription_enabled.id_for_label }}">
                                {{ form.subscription_enabled.label }}
                            </label>
                        </div>
                    </div>

                    <div id="fees-section" {% if not form.instance.subscription_enabled %}style="display:none;"{% endif %}>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <h6 class="fw-bold mb-3">{% trans "Shipper Fees" %}</h6>
                                    <div class="mb-3">
                                        <label class="form-label small">{{ form.shipper_monthly_fee.label }}</label>
                                        {{ form.shipper_monthly_fee }}
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label small">{{ form.shipper_annual_fee.label }}</label>
                                        {{ form.shipper_annual_fee }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 bg-light rounded">
                                    <h6 class="fw-bold mb-3">{% trans "Truck Owner Fees" %}</h6>
                                    <div class="mb-3">
                                        <label class="form-label small">{{ form.truck_owner_monthly_fee.label }}</label>
                                        {{ form.truck_owner_monthly_fee }}
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label small">{{ form.truck_owner_annual_fee.label }}</label>
                                        {{ form.truck_owner_annual_fee }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5 class="card-title mt-5 mb-4 border-bottom pb-2">{% trans "Policies" %}</h5>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">{{ form.terms_of_service.label }}</label>
                            {{ form.terms_of_service }}
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ form.privacy_policy.label }}</label>
                            {{ form.privacy_policy }}
                        </div>
                    </div>
                </div>
                <div class="card-footer p-4 bg-white border-top-0">
                    <button type="submit" class="btn btn-primary px-5 py-2">
                        {% trans "Save All Changes" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const subEnabled = document.getElementById('{{ form.subscription_enabled.id_for_label }}');
        const feesSection = document.getElementById('fees-section');

        if (subEnabled) {
            subEnabled.addEventListener('change', function() {
                if (this.checked) {
                    feesSection.style.display = 'block';
                } else {
                    feesSection.style.display = 'none';
                }
            });
        }
    });
</script>
{% endblock %}