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

{% block title %}Abrir Caixa - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.caixa-abrir .page-title { display: flex; align-items: center; gap: .75rem; }
.caixa-abrir .page-title > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #dcf2e3; color: #1e7e34; font-size: 1.4rem; }
.caixa-abrir .page-title small { color: #59697a; font-size: .86rem; }

.caixa-abrir .resumo-faixa {
    display: flex;
    align-items: center;
    background: #f2f6fa;
    border: 1px solid #e2e9f1;
    border-radius: 12px;
    padding: .85rem 1rem;
    gap: 1rem;
}
.caixa-abrir .resumo-item { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; }
.caixa-abrir .resumo-item + .resumo-item { border-left: 1px solid #dde5ee; padding-left: 1rem; }
.caixa-abrir .resumo-icon { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; font-size: 1.05rem; flex-shrink: 0; }
.caixa-abrir .icon-blue { background: #dcebfa; color: #1861c5; }
.caixa-abrir .icon-teal { background: #d9f1ef; color: #10776e; }
.caixa-abrir .icon-red  { background: #fbdfe2; color: #b02a37; }
.caixa-abrir .resumo-label { color: #59697a; font-size: .78rem; }
.caixa-abrir .resumo-value { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.caixa-abrir .resumo-sub { color: #8a97a8; font-size: .74rem; }

.caixa-abrir .form-flat { background: #f6f9fc; border: 1px solid #dbe3ec; border-radius: 9px; color: #212529; }
.caixa-abrir .form-flat[disabled] { background: #eef2f6; }

.caixa-abrir .saldo-field {
    border: 2px solid #1e7e34;
    border-radius: 11px;
    background: #f4fbf5;
    padding: .4rem .9rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.caixa-abrir .saldo-field .rs { font-weight: 700; color: #1e7e34; font-size: 1.05rem; }
.caixa-abrir .saldo-field input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.25rem;
    font-weight: 700;
    color: #145c29;
    width: 100%;
    padding-left: 0 !important;
}
.caixa-abrir .saldo-field:focus-within { border-color: #145c29; background: #ffffff; }

.caixa-abrir .campo-rotulo { font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.caixa-abrir .campo-ajuda { color: #8a97a8; font-size: .78rem; margin-top: .2rem; }
.caixa-abrir .required::after { content: " *"; color: #b02a37; }

.caixa-abrir .saldo-card {
    background: #eaf8ef;
    border: 1px solid #bfe6cd;
    border-radius: 12px;
    padding: .9rem 1.05rem;
    margin: 1.15rem -1.05rem;
}
.caixa-abrir .saldo-card .saldo-rotulo { color: #145c29; font-weight: 700; }
.caixa-abrir .saldo-card td { padding: .15rem 0; }
.caixa-abrir .saldo-card .total { border-top: 1px dashed #a9d4ba; font-weight: 700; color: #145c29; }

.caixa-abrir .btn-cancelar, .caixa-abrir .btn-abrir { height: 52px; font-size: 1rem; font-weight: 600; border-radius: 10px; }
.caixa-abrir .btn-abrir { background: linear-gradient(135deg, #1e7e34 0%, #27a356 100%); border: none; }
.caixa-abrir .btn-abrir:hover { filter: brightness(1.06); }
.caixa-abrir .btn-cancelar { background: #eef1f5; border: none; color: #59697a; }
.caixa-abrir .btn-cancelar:hover { background: #e2e7ee; color: #34475a; }
</style>
{% endblock %}

{% block content %}
<div class="caixa-abrir">
    <div class="page-title mb-3">
        <i class="bi bi-cash-stack"></i>
        <div>
            <h2 class="mb-0">Abrir Caixa</h2>
            <small>Inicie o caixa do dia com segurança.</small>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-7 col-xl-6">
            <div class="card" style="border-radius: 14px;">
                <div class="card-body p-3">

                    <!-- Faixa de contexto -->
                    <div class="resumo-faixa mb-3">
                        <div class="resumo-item">
                            <span class="resumo-icon icon-blue"><i class="bi bi-person-fill"></i></span>
                            <div>
                                <div class="resumo-label">Operador</div>
                                <div class="resumo-value">{{ user.username }}</div>
                                <div class="resumo-sub">Usuário que abrirá o caixa</div>
                            </div>
                        </div>
                        <div class="resumo-item">
                            <span class="resumo-icon icon-teal"><i class="bi bi-calendar-event-fill"></i></span>
                            <div>
                                <div class="resumo-label">Data atual</div>
                                <div class="resumo-value">{{ now|date:'d/m/Y H:i' }}</div>
                                <div class="resumo-sub">Data e hora de abertura</div>
                            </div>
                        </div>
                        <div class="resumo-item">
                            <span class="resumo-icon icon-red"><i class="bi bi-lock-fill"></i></span>
                            <div>
                                <div class="resumo-label">Status do caixa</div>
                                <div class="resumo-value text-danger">Fechado</div>
                                <div class="resumo-sub">O caixa ainda não foi aberto hoje</div>
                            </div>
                        </div>
                    </div>

                    <form method="post">
                        {% csrf_token %}

                        {% if form.non_field_errors or form.errors %}{% if form.non_field_errors %}
                        <div class="alert alert-danger"><i class="bi bi-exclamation-octagon-fill"></i> Corrija os erros abaixo.</div>
                        {% endif %}{% endif %}

                        <!-- Operador -->
                        <div class="mb-3">
                            <label class="campo-rotulo"><i class="bi bi-person"></i> Operador</label>
                            <input type="text" class="form-control form-flat" value="{{ user.username }}" disabled>
                            <div class="campo-ajuda">Usuário responsável pela abertura do caixa.</div>
                        </div>

                        <!-- Data/Hora -->
                        <div class="mb-1">
                            <label class="campo-rotulo"><i class="bi bi-calendar"></i> Data/Hora</label>
                            <input type="text" class="form-control form-flat" value="{{ now|date:'d/m/Y H:i' }}" disabled>
                            <div class="campo-ajuda">Data e hora atual do sistema.</div>
                        </div>

                        <!-- Saldo inicial -->
                        <div class="saldo-card">
                            <label class="campo-rotulo required mb-2"><i class="bi bi-cash-coin"></i> Saldo Inicial (R$)</label>
                            <div class="saldo-field">
                                <span class="rs">R$</span>
                                {{ form.saldo_inicial }}
                            </div>
                            {% if form.saldo_inicial.errors %}<div class="text-danger mt-1">{{ form.saldo_inicial.errors }}</div>{% endif %}
                            <div class="campo-ajuda">Digite o valor em dinheiro que está no caixa.</div>
                        </div>

                        <!-- Observações -->
                        <div class="mb-4">
                            <label class="campo-rotulo"><i class="bi bi-chat-left-text"></i> Observações</label>
                            {{ form.observacoes }}
                            {% if form.observacoes.errors %}<div class="text-danger mt-1">{{ form.observacoes.errors }}</div>{% endif %}
                            <div class="campo-ajuda">Informações adicionais (opcional).</div>
                        </div>

                        <div class="row g-2">
                            <div class="col-7">
                                <button type="submit" class="btn btn-success btn-abrir w-100"><i class="bi bi-check-circle-fill"></i> Abrir Caixa</button>
                            </div>
                            <div class="col-5">
                                <a href="{% url 'dashboard' %}" class="btn btn-cancelar w-100"><i class="bi bi-x-circle"></i> Cancelar</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}