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

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

{% block extra_css %}
<style>
    /* ── Page header ── */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .75rem;
        margin-bottom: 1.75rem;
    }
    .produto-form-page { max-width: 1280px; margin: 0 auto; padding-bottom: 1rem; }
    .page-header-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
    .page-header .page-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.4rem; flex-shrink: 0;
    }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: #2d3748; }
    .page-header p  { margin: 0; color: #718096; font-size: .9rem; }

    /* ── Section cards ── */
    .form-section {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0,0,0,.06);
        margin-bottom: 1.25rem;
        overflow: hidden;
    }
    .form-section-header {
        display: flex; align-items: center; gap: .6rem;
        padding: .85rem 1.25rem;
        background: #f8f9fc;
        border-bottom: 1px solid #e9ecef;
        font-weight: 600; font-size: .95rem; color: #495057;
    }
    .form-section-header .section-icon {
        width: 30px; height: 30px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; flex-shrink: 0;
    }
    .section-icon.blue   { background: #e8f0fe; color: #4a90e2; }
    .section-icon.purple { background: #f3e8ff; color: #8b5cf6; }
    .section-icon.green  { background: #e6f9f0; color: #27ae60; }
    .section-icon.orange { background: #fff3e0; color: #f57c00; }
    .section-icon.teal   { background: #e0f7fa; color: #00897b; }

    .form-section-body { padding: 1.25rem; }
    .section-description { color: #718096; font-size: .82rem; margin: 0 0 1rem; }

    /* ── Inputs ── */
    .form-label {
        font-weight: 500; font-size: .875rem;
        color: #4a5568; margin-bottom: .35rem;
    }
    .form-label .required-star { color: #e53e3e; }
    .form-control, .form-select {
        border-radius: 8px;
        border: 1.5px solid #e2e8f0;
        font-size: .9rem;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus, .form-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102,126,234,.15);
    }

    /* ── Barcode actions ── */
    .barcode-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
    .barcode-actions .btn { border-radius: 7px; font-size: .8rem; padding: .35rem .85rem; }

    /* ── Quick-add badges ── */
    .quick-add-link {
        display: inline-flex; align-items: center; gap: .3rem;
        font-size: .78rem; font-weight: 500;
        color: #667eea; text-decoration: none;
        background: #e8f0fe; border-radius: 20px;
        padding: .2rem .65rem;
        transition: background .2s;
    }
    .quick-add-link:hover { background: #d0e0fc; color: #4a72d1; }

    /* ── Image upload ── */
    .photo-upload-zone {
        border: 2px dashed #cbd5e0;
        border-radius: 10px;
        padding: 1rem;
        text-align: center;
        background: #f8f9fc;
        transition: border-color .2s;
        cursor: pointer;
    }
    .photo-upload-zone:hover { border-color: #667eea; }
    .photo-upload-zone input[type="file"] { display: none; }
    #foto-preview {
        max-width: 140px; max-height: 140px;
        border-radius: 8px; object-fit: cover;
        border: 2px solid #e2e8f0;
    }

    /* ── Status switch ── */
    .status-card {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem;
        background: #f8f9fc; border-radius: 10px;
        padding: .85rem 1.1rem;
        border: 1.5px solid #e2e8f0;
    }
    .status-card > div:first-child { flex: 1; min-width: 0; }
    .status-card .form-check { flex-shrink: 0; }
    .status-card .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }

    /* ── Footer actions ── */
    .form-footer {
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem;
        padding: 1.1rem 1.25rem;
        background: #f8f9fc;
        border-top: 1px solid #e9ecef;
        border-radius: 0 0 14px 14px;
    }
    .btn-cancel  { min-width: 130px; border-radius: 8px; }
    .btn-save    { min-width: 160px; border-radius: 8px; }

    /* ── Input group fix ── */
    .input-group .form-control {
        border-radius: 0 8px 8px 0 !important;
    }

    /* ── Margin helpers card label ── */
    .label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem; margin-bottom: .5rem; }
    .label-row > div { display: flex; flex-wrap: wrap; gap: .4rem !important; }
    /* Coluna de opções (tamanho/cor): mesma altura de campo que Preço */
    .opt-stack .label-row { min-height: 1.6rem; }
    .opt-stack .quick-add-link { font-size: .68rem; padding: .12rem .45rem; }
    @media (max-width: 767.98px) {
        .opt-stack .label-row { min-height: 0; }
    }

    /* ── Responsive tweaks ── */
    @media (max-width: 576px) {
        .page-header { align-items: stretch; margin-bottom: 1.15rem; }
        .page-header-main { align-items: flex-start; }
        .page-header .page-icon { width: 42px; height: 42px; font-size: 1.2rem; }
        .page-header h1 { font-size: 1.2rem; }
        .page-header p { font-size: .82rem; }
        .page-header .btn { width: 100%; }
        .form-section-body { padding: 1rem .85rem; }
        .barcode-actions .btn { width: 100%; justify-content: center; }
        .form-footer { flex-direction: column-reverse; }
        .btn-cancel, .btn-save { width: 100%; }
        .form-section-header { padding: .75rem .9rem; }
        .form-label { line-height: 1.35; }
        .quick-add-link { font-size: .75rem; }
        .status-card { align-items: flex-start; padding: .8rem; }
    }
    @media (min-width: 577px) and (max-width: 767.98px) {
        .form-section-body { padding: 1.1rem; }
        .barcode-actions .btn { flex: 1 1 auto; }
    }
</style>
{% endblock %}

{% block content %}
<div class="produto-form-page">
<!-- Page header -->
<div class="page-header">
    <div class="page-header-main">
      <div class="page-icon"><i class="bi bi-box-seam"></i></div>
      <div>
        <h1>{{ titulo }}</h1>
        <p>Preencha os dados do produto. Campos com <span style="color:#e53e3e">*</span> são obrigatórios.</p>
      </div>
    </div>
    <a href="{% url 'lista_produtos' %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Voltar para Produtos</a>
</div>

<form method="post" enctype="multipart/form-data" id="form-produto" novalidate>
    {% csrf_token %}

    {% if form.errors %}
    <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-5"></i>
        <div><strong>Atenção!</strong> Verifique os campos destacados e corrija os erros.</div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endif %}

    <!-- ① Identificação -->
    <div class="form-section" id="identificacao-produto">
        <div class="form-section-header">
            <span class="section-icon blue"><i class="bi bi-fingerprint"></i></span>
            Identificação do Produto
        </div>
        <div class="form-section-body">
            <p class="section-description">Comece pelo nome do produto. O SKU e o código de barras ajudam na identificação e nas vendas pelo leitor.</p>
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label" for="id_nome">
                        <i class="bi bi-tag text-muted me-1"></i>Nome do Produto <span class="required-star">*</span>
                    </label>
                    {{ form.nome }}
                    {% if form.nome.errors %}
                        <div class="invalid-feedback d-block">{{ form.nome.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-lg-4">
                    <label class="form-label" for="id_codigo">
                        <i class="bi bi-upc text-muted me-1"></i>Código / SKU
                    </label>
                    {{ form.codigo }}
                    <small class="form-text text-muted">Opcional. Se ficar vazio, o sistema gera um SKU automaticamente.</small>
                    {% if form.codigo.errors %}
                        <div class="invalid-feedback d-block">{{ form.codigo.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-lg-8">
                    <label class="form-label" for="id_codigo_barras">
                        <i class="bi bi-upc-scan text-muted me-1"></i>Código de Barras
                    </label>
                    {{ form.codigo_barras }}
                    <div class="barcode-actions">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btn-ler-codigo-barras">
                            <i class="bi bi-upc-scan"></i> Ler com leitor
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-copiar-barras-sku">
                            <i class="bi bi-arrow-repeat"></i> Copiar para SKU
                        </button>
                    </div>
                    <small class="text-muted d-block mt-1" style="font-size:.78rem">Clique em "Ler com leitor" e passe o leitor no código.</small>
                    {% if form.codigo_barras.errors %}
                        <div class="invalid-feedback d-block">{{ form.codigo_barras.errors.as_text }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- ② Classificação -->
    <div class="form-section" id="classificacao-produto">
        <div class="form-section-header">
            <span class="section-icon purple"><i class="bi bi-diagram-3"></i></span>
            Classificação
        </div>
        <div class="form-section-body">
            <p class="section-description">Use categoria, marca e fornecedor para organizar os produtos e facilitar as consultas.</p>
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="label-row">
                        <label class="form-label mb-0" for="id_categoria">
                            <i class="bi bi-bookmark text-muted me-1"></i>Categoria
                        </label>
                        <div class="d-flex gap-2">
                            <a href="{% url 'lista_categorias' %}" class="quick-add-link" target="_blank" title="Ver, editar ou inativar categorias">
                                <i class="bi bi-list-ul"></i> Ver todas
                            </a>
                            <a href="{% url 'cadastrar_categoria' %}?next={{ request.path|urlencode }}" data-campo="categoria" class="quick-add-link js-cadastro-modal">
                                <i class="bi bi-plus-circle"></i> Cadastrar
                            </a>
                        </div>
                    </div>
                    {{ form.categoria }}
                    {% if form.categoria.errors %}
                        <div class="invalid-feedback d-block">{{ form.categoria.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="label-row">
                        <label class="form-label mb-0" for="id_marca">
                            <i class="bi bi-award text-muted me-1"></i>Marca
                        </label>
                        <div class="d-flex gap-2">
                            <a href="{% url 'lista_marcas' %}" class="quick-add-link" target="_blank" title="Ver, editar ou inativar marcas">
                                <i class="bi bi-list-ul"></i> Ver todas
                            </a>
                            <a href="{% url 'cadastrar_marca' %}?next={{ request.path|urlencode }}" data-campo="marca" class="quick-add-link js-cadastro-modal">
                                <i class="bi bi-plus-circle"></i> Cadastrar
                            </a>
                        </div>
                    </div>
                    {{ form.marca }}
                    {% if form.marca.errors %}
                        <div class="invalid-feedback d-block">{{ form.marca.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-6 col-lg-4">
                    <div class="label-row">
                        <label class="form-label" for="id_fornecedor">
                            <i class="bi bi-truck text-muted me-1"></i>Fornecedor
                            <span class="badge bg-light text-secondary ms-1" style="font-size:.7rem;font-weight:500">Opcional</span>
                        </label>
                        <div class="d-flex gap-2">
                            <a href="{% url 'lista_fornecedores' %}" class="quick-add-link" target="_blank" title="Ver, editar ou inativar fornecedores">
                                <i class="bi bi-list-ul"></i> Ver todos
                            </a>
                            <a href="{% url 'cadastrar_fornecedor' %}?next={{ request.path|urlencode }}" data-campo="fornecedor" class="quick-add-link js-cadastro-modal">
                                <i class="bi bi-plus-circle"></i> Cadastrar
                            </a>
                        </div>
                    </div>
                    {{ form.fornecedor }}
                    {% if form.fornecedor.errors %}
                        <div class="invalid-feedback d-block">{{ form.fornecedor.errors.as_text }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="mt-3">
                <label class="form-label" for="id_descricao">
                    <i class="bi bi-chat-left-text text-muted me-1"></i>Descrição
                </label>
                {{ form.descricao }}
                {% if form.descricao.errors %}
                    <div class="invalid-feedback d-block">{{ form.descricao.errors.as_text }}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- ③ Detalhes & Preços -->
    <div class="form-section" id="precos-produto">
        <div class="form-section-header">
            <span class="section-icon green"><i class="bi bi-cash-coin"></i></span>
            Detalhes e Preços
        </div>
        <div class="form-section-body">
            <p class="section-description">Informe os valores de compra e venda. A margem de lucro é calculada automaticamente.</p>
            <div class="row g-3 align-items-start">
                <div class="col-6 col-sm-3 col-lg-3 opt-stack">
                    <div class="label-row">
                        <label class="form-label mb-0 d-none d-sm-inline" for="id_tamanho"><i class="bi bi-rulers text-muted me-1"></i>Tamanho</label>
                        <div>
                            <a href="{% url 'lista_tamanhos' %}" class="quick-add-link" target="_blank" rel="noopener"><i class="bi bi-list-ul"></i> Ver</a>
                            <a href="{% url 'cadastrar_tamanho' %}?next={{ request.get_full_path|urlencode }}&selecionar=tamanho" data-campo="tamanho" class="quick-add-link js-cadastro-modal"><i class="bi bi-plus-circle"></i> Cadastrar</a>
                        </div>
                    </div>
                    {{ form.tamanho }}
                    {% if form.tamanho.errors %}
                        <div class="invalid-feedback d-block">{{ form.tamanho.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-6 col-sm-3 col-lg-3 opt-stack">
                    <div class="label-row">
                        <label class="form-label mb-0 d-none d-sm-inline" for="id_cor"><i class="bi bi-palette text-muted me-1"></i>Cor</label>
                        <div>
                            <a href="{% url 'lista_cores' %}" class="quick-add-link" target="_blank" rel="noopener"><i class="bi bi-list-ul"></i> Ver</a>
                            <a href="{% url 'cadastrar_cor' %}?next={{ request.get_full_path|urlencode }}&selecionar=cor" data-campo="cor" class="quick-add-link js-cadastro-modal"><i class="bi bi-plus-circle"></i> Cadastrar</a>
                        </div>
                    </div>
                    {{ form.cor }}
                    {% if form.cor.errors %}
                        <div class="invalid-feedback d-block">{{ form.cor.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-3 col-lg-3">
                    <div class="label-row">
                        <label class="form-label mb-0" for="id_preco_custo">
                            <i class="bi bi-cash-coin text-muted me-1"></i>Preço de Custo <span class="required-star">*</span>
                        </label>
                    </div>
                    <div class="input-group">
                        <span class="input-group-text" style="border-radius:8px 0 0 8px;font-size:.85rem">R$</span>
                        {{ form.preco_custo }}
                    </div>
                    {% if form.preco_custo.errors %}
                        <div class="invalid-feedback d-block">{{ form.preco_custo.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-3 col-lg-3">
                    <div class="label-row">
                        <label class="form-label mb-0" for="id_preco_venda">
                            <i class="bi bi-currency-dollar text-muted me-1"></i>Preço de Venda <span class="required-star">*</span>
                        </label>
                    </div>
                    <div class="input-group">
                        <span class="input-group-text" style="border-radius:8px 0 0 8px;font-size:.85rem">R$</span>
                        {{ form.preco_venda }}
                    </div>
                    {% if form.preco_venda.errors %}
                        <div class="invalid-feedback d-block">{{ form.preco_venda.errors.as_text }}</div>
                    {% endif %}
                </div>
            </div>

            <!-- Margem calculada automaticamente -->
            <div id="margem-info" class="mt-3 d-none">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-3"
                     style="background:#e6f9f0;border:1px solid #b2dfdb;font-size:.85rem">
                    <i class="bi bi-graph-up-arrow text-success"></i>
                    <span>Margem de lucro: <strong id="margem-valor" class="text-success"></strong></span>
                </div>
            </div>
        </div>
    </div>

    <!-- ④ Estoque & Foto -->
    <div class="form-section" id="estoque-produto">
        <div class="form-section-header">
            <span class="section-icon orange"><i class="bi bi-boxes"></i></span>
            Estoque e Imagem
        </div>
        <div class="form-section-body">
            <p class="section-description">Informe as peças que estão disponíveis fisicamente na loja. Mercadorias em condicional são controladas separadamente.</p>
            <div class="row g-3 align-items-start">
                <div class="col-12 col-sm-6 col-lg-3">
                    <label class="form-label" for="id_estoque_atual">
                        <i class="bi bi-stack text-muted me-1"></i>Estoque disponível na loja <span class="required-star">*</span>
                    </label>
                    {{ form.estoque_atual }}
                    <small class="form-text text-muted">Informe a quantidade que está fisicamente disponível na loja. Peças com clientes em condicional são controladas separadamente.</small>
                    {% if form.estoque_atual.errors %}
                        <div class="invalid-feedback d-block">{{ form.estoque_atual.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-sm-6 col-lg-2">
                    <label class="form-label" for="id_estoque_minimo">
                        <i class="bi bi-exclamation-triangle text-muted me-1"></i>Estoque Mínimo
                    </label>
                    {{ form.estoque_minimo }}
                    {% if form.estoque_minimo.errors %}
                        <div class="invalid-feedback d-block">{{ form.estoque_minimo.errors.as_text }}</div>
                    {% endif %}
                </div>
                <div class="col-12 col-lg-7">
                    <label class="form-label" for="id_foto">
                        <i class="bi bi-image text-muted me-1"></i>Foto do Produto
                    </label>
                    <div class="photo-upload-zone" id="photo-zone" role="button" tabindex="0" aria-label="Selecionar foto do produto">
                        {% if form.instance.foto %}
                            <img src="{{ form.instance.foto.url }}" id="foto-preview" class="mb-2" alt="Foto atual">
                        {% else %}
                            <img id="foto-preview" class="mb-2 d-none" alt="Pré-visualização">
                            <div id="photo-placeholder">
                                <i class="bi bi-cloud-arrow-up fs-2 text-secondary"></i>
                                <p class="mb-0 mt-1 text-muted" style="font-size:.85rem">Clique para selecionar a foto</p>
                                <small class="text-muted" style="font-size:.75rem">JPG, PNG ou WEBP · até 5 MB</small>
                            </div>
                        {% endif %}
                        {{ form.foto }}
                    </div>
                    {% if form.foto.errors %}
                        <div class="invalid-feedback d-block">{{ form.foto.errors.as_text }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- ⑤ Status + Footer -->
    <div class="form-section" id="status-produto">
        <div class="form-section-header">
            <span class="section-icon teal"><i class="bi bi-check-circle"></i></span>
            Disponibilidade do Produto
        </div>
        <div class="form-section-body d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-3">
            <div>
                <label class="form-label mb-1">
                    <i class="bi bi-check-circle text-muted me-1"></i>Status do produto
                </label>
                <div class="status-card">
                    <div>
                        <p class="mb-0" style="font-size:.9rem;font-weight:500">Produto ativo</p>
                        <small class="text-muted" style="font-size:.78rem">Produtos inativos não aparecem no PDV</small>
                    </div>
                    <div class="form-check form-switch mb-0" style="flex-shrink:0">
                        {{ form.ativo }}
                        <label class="form-check-label visually-hidden" for="{{ form.ativo.id_for_label }}">Produto ativo</label>
                    </div>
                </div>
                {% if form.ativo.errors %}
                    <div class="invalid-feedback d-block">{{ form.ativo.errors.as_text }}</div>
                {% endif %}
            </div>
        </div>
        <div class="form-footer">
            <a href="{% url 'lista_produtos' %}" class="btn btn-outline-secondary btn-cancel">
                <i class="bi bi-x-circle me-1"></i>Cancelar
            </a>
            <button type="submit" class="btn btn-success btn-save">
                <i class="bi bi-check-circle me-1"></i>Salvar Produto
            </button>
        </div>
    </div>

</form>
</div>

<!-- Modal: cadastro rápido de categoria/marca/fornecedor/tamanho/cor -->
<div class="modal fade" id="modalCadastroRapido" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="border-radius: 14px; overflow: hidden;">
            <div class="modal-header py-2" style="background:#f2f7ff;">
                <h6 class="modal-title fw-bold text-primary"><i class="bi bi-plus-circle me-1"></i> Cadastro rápido</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body p-0">
                <iframe id="iframe-cadastro-rapido" style="width:100%; height:420px; border:0; background:#fff;" title="Cadastro rápido"></iframe>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ── Barcode reader helpers ── */
    const inputCodigoBarras = document.getElementById('id_codigo_barras');
    const inputCodigoSku    = document.getElementById('id_codigo');
    const botaoLer          = document.getElementById('btn-ler-codigo-barras');
    const botaoCopiar       = document.getElementById('btn-copiar-barras-sku');

    if (inputCodigoBarras && botaoLer) {
        botaoLer.addEventListener('click', function () {
            inputCodigoBarras.focus();
            inputCodigoBarras.select();
        });
        inputCodigoBarras.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                if (inputCodigoSku) inputCodigoSku.focus();
            }
        });
    }

    if (inputCodigoBarras && inputCodigoSku && botaoCopiar) {
        botaoCopiar.addEventListener('click', function () {
            if (!inputCodigoBarras.value) return;
            inputCodigoSku.value = inputCodigoBarras.value;
            inputCodigoSku.focus();
        });
    }

    /* ── Photo upload preview ── */
    const photoZone    = document.getElementById('photo-zone');
    const fotoInput    = document.getElementById('id_foto');
    const fotoPreview  = document.getElementById('foto-preview');
    const placeholder  = document.getElementById('photo-placeholder');

    if (photoZone && fotoInput) {
        photoZone.addEventListener('click', function (e) {
            if (e.target !== fotoInput) fotoInput.click();
        });
        photoZone.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                fotoInput.click();
            }
        });
        fotoInput.addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function (ev) {
                fotoPreview.src = ev.target.result;
                fotoPreview.classList.remove('d-none');
                if (placeholder) placeholder.classList.add('d-none');
            };
            reader.readAsDataURL(file);
        });
    }

    /* ── Profit margin calculator ── */
    const inputCusto  = document.getElementById('id_preco_custo');
    const inputVenda  = document.getElementById('id_preco_venda');
    const margemInfo  = document.getElementById('margem-info');
    const margemValor = document.getElementById('margem-valor');

    function calcMargem() {
        if (!inputCusto || !inputVenda || !margemInfo || !margemValor) return;
        const custo = parseFloat(inputCusto.value.replace(',', '.'));
        const venda = parseFloat(inputVenda.value.replace(',', '.'));
        if (custo > 0 && venda > 0) {
            const pct = ((venda - custo) / custo * 100).toFixed(1);
            margemValor.textContent = pct + '%';
            margemInfo.classList.remove('d-none');
            margemValor.className = parseFloat(pct) >= 0 ? 'text-success' : 'text-danger';
        } else {
            margemInfo.classList.add('d-none');
        }
    }

    if (inputCusto)  inputCusto.addEventListener('input', calcMargem);
    if (inputVenda)  inputVenda.addEventListener('input', calcMargem);
    calcMargem();

    /* ── Uppercase helpers ── */
    const inputTamanho = document.getElementById('id_tamanho');
    const inputCor = document.getElementById('id_cor');
    const forcarMaiusculo = (el) => {
        if (!el) return;
        el.addEventListener('input', function () {
            this.value = (this.value || '').toUpperCase();
        });
    };
    forcarMaiusculo(inputTamanho);
    forcarMaiusculo(inputCor);

    /* ── Modal: cadastro rápido de marca/categoria/fornecedor/tamanho/cor ── */
    const CAMPOS_MODAL = {
        'categoria': 'id_categoria', 'marca': 'id_marca', 'fornecedor': 'id_fornecedor',
        'tamanho': 'id_tamanho', 'cor': 'id_cor'
    };

    function fecharModalCadastro() {
        const el = document.getElementById('modalCadastroRapido');
        if (el && window.bootstrap) bootstrap.Modal.getOrCreateInstance(el).hide();
    }
    window.fecharModalCadastro = fecharModalCadastro;

    function atualizarSelect(campo, criadoId) {
        const select = document.getElementById(CAMPOS_MODAL[campo] || '');
        if (!select) return;
        const selecionados = [...select.selectedOptions].map(o => o.value);
        fetch('{% url 'opcoes_produto_campo' '__campo__' %}'.replace('__campo__', campo))
            .then(r => r.json())
            .then(data => {
                select.innerHTML = '';
                data.opcoes.forEach(op => {
                    const opt = new Option(op.nome, op.id);
                    select.add(opt);
                });
                if (criadoId) {
                    select.value = String(criadoId);
                } else {
                    [...select.options].forEach(o => { o.selected = selecionados.includes(o.value); });
                }
            });
    }

    function criarToastCadastro(msg) {
        const wrap = document.createElement('div');
        wrap.className = 'position-fixed top-0 end-0 p-3';
        wrap.style.zIndex = '2100';
        wrap.innerHTML = `<div class="toast align-items-center text-white bg-success border-0 show" role="alert">
            <div class="d-flex"><div class="toast-body"><i class="bi bi-check-circle me-1"></i> ${msg}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div></div>`;
        document.body.appendChild(wrap);
        setTimeout(() => wrap.remove(), 4000);
    }

    const modalEl = document.getElementById('modalCadastroRapido');
    const iframeCadastro = document.getElementById('iframe-cadastro-rapido');

    iframeCadastro?.addEventListener('load', function () {
        let url;
        try { url = iframeCadastro.contentWindow.location.href; } catch (e) { return; }
        if (!url || url === 'about:blank') return;
        const qs = new URLSearchParams(new URL(url, location.href).search);
        if (!qs.get('criado')) return;
        const campo = qs.get('campo');
        const criado = qs.get('criado');
        fecharModalCadastro();
        atualizarSelect(campo, criado);
        setTimeout(() => criarToastCadastro('Cadastrado com sucesso e já selecionado!'), 250);
    });

    document.querySelectorAll('.js-cadastro-modal').forEach(link => {
        const campo = link.dataset.campo;
        if (!campo || !CAMPOS_MODAL[campo]) return;
        const urlBase = new URL(link.getAttribute('href'), location.href);
        urlBase.searchParams.set('modal', '1');
        urlBase.searchParams.set('next', location.pathname + location.search);
        urlBase.searchParams.delete('selecionar');
        link.setAttribute('data-url-modal', urlBase.pathname + '?' + urlBase.searchParams.toString());
        link.setAttribute('href', '#');
        link.addEventListener('click', function (e) {
            e.preventDefault();
            iframeCadastro.src = this.dataset.urlModal;
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        });
    });

});
</script>
{% endblock %}