@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="container my-4 py-3">
        <h4 class="mb-4">Itinerante<small> adicionar</small></h4>
        <form action="{{ route('publicador.itinerante-bairros.salvar') }}" method="POST">
            @csrf
            <input type="hidden" name="id" value="{{$search->id}}">
            <div class="row">

                <div class="col-sm-12">
                    <div class="form-group">

                        <label for="section">Seção:</label>
                        <select class="form-control form-control-sm secao" name="section" onload="display()">
                            <option value="contador"
                                {{ $search->section == 'contador' ? 'selected' : 'style=display:none' }}>Contador</option>
                            <option value="slider" {{ $search->section == 'slider' ? 'selected' : 'style=display:none' }}>
                                Slider</option>
                            <option value="noticias"
                                {{ $search->section == 'noticias' ? 'selected' : 'style=display:none' }}>Notícias</option>
                            <option value="videos" {{ $search->section == 'videos' ? 'selected' : 'style=display:none' }}>
                                Galeria de vídeos</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row noticias" style='display:none'>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="descricao">Bairro:</label>
                        <input class="form-control form-control-sm" value="{{ $search->bairro }}"
                            placeholder="Digite o nome do bairro" name="bairro[]" type="text">
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="descricao">Tag de pesquisa:</label>
                        <input class="form-control form-control-sm" value="{{ $search->tag }}"
                            placeholder="Digite a tag para pesquisa" name="tag_noticias" type="text">
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="descricao">Álbun flickr:</label>
                        <input class="form-control form-control-sm" value="{{ $search->flicker }}"
                            placeholder="Link para álbun do flickr" name="flickr" type="text">
                    </div>
                </div>
            </div>

            <div class="row contador" style='display:none'>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="descricao">Data do evento:</label>
                        <input class="form-control form-control-sm" value="{{ $search->data_evento }}"
                            placeholder="Data do evento" name="data[]" type="datetime-local">
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-check">
                        <input type="checkbox" {{ $search->em_breve == '1' ? 'checked' : '' }} class="form-check-input"
                            name="contador">
                        <label class="form-check-label">Mostrar contador/em breve</label>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="descricao">Bairro:</label>
                        <input class="form-control form-control-sm" value="{{ $search->bairro }}"
                            placeholder="Local de realização do evento" name="bairro[]" type="text">
                    </div>
                </div>
            </div>

            <div class="row slider" style='display:none'>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="descricao">local:</label>
                        <input class="form-control form-control-sm" value="{{ $search->bairro }}"
                            placeholder="Digite o nome do bairro" name="bairro[]" type="text">
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="descricao">Data:</label>
                        <input class="form-control form-control-sm" value="{{ $search->data_evento }}" name="data[]"
                            type="date" placeholder="Selecione uma data">
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="descricao">Link video:</label>
                        <input class="form-control form-control-sm" value="{{ $search->link_youtube }}"
                            placeholder="Link video do youtube" name="youtube[]" type="text">
                    </div>
                </div>
            </div>

            <div class="row videos" style='display:none'>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label for="descricao">Playlist youtube:</label>
                        <input class="form-control form-control-sm" value="{{$search->link_youtube}}" placeholder="Link da playlist no youtube"
                            name="youtube[]" type="text">

                    </div>
                </div>
            </div>

            <p class="text-center">
                <a href="{{ route('publicador.itinerante.index') }}" class="btn btn-danger">Cancelar</a>
                <input class="btn btn-success" type="submit" value="Salvar">
            </p>
        </form>
    </div>
    
    <script defer>
        document.addEventListener('DOMContentLoaded', function() {
            display(); // Chama a função display imediatamente após o DOM ser carregado
        });
    
        function display() {
            var selectElement = document.querySelector('.secao');
            var selectedValue = selectElement.value;
    
            var allSections = document.querySelectorAll('.row.contador, .row.slider, .row.noticias, .row.videos');
            allSections.forEach(function(section) {
                section.style.display = 'none'; // Esconde todas as seções
                // Remove o atributo required e desabilita todos os inputs em seções escondidas
                section.querySelectorAll('input[type="text"], input[type="date"], input[type="datetime-local"]')
                    .forEach(function(input) {
                        input.removeAttribute('required');
                        input.disabled = true; // Desabilita o input
                    });
            });
    
            if (selectedValue) {
                var selectedSection = document.querySelector('.row.' + selectedValue);
                if (selectedSection) {
                    selectedSection.style.display = ''; // Mostra a seção selecionada
                    // Adiciona o atributo required e habilita os inputs na seção visível
                    selectedSection.querySelectorAll('input[type="text"], input[type="date"], input[type="datetime-local"]')
                        .forEach(function(input) {
                            input.setAttribute('required', true);
                            input.disabled = false; // Habilita o input
                        });
                }
            }
    
            // Adiciona o evento de mudança ao elemento select para lidar com mudanças futuras
            selectElement.addEventListener('change', function() {
                display(); // Reutiliza a função display para lidar com a mudança
            });
        }
    </script>
    

    <style>
        .playlist-youtube {
            display: flex !important;
            flex-direction: row !important;
            -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
            margin-right: -15px !important;
            margin-left: -15px !important;
            flex-direction: row !important;
        }
    </style>
@endsection