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

{% block dashboard_content %}
<section class="dashboard-panel">
    <div class="panel-head panel-head-stack">
        <div>
            <span class="dashboard-chip">{{ page_title }}</span>
            <h3>{{ page_description }}</h3>
        </div>
    </div>

    <form method="post" enctype="multipart/form-data" class="settings-form" data-premium-form>
        {% csrf_token %}
        <div class="settings-grid">
            <article class="form-card">
                <div class="form-card-head">
                    <h4><i class="fa-solid fa-building"></i> Company Information</h4>
                </div>
                <div class="form-card-body">
                    {% for field in form %}
                        {% if field.name == 'logo' or field.name == 'company_name' or field.name == 'email' or field.name == 'phone_number' or field.name == 'whatsapp_number' %}
                            <div class="premium-field {% if field.errors %}has-error{% elif form.is_bound %}has-success{% endif %}">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                <div class="input-shell {% if field.field.widget.input_type == 'file' %}input-shell-file{% endif %}">
                                    {% if field.name == 'company_name' %}<i class="fa-solid fa-signature"></i>{% endif %}
                                    {% if field.name == 'email' %}<i class="fa-solid fa-envelope"></i>{% endif %}
                                    {% if field.name == 'phone_number' %}<i class="fa-solid fa-phone"></i>{% endif %}
                                    {% if field.name == 'whatsapp_number' %}<i class="fa-brands fa-whatsapp"></i>{% endif %}

                                    {% if field.field.widget.input_type == 'file' %}
                                        <div class="upload-shell" data-upload-shell>
                                            {{ field }}
                                            <button type="button" class="upload-trigger" data-upload-trigger><i class="fa-solid fa-upload"></i> Upload File</button>
                                            <span class="upload-name" data-upload-name>No file chosen</span>
                                            <div class="upload-preview" data-upload-preview></div>
                                        </div>
                                    {% else %}
                                        {{ field }}
                                    {% endif %}
                                </div>
                                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                                {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>{% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </article>

            <article class="form-card">
                <div class="form-card-head">
                    <h4><i class="fa-solid fa-briefcase"></i> Business Information</h4>
                </div>
                <div class="form-card-body">
                    {% for field in form %}
                        {% if field.name == 'address' or field.name == 'footer_text' or field.name == 'business_hours' or field.name == 'hero_subtitle' or field.name == 'hero_title' %}
                            <div class="premium-field {% if field.errors %}has-error{% elif form.is_bound %}has-success{% endif %}">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                <div class="input-shell {% if field.field.widget.input_type == 'textarea' %}input-shell-textarea{% endif %}">
                                    {% if field.name == 'address' %}<i class="fa-solid fa-location-dot"></i>{% endif %}
                                    {% if field.name == 'business_hours' %}<i class="fa-solid fa-clock"></i>{% endif %}
                                    {% if field.name == 'footer_text' %}<i class="fa-solid fa-file-lines"></i>{% endif %}
                                    {{ field }}
                                </div>
                                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                                {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>{% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </article>

            <article class="form-card">
                <div class="form-card-head">
                    <h4><i class="fa-solid fa-share-nodes"></i> Social Media</h4>
                </div>
                <div class="form-card-body">
                    {% for field in form %}
                        {% if field.name == 'facebook_url' or field.name == 'instagram_url' or field.name == 'youtube_url' or field.name == 'x_url' %}
                            <div class="premium-field {% if field.errors %}has-error{% elif form.is_bound %}has-success{% endif %}">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                <div class="input-shell">
                                    {% if field.name == 'facebook_url' %}<i class="fa-brands fa-facebook-f"></i>{% endif %}
                                    {% if field.name == 'instagram_url' %}<i class="fa-brands fa-instagram"></i>{% endif %}
                                    {% if field.name == 'youtube_url' %}<i class="fa-brands fa-youtube"></i>{% endif %}
                                    {% if field.name == 'x_url' %}<i class="fa-brands fa-x-twitter"></i>{% endif %}
                                    {{ field }}
                                </div>
                                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                                {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>{% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </article>

            <article class="form-card">
                <div class="form-card-head">
                    <h4><i class="fa-solid fa-magnifying-glass-chart"></i> SEO Settings</h4>
                </div>
                <div class="form-card-body">
                    {% for field in form %}
                        {% if field.name == 'meta_title' or field.name == 'meta_description' or field.name == 'meta_keywords' or field.name == 'canonical_url' or field.name == 'open_graph_image' or field.name == 'robots_index' or field.name == 'robots_follow' or field.name == 'seo_title' or field.name == 'seo_description' or field.name == 'seo_keywords' %}
                            <div class="premium-field {% if field.errors %}has-error{% elif form.is_bound %}has-success{% endif %}">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                <div class="input-shell {% if field.field.widget.input_type == 'file' %}input-shell-file{% endif %}">
                                    {% if field.name == 'canonical_url' %}<i class="fa-solid fa-link"></i>{% endif %}
                                    {% if field.name == 'meta_title' or field.name == 'seo_title' %}<i class="fa-solid fa-heading"></i>{% endif %}
                                    {% if field.name == 'meta_keywords' or field.name == 'seo_keywords' %}<i class="fa-solid fa-key"></i>{% endif %}

                                    {% if field.field.widget.input_type == 'file' %}
                                        <div class="upload-shell" data-upload-shell>
                                            {{ field }}
                                            <button type="button" class="upload-trigger" data-upload-trigger><i class="fa-solid fa-upload"></i> Upload File</button>
                                            <span class="upload-name" data-upload-name>No file chosen</span>
                                            <div class="upload-preview" data-upload-preview></div>
                                        </div>
                                    {% else %}
                                        {{ field }}
                                    {% endif %}
                                </div>
                                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                                {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>{% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </article>

            <article class="form-card form-card-wide">
                <div class="form-card-head">
                    <h4><i class="fa-solid fa-sliders"></i> Additional Settings</h4>
                </div>
                <div class="form-card-body form-card-body-grid">
                    {% for field in form %}
                        {% if field.name != 'logo' and field.name != 'company_name' and field.name != 'email' and field.name != 'phone_number' and field.name != 'whatsapp_number' and field.name != 'address' and field.name != 'footer_text' and field.name != 'business_hours' and field.name != 'facebook_url' and field.name != 'instagram_url' and field.name != 'youtube_url' and field.name != 'x_url' and field.name != 'meta_title' and field.name != 'meta_description' and field.name != 'meta_keywords' and field.name != 'canonical_url' and field.name != 'open_graph_image' and field.name != 'robots_index' and field.name != 'robots_follow' and field.name != 'seo_title' and field.name != 'seo_description' and field.name != 'seo_keywords' and field.name != 'hero_title' and field.name != 'hero_subtitle' %}
                            <div class="premium-field {% if field.errors %}has-error{% elif form.is_bound %}has-success{% endif %}">
                                <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                                <div class="input-shell {% if field.field.widget.input_type == 'file' %}input-shell-file{% endif %}">
                                    {% if field.field.widget.input_type == 'file' %}
                                        <div class="upload-shell" data-upload-shell>
                                            {{ field }}
                                            <button type="button" class="upload-trigger" data-upload-trigger><i class="fa-solid fa-upload"></i> Upload File</button>
                                            <span class="upload-name" data-upload-name>No file chosen</span>
                                            <div class="upload-preview" data-upload-preview></div>
                                        </div>
                                    {% else %}
                                        {{ field }}
                                    {% endif %}
                                </div>
                                {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
                                {% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>{% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </article>
        </div>

        <div class="settings-actions">
            <button type="submit" class="btn btn-primary btn-lg" data-save-button>
                <span class="save-text">Save Changes</span>
            </button>
            <a class="btn btn-outline-primary btn-lg" href="{% url 'dashboard' %}">Cancel</a>
        </div>
    </form>
</section>
{% endblock %}