<!-- templates/core/system_settings.html -->
{% extends 'core/base.html' %}
{% load static %}

{% block title %}System Settings - SwiftPOS{% endblock %}

{% block topbar_title %}System Settings{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
        <div>
            <h5 class="mb-0 fw-bold">System Settings</h5>
            <div class="text-muted small">Configure your business information, POS mode, and currency.</div>
        </div>
    </div>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        {% if form.non_field_errors %}
        <div class="alert alert-danger small mb-3">{{ form.non_field_errors }}</div>
        {% endif %}

        <div class="row g-4">

            <!-- ── Business Information ── -->
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h6 class="card-title mb-0"><i class="fas fa-building me-2"></i>Business Information</h6>
                    </div>
                    <div class="card-body d-flex flex-column gap-3">

                        <div>
                            <label class="form-label small fw-semibold">Business Name</label>
                            {{ form.business_name }}
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Phone</label>
                                {{ form.business_phone }}
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold">Email</label>
                                {{ form.business_email }}
                            </div>
                        </div>
                        <div>
                            <label class="form-label small fw-semibold">Address</label>
                            {{ form.business_address }}
                        </div>
                        <div>
                            <label class="form-label small fw-semibold">Receipt Footer Text <span class="text-muted fw-normal">(e.g. "Thank you for your business!")</span></label>
                            {{ form.receipt_footer }}
                        </div>
                        <div>
                            <label class="form-label small fw-semibold">Logo <span class="text-muted fw-normal">(used on receipts)</span></label>
                            {{ form.logo }}
                        </div>

                    </div>
                </div>
            </div>

            <!-- ── POS Interface ── -->
            <div class="col-lg-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0"><i class="fas fa-cash-register me-2"></i>POS Interface</h6>
                    </div>
                    <div class="card-body">
                        <label class="form-label small fw-semibold">Default POS Terminal Mode</label>
                        {{ form.pos_interface_mode }}
                        <div class="text-muted small mt-1">
                            <strong>Classic POS</strong> — dropdown-based, works fully offline.<br>
                            <strong>Grid POS V2</strong> — visual product grid with cards.
                        </div>
                        {% if pos_interface_mode == 'grid' %}
                        <div class="alert alert-info py-2 small mt-3 mb-0" style="border-radius:10px;">
                            <i class="fas fa-info-circle me-1"></i>
                            Grid POS V2 is active —
                            <a href="{% url 'sales:pos_grid' %}" class="fw-bold">Open it here</a>.
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- ── Features Toggle ── -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0"><i class="fas fa-toggle-on me-2"></i>Features</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            {{ form.enable_camera_scanner }}
                            <label class="form-check-label small fw-semibold" for="{{ form.enable_camera_scanner.id_for_label }}">
                                Enable Camera Scanner inside Barcode POS
                            </label>
                            <div class="text-muted small mt-1">If enabled, you can use your device's camera to scan barcodes in the Barcode POS page.</div>
                        </div>
                    </div>
                </div>

                <!-- ── Currency & VAT ── -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0"><i class="fas fa-coins me-2"></i>Currency &amp; VAT</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-sm-4">
                                <label class="form-label small fw-semibold">Symbol</label>
                                {{ form.currency_symbol }}
                                <div class="text-muted small mt-1">e.g. {{ currency_symbol }} $ £ €</div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label small fw-semibold">Decimals</label>
                                {{ form.decimal_places }}
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label small fw-semibold">VAT Rate (%)</label>
                                {{ form.vat_rate }}
                                <div class="text-muted small mt-1">0 = disabled</div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    {{ form.use_comma_separator }}
                                    <label class="form-check-label small fw-semibold" for="{{ form.use_comma_separator.id_for_label }}">
                                        Use comma as thousands separator (e.g. 1,000.00)
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /right column -->

        </div>
        <!-- /row -->

        <div class="mt-4 d-flex justify-content-end">
            <button type="submit" class="btn btn-primary d-flex align-items-center gap-2">
                <i class="fas fa-save"></i> Save Settings
            </button>
        </div>
    </form>

</div>
{% endblock %}
