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

{% block title %}Editar {{ product.nome }} - {{ 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"><a href="{{ url('products/' ~ product.id) }}">{{ product.nome }}</a></li>
            <li class="breadcrumb-item active">Editar</li>
        </ol>
    </nav>
    <h1 class="page-title">Editar Produto</h1>
</div>

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

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4">
                <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', product.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 {{ product.tipo == 'url' ? '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" 
                                           {{ product.tipo == '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 {{ product.tipo == 'seguranca' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'seguranca' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'video' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'video' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'premiacao' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'premiacao' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'cashback' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'cashback' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'sorteio' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'sorteio' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'comunidade' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'comunidade' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'fit' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'fit' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'autenticidade' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'autenticidade' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'primeiro_milhao' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'primeiro_milhao' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'atacadista' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'atacadista' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'album' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'album' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'puzzle' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'puzzle' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'linkbio' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'linkbio' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'wlink' ? 'active' : '' }}" 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"
                                           {{ product.tipo == 'wlink' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'video_instagram' ? 'active' : '' }}" 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" {{ product.tipo == 'video_instagram' ? 'checked' : '' }}>
                                    <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 {{ product.tipo == 'pesquisa_qualidade' ? 'active' : '' }}" 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" {{ product.tipo == 'pesquisa_qualidade' ? 'checked' : '' }}>
                                    <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" style="{{ product.tipo in ['seguranca','premiacao','sorteio','comunidade','fit','primeiro_milhao','atacadista','puzzle','album','linkbio','wlink','video_instagram','pesquisa_qualidade'] ? 'display:none' : '' }}">
                        <label for="redirect_url" class="form-label">{{ product.tipo == 'video' ? 'URL de Redirecionamento (após vídeo) *' : 'URL de Redirecionamento' }}</label>
                        <input type="url" class="form-control" id="redirect_url" name="redirect_url" 
                               value="{{ old('redirect_url', product.redirect_url) }}"
                               placeholder="https://exemplo.com"
                               {{ product.tipo not in ['seguranca','premiacao','cashback','sorteio','comunidade','fit','primeiro_milhao','atacadista','puzzle','album','linkbio','wlink','video_instagram','pesquisa_qualidade'] ? 'required' : '' }}>
                        <div class="form-text">URL para onde o cliente será redirecionado após o cadastro</div>
                    </div>

                    <div id="videoInstagramField" style="{{ product.tipo == 'video_instagram' ? '' : '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="{{ product.video_instagram_uid }}">
                        <div class="mb-3">
                            <label class="form-label">Substituir vídeo</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">{{ product.video_instagram_uid ? 'Vídeo atual configurado. Selecione outro somente para substituir.' : 'Prefira vídeo vertical 9:16.' }}</div>
                        </div>
                        <div><label class="form-label">Link do Instagram *</label><input type="url" class="form-control" name="video_instagram_url" value="{{ product.video_instagram_url }}" placeholder="https://www.instagram.com/suaempresa/"></div>
                    </div>

                    <div id="pesquisaQualidadeField" style="{{ product.tipo == 'pesquisa_qualidade' ? '' : '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>
                            {% if product.pesquisa_qualidade_logo %}
                                <div class="mb-2"><img src="{{ app_url }}/public/uploads/{{ product.pesquisa_qualidade_logo }}" alt="Logo" style="width:72px;height:72px;border-radius:50%;object-fit:cover;"></div>
                            {% endif %}
                            <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="{{ product.pesquisa_qualidade_titulo }}" maxlength="255">
                        </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="{{ product.pesquisa_qualidade_instagram_url }}">
                        </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" {{ product.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="{{ product.pesquisa_qualidade_premio_ativo ? '' : 'display:none;' }}">
                            <div class="mb-3">
                                <label for="pesquisa_qualidade_premio_texto" class="form-label">Texto do prêmio</label>
                                <input type="text" class="form-control" id="pesquisa_qualidade_premio_texto" name="pesquisa_qualidade_premio_texto" value="{{ product.pesquisa_qualidade_premio_texto }}">
                            </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="{{ product.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>

                    <!-- Campo WhatsApp para resgate (visível apenas para tipo premiacao) -->
                    <div id="whatsappField" style="{{ product.tipo == 'premiacao' ? '' : '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', product.whatsapp_number) }}"
                                       {{ product.tipo == 'premiacao' ? 'required' : '' }}>
                            </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', product.whatsapp_message|default('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 -->
                    <div id="prizesField" style="{{ product.tipo == 'premiacao' ? '' : '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="{{ product.tipo == 'sorteio' ? '' : '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>
                            {% if product.sorteio_imagem %}
                            <div class="mt-2">
                                <small class="text-muted">Imagem atual:</small>
                                <img src="{{ app_url }}/public/uploads/{{ product.sorteio_imagem }}" alt="Prêmio" class="d-block mt-1" style="max-width: 120px; border-radius: 8px;">
                            </div>
                            {% endif %}
                        </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="{{ product.sorteio_data }}" style="max-width:250px;"
                                   {{ product.tipo == 'sorteio' ? 'required' : '' }}>
                            <div class="form-text">Data em que o sorteio será realizado.</div>
                        </div>
                    </div>

                    <!-- Campos da Comunidade (visível apenas para tipo comunidade) -->
                    <div id="communityField" style="{{ product.tipo == 'comunidade' ? '' : '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"
                                       {{ product.community_moderation ? 'checked' : '' }}>
                                <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"
                                       {{ product.community_notify ? 'checked' : '' }}>
                                <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="{{ product.community_notify ? '' : '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="{{ product.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"
                                       {{ product.push_new_post ? 'checked' : '' }}>
                                <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"
                                       {{ product.push_new_comment ? 'checked' : '' }}>
                                <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>

                    <!-- NFC Auth (fit, album, comunidade, puzzle) -->
                    <div id="nfcAuthField" style="{{ product.tipo in ['fit','album','comunidade','puzzle'] ? '' : 'display:none' }}">
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="nfc_auth" name="nfc_auth" value="1"
                                       {{ product.nfc_auth ? 'checked' : '' }}>
                                <label class="form-check-label" for="nfc_auth">
                                    <strong><i class="bi bi-wifi me-1"></i>Autenticação por NFC</strong>
                                </label>
                            </div>
                            <div class="form-text">Permite que clientes já cadastrados acessem tocando o NFC do produto (Android Chrome).</div>
                        </div>
                    </div>

                    <!-- Campos de Lojas (visível apenas para tipo cashback) -->
                    <div id="storesField" style="{{ product.tipo == 'cashback' ? '' : '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="{{ product.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="{{ product.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>
                    
                    <!-- Campos Link Dinâmico (visível apenas para tipo linkbio) -->
                    <div id="linkbioField" style="{{ product.tipo == 'linkbio' ? '' : '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="{{ product.linkbio_bg_color|default('#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="{{ product.linkbio_accent_color|default('#06b6d4') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Campos Link WhatsApp (visível apenas para tipo wlink) -->
                    <div id="wlinkField" style="{{ product.tipo == 'wlink' ? '' : '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', product.wlink_phone) }}"
                                       {{ product.tipo == 'wlink' ? 'required' : '' }}>
                            </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', product.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>
                            {% if product.wlink_image %}
                            <div class="mt-2">
                                <small class="text-muted">Imagem atual:</small>
                                <img src="{{ app_url }}/public/uploads/{{ product.wlink_image }}" alt="Imagem WhatsApp" class="d-block mt-1" style="max-width: 150px; border-radius: 8px;">
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Título do Álbum (visível apenas para tipo album) -->
                    <div class="mb-3" id="albumField" style="{{ product.tipo == 'album' ? '' : 'display:none' }}">
                        <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', product.album_titulo) }}">
                        <div class="form-text">Título exibido na página pública do álbum.</div>
                    </div>

                    <!-- Mensagem final do Puzzle (visível apenas para tipo puzzle) -->
                    <div class="mb-3" id="puzzleField" style="{{ product.tipo == 'puzzle' ? '' : 'display:none' }}">
                        <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! 🎉">{{ product.puzzle_mensagem }}</textarea>
                        <div class="form-text">Mensagem exibida quando a criança completa o quebra-cabeça.</div>
                    </div>

                    <!-- Logo personalizada FIT -->
                    <div class="mb-3" id="fitLogoField" style="{{ product.tipo == 'fit' ? '' : 'display:none' }}">
                        <label for="fit_logo" class="form-label"><i class="bi bi-image me-1" style="color:#14b8a6"></i>Logo do Produto FIT</label>
                        <input type="file" class="form-control" id="fit_logo" name="fit_logo" accept="image/*">
                        <div class="form-text">Logo personalizada para este produto FIT. Substitui a logo da empresa na página do cliente.</div>
                        {% if product.fit_logo %}
                        <div class="mt-2 d-flex align-items-center gap-2">
                            <img src="{{ app_url }}/public/uploads/{{ product.fit_logo }}" alt="Logo FIT" style="width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #14b8a6;">
                            <small class="text-muted">Logo atual</small>
                        </div>
                        {% endif %}
                    </div>

                    <div class="mb-3" id="fitRetailField" style="{{ product.tipo == 'fit' ? '' : 'display:none' }}">
                        <label for="fit_retail_url" class="form-label"><i class="bi bi-cart me-1" style="color:#14b8a6"></i>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', product.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"><i class="bi bi-envelope me-1" style="color:#14b8a6"></i>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', product.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', product.community_access_email ?: product.fit_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="{{ product.tipo == 'autenticidade' ? '' : 'display:none' }}">
                        <label for="auth_whatsapp" class="form-label"><i class="bi bi-whatsapp me-1 text-success"></i>WhatsApp para reportar falsificação *</label>
                        <input type="text" class="form-control" id="auth_whatsapp" name="auth_whatsapp"
                               value="{{ old('auth_whatsapp', product.auth_whatsapp) }}"
                               placeholder="5511999999999"
                               {{ product.tipo == 'autenticidade' ? 'required' : '' }}>
                        <div class="form-text">Número exibido para denúncias de problemas de autenticidade.</div>
                    </div>

                    <div class="mb-3" id="authLogoField" style="{{ product.tipo == 'autenticidade' ? '' : 'display:none' }}">
                        <label for="auth_logo" class="form-label"><i class="bi bi-image me-1" style="color:#2563eb"></i>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>
                        {% if product.auth_logo %}
                        <div class="mt-2 d-flex align-items-center gap-2">
                            <img src="{{ app_url }}/public/uploads/{{ product.auth_logo }}" alt="Logo autenticidade" style="width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #2563eb;">
                            <small class="text-muted">Logo atual</small>
                        </div>
                        {% endif %}
                    </div>

                    <div class="mb-3" id="primeiroMilhaoProductsField" style="{{ product.tipo == 'primeiro_milhao' ? '' : '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="{{ product.tipo == 'atacadista' ? '' : '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', product.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', product.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', product.atacadista_accent_color|default('#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>
                                {% if product.atacadista_bar_logo %}
                                <div class="mt-2 d-flex align-items-center gap-2">
                                    <img src="{{ app_url }}/public/uploads/{{ product.atacadista_bar_logo }}" alt="Logo barra Atacadista" style="width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid rgba(148,163,184,.45);">
                                    <small class="text-muted">Logo atual da barra</small>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Personal Trainer FIT -->
                    <div class="mb-3" id="fitPersonalField" style="{{ product.tipo == 'fit' ? '' : 'display:none' }}">
                        <div class="card border-0 bg-light">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <i class="bi bi-person-arms-up" style="color:#14b8a6;font-size:1.2rem;"></i>
                                    <strong>Serviço de Personal Trainer</strong>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="fit_personal_enabled" name="fit_personal_enabled" value="1"
                                           {{ product.fit_personal_enabled ? 'checked' : '' }}>
                                    <label class="form-check-label" for="fit_personal_enabled">
                                        Ativar contratação de personal trainer neste produto
                                    </label>
                                </div>
                                <div class="form-text mb-2">Quando ativo, o aluno verá a opção de contratar um personal trainer no app FIT.</div>
                                <div class="mt-2">
                                    <label class="form-label">Preço por sessão (R$)</label>
                                    <input type="number" class="form-control" name="fit_personal_preco" min="0" step="0.01"
                                           value="{{ product.fit_personal_preco|default('0.00') }}" placeholder="0.00" style="max-width:160px;">
                                    <div class="form-text">Valor cobrado do aluno ao contratar um personal. Definido pelo Admin Multleads.</div>
                                </div>
                            </div>
                        </div>
                    </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>
                        {% if product.imagem_voucher %}
                        <div class="mt-2">
                            <small class="text-muted">Voucher atual:</small>
                            <img src="{{ app_url }}/public/uploads/{{ product.imagem_voucher }}" alt="Voucher" class="d-block mt-1" style="max-width: 200px; border-radius: 8px;">
                        </div>
                        {% endif %}
                    </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" {{ product.status == 'ativo' ? 'selected' : '' }}>Ativo</option>
                            <option value="0" {{ product.status == 'inativo' ? 'selected' : '' }}>Inativo</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-check-lg"></i> Salvar Alterações
                    </button>
                    <a href="{{ url('products/' ~ product.id) }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-x-lg"></i> Cancelar
                    </a>
                </div>
            </div>

            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h6 class="card-title mb-0">Zona de Perigo</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2">Excluir produto e todos os dados relacionados.</p>
                    <div class="d-flex gap-2">
                        <form action="{{ url('products/' ~ product.id ~ '/delete') }}" method="POST"
                              onsubmit="return confirm('Excluir produto (apenas se vazio)?');" class="flex-fill">
                            {{ csrf_field()|raw }}
                            <button type="submit" class="btn btn-outline-danger w-100">
                                <i class="bi bi-trash"></i> Excluir (se vazio)
                            </button>
                        </form>
                        <form action="{{ url('products/' ~ product.id ~ '/delete') }}" method="POST"
                              onsubmit="return confirm('ATENÇÃO: Isso excluirá TODOS os lotes, links, leads e cards deste produto. Continuar?');" class="flex-fill">
                            {{ csrf_field()|raw }}
                            <input type="hidden" name="force" value="1">
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="bi bi-trash"></i> Excluir Tudo
                            </button>
                        </form>
                    </div>
                </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='', prizeId='') {
    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 = `
        ${prizeId ? `<input type="hidden" name="prize_id[]" value="${prizeId}">` : `<input type="hidden" name="prize_id[]" value="">`}
        <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='', storeId='') {
    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 = `
        ${storeId ? `<input type="hidden" name="store_id[]" value="${storeId}">` : `<input type="hidden" name="store_id[]" value="">`}
        <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);
}

// Carrega prêmios existentes
{% if product.tipo == 'premiacao' and prizes is defined %}
{% for prize in prizes %}
addPrizeRow('{{ prize.nome|e('js') }}', '{{ prize.quantidade_total }}', '{{ prize.cor }}', '{{ prize.id }}');
{% endfor %}
{% endif %}

// Carrega lojas existentes
{% if product.tipo == 'cashback' and stores is defined %}
{% for store in stores %}
addStoreRow('{{ store.nome|e('js') }}', '{{ store.telefone }}', '{{ store.estado }}', '{{ store.id }}');
{% endfor %}
{% endif %}

{% if product.tipo == 'primeiro_milhao' and primeiroMilhaoProducts is defined %}
{% for item in primeiroMilhaoProducts %}
addPrimeiroMilhaoProdutoRow('{{ item.nome|e('js') }}', '{{ item.descricao|e('js') }}');
{% endfor %}
{% endif %}

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('fitLogoField').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('linkbioField').style.display = 'none';
        document.getElementById('wlinkField').style.display = 'none';
        document.getElementById('wlink_phone').removeAttribute('required');
        document.getElementById('auth_whatsapp').removeAttribute('required');
        document.getElementById('nfcAuthField').style.display = 'none';

        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) *';
            if (urlHelp) urlHelp.textContent = '';
        } 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';
        } 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 = 'block';
            redirectUrl.removeAttribute('required');
            urlLabel.innerHTML = 'URL de Redirecionamento';
            if (urlHelp) urlHelp.textContent = 'URL para onde o cliente será redirecionado após o cadastro';
            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';
            document.getElementById('nfcAuthField').style.display = 'block';
        } else if (this.value === 'fit') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('fitLogoField').style.display = 'block';
            document.getElementById('fitRetailField').style.display = 'block';
            document.getElementById('nfcAuthField').style.display = 'block';
        } else if (this.value === 'autenticidade') {
            urlField.style.display = 'block';
            redirectUrl.setAttribute('required', 'required');
            urlLabel.innerHTML = 'URL final após autenticação *';
            if (urlHelp) 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';
            document.getElementById('nfcAuthField').style.display = 'block';
        } else if (this.value === 'album') {
            urlField.style.display = 'none';
            redirectUrl.removeAttribute('required');
            document.getElementById('albumField').style.display = 'block';
            document.getElementById('nfcAuthField').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 *';
            if (urlHelp) urlHelp.textContent = '';
        }
    });
});
const checkedTipoRadio = document.querySelector('input[name="tipo"]:checked');
if (checkedTipoRadio) {
    checkedTipoRadio.dispatchEvent(new Event('change'));
}
// 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], 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 body = new FormData(); body.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(body); });
        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="${String(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);
}

const pqInitialQuestions = {{ pesquisa_qualidade_questions|default([])|json_encode|raw }};
if (Array.isArray(pqInitialQuestions) && pqInitialQuestions.length) {
    pqInitialQuestions.forEach(function(item) {
        addPesquisaQuestionRow(item.pergunta || '', item.tipo || 'aberta');
    });
} else if (document.getElementById('tipoPesquisaQualidade') && document.getElementById('tipoPesquisaQualidade').checked) {
    addPesquisaQuestionRow();
}
</script>
{% endblock %}