{% extends "base.html" %}

{% block title %}{% if embalagem %}Editar{% else %}Nova{% endif %} Embalagem{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="bi bi-box-seam"></i> {% if embalagem %}Editar{% else %}Nova{% endif %} Embalagem</h1>
        <a href="{{ url_for('embalagens') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" class="form-lockable">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Nome *</label>
                    <input type="text" class="form-control" name="nome" 
                           value="{{ embalagem.nome if embalagem else '' }}" 
                           placeholder="Ex: Unidade, Caixa c/ 6, Fardo c/ 12" required>
                    <small class="text-muted">Nome completo da embalagem</small>
                </div>
                
                <div class="col-md-2 mb-3">
                    <label class="form-label">Sigla *</label>
                    <input type="text" class="form-control" name="sigla" 
                           value="{{ embalagem.sigla if embalagem else '' }}" 
                           placeholder="Ex: UN, CX6, FD12" maxlength="10" required>
                    <small class="text-muted">Abreviação</small>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label">Multiplicador *</label>
                    <input type="number" class="form-control" name="multiplicador" 
                           value="{{ embalagem.multiplicador if embalagem and embalagem.multiplicador else 1 }}" 
                           step="0.01" min="0.01" required id="multiplicadorInput">
                    <small class="text-muted">Qtd de unidades (ex: CX6=6, FD12=12)</small>
                </div>
                
                <div class="col-md-3 mb-3">
                    <label class="form-label d-block">Status</label>
                    <div class="form-check form-switch mt-2">
                        <input class="form-check-input" type="checkbox" name="ativo" 
                               {% if not embalagem or embalagem.ativo %}checked{% endif %}>
                        <label class="form-check-label">Ativo</label>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Composição (impresso no DANFE)</label>
                    <input type="text" class="form-control" name="descricao_composicao"
                           value="{{ embalagem.descricao_composicao if embalagem and embalagem.descricao_composicao else '' }}"
                           placeholder="Ex: 12 UN/CX, 6 UN/FD, 500ML">
                    <small class="text-muted">Texto que identifica a quantidade interna por embalagem (opcional)</small>
                </div>

                <div class="col-md-2 mb-3">
                    <label class="form-label">Unidade interna</label>
                    <input type="text" class="form-control" name="unidade_interna"
                           value="{{ embalagem.unidade_interna if embalagem and embalagem.unidade_interna else '' }}"
                           placeholder="UN" maxlength="10">
                    <small class="text-muted">Ex: UN, ML, G (opcional)</small>
                </div>

                <div class="col-md-6 mb-3 d-flex align-items-end">
                    <div class="alert alert-light border w-100 mb-0">
                        <small class="text-muted">
                            Dica: se deixar “Composição” em branco, o sistema tenta montar automaticamente usando o multiplicador.
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="fracionada" 
                               {% if embalagem and embalagem.fracionada %}checked{% endif %}>
                        <label class="form-check-label">
                            <strong>Permite quantidade fracionada</strong>
                            <br><small class="text-muted">
                                Se marcado, permite vender 0.5 caixa, 1.5 fardos, etc.
                            </small>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                <strong>Exemplos de Embalagens:</strong>
                <div class="table-responsive mt-2">
                    <table class="table table-sm table-borderless mb-0">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Sigla</th>
                                <th>Multiplicador</th>
                                <th>Fracionada</th>
                                <th>Descrição</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Unidade</td>
                                <td>UN</td>
                                <td>1</td>
                                <td>❌</td>
                                <td>Venda por unidade</td>
                            </tr>
                            <tr>
                                <td>Caixa c/ 6</td>
                                <td>CX6</td>
                                <td>6</td>
                                <td>❌</td>
                                <td>1 caixa = 6 unidades</td>
                            </tr>
                            <tr>
                                <td>Caixa c/ 12</td>
                                <td>CX12</td>
                                <td>12</td>
                                <td>❌</td>
                                <td>1 caixa = 12 unidades</td>
                            </tr>
                            <tr>
                                <td>Fardo c/ 10</td>
                                <td>FD10</td>
                                <td>10</td>
                                <td>❌</td>
                                <td>1 fardo = 10 unidades</td>
                            </tr>
                            <tr>
                                <td>Quilo</td>
                                <td>KG</td>
                                <td>1</td>
                                <td>✅</td>
                                <td>Permite 0.5kg, 1.250kg</td>
                            </tr>
                            <tr>
                                <td>Litro</td>
                                <td>L</td>
                                <td>1</td>
                                <td>✅</td>
                                <td>Permite 0.75L, 2.5L</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Salvar
                </button>
                <a href="{{ url_for('embalagens') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle"></i> Cancelar
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}