@extends('adminlte::page')

@section('title', 'Cadastrar Espetáculo')

@section('content_header')
    <h1>Cadastrar Espetáculo</h1>
@stop

@section('content')

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('espetaculos.store') }}" method="POST" enctype="multipart/form-data">

    @csrf

    <div class="card">
        <div class="card-body">

            <div class="form-group">
                <label>Nome do Espetáculo *</label>
                <input type="text" name="nome" class="form-control" required>
            </div>

            <div class="form-group">
                <label>Status *</label>
                <select name="status" class="form-control" required>
                    <option value="">Selecione</option>
                    @foreach([
                        'Em circulação',
                        'Circulação por Incentivo/Edital',
                        'Em Pré-produção',
                        'Em Montagem',
                        'Em Remontagem',
                        'Tempo definido de Circulação',
                        'Pausado',
                        'Arquivo',
                        'Pesquisa',
                        'Exclusivo para Festivais'
                    ] as $status)
                        <option value="{{ $status }}">{{ $status }}</option>
 
                   @endforeach
                </select>
            </div>

            <div class="form-group">
                <label>Classificação Indicativa *</label>
                <select name="classificacao" class="form-control" required>
                    <option value="">Selecione</option>
                    <option value="AL">Livre</option>
                    <option value="A6">A6</option>
                    <option value="A10">A10</option>
                    <option value="A12">A12</option>
                    <option value="A14">A14</option>
                    <option value="A16">A16</option>
                    <option value="A18">A18</option>
                </select>
            </div>

	<div class="form-group">
    <label>Indicação de Público *</label><br>

    @foreach([
        'Adulto',
        'Infantil',
        'Adolescentes',
        'Idosos',
        'Mulheres',
        'Todos os Públicos'
    ] as $p)
        <div class="form-check form-check-inline">
            <input class="form-check-input"
                   type="checkbox"
                   name="indicacao_publico[]"
                   value="{{ $p }}">
            <label class="form-check-label">{{ $p }}</label>
        </div>
    @endforeach
</div>

{{-- =====================================================
    VÍNCULOS (Coletivos / Artistas) – até 3
====================================================== --}}
<div class="form-group">
    <label>Vincular Coletivos / Artistas (até 3) *</label>
    <select name="vinculos[]" class="form-control" multiple required>
        <optgroup label="Coletivos">
            @foreach($coletivos as $c)
                <option value="coletivo:{{ $c->id }}">
                    {{ $c->nome }}
                </option>
            @endforeach
        </optgroup>

        <optgroup label="Artistas">
            @foreach($artistas as $a)
                <option value="artista:{{ $a->id }}">
                    {{ $a->nome }}
                </option>
            @endforeach
        </optgroup>
    </select>

    <small class="text-muted">
        Selecione até 3 vínculos entre coletivos e artistas.
    </small>
</div>

<div class="form-group">
    <label>Tipo de Espetáculo *</label>
    <select name="tipo" id="tipo" class="form-control" required>
        <option value="">Selecione</option>
        @foreach(array_keys(config('espetaculos.tipos')) as $tipo)
            <option value="{{ $tipo }}">{{ $tipo }}</option>
        @endforeach
    </select>
</div>

<div class="form-group" id="subtipo-group" style="display:none">
    <label>Subtipo</label>
    <select name="subtipo" id="subtipo" class="form-control"></select>
</div>

<div class="form-group" id="tipo-outro-group" style="display:none">
    <label>Especifique o tipo</label>
    <input type="text" name="tipo_outros" class="form-control">
</div>

            <div class="form-group">
                <label>Ano de Produção *</label>
                <input type="number" name="ano_producao"
                       class="form-control"
                       min="1900"
                       max="{{ date('Y') }}"
                       required>
            </div>
<div class="form-group">
    <label>Imagem de Apresentação (opcional)</label>
    <input type="file" name="imagem_apresentacao" class="form-control" accept="image/*">
    <small class="text-muted">Se não enviar, o sistema usa uma imagem padrão.</small>
</div>

<div class="form-group">
    <label>Créditos da Imagem (opcional)</label>
    <input type="text" name="imagem_apresentacao_creditos" class="form-control" maxlength="255">
</div>

<div class="form-group">
    <label>Imagem de Topo (opcional)</label>
    <input type="file" name="imagem_topo" class="form-control" accept="image/*">
</div>

{{-- LOCALIZAÇÃO --}}
<div class="form-group">
    <label>País *</label>
    <select name="pais" id="pais" class="form-control" required></select>
</div>

<div class="form-group" id="estado-group">
    <label>Estado</label>
    <select name="estado" id="estado" class="form-control"></select>
</div>

<div class="form-group" id="cidade-group">
    <label>Cidade</label>
    <select name="cidade" id="cidade" class="form-control"></select>
</div>

<div class="form-group" id="cidade-regiao-group" style="display:none">
    <label>Cidade / Região</label>
    <input type="text" name="cidade_regiao" class="form-control">
</div>


            <div class="form-group">
                <label>Sinopse (150 caracteres) *</label>
                <textarea name="sinopse_150"
                          class="form-control"
                          maxlength="150"
                          required></textarea>
            </div>

<div class="form-group">
    <label>Sinopse (300 caracteres) (opcional)</label>
    <textarea name="sinopse_300" class="form-control" maxlength="300"></textarea>
</div>

<div class="form-group">
    <label>Release (até 2.000 caracteres) (opcional)</label>
    <textarea name="release_2000" class="form-control" maxlength="2000"></textarea>
</div>

<div class="form-group">
    <label>Público-alvo (150 caracteres) *</label>
    <textarea name="publico_alvo_150" class="form-control" maxlength="150" required></textarea>
</div>

<div class="form-group">
    <label>Por que do espetáculo (até 1.000 caracteres) *</label>
    <textarea name="porque_1000" class="form-control" maxlength="1000" required></textarea>
</div>

            <div class="form-group">
                <label>Produtor / Representante *</label>
                <input type="text" name="produtor_representante"
                       class="form-control" required>
            </div>

            <div class="form-group">
                <label>Email *</label>
                <input type="email" name="email"
                       class="form-control" required>
            </div>

{{-- =====================================================
    FICHA TÉCNICA
====================================================== --}}
<h4 class="mt-4">Ficha Técnica</h4>

<table class="table table-bordered" id="ficha-tecnica-table">
    <thead>
        <tr>
            <th>Nome Artístico</th>
            <th>Função / Personagem</th>
            <th>Artista (opcional)</th>
            <th width="50"></th>
        </tr>
    </thead>
    <tbody>
        @for($i = 0; $i < 5; $i++)
        <tr>
            <td>
                <input type="text" name="ficha_nome[]" class="form-control">
            </td>
            <td>
                <input type="text" name="ficha_funcao[]" class="form-control">
            </td>
            <td>
                <select name="ficha_artista[]" class="form-control">
                    <option value="">—</option>
                    @foreach($artistas as $artista)
                        <option value="{{ $artista->id }}">
                            {{ $artista->nome }}
                        </option>
                    @endforeach
                </select>
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger remove-row">×</button>
            </td>
        </tr>
        @endfor
    </tbody>
</table>
<hr>
<h4 class="mt-4">Vídeos</h4>

<div class="form-group">
    <label>Vídeo do Espetáculo (URL)</label>
    <input type="url" name="video_url" class="form-control" placeholder="https://...">
</div>

<div class="form-group">
    <label>Senha de Acesso do Vídeo (se houver)</label>
    <input type="text" name="video_senha" class="form-control" maxlength="255">
</div>

<div class="form-group">
    <label>Teaser do Espetáculo (URL)</label>
    <input type="url" name="teaser_url" class="form-control" placeholder="https://...">
</div>
<hr>
<h4 class="mt-4">Fotos e Arquivos</h4>

<div class="form-group">
    <label>Fotos do Espetáculo (máx. 5)</label>
    <input type="file" name="fotos[]" class="form-control" accept="image/*" multiple>
</div>

<div class="form-group">
    <label>Clipping / Curriculum (PDF)</label>
    <input type="file" name="pdf_clipping" class="form-control" accept="application/pdf">
</div>

<div class="form-group">
    <label>Mapa de Palco (PDF)</label>
    <input type="file" name="pdf_mapa_palco" class="form-control" accept="application/pdf">
</div>

<div class="form-group">
    <label>Mapa de Luz (PDF)</label>
    <input type="file" name="pdf_mapa_luz" class="form-control" accept="application/pdf">
</div>

<div class="form-group">
    <label>Mapa de Som (PDF)</label>
    <input type="file" name="pdf_mapa_som" class="form-control" accept="application/pdf">
</div>

<div class="form-group">
    <label>Texto / Roteiros / Músicas (PDF)</label>
    <input type="file" name="pdf_roteiro" class="form-control" accept="application/pdf">
</div>
<div class="form-group">
    <label>Local de Execução (selecione um ou mais) *</label><br>

    @foreach([
        'Palco Italiano',
        'Arena',
        'Semi-arena',
        'Rua',
        'Espaços Alternativos',
        'Escolas',
        'Patios e espaços ao ar livre com estrutura/cobertura',
        'Adaptável'
    ] as $loc)
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="local_execucao[]" value="{{ $loc }}">
            <label class="form-check-label">{{ $loc }}</label>
        </div>
    @endforeach
</div>
<hr>
<h4 class="mt-4">Site e Redes Sociais</h4>

<div class="form-group">
    <label>Site/Apresentação do projeto</label>
    <input type="url" name="site" class="form-control">
</div>

<div class="form-group"><label>Facebook</label><input type="url" name="facebook" class="form-control"></div>
<div class="form-group"><label>Instagram</label><input type="url" name="instagram" class="form-control"></div>
<div class="form-group"><label>TikTok</label><input type="url" name="tiktok" class="form-control"></div>
<div class="form-group"><label>X (Twitter)</label><input type="url" name="x_twitter" class="form-control"></div>
<div class="form-group"><label>YouTube</label><input type="url" name="youtube" class="form-control"></div>
<div class="form-group"><label>LinkedIn</label><input type="url" name="linkedin" class="form-control"></div>
<div class="form-group"><label>Pinterest</label><input type="url" name="pinterest" class="form-control"></div>
<div class="form-group"><label>WeChat</label><input type="text" name="wechat" class="form-control"></div>
<div class="form-group"><label>WhatsApp</label><input type="text" name="whatsapp" class="form-control"></div>

<button type="button" class="btn btn-outline-primary" id="add-ficha">
    + Adicionar linha
</button>


            </td>
        </tr>
    </tbody>
</table>


            <div class="form-group">
                <label>Visibilidade *</label>
                <select name="visibilidade" class="form-control" required>
                    <option value="cadastramento">Em cadastramento</option>
                    <option value="publica">Pública</option>
                    <option value="senha">Acesso com senha</option>
                    <option value="inativo">Inativa</option>
                </select>
            </div>

        </div>

        <div class="card-footer">
            <button class="btn btn-primary">
                <i class="fas fa-save"></i> Salvar
            </button>
            <a href="{{ route('espetaculos.index') }}" class="btn btn-secondary">
                Cancelar
            </a>
        </div>
    </div>
</form>

@stop

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const tipoSelect   = document.getElementById('tipo');
    const subtipoGroup = document.getElementById('subtipo-group');
    const subtipoSelect= document.getElementById('subtipo');
    const tipoOutroGrp = document.getElementById('tipo-outro-group');

    tipoSelect.addEventListener('change', function () {

        subtipoSelect.innerHTML = '';
        subtipoGroup.style.display = 'none';
        tipoOutroGrp.style.display = 'none';

        if (!this.value) return;

        fetch(`{{ route('espetaculos.subtipos') }}?tipo=${encodeURIComponent(this.value)}`)
            .then(res => res.json())
            .then(subtipos => {

                if (subtipos.length === 0) {
                    tipoOutroGrp.style.display = 'block';
                    return;
                }

                subtipoGroup.style.display = 'block';

                let opt = document.createElement('option');
                opt.value = '';
                opt.textContent = 'Selecione';
                subtipoSelect.appendChild(opt);

                subtipos.forEach(s => {
                    let o = document.createElement('option');
                    o.value = s;
                    o.textContent = s;
                    subtipoSelect.appendChild(o);
                });

                subtipoSelect.addEventListener('change', function () {
                    if (this.value === 'Outras' || this.value === 'Outros') {
                        tipoOutroGrp.style.display = 'block';
                    } else {
                        tipoOutroGrp.style.display = 'none';
                    }
                });
            });
    });
});
</script>
@endpush


@push('scripts')
<script>
document.getElementById('add-ficha').addEventListener('click', function () {
    let table = document.querySelector('#ficha-tecnica-table tbody');
    let row = table.rows[0].cloneNode(true);

    row.querySelectorAll('input, select').forEach(el => el.value = '');

    table.appendChild(row);
});

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('remove-row')) {
        let row = e.target.closest('tr');
        let table = row.closest('tbody');

        if (table.rows.length > 1) {
            row.remove();
        }
    }
});
</script>
@endpush
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const select = document.getElementById('vinculos');

    select.addEventListener('change', function () {
        const selected = Array.from(this.selectedOptions);

        if (selected.length > 3) {
            selected[selected.length - 1].selected = false;
            alert('Você pode selecionar no máximo 3 vínculos.');
        }
    });

});
</script>
@endpush
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const paisEl   = document.getElementById('pais');
    const estadoEl = document.getElementById('estado');
    const cidadeEl = document.getElementById('cidade');

    const estadoGroup = document.getElementById('estado-group');
    const cidadeGroup = document.getElementById('cidade-group');
    const cidadeRegiaoGroup = document.getElementById('cidade-regiao-group');

    /* ===============================
       Helpers
    =============================== */
    function resetSelect(select, placeholder = 'Selecione') {
        select.innerHTML = '';
        const opt = document.createElement('option');
        opt.value = '';
        opt.textContent = placeholder;
        select.appendChild(opt);
    }

    function showBrasil() {
        estadoGroup.style.display = '';
        cidadeGroup.style.display = '';
        cidadeRegiaoGroup.style.display = 'none';
    }

    function showExterior() {
        estadoGroup.style.display = 'none';
        cidadeGroup.style.display = 'none';
        cidadeRegiaoGroup.style.display = '';
        resetSelect(estadoEl);
        resetSelect(cidadeEl);
    }

    /* ===============================
       País (BR / EX)
    =============================== */
    function loadPaises() {
        paisEl.innerHTML = '';

        const optBR = document.createElement('option');
        optBR.value = 'BR';
        optBR.textContent = 'Brasil';
        paisEl.appendChild(optBR);

        const optEX = document.createElement('option');
        optEX.value = 'EX';
        optEX.textContent = 'Exterior';
        paisEl.appendChild(optEX);

        paisEl.value = 'BR';
        showBrasil();
        loadEstadosBR();
    }

    paisEl.addEventListener('change', function () {
        if (this.value === 'BR') {
            showBrasil();
            loadEstadosBR();
        } else {
            showExterior();
        }
    });

    /* ===============================
       Estados (IBGE)
    =============================== */
    async function loadEstadosBR() {
        resetSelect(estadoEl, 'Selecione o Estado');
        resetSelect(cidadeEl, 'Selecione a Cidade');

        try {
            const res = await fetch(
                'https://servicodados.ibge.gov.br/api/v1/localidades/estados?orderBy=nome'
            );
            const data = await res.json();

            data.forEach(uf => {
                const opt = document.createElement('option');
                opt.value = uf.sigla;
                opt.textContent = uf.nome;
                estadoEl.appendChild(opt);
            });
        } catch (e) {
            console.error('Erro ao carregar estados IBGE', e);
        }
    }

    /* ===============================
       Cidades (IBGE)
    =============================== */
    estadoEl.addEventListener('change', async function () {
        resetSelect(cidadeEl, 'Selecione a Cidade');

        if (!this.value) return;

        try {
            const res = await fetch(
                `https://servicodados.ibge.gov.br/api/v1/localidades/estados/${this.value}/municipios?orderBy=nome`
            );
            const data = await res.json();

            data.forEach(c => {
                const opt = document.createElement('option');
                opt.value = c.nome;
                opt.textContent = c.nome;
                cidadeEl.appendChild(opt);
            });
        } catch (e) {
            console.error('Erro ao carregar cidades IBGE', e);
        }
    });

    /* ===============================
       Init
    =============================== */
    loadPaises();
});
</script>
@endpush