{% extends 'layouts/company.twig' %}

{% block title %}Novo Produto - {{ app_name }}{% endblock %}

{% block content %}
<div class="page-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('products') }}">Produtos</a></li>
            <li class="breadcrumb-item active">Novo Produto</li>
        </ol>
    </nav>
    <h1 class="page-title">Novo Produto</h1>
</div>

<form action="{{ url('products') }}" method="POST" enctype="multipart/form-data">
    {{ csrf_field()|raw }}

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label for="nome" class="form-label">Nome do Produto *</label>
                        <input type="text" class="form-control" id="nome" name="nome" 
                               value="{{ old('nome') }}" required>
                    </div>
                    <!-- Tipo do Produto -->
                    <style>
                        .tipo-card { cursor: pointer; transition: all 0.25s ease; border: 2px solid transparent; }
                        .tipo-card:hover { transform: translateY(-2px); }
                        .tipo-card[data-tipo="url"] { background: rgba(59, 130, 246, 0.06); }
                        .tipo-card[data-tipo="url"].active { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); }
                        .tipo-card[data-tipo="seguranca"] { background: rgba(34, 197, 94, 0.06); }
                        .tipo-card[data-tipo="seguranca"].active { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.5); }
                        .tipo-card[data-tipo="video"] { background: rgba(239, 68, 68, 0.06); }
                        .tipo-card[data-tipo="video"].active { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.5); }
                        .tipo-card[data-tipo="premiacao"] { background: rgba(245, 158, 11, 0.06); }
                        .tipo-card[data-tipo="premiacao"].active { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.5); }
                        .tipo-card[data-tipo="cashback"] { background: rgba(16, 185, 129, 0.06); }
                        .tipo-card[data-tipo="cashback"].active { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.5); }
                        .tipo-card[data-tipo="sorteio"] { background: rgba(139, 92, 246, 0.06); }
                        .tipo-card[data-tipo="sorteio"].active { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.5); }
                        .tipo-card[data-tipo="comunidade"] { background: rgba(236, 72, 153, 0.06); }
                        .tipo-card[data-tipo="comunidade"].active { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.5); }
                        .tipo-card[data-tipo="fit"] { background: rgba(20, 184, 166, 0.06); }
                        .tipo-card[data-tipo="fit"].active { background: rgba(20, 184, 166, 0.15); border-color: rgba(20, 184, 166, 0.5); }
                        .tipo-card[data-tipo="autenticidade"] { background: rgba(59, 130, 246, 0.08); }
                        .tipo-card[data-tipo="autenticidade"].active { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.55); }
                        .tipo-card[data-tipo="primeiro_milhao"] { background: rgba(245, 158, 11, 0.08); }
                        .tipo-card[data-tipo="primeiro_milhao"].active { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.55); }
                        .tipo-card[data-tipo="puzzle"] { background: rgba(99, 102, 241, 0.06); }
                        .tipo-card[data-tipo="puzzle"].active { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); }
                        .tipo-card[data-tipo="linkbio"] { background: rgba(6, 182, 212, 0.06); }
                        .tipo-card[data-tipo="linkbio"].active { background: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.5); }
                        .tipo-card[data-tipo="wlink"] { background: rgba(37, 211, 102, 0.06); }
                        .tipo-card[data-tipo="wlink"].active { background: rgba(37, 211, 102, 0.15); border-color: rgba(37, 211, 102, 0.5); }
                        .tipo-card[data-tipo="video_instagram"] { background: rgba(225, 48, 108, 0.06); }
                        .tipo-card[data-tipo="video_instagram"].active { background: rgba(225, 48, 108, 0.15); border-color: rgba(225, 48, 108, 0.5); }
                        .tipo-card[data-tipo="pesquisa_qualidade"] { background: rgba(37, 99, 235, 0.06); }
                        .tipo-card[data-tipo="pesquisa_qualidade"].active { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.5); }
                        .pq-question-row { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #f8fafc; }
                        .prize-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
                        .prize-row input { font-size: 0.9rem; }
                        .prize-row .btn-sm { flex-shrink: 0; }
                        .prize-color { width: 38px; height: 38px; padding: 2px; border-radius: 6px; border: 1px solid #dee2e6; cursor: pointer; }
                        .store-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
                        .store-row input, .store-row select { font-size: 0.9rem; }
                        .store-row .btn-sm { flex-shrink: 0; }
                    </style>
                    <div class="mb-3">
                        <label class="form-label">Tipo do Produto *</label>
                        <div class="row g-3" style="flex-wrap: wrap;">
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card active" data-tipo="url" onclick="document.getElementById('tipoUrl').checked=true; document.getElementById('tipoUrl').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoUrl" value="url" checked>
                                    <label class="form-check-label w-100" for="tipoUrl" style="cursor: pointer;">
                                        <i class="bi bi-people fs-3 text-primary d-block mb-2"></i>
                                        <strong>Clube de Benefícios</strong>
                                        <small class="d-block text-muted">Clube de vantagens</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="seguranca" onclick="document.getElementById('tipoSeguranca').checked=true; document.getElementById('tipoSeguranca').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoSeguranca" value="seguranca">
                                    <label class="form-check-label w-100" for="tipoSeguranca" style="cursor: pointer;">
                                        <i class="bi bi-shield-check fs-3 text-success d-block mb-2"></i>
                                        <strong>Segurança</strong>
                                        <small class="d-block text-muted">Card de segurança infantil</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="video" onclick="document.getElementById('tipoVideo').checked=true; document.getElementById('tipoVideo').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoVideo" value="video">
                                    <label class="form-check-label w-100" for="tipoVideo" style="cursor: pointer;">
                                        <i class="bi bi-camera-video fs-3 text-danger d-block mb-2"></i>
                                        <strong>Vídeo</strong>
                                        <small class="d-block text-muted">Grava vídeo de até 1 min</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="premiacao" onclick="document.getElementById('tipoPremiacao').checked=true; document.getElementById('tipoPremiacao').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoPremiacao" value="premiacao">
                                    <label class="form-check-label w-100" for="tipoPremiacao" style="cursor: pointer;">
                                        <i class="bi bi-trophy fs-3 d-block mb-2" style="color: #f59e0b;"></i>
                                        <strong>Premiação</strong>
                                        <small class="d-block text-muted">Roleta de prêmios</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="cashback" onclick="document.getElementById('tipoCashback').checked=true; document.getElementById('tipoCashback').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoCashback" value="cashback">
                                    <label class="form-check-label w-100" for="tipoCashback" style="cursor: pointer;">
                                        <i class="bi bi-cash-coin fs-3 d-block mb-2" style="color: #10b981;"></i>
                                        <strong>Cash Back</strong>
                                        <small class="d-block text-muted">Validação em loja</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="sorteio" onclick="document.getElementById('tipoSorteio').checked=true; document.getElementById('tipoSorteio').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoSorteio" value="sorteio">
                                    <label class="form-check-label w-100" for="tipoSorteio" style="cursor: pointer;">
                                        <i class="bi bi-gift fs-3 d-block mb-2" style="color: #8b5cf6;"></i>
                                        <strong>Sorteio</strong>
                                        <small class="d-block text-muted">Sorteio de prêmios</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="comunidade" onclick="document.getElementById('tipoComunidade').checked=true; document.getElementById('tipoComunidade').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoComunidade" value="comunidade">
                                    <label class="form-check-label w-100" for="tipoComunidade" style="cursor: pointer;">
                                        <i class="bi bi-people-fill fs-3 d-block mb-2" style="color: #ec4899;"></i>
                                        <strong>Comunidade</strong>
                                        <small class="d-block text-muted">Rede social da marca</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="fit" onclick="document.getElementById('tipoFit').checked=true; document.getElementById('tipoFit').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoFit" value="fit">
                                    <label class="form-check-label w-100" for="tipoFit" style="cursor: pointer;">
                                        <i class="bi bi-activity fs-3 d-block mb-2" style="color: #14b8a6;"></i>
                                        <strong>FIT</strong>
                                        <small class="d-block text-muted">Treinos personalizados</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="autenticidade" onclick="document.getElementById('tipoAutenticidade').checked=true; document.getElementById('tipoAutenticidade').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoAutenticidade" value="autenticidade">
                                    <label class="form-check-label w-100" for="tipoAutenticidade" style="cursor: pointer;">
                                        <i class="bi bi-patch-check fs-3 d-block mb-2" style="color: #2563eb;"></i>
                                        <strong>Autenticidade</strong>
                                        <small class="d-block text-muted">Validação por NFC</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="primeiro_milhao" onclick="document.getElementById('tipoPrimeiroMilhao').checked=true; document.getElementById('tipoPrimeiroMilhao').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoPrimeiroMilhao" value="primeiro_milhao">
                                    <label class="form-check-label w-100" for="tipoPrimeiroMilhao" style="cursor: pointer;">
                                        <i class="bi bi-graph-up-arrow fs-3 d-block mb-2" style="color: #f59e0b;"></i>
                                        <strong>Primeiro Milhão</strong>
                                        <small class="d-block text-muted">Simulador de investimento</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="atacadista" onclick="document.getElementById('tipoAtacadista').checked=true; document.getElementById('tipoAtacadista').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoAtacadista" value="atacadista">
                                    <label class="form-check-label w-100" for="tipoAtacadista" style="cursor: pointer;">
                                        <i class="bi bi-phone fs-3 d-block mb-2" style="color: #111111;"></i>
                                        <strong>Atacadista</strong>
                                        <small class="d-block text-muted">Feed vertical com produtos</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="album" onclick="document.getElementById('tipoAlbum').checked=true; document.getElementById('tipoAlbum').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoAlbum" value="album">
                                    <label class="form-check-label w-100" for="tipoAlbum" style="cursor: pointer;">
                                        <i class="bi bi-images fs-3 d-block mb-2" style="color: #f59e0b;"></i>
                                        <strong>Álbum</strong>
                                        <small class="d-block text-muted">Coleção de fotos</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="puzzle" onclick="document.getElementById('tipoPuzzle').checked=true; document.getElementById('tipoPuzzle').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoPuzzle" value="puzzle">
                                    <label class="form-check-label w-100" for="tipoPuzzle" style="cursor: pointer;">
                                        <i class="bi bi-puzzle fs-3 d-block mb-2" style="color: #6366f1;"></i>
                                        <strong>Quebra-Cabeça</strong>
                                        <small class="d-block text-muted">Jogo infantil interativo</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="linkbio" onclick="document.getElementById('tipoLinkbio').checked=true; document.getElementById('tipoLinkbio').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoLinkbio" value="linkbio">
                                    <label class="form-check-label w-100" for="tipoLinkbio" style="cursor: pointer;">
                                        <i class="bi bi-link-45deg fs-3 d-block mb-2" style="color: #06b6d4;"></i>
                                        <strong>Link Dinâmico</strong>
                                        <small class="d-block text-muted">Página link.bio da empresa</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="wlink" onclick="document.getElementById('tipoWlink').checked=true; document.getElementById('tipoWlink').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoWlink" value="wlink">
                                    <label class="form-check-label w-100" for="tipoWlink" style="cursor: pointer;">
                                        <i class="bi bi-whatsapp fs-3 d-block mb-2" style="color: #25d366;"></i>
                                        <strong>Link WhatsApp</strong>
                                        <small class="d-block text-muted">Gera link wa.me com mensagem</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="video_instagram" onclick="document.getElementById('tipoVideoInstagram').checked=true; document.getElementById('tipoVideoInstagram').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoVideoInstagram" value="video_instagram">
                                    <label class="form-check-label w-100" for="tipoVideoInstagram" style="cursor:pointer;">
                                        <i class="bi bi-instagram fs-3 d-block mb-2" style="color:#e1306c;"></i>
                                        <strong>Vídeo Instagram</strong>
                                        <small class="d-block text-muted">Vídeo vertical em tela cheia</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xl-3">
                                <div class="form-check card p-3 h-100 tipo-card" data-tipo="pesquisa_qualidade" onclick="document.getElementById('tipoPesquisaQualidade').checked=true; document.getElementById('tipoPesquisaQualidade').dispatchEvent(new Event('change'));">
                                    <input class="form-check-input" type="radio" name="tipo" id="tipoPesquisaQualidade" value="pesquisa_qualidade">
                                    <label class="form-check-label w-100" for="tipoPesquisaQualidade" style="cursor:pointer;">
                                        <i class="bi bi-clipboard2-check fs-3 d-block mb-2" style="color:#2563eb;"></i>
                                        <strong>Pesquisa de Qualidade</strong>
                                        <small class="d-block text-muted">Formulário com até 10 perguntas</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3" id="urlField">
                        <label for="redirect_url" class="form-label">URL de Redirecionamento *</label>
                        <input type="url" class="form-control" id="redirect_url" name="redirect_url" 
                               value="{{ old('redirect_url') }}" placeholder="https://...">
                        <div class="form-text">Após o lead se cadastrar, ele será redirecionado para esta URL.</div>
                    </div>

                    <div id="videoInstagramField" style="display:none;" class="border rounded-3 p-3 mb-3">
                        <h6><i class="bi bi-instagram me-1" style="color:#e1306c;"></i>Vídeo vertical com Instagram</h6>
                        <input type="hidden" name="video_instagram_uid" id="video_instagram_uid" value="{{ old('video_instagram_uid') }}">
                        <div class="mb-3">
                            <label class="form-label">Vídeo vertical *</label>
                            <input type="file" class="form-control" id="video_instagram_file" accept="video/mp4,video/quicktime,video/webm">
                            <button type="button" class="btn btn-dark mt-2" id="uploadVideoInstagram"><i class="bi bi-cloud-arrow-up me-1"></i>Enviar para o Cloudflare</button>
                            <div id="videoInstagramStatus" class="form-text">Prefira vídeo vertical 9:16.</div>
                        </div>
                        <div>
                            <label for="video_instagram_url" class="form-label">Link do Instagram *</label>
                            <input type="url" class="form-control" id="video_instagram_url" name="video_instagram_url" value="{{ old('video_instagram_url') }}" placeholder="https://www.instagram.com/suaempresa/">
                        </div>
                    </div>

                    <div id="pesquisaQualidadeField" style="display:none;" class="border rounded-3 p-3 mb-3">
                        <h6><i class="bi bi-clipboard2-check me-1" style="color:#2563eb;"></i>Pesquisa de Qualidade</h6>
                        <div class="mb-3">
                            <label for="pesquisa_qualidade_logo" class="form-label">Logo da página (redonda) *</label>
                            <input type="file" class="form-control" id="pesquisa_qualidade_logo" name="pesquisa_qualidade_logo" accept="image/*">
                        </div>
                        <div class="mb-3">
                            <label for="pesquisa_qualidade_titulo" class="form-label">Título da página *</label>
                            <input type="text" class="form-control" id="pesquisa_qualidade_titulo" name="pesquisa_qualidade_titulo" value="{{ old('pesquisa_qualidade_titulo') }}" maxlength="255" placeholder="Ex: Pesquisa de satisfação">
                        </div>
                        <div class="mb-3">
                            <label for="pesquisa_qualidade_instagram_url" class="form-label">Link do Instagram *</label>
                            <input type="url" class="form-control" id="pesquisa_qualidade_instagram_url" name="pesquisa_qualidade_instagram_url" value="{{ old('pesquisa_qualidade_instagram_url') }}" placeholder="https://www.instagram.com/suaempresa/">
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="pesquisa_qualidade_premio_ativo" name="pesquisa_qualidade_premio_ativo" value="1" {{ old('pesquisa_qualidade_premio_ativo') ? 'checked' : '' }}>
                            <label class="form-check-label" for="pesquisa_qualidade_premio_ativo">Adicionar prêmio / sorteio</label>
                        </div>
                        <div id="pesquisaPremioFields" style="display:none;">
                            <div class="mb-3">
                                <label for="pesquisa_qualidade_premio_texto" class="form-label">Texto do prêmio (abaixo do título)</label>
                                <input type="text" class="form-control" id="pesquisa_qualidade_premio_texto" name="pesquisa_qualidade_premio_texto" value="{{ old('pesquisa_qualidade_premio_texto') }}" placeholder="Preencha e concorra a 1 telefone na data 31/12/2026">
                            </div>
                            <div class="mb-3">
                                <label for="pesquisa_qualidade_premio_data" class="form-label">Data do sorteio</label>
                                <input type="date" class="form-control" id="pesquisa_qualidade_premio_data" name="pesquisa_qualidade_premio_data" value="{{ old('pesquisa_qualidade_premio_data') }}">
                            </div>
                        </div>
                        <div class="mb-2 d-flex justify-content-between align-items-center">
                            <label class="form-label mb-0">Perguntas (máx. 10) *</label>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addPesquisaQuestionRow()"><i class="bi bi-plus-lg"></i> Adicionar</button>
                        </div>
                        <div id="pesquisaQuestionsContainer"></div>
                    </div>

                    <div class="mb-3" id="fitRetailField" style="display:none;">
                        <label for="fit_retail_url" class="form-label">Site de compra varejo (FIT)</label>
                        <input type="url" class="form-control" id="fit_retail_url" name="fit_retail_url"
                               value="{{ old('fit_retail_url') }}" placeholder="https://loja.exemplo.com">
                        <div class="form-text">URL usada no botão "Comprar novo produto" quando a licença FIT expirar.</div>
                    </div>

                    <div class="mb-3" id="fitAccessEmailField" style="display:none;" hidden>
                        <label for="fit_access_email" class="form-label">E-mail de envio de código de acesso:</label>
                        <input type="email" class="form-control" id="fit_access_email" name="fit_access_email"
                               value="{{ old('fit_access_email') }}" placeholder="contato@suaempresa.com.br">
                        <div class="form-text">Vamos usar esse e-mail para o disparo do código de acesso.</div>
                    </div>

                    <div class="mb-3" id="communityAccessEmailField">
                        <label for="community_access_email" class="form-label"><i class="bi bi-envelope me-1" style="color:#ec4899"></i>E-mail do produto *</label>
                        <input type="email" class="form-control" id="community_access_email" name="community_access_email"
                               value="{{ old('community_access_email') }}" placeholder="contato@suaempresa.com.br" required>
                        <div class="form-text">Obrigatório. Este será sempre o remetente no Brevo para os códigos de validação, sem remetentes alternativos.</div>
                    </div>

                    <div class="mb-3" id="authWhatsappField" style="display:none;">
                        <label for="auth_whatsapp" class="form-label">WhatsApp para reportar falsificação *</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-whatsapp text-success"></i></span>
                            <input type="text" class="form-control" id="auth_whatsapp" name="auth_whatsapp"
                                   value="{{ old('auth_whatsapp') }}" placeholder="5511999999999">
                        </div>
                        <div class="form-text">Número exibido para denúncias de problemas de autenticidade.</div>
                    </div>

                    <div class="mb-3" id="authLogoField" style="display:none;">
                        <label for="auth_logo" class="form-label">Logo da página de autenticidade</label>
                        <input type="file" class="form-control" id="auth_logo" name="auth_logo" accept="image/*">
                        <div class="form-text">Imagem redonda exibida acima do nome do produto na página pública.</div>
                    </div>

                    <div class="mb-3" id="primeiroMilhaoProductsField" style="display:none;">
                        <label class="form-label"><i class="bi bi-graph-up-arrow me-1" style="color:#7aa53a"></i>Produtos financeiros</label>
                        <div class="form-text mb-2">No que investir para acelerar seus objetivos.</div>
                        <div id="primeiroMilhaoProductsContainer"></div>
                        <button type="button" class="btn btn-outline-success btn-sm mt-2" onclick="addPrimeiroMilhaoProdutoRow()">
                            <i class="bi bi-plus-lg"></i> Adicionar produto financeiro
                        </button>
                    </div>

                    <div class="mb-3" id="atacadistaConfigField" style="display:none;">
                        <label class="form-label"><i class="bi bi-shop me-1"></i>Configuração do Atacadista</label>
                        <div class="form-text mb-2">Esses dados aparecem no topo da página pública do feed.</div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label for="atacadista_nome_exibicao" class="form-label small mb-1">Nome exibido do produto</label>
                                <input type="text" class="form-control" id="atacadista_nome_exibicao" name="atacadista_nome_exibicao"
                                       value="{{ old('atacadista_nome_exibicao') }}" placeholder="Ex: Catálogo Premium">
                            </div>
                            <div class="col-md-6">
                                <label for="atacadista_instagram_url" class="form-label small mb-1">URL do Instagram da marca</label>
                                <input type="url" class="form-control" id="atacadista_instagram_url" name="atacadista_instagram_url"
                                       value="{{ old('atacadista_instagram_url') }}" placeholder="https://instagram.com/sua_marca">
                            </div>
                            <div class="col-md-3">
                                <label for="atacadista_accent_color" class="form-label small mb-1">Cor de destaque</label>
                                <input type="color" class="form-control form-control-color w-100" id="atacadista_accent_color" name="atacadista_accent_color"
                                       value="{{ old('atacadista_accent_color', '#111111') }}">
                            </div>
                            <div class="col-md-9">
                                <label for="atacadista_bar_logo" class="form-label small mb-1">Logo colorida da barra (último ícone)</label>
                                <input type="file" class="form-control" id="atacadista_bar_logo" name="atacadista_bar_logo" accept="image/*">
                                <div class="form-text">Imagem usada como último ícone da barra transparente na página pública.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Campo WhatsApp para resgate (visível apenas para tipo premiacao) -->
                    <div id="whatsappField" style="display:none;">
                        <div class="mb-3">
                            <label for="whatsapp_number" class="form-label">WhatsApp para Resgate do Prêmio *</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-whatsapp text-success"></i></span>
                                <input type="text" class="form-control" id="whatsapp_number" name="whatsapp_number" 
                                       placeholder="5511999999999" value="{{ old('whatsapp_number') }}">
                            </div>
                            <div class="form-text">Número com código do país + DDD. Ex: 5511999999999</div>
                        </div>
                        <div class="mb-3">
                            <label for="whatsapp_message" class="form-label">Mensagem de Resgate</label>
                            <input type="text" class="form-control" id="whatsapp_message" name="whatsapp_message" 
                                   placeholder="Olá! Ganhei o prêmio: {premio}" value="{{ old('whatsapp_message', 'Olá! Ganhei o prêmio: {premio}') }}">
                            <div class="form-text">Use <code>{premio}</code> para incluir o nome do prêmio automaticamente.</div>
                        </div>
                    </div>

                    <!-- Campos de Prêmios (visível apenas para tipo premiacao) -->
                    <div id="prizesField" style="display:none;">
                        <label class="form-label">Prêmios da Roleta *</label>
                        <div class="form-text mb-2">Configure os prêmios e quantas vezes cada um pode sair.</div>
                        <div id="prizesContainer"></div>
                        <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="addPrizeRow()">
                            <i class="bi bi-plus-lg"></i> Adicionar Prêmio
                        </button>
                    </div>

                    <!-- Campos de Sorteio (visível apenas para tipo sorteio) -->
                    <div id="sorteioField" style="display:none;">
                        <div class="mb-3">
                            <label for="sorteio_imagem" class="form-label">Imagem do Prêmio (3:4) *</label>
                            <input type="file" class="form-control" id="sorteio_imagem" name="sorteio_imagem" accept="image/*" data-crop-type="sorteio">
                            <div class="form-text">Imagem do prêmio no formato 3:4 (vertical). Tamanho ideal: <strong>900x1200px</strong>. Será exibida na página do sorteio.</div>
                        </div>
                        <div class="mb-3">
                            <label for="sorteio_data" class="form-label">Data do Sorteio *</label>
                            <input type="date" class="form-control" id="sorteio_data" name="sorteio_data" 
                                   value="{{ old('sorteio_data') }}" style="max-width:250px;">
                            <div class="form-text">Data em que o sorteio será realizado.</div>
                        </div>
                    </div>

                    <!-- Campos Link Dinâmico (visível apenas para tipo linkbio) -->
                    <div id="linkbioField" style="display:none;">
                        <div class="mb-3">
                            <label class="form-label"><i class="bi bi-palette me-1" style="color:#06b6d4"></i>Cores da Página</label>
                            <div class="row g-3">
                                <div class="col-6">
                                    <label class="form-text mb-1 d-block">Cor de fundo</label>
                                    <input type="color" class="form-control form-control-color w-100" id="linkbio_bg_color" name="linkbio_bg_color" value="#0f172a">
                                </div>
                                <div class="col-6">
                                    <label class="form-text mb-1 d-block">Cor dos botões</label>
                                    <input type="color" class="form-control form-control-color w-100" id="linkbio_accent_color" name="linkbio_accent_color" value="#06b6d4">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Campos Link WhatsApp (visível apenas para tipo wlink) -->
                    <div id="wlinkField" style="display:none;">
                        <div class="mb-3">
                            <label for="wlink_phone" class="form-label"><i class="bi bi-whatsapp text-success me-1"></i>Número do WhatsApp *</label>
                            <div class="input-group">
                                <span class="input-group-text">+</span>
                                <input type="text" class="form-control" id="wlink_phone" name="wlink_phone" 
                                       placeholder="5511999999999" value="{{ old('wlink_phone') }}">
                            </div>
                            <div class="form-text">Número com código do país + DDD. Ex: 5511999999999</div>
                        </div>
                        <div class="mb-3">
                            <label for="wlink_message" class="form-label">Mensagem Pré-definida</label>
                            <textarea class="form-control" id="wlink_message" name="wlink_message" rows="3" 
                                      placeholder="Olá! Vi seu link e gostaria de mais informações...">{{ old('wlink_message') }}</textarea>
                            <div class="form-text">Esta mensagem aparecerá pré-preenchida no WhatsApp do cliente.</div>
                        </div>
                        <div class="mb-3">
                            <label for="wlink_image" class="form-label">Imagem de Apresentação (opcional)</label>
                            <input type="file" class="form-control" id="wlink_image" name="wlink_image" accept="image/*">
                            <div class="form-text">Se adicionada, o cliente verá esta imagem antes de clicar para enviar a mensagem.</div>
                        </div>
                    </div>

                    <!-- Título do Álbum (visível apenas para tipo album) -->
                    <div id="albumField" style="display:none;">
                        <div class="mb-3">
                            <label for="album_titulo" class="form-label">Título do Álbum</label>
                            <input type="text" class="form-control" id="album_titulo" name="album_titulo" placeholder="Ex: Álbum de Memórias" value="{{ old('album_titulo') }}">
                            <div class="form-text">Título exibido na página pública do álbum.</div>
                        </div>
                    </div>

                    <!-- Mensagem final do Puzzle (visível apenas para tipo puzzle) -->
                    <div id="puzzleField" style="display:none;">
                        <div class="mb-3">
                            <label for="puzzle_mensagem" class="form-label">Mensagem ao Completar o Puzzle</label>
                            <textarea class="form-control" id="puzzle_mensagem" name="puzzle_mensagem" rows="2" placeholder="Ex: Parabéns! Você é incrível! 🎉"></textarea>
                            <div class="form-text">Mensagem exibida quando a criança completa o quebra-cabeça.</div>
                        </div>
                    </div>

                    <!-- Campos da Comunidade (visível apenas para tipo comunidade) -->
                    <div id="communityField" style="display:none;">
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="community_moderation" name="community_moderation" value="1">
                                <label class="form-check-label" for="community_moderation">
                                    <strong>Moderação de posts de clientes</strong>
                                </label>
                            </div>
                            <div class="form-text">Se ativado, posts de clientes precisam de aprovação antes de aparecer na comunidade.</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="community_notify" name="community_notify" value="1">
                                <label class="form-check-label" for="community_notify">
                                    <strong>Notificar comentários via WhatsApp</strong>
                                </label>
                            </div>
                            <div class="form-text">Receba uma notificação no WhatsApp quando alguém comentar em um post.</div>
                        </div>
                        <div class="mb-3" id="communityNotifyPhoneField" style="display:none;">
                            <label for="community_notify_phone" class="form-label">Telefone para Notificações</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-whatsapp text-success"></i></span>
                                <input type="text" class="form-control" id="community_notify_phone" name="community_notify_phone" 
                                       placeholder="5511999999999" value="{{ old('community_notify_phone') }}">
                            </div>
                            <div class="form-text">Número com código do país + DDD. Ex: 5511999999999</div>
                        </div>

                        <hr class="my-3">
                        <p class="fw-semibold mb-2"><i class="bi bi-bell"></i> Notificações Push (App)</p>
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="push_new_post" name="push_new_post" value="1">
                                <label class="form-check-label" for="push_new_post">
                                    <strong>Notificar membros em novo post</strong>
                                </label>
                            </div>
                            <div class="form-text">Envia push para todos os membros quando um novo post for publicado.</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="push_new_comment" name="push_new_comment" value="1">
                                <label class="form-check-label" for="push_new_comment">
                                    <strong>Notificar autor quando receber comentário</strong>
                                </label>
                            </div>
                            <div class="form-text">Envia push para o autor do post quando alguém comentar.</div>
                        </div>
                    </div>

                    <!-- Campos de Lojas (visível apenas para tipo cashback) -->
                    <div id="storesField" style="display:none;">
                        <div class="mb-3">
                            <label for="cashback_validity_days" class="form-label">Validade do Código (dias)</label>
                            <div class="input-group" style="max-width:200px;">
                                <input type="number" class="form-control" id="cashback_validity_days" name="cashback_validity_days" 
                                       min="1" max="365" placeholder="30" value="{{ old('cashback_validity_days') }}">
                                <span class="input-group-text">dias</span>
                            </div>
                            <div class="form-text">Após esse período o código expira. Deixe vazio para sem validade.</div>
                        </div>
                        <div class="mb-3">
                            <label for="cashback_value" class="form-label">Valor do Cash Back (R$)</label>
                            <div class="input-group" style="max-width:200px;">
                                <span class="input-group-text">R$</span>
                                <input type="number" class="form-control" id="cashback_value" name="cashback_value" 
                                       min="0" step="0.01" placeholder="0,00" value="{{ old('cashback_value') }}">
                            </div>
                            <div class="form-text">Valor do cashback por código. Usado no relatório para totalizar por loja.</div>
                        </div>
                        <label class="form-label">Lojas para Validação do Cash Back *</label>
                        <div class="form-text mb-2">Cadastre as lojas por estado. O cliente escolherá a loja e será encaminhado para o WhatsApp dela.</div>
                        <div id="storesContainer"></div>
                        <button type="button" class="btn btn-outline-success btn-sm mt-2" onclick="addStoreRow()">
                            <i class="bi bi-plus-lg"></i> Adicionar Loja
                        </button>
                    </div>
                    <div class="mb-3">
                        <label for="imagem_voucher" class="form-label">Imagem do Voucher/Cupom</label>
                        <input type="file" class="form-control" id="imagem_voucher" name="imagem_voucher" accept="image/*">
                        <div class="form-text">Esta imagem será enviada via WhatsApp quando o cliente se cadastrar.</div>
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">Status *</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Ativo</option>
                            <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inativo</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-check-lg"></i> Criar Produto
                    </button>
                    <a href="{{ url('products') }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-x-lg"></i> Cancelar
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
const defaultColors = ['#667eea','#f59e0b','#10b981','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16'];
let prizeIndex = 0;

const estados = [
    'AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA',
    'PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'
];

function addPrizeRow(nome='', qtd='', cor='') {
    const c = document.getElementById('prizesContainer');
    const i = prizeIndex++;
    if (!cor) cor = defaultColors[i % defaultColors.length];
    const row = document.createElement('div');
    row.className = 'prize-row';
    row.innerHTML = `
        <input type="color" class="prize-color" name="prize_cor[]" value="${cor}" title="Cor na roleta">
        <input type="text" class="form-control" name="prize_nome[]" value="${nome}" placeholder="Ex: 10% de desconto" required>
        <input type="number" class="form-control" name="prize_qtd[]" value="${qtd}" placeholder="Qtd" min="1" style="max-width:90px;" required>
        <button type="button" class="btn btn-outline-danger btn-sm" onclick="this.parentElement.remove()" title="Remover">
            <i class="bi bi-trash"></i>
        </button>
    `;
    c.appendChild(row);
}

function addStoreRow(nome='', telefone='', estado='') {
    const c = document.getElementById('storesContainer');
    const opts = estados.map(e => `<option value="${e}" ${e === estado ? 'selected' : ''}>${e}</option>`).join('');
    const row = document.createElement('div');
    row.className = 'store-row';
    row.innerHTML = `
        <select class="form-select" name="store_estado[]" style="max-width:80px;" required>${opts}</select>
        <input type="text" class="form-control" name="store_nome[]" value="${nome}" placeholder="Nome da loja" required>
        <input type="text" class="form-control" name="store_telefone[]" value="${telefone}" placeholder="5511999999999" style="max-width:170px;" required>
        <button type="button" class="btn btn-outline-danger btn-sm" onclick="this.parentElement.remove()" title="Remover">
            <i class="bi bi-trash"></i>
        </button>
    `;
    c.appendChild(row);
}

function addPrimeiroMilhaoProdutoRow(nome='', descricao='') {
    const c = document.getElementById('primeiroMilhaoProductsContainer');
    const row = document.createElement('div');
    row.className = 'border rounded-3 p-2 mb-2';
    row.innerHTML = `
        <div class="mb-2">
            <label class="form-label small mb-1">Produto</label>
            <input type="text" class="form-control" name="primeiro_milhao_produto_nome[]" value="${nome}" placeholder="Ex: CDB a 105% do CDI">
        </div>
        <div class="mb-2">
            <label class="form-label small mb-1">Descrição</label>
            <textarea class="form-control" name="primeiro_milhao_produto_descricao[]" rows="2" placeholder="Ex: retorno líquido acima de 1% ao mês com FGC">${descricao}</textarea>
        </div>
        <button type="button" class="btn btn-outline-danger btn-sm" onclick="this.parentElement.remove()">
            <i class="bi bi-trash"></i> Remover
        </button>
    `;
    c.appendChild(row);
}

document.querySelectorAll('input[name="tipo"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const urlField = document.getElementById('urlField');
        const prizesField = document.getElementById('prizesField');
        const storesField = document.getElementById('storesField');
        const redirectUrl = document.getElementById('redirect_url');
        const urlLabel = urlField.querySelector('.form-label');
        const urlHelp = urlField.querySelector('.form-text');
        
        // Atualiza highlight dos cards
        document.querySelectorAll('.tipo-card').forEach(c => c.classList.remove('active'));
        document.querySelector('.tipo-card[data-tipo="' + this.value + '"]').classList.add('active');
        
        // Remove required dos campos de prêmio e lojas
        prizesField.querySelectorAll('input[required]').forEach(inp => inp.removeAttribute('required'));
        storesField.querySelectorAll('input[required], select[required]').forEach(inp => inp.removeAttribute('required'));
        
        // Reset fields
        document.getElementById('whatsappField').style.display = 'none';
        document.getElementById('whatsapp_number').removeAttribute('required');
        prizesField.style.display = 'none';
        storesField.style.display = 'none';
        document.getElementById('sorteioField').style.display = 'none';
        document.getElementById('sorteio_data').removeAttribute('required');
        document.getElementById('communityField').style.display = 'none';
        document.getElementById('puzzleField').style.display = 'none';
        document.getElementById('albumField').style.display = 'none';
        document.getElementById('linkbioField').style.display = 'none';
        document.getElementById('wlinkField').style.display = 'none';
        document.getElementById('fitRetailField').style.display = 'none';
        document.getElementById('fitAccessEmailField').style.display = 'none';
        document.getElementById('authWhatsappField').style.display = 'none';
        document.getElementById('authLogoField').style.display = 'none';
        document.getElementById('primeiroMilhaoProductsField').style.display = 'none';
        document.getElementById('atacadistaConfigField').style.display = 'none';
        document.getElementById('videoInstagramField').style.display = 'none';
        document.getElementById('pesquisaQualidadeField').style.display = 'none';
        document.getElementById('wlink_phone').removeAttribute('required');
        document.getElementById('auth_whatsapp').removeAttribute('required');

        const communityEmailField = document.getElementById('communityAccessEmailField');
        const communityEmailInput = document.getElementById('community_access_email');
        const noProductEmailTypes = ['wlink', 'video_instagram', 'pesquisa_qualidade'];
        if (communityEmailField && communityEmailInput) {
            if (noProductEmailTypes.includes(this.value)) {
                communityEmailField.style.display = 'none';
                communityEmailInput.removeAttribute('required');
            } else {
                communityEmailField.style.display = 'block';
                communityEmailInput.setAttribute('required', 'required');
            }
        }
        
        if (this.value === 'seguranca') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
        } else if (this.value === 'video') {
            urlField.style.display = 'block';
            redirectUrl.setAttribute('required', 'required');
            urlLabel.innerHTML = 'URL de Redirecionamento (após vídeo) *';
            urlHelp.textContent = 'Após o vídeo ser exibido, o cliente será redirecionado para esta URL.';
        } else if (this.value === 'video_instagram') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('videoInstagramField').style.display = 'block';
        } else if (this.value === 'pesquisa_qualidade') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('pesquisaQualidadeField').style.display = 'block';
            if (document.querySelectorAll('#pesquisaQuestionsContainer .pq-question-row').length === 0) {
                addPesquisaQuestionRow();
            }
        } else if (this.value === 'premiacao') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            prizesField.style.display = 'block';
            document.getElementById('whatsappField').style.display = 'block';
            document.getElementById('whatsapp_number').setAttribute('required', 'required');
            prizesField.querySelectorAll('input[name="prize_nome[]"], input[name="prize_qtd[]"]').forEach(inp => inp.setAttribute('required', 'required'));
            if (document.querySelectorAll('.prize-row').length === 0) {
                addPrizeRow('', '', '');
                addPrizeRow('', '', '');
                addPrizeRow('', '', '');
            }
        } else if (this.value === 'cashback') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            storesField.style.display = 'block';
            storesField.querySelectorAll('input[required], select[required]').forEach(inp => inp.setAttribute('required', 'required'));
            if (document.querySelectorAll('.store-row').length === 0) {
                addStoreRow();
            }
        } else if (this.value === 'sorteio') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('sorteioField').style.display = 'block';
            document.getElementById('sorteio_data').setAttribute('required', 'required');
        } else if (this.value === 'comunidade') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('communityField').style.display = 'block';
        } else if (this.value === 'fit') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('fitRetailField').style.display = 'block';
        } else if (this.value === 'autenticidade') {
            urlField.style.display = 'block';
            redirectUrl.setAttribute('required', 'required');
            urlLabel.innerHTML = 'URL final após autenticação *';
            urlHelp.textContent = 'A URL será aberta apenas após a primeira autenticação (nome + CEP).';
            document.getElementById('authWhatsappField').style.display = 'block';
            document.getElementById('authLogoField').style.display = 'block';
            document.getElementById('auth_whatsapp').setAttribute('required', 'required');
        } else if (this.value === 'primeiro_milhao') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('primeiroMilhaoProductsField').style.display = 'block';
            if (document.querySelectorAll('#primeiroMilhaoProductsContainer .border').length === 0) {
                addPrimeiroMilhaoProdutoRow();
            }
        } else if (this.value === 'atacadista') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('atacadistaConfigField').style.display = 'block';
        } else if (this.value === 'puzzle') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('puzzleField').style.display = 'block';
        } else if (this.value === 'album') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('albumField').style.display = 'block';
        } else if (this.value === 'linkbio') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('linkbioField').style.display = 'block';
        } else if (this.value === 'wlink') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('wlinkField').style.display = 'block';
            document.getElementById('wlink_phone').setAttribute('required', 'required');
        } else {
            urlField.style.display = 'block';
            redirectUrl.setAttribute('required', 'required');
            urlLabel.innerHTML = 'URL de Redirecionamento *';
            urlHelp.textContent = 'Após o lead se cadastrar, ele será redirecionado para esta URL.';
        }
    });
});
// Toggle campo telefone notificação comunidade
const communityNotify = document.getElementById('community_notify');
if (communityNotify) {
    communityNotify.addEventListener('change', function() {
        document.getElementById('communityNotifyPhoneField').style.display = this.checked ? 'block' : 'none';
    });
}

const videoUploadButton = document.getElementById('uploadVideoInstagram');
if (videoUploadButton) videoUploadButton.addEventListener('click', async function () {
    const file = document.getElementById('video_instagram_file').files[0];
    const status = document.getElementById('videoInstagramStatus');
    if (!file) { status.textContent = 'Selecione um vídeo primeiro.'; status.className = 'form-text text-danger'; return; }
    this.disabled = true;
    status.textContent = 'Preparando envio...'; status.className = 'form-text text-primary';
    try {
        const setup = await fetch('{{ app_url }}/public/api_video_upload_url.php?lead_id=product-video-instagram');
        const payload = await setup.json();
        if (!payload.success || !payload.uploadURL || !payload.uid) throw new Error(payload.error || 'Não foi possível iniciar o upload.');
        const formData = new FormData(); formData.append('file', file);
        await new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest(); xhr.open('POST', payload.uploadURL);
            xhr.upload.onprogress = e => { if (e.lengthComputable) status.textContent = 'Enviando: ' + Math.round(e.loaded * 100 / e.total) + '%'; };
            xhr.onload = () => xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error('Falha no envio do vídeo.'));
            xhr.onerror = () => reject(new Error('Falha de conexão durante o envio.')); xhr.send(formData);
        });
        document.getElementById('video_instagram_uid').value = payload.uid;
        status.textContent = 'Vídeo enviado com sucesso.'; status.className = 'form-text text-success fw-semibold';
    } catch (error) { status.textContent = error.message; status.className = 'form-text text-danger'; }
    finally { this.disabled = false; }
});

function togglePesquisaPremioFields() {
    const checkbox = document.getElementById('pesquisa_qualidade_premio_ativo');
    const fields = document.getElementById('pesquisaPremioFields');
    if (!checkbox || !fields) return;
    fields.style.display = checkbox.checked ? 'block' : 'none';
}
const pqPremioCheckbox = document.getElementById('pesquisa_qualidade_premio_ativo');
if (pqPremioCheckbox) {
    pqPremioCheckbox.addEventListener('change', togglePesquisaPremioFields);
    togglePesquisaPremioFields();
}

function addPesquisaQuestionRow(pergunta = '', tipo = 'aberta') {
    const container = document.getElementById('pesquisaQuestionsContainer');
    if (!container) return;
    if (container.querySelectorAll('.pq-question-row').length >= 10) return;
    const row = document.createElement('div');
    row.className = 'pq-question-row';
    row.innerHTML = `
        <div class="row g-2 align-items-end">
            <div class="col-md-7">
                <label class="form-label small mb-1">Pergunta</label>
                <input type="text" class="form-control" name="pq_pergunta[]" value="${pergunta.replace(/"/g, '&quot;')}" maxlength="500" required>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">Tipo</label>
                <select class="form-select" name="pq_tipo[]">
                    <option value="sim_nao" ${tipo === 'sim_nao' ? 'selected' : ''}>Sim / Não</option>
                    <option value="nota_0_10" ${tipo === 'nota_0_10' ? 'selected' : ''}>0 a 10</option>
                    <option value="aberta" ${tipo === 'aberta' ? 'selected' : ''}>Aberta</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger w-100" onclick="this.closest('.pq-question-row').remove()"><i class="bi bi-trash"></i></button>
            </div>
        </div>`;
    container.appendChild(row);
}
</script>
{% endblock %}