{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4 align-items-center">
        <div class="col-md-6">
            <h1 class="h3 mb-0 text-gray-800">{% trans "System Settings" %}</h1>
            <p class="text-muted">{% trans "Manage your business profile and preferences." %}</p>
        </div>
    </div>

    {% if messages %}
    <div class="row">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 glassmorphism mb-4">
                <div class="card-header bg-transparent border-0 py-3">
                    <h5 class="card-title mb-0 fw-bold">{% trans "Business Profile" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="row g-3">
                            <div class="col-md-12 text-center mb-3">
                                <label class="form-label d-block fw-semibold">{% trans "Business Logo" %}</label>
                                {% if settings.logo %}
                                    <img src="{{ settings.logo.url }}" alt="Logo" class="img-thumbnail mb-2" style="max-height: 100px;">
                                {% else %}
                                    <div class="bg-light border rounded d-inline-flex align-items-center justify-content-center mb-2" style="width: 100px; height: 100px;">
                                        <i class="bi bi-image text-muted fs-1"></i>
                                    </div>
                                {% endif %}
                                <input type="file" name="logo" class="form-control form-control-sm mx-auto" style="max-width: 300px;" accept="image/*">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label fw-semibold">{% trans "Business Name" %}</label>
                                <input type="text" name="business_name" class="form-control" value="{{ settings.business_name }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "Email Address" %}</label>
                                <input type="email" name="email" class="form-control" value="{{ settings.email }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "Phone Number" %}</label>
                                <input type="text" name="phone" class="form-control" value="{{ settings.phone }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "VAT Number" %}</label>
                                <input type="text" name="vat_number" class="form-control" value="{{ settings.vat_number }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "Registration Number" %}</label>
                                <input type="text" name="registration_number" class="form-control" value="{{ settings.registration_number }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">{% trans "Address" %}</label>
                                <textarea name="address" class="form-control" rows="3">{{ settings.address }}</textarea>
                            </div>
                            
                            <hr class="my-4">
                            
                            <h5 class="fw-bold mb-3">{% trans "Financial Preferences" %}</h5>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "Currency Symbol" %}</label>
                                <input type="text" name="currency_symbol" class="form-control" value="{{ settings.currency_symbol }}" required>
                                <div class="form-text">{% trans "e.g., OMR, $, £, SAR" %}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">{% trans "Default Tax Rate (%)" %}</label>
                                <input type="number" step="0.01" name="tax_rate" class="form-control" value="{{ settings.tax_rate }}" required>
                            </div>
                        </div>
                        
                        <div class="mt-4 pt-3 border-top d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary px-4 py-2">
                                <i class="bi bi-check-circle me-2"></i> {% trans "Save Changes" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 glassmorphism mb-4">
                <div class="card-header bg-transparent border-0 py-3">
                    <h5 class="card-title mb-0 fw-bold">{% trans "Help & Support" %}</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        {% trans "Need help configuring your smart admin? Check our documentation or contact support." %}
                    </p>
                    <a href="#" class="btn btn-outline-secondary w-100 btn-sm">
                        <i class="bi bi-question-circle me-1"></i> {% trans "Documentation" %}
                    </a>
                </div>
            </div>
            
            <div class="card shadow-sm border-0 glassmorphism bg-light">
                <div class="card-body text-center py-4">
                    <i class="bi bi-info-circle fs-1 text-primary mb-3"></i>
                    <h6 class="fw-bold">{% trans "Smart Admin Version" %}</h6>
                    <p class="text-muted mb-0">v2.1.0-Meezan</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}