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

{% block title %}{{ titulo }} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .gasto-form > .card {
        border-radius: 16px;
        box-shadow: 0 2px 14px rgba(29, 58, 95, .09);
    }
    .gasto-form .card-header {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 16px 16px 0 0 !important;
        padding: 1.1rem 1.5rem;
    }
    .gasto-form .card-header h3 { font-size: 1.15rem; }
    .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-valores .sec-badge { background: #e7f7ef; color: #198754; }
    .c-situacao .sec-badge { background: #fff3e2; color: #fd7e14; }
    .gasto-form .form-label {
        font-weight: 600;
        color: #34475a;
        margin-bottom: .35rem;
    }
    .gasto-form .form-control, .gasto-form .form-select {
        border-radius: 10px;
        border: 1px solid #d7dee8;
        padding: .55rem .9rem;
    }
    .gasto-form .form-control:focus, .gasto-form .form-select:focus {
        border-color: #7ba6d9;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    }
    .gasto-valor-longo {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .gasto-valor-longo .prefixo {
        background: #e8f0fe;
        color: #0d6efd;
        font-weight: 700;
        border-radius: 10px;
        padding: .55rem .9rem;
    }
    .footer-actions {
        background: #f6f8fb;
        border: 1px solid #e4e9f0;
        border-radius: 14px;
        padding: 1rem 1.25rem;
    }
    .switch-pago {
        display: flex;
        align-items: center;
        gap: .25rem;
    }
    .switch-pago .form-switch .form-check-input { width: 2.5em; height: 1.35em; }
</style>
{% endblock %}

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

<div class="row justify-content-center gasto-form">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="bi bi-wallet2 fs-4"></i>
                <div>
                    <h3 class="mb-0">{{ titulo }}</h3>
                    <span style="font-size: .8rem; opacity: .85;">Registre despesas para o caixa calcular o resultado</span>
                </div>
            </div>
            <div class="card-body p-4">
                <form method="post">
                    {% 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-card-heading"></i></span>
                            Dados do Gasto
                        </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-chat-left-text"></i> Descrição *</label>
                                    {{ form.descricao }}
                                    {% if form.descricao.errors %}
                                        <div class="text-danger small mt-1">{{ form.descricao.errors }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label"><i class="bi bi-calendar"></i> Data do Gasto *</label>
                                    {{ form.data_gasto }}
                                    {% if form.data_gasto.errors %}
                                        <div class="text-danger small mt-1">{{ form.data_gasto.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mb-0">
                                <label class="form-label"><i class="bi bi-tags"></i> Categoria *</label>
                                {{ form.categoria }}
                                {% if form.categoria.errors %}
                                    <div class="text-danger small mt-1">{{ form.categoria.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="card form-section-card c-valores">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-cash-stack"></i></span>
                            Valor
                        </div>
                        <div class="card-body p-4">
                            <div class="gasto-valor-longo mb-0">
                                <span class="prefixo">R$</span>
                                {{ form.valor }}
                            </div>
                            {% if form.valor.errors %}
                                <div class="text-danger small mt-1">{{ form.valor.errors }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="card form-section-card c-situacao">
                        <div class="card-header d-flex align-items-center">
                            <span class="sec-badge"><i class="bi bi-flag"></i></span>
                            Situação e Observações
                        </div>
                        <div class="card-body p-4">
                            <div class="switch-pago mb-4">
                                <div class="form-switch">
                                    {{ form.pago }}
                                </div>
                                <label class="form-check-label fw-bold" for="{{ form.pago.id_for_label }}">
                                    <i class="bi bi-check-circle"></i> Gasto já foi pago
                                </label>
                            </div>
                            <div class="mb-0">
                                <label class="form-label"><i class="bi bi-chat-left-text"></i> Observações</label>
                                {{ form.observacoes }}
                                {% if form.observacoes.errors %}
                                    <div class="text-danger small mt-1">{{ form.observacoes.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-3 justify-content-between align-items-center flex-wrap">
                        <a href="{% url 'lista_gastos' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> Voltar sem salvar
                        </a>
                    </div>

                    <div class="footer-actions d-flex flex-wrap gap-2 justify-content-end mt-4">
                        <a href="{% url 'lista_gastos' %}" 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 Gasto
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}