{% extends 'base.html' %}

{% block title %}Cadastro da Loja{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3><i class="bi bi-shop"></i> Cadastro da Loja</h3>
                <p class="text-muted mb-0">Preencha os dados da sua loja</p>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}

                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label for="{{ form.nome.id_for_label }}" class="form-label">{{ form.nome.label }} *</label>
                            {{ form.nome }}
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="{{ form.cnpj.id_for_label }}" class="form-label">{{ form.cnpj.label }}</label>
                            {{ form.cnpj }}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.telefone.id_for_label }}" class="form-label">{{ form.telefone.label }} *</label>
                            {{ form.telefone }}
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}</label>
                            {{ form.email }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.endereco.id_for_label }}" class="form-label">{{ form.endereco.label }} *</label>
                        {{ form.endereco }}
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="{{ form.cidade.id_for_label }}" class="form-label">{{ form.cidade.label }} *</label>
                            {{ form.cidade }}
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="{{ form.estado.id_for_label }}" class="form-label">{{ form.estado.label }} *</label>
                            {{ form.estado }}
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="{{ form.cep.id_for_label }}" class="form-label">{{ form.cep.label }}</label>
                            {{ form.cep }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.logo.id_for_label }}" class="form-label">{{ form.logo.label }}</label>
                        {{ form.logo }}
                        <small class="form-text text-muted">A logo aparecerá nos cupons impressos</small>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.horario_fechamento_caixa.id_for_label }}" class="form-label">
                            {{ form.horario_fechamento_caixa.label }}
                        </label>
                        {{ form.horario_fechamento_caixa }}
                        <small class="form-text text-muted">Exemplo: 22:00</small>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-check-circle"></i> Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}