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

{% block title %}Configurações da Loja - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .config-hero {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 14px;
        padding: 2rem 2.5rem;
        margin-bottom: 1.5rem;
    }
    .config-hero i.icone-principal { font-size: 3.5rem; vertical-align: middle; margin-right: 1rem; }
    .config-form > .card {
        border-radius: 16px;
        box-shadow: 0 2px 14px rgba(29, 58, 95, .09);
    }
    .config-form .form-label {
        font-weight: 600;
        color: #34475a;
        margin-bottom: .35rem;
    }
    .config-form .form-control, .config-form .form-select {
        border-radius: 10px;
        border: 1px solid #d7dee8;
        padding: .55rem .9rem;
    }
    .config-form .form-control:focus, .config-form .form-select:focus {
        border-color: #7ba6d9;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    }
    .form-section-card {
        border: 1px solid #e4e9f0;
        border-radius: 14px;
        margin-bottom: 1.25rem;
        overflow: hidden;
    }
    .form-section-card > .card-header {
        background: #f6f8fb;
        color: #34475a;
        font-weight: 700;
        font-size: .95rem;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid #e4e9f0;
    }
    .form-section-card > .card-header .sec-badge {
        width: 1.9rem;
        height: 1.9rem;
        display: inline-grid;
        place-items: center;
        border-radius: 50%;
        font-size: .95rem;
        margin-right: .5rem;
        flex-shrink: 0;
    }
    .c-identificacao .sec-badge { background: #e8f0fe; color: #0d6efd; }
    .c-contato .sec-badge { background: #e7f7ef; color: #198754; }
    .c-endereco .sec-badge { background: #fff3e2; color: #fd7e14; }
    .c-visual .sec-badge { background: #f3e8fd; color: #a63fdb; }
    .c-funcionamento .sec-badge { background: #fbeaea; color: #dc3545; }
    .logo-atual {
        border: 2px solid #dee2e6;
        border-radius: 10px;
        max-width: 180px;
        max-height: 180px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }
    .footer-actions {
        background: #f6f8fb;
        border: 1px solid #e4e9f0;
        border-radius: 14px;
        padding: 1rem 1.25rem;
    }
    .forma-card {
        border: 1px solid #e4e9f0;
        border-radius: 12px;
        padding: .8rem 1rem;
        display: flex;
        align-items: center;
        gap: .75rem;
        background: #fff;
        transition: box-shadow .15s ease;
        height: 100%;
    }
    .forma-card:hover { box-shadow: 0 2px 10px rgba(29, 58, 95, .08); }
    .forma-card.forma-inativa { background: #f6f7f9; opacity: .75; }
    .forma-card .forma-icone {
        display: inline-grid;
        place-items: center;
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 10px;
        font-size: 1.05rem;
        flex-shrink: 0;
    }
    .forma-card .forma-nome { font-weight: 700; color: #34475a; font-size: .9rem; line-height: 1.2; }
    .forma-card .forma-info { color: #8a97a8; font-size: .74rem; }
    .forma-card .form-switch { margin-bottom: 0; }
    .forma-card .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
    .formas-card > .card {
        border-radius: 16px;
        box-shadow: 0 2px 14px rgba(29, 58, 95, .09);
    }
    .formas-card .card-header {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 16px 16px 0 0 !important;
        padding: 1.1rem 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'dashboard' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-10">

        <div class="config-hero d-flex align-items-center flex-wrap">
            <i class="bi bi-gear-fill icone-principal"></i>
            <div>
                <h2 class="mb-1"><strong>Configurações da Loja</strong></h2>
                <p class="mb-0">Ajuste os dados, a marca e o funcionamento do sistema da sua loja.</p>
            </div>
        </div>

        {% if messages %}
            {% 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"></button>
            </div>
            {% endfor %}
        {% endif %}

        <div class="card config-form mb-4">
            <div class="card-body p-4">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}

                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <strong><i class="bi bi-exclamation-triangle"></i> Erro!</strong> Corrija os erros abaixo.
                    </div>
                    {% endif %}

                    <div class="card form-section-card c-identificacao">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-shop"></i></span>
                            Identificação da Loja
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-md-8 mb-3">
                                    <label class="form-label"><i class="bi bi-shop"></i> Nome da Loja *</label>
                                    {{ form.nome }}
                                    {% if form.nome.errors %}
                                        <div class="text-danger small mt-1">{{ form.nome.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label"><i class="bi bi-card-text"></i> CNPJ</label>
                                    {{ form.cnpj }}
                                    {% if form.cnpj.errors %}
                                        <div class="text-danger small mt-1">{{ form.cnpj.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card form-section-card c-contato">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-telephone"></i></span>
                            Contato
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label"><i class="bi bi-telephone"></i> Telefone *</label>
                                    {{ form.telefone }}
                                    {% if form.telefone.errors %}
                                        <div class="text-danger small mt-1">{{ form.telefone.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label"><i class="bi bi-envelope"></i> Email</label>
                                    {{ form.email }}
                                    {% if form.email.errors %}
                                        <div class="text-danger small mt-1">{{ form.email.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card form-section-card c-endereco">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-geo-alt"></i></span>
                            Endereço
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-3">
                                <label class="form-label"><i class="bi bi-geo-alt"></i> Endereço completo *</label>
                                {{ form.endereco }}
                                {% if form.endereco.errors %}
                                    <div class="text-danger small mt-1">{{ form.endereco.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3 mb-md-0">
                                    <label class="form-label"><i class="bi bi-building"></i> Cidade *</label>
                                    {{ form.cidade }}
                                    {% if form.cidade.errors %}
                                        <div class="text-danger small mt-1">{{ form.cidade.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-3 mb-3 mb-md-0">
                                    <label class="form-label"><i class="bi bi-map"></i> Estado (UF) *</label>
                                    {{ form.estado }}
                                    {% if form.estado.errors %}
                                        <div class="text-danger small mt-1">{{ form.estado.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-3 mb-3 mb-md-0">
                                    <label class="form-label"><i class="bi bi-mailbox"></i> CEP</label>
                                    {{ form.cep }}
                                    {% if form.cep.errors %}
                                        <div class="text-danger small mt-1">{{ form.cep.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card form-section-card c-visual">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-image"></i></span>
                            Logo — aparece nos cupons impressos
                        </div>
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <div class="col-md-7">
                                    <label class="form-label"><i class="bi bi-upload"></i> Enviar nova logo (JPG ou PNG)</label>
                                    {{ form.logo }}
                                    {% if form.logo.errors %}
                                        <div class="text-danger small mt-1">{{ form.logo.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-5 text-center">
                                    {% if form.instance.logo %}
                                        <small class="text-muted d-block mb-1">Logo atual:</small>
                                        <img src="{{ form.instance.logo.url }}" alt="Logo da loja" class="logo-atual">
                                    {% else %}
                                        <small class="text-muted d-block"><i class="bi bi-image" style="font-size: 1.6rem;"></i><br>Nenhuma logo enviada</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card form-section-card c-funcionamento">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-clock-history"></i></span>
                            Funcionamento do Caixa
                        </div>
                        <div class="card-body p-4">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <label class="form-label"><i class="bi bi-clock-history"></i> Fechamento automático do caixa</label>
                                    {{ form.horario_fechamento_caixa }}
                                    {% if form.horario_fechamento_caixa.errors %}
                                        <div class="text-danger small mt-1">{{ form.horario_fechamento_caixa.errors }}</div>
                                    {% endif %}
                                    <small class="text-muted d-block">Ex.: 22:00 — após esse horário o caixa aberto é fechado sozinho.</small>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        {{ form.ativa }}
                                        <label class="form-check-label fw-bold" for="{{ form.ativa.id_for_label }}">
                                            <i class="bi bi-check-circle"></i> Loja Ativa
                                        </label>
                                    </div>
                                    <small class="text-muted d-block">Desative temporariamente se a loja não estiver operando.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="footer-actions d-flex flex-wrap gap-2 justify-content-end">
                        <a href="{% url 'dashboard' %}" class="btn btn-secondary">
                            <i class="bi bi-x-circle"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-check-circle"></i> Salvar Alterações
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card formas-card mt-4">
            <div class="card-header d-flex align-items-center flex-wrap gap-2">
                <div class="me-auto">
                    <h3 class="mb-0"><i class="bi bi-credit-card-2-back"></i> Formas de Pagamento Aceitas</h3>
                    <p style="font-size:.8rem; margin:0; opacity:.85;">O que estiver ativo aparece no PDV — desativar não apaga o histórico de vendas</p>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    {% for forma in formas %}
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="forma-card {% if not forma.ativa %}forma-inativa{% endif %}">
                            <span class="forma-icone {% if forma.ativa %}bg-success-subtle text-success{% else %}bg-secondary-subtle text-secondary{% endif %}">
                                <i class="bi {% if forma.ativa %}bi-check-circle-fill{% else %}bi-slash-circle{% endif %}"></i>
                            </span>
                            <div class="flex-grow-1">
                                <div class="forma-nome">{{ forma.nome }}</div>
                                <div class="forma-info">
                                    {{ forma.get_tipo_display }}
                                    {% if forma.parcelas_max > 1 %} — até {{ forma.parcelas_max }}x{% endif %}
                                    · {% if forma.ativa %}Ativa{% else %}Inativa{% endif %}
                                </div>
                            </div>
                            {% if user.is_superuser or perms.funcionarios.acesso_configuracoes %}
                            <form method="post" action="{% url 'forma_pagamento_toggle' forma.pk %}">
                                {% csrf_token %}
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                           {% if forma.ativa %}checked{% endif %} onchange="this.form.submit()">
                                </div>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12 text-center text-muted py-4">
                        Nenhuma forma de pagamento cadastrada ainda.
                    </div>
                    {% endfor %}
                </div>
                <small class="text-muted d-block mt-3">
                    <i class="bi bi-info-circle"></i> Vendas antigas feitas com uma forma desativada continuam nos relatórios e no histórico normalmente.
                </small>
            </div>
        </div>

    </div>
</div>
{% endblock %}