{% extends "pos/base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}
{% block heading %}{{ page_title }}{% endblock %}

{% block stylesheets %}
<style>
    .guest-config-page .card {
        border: 1px solid #e3e6f0;
        border-radius: .35rem;
    }

    .guest-config-page .card-header {
        background: #f8f9fc;
        font-weight: 600;
    }

    .guest-config-page .setting-card {
        height: 100%;
    }

    .guest-config-page .setting-title {
        font-size: 15px;
        font-weight: 600;
        color: #2e2f37;
        margin-bottom: 6px;
    }

    .guest-config-page .setting-desc {
        font-size: 13px;
        color: #6c757d;
        min-height: 38px;
        margin-bottom: 10px;
    }

    .guest-config-page .meta-badges .badge {
        font-size: 11px;
        margin-right: 4px;
        margin-bottom: 4px;
        padding: .35rem .5rem;
    }

    .guest-config-page .color-preview-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .guest-config-page .color-picker {
        width: 52px;
        min-width: 52px;
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        padding: 2px;
        background: #fff;
    }

    .guest-config-page .theme-hint {
        font-size: 12px;
        color: #6c757d;
        margin-top: 6px;
    }

    .guest-config-page .page-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
</style>
{% endblock %}

{% block content %}
<div class="guest-config-page">

    <div class="card shadow-sm mb-3">
        <div class="card-body">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                <div>
                    <h5 class="mb-1">Guest App Configuration</h5>
                    <p class="mb-0 text-muted">
                        Configure guest app bootstrap settings in a simple standard layout.
                    </p>
                </div>

                <div class="page-actions mt-3 mt-md-0">
                    <button type="submit" form="guest-config-form" class="btn btn-primary btn-sm">
                        <i class="fas fa-save mr-1"></i> Save Config
                    </button>
                    <a href="javascript:history.back()" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% if created_count %}
        <div class="alert alert-success">
            Missing default guest settings were auto-created:
            <strong>{{ created_count }}</strong>
        </div>
    {% endif %}

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-success">{{ message }}</div>
        {% endfor %}
    {% endif %}

    <form id="guest-config-form" method="post">
        {% csrf_token %}

        {% for section in groups %}
            <div class="card shadow-sm mb-4">
                <div class="card-header py-3">
                    {{ section.title }}
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for row in section.rows %}
                            <div class="col-md-6 col-xl-4 mb-4 js-theme-card
                                {% if row.cfg.name == 'guest_theme_name' %}js-builtin-only{% endif %}
                                {% if row.cfg.name == 'guest_theme_seed' or row.cfg.name == 'guest_theme_dark' %}js-seed-only{% endif %}">
                                
                                <div class="card setting-card shadow-sm h-100">
                                    <div class="card-body">
                                        <div class="setting-title">{{ row.cfg.name }}</div>

                                        {% if row.cfg.descp %}
                                            <div class="setting-desc">{{ row.cfg.descp }}</div>
                                        {% else %}
                                            <div class="setting-desc">No description available.</div>
                                        {% endif %}

                                        <div class="meta-badges mb-3">
                                            <span class="badge badge-primary">type: {{ row.cfg.setting_type }}</span>
                                            <span class="badge badge-success">android: {{ row.cfg.is_for_android }}</span>
                                            <span class="badge badge-secondary">editable: {{ row.cfg.editable }}</span>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label for="cfg_{{ row.cfg.pk }}"><strong>Value</strong></label>

                                            {% if row.control_type == "select" %}
                                                <select
                                                    id="cfg_{{ row.cfg.pk }}"
                                                    name="cfg_{{ row.cfg.pk }}"
                                                    class="form-control {% if row.cfg.name == 'guest_theme_mode' %}js-theme-mode{% endif %}"
                                                    {% if not row.is_editable %}disabled{% endif %}
                                                >
                                                    {% for opt in row.options %}
                                                        <option value="{{ opt }}" {% if row.cfg.value == opt %}selected{% endif %}>
                                                            {{ opt }}
                                                        </option>
                                                    {% endfor %}
                                                </select>

                                            {% elif row.control_type == "color" %}
                                                <div class="color-preview-wrap">
                                                    <input
                                                        type="color"
                                                        class="color-picker js-color-picker"
                                                        value="{{ row.color_value }}"
                                                        data-target="cfg_{{ row.cfg.pk }}"
                                                        {% if not row.is_editable %}disabled{% endif %}
                                                    >

                                                    <input
                                                        type="text"
                                                        id="cfg_{{ row.cfg.pk }}"
                                                        name="cfg_{{ row.cfg.pk }}"
                                                        value="{{ row.color_value }}"
                                                        class="form-control js-color-text"
                                                        maxlength="7"
                                                        {% if not row.is_editable %}disabled{% endif %}
                                                    >
                                                </div>
                                                <div class="theme-hint">
                                                    Use hex color like: #2563EB
                                                </div>

                                            {% else %}
                                                <input
                                                    type="text"
                                                    id="cfg_{{ row.cfg.pk }}"
                                                    name="cfg_{{ row.cfg.pk }}"
                                                    value="{{ row.cfg.value }}"
                                                    class="form-control"
                                                    {% if not row.is_editable %}disabled{% endif %}
                                                >
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="mb-2">No guest app settings found</h5>
                    <p class="text-muted mb-0">
                        No rows were found with <code>setting_type = guest_app</code>.
                    </p>
                </div>
            </div>
        {% endfor %}

        <div class="text-right mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i> Save Guest App Config
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block javascripts %}
<script>
    (function () {
        function normalizeHex(v) {
            v = (v || '').trim().toUpperCase();
            if (!v) return '#2563EB';
            if (!v.startsWith('#')) v = '#' + v;
            if (/^#[0-9A-F]{6}$/.test(v)) return v;
            return '#2563EB';
        }

        function syncThemeMode() {
            var modeEl = document.querySelector('.js-theme-mode');
            var mode = modeEl ? modeEl.value : 'builtin';

            document.querySelectorAll('.js-builtin-only').forEach(function (el) {
                el.style.display = (mode === 'builtin') ? '' : 'none';
            });

            document.querySelectorAll('.js-seed-only').forEach(function (el) {
                el.style.display = (mode === 'seed') ? '' : 'none';
            });
        }

        document.querySelectorAll('.js-color-picker').forEach(function (picker) {
            picker.addEventListener('input', function () {
                var targetId = picker.getAttribute('data-target');
                var text = document.getElementById(targetId);
                if (text) {
                    text.value = picker.value.toUpperCase();
                }
            });
        });

        document.querySelectorAll('.js-color-text').forEach(function (text) {
            text.addEventListener('change', function () {
                var val = normalizeHex(text.value);
                text.value = val;

                var wrap = text.closest('.color-preview-wrap');
                if (!wrap) return;

                var picker = wrap.querySelector('.js-color-picker');
                if (picker) {
                    picker.value = val;
                }
            });
        });

        var modeEl = document.querySelector('.js-theme-mode');
        if (modeEl) {
            modeEl.addEventListener('change', syncThemeMode);
        }

        syncThemeMode();
    })();
</script>
{% endblock %}