@extends('layouts.site.default')

@section('content')
    {{-- ============================================================
     CONFIGURAÇÕES PHP E VARIÁVEIS
    ============================================================ --}}
    @php
        $cont1 = 1;
        $cont2 = 1;
        $cont3 = 1;

        // Configurar locale do Carbon
        \Carbon\Carbon::setLocale('pt_BR');
        $dataEvento = \Carbon\Carbon::parse($slider->data_evento);
        $dataFormatada = ucfirst($dataEvento->isoFormat('DD [DE] MMMM'));
    @endphp

    {{-- ============================================================
     META TAGS E IMPORTS EXTERNOS
    ============================================================ --}}

    {{-- Scripts e CSS externos --}}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <link rel="stylesheet" href="{{ asset('css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/escola/custons2.css')}}">
    <link rel="stylesheet" href="{{ asset('css/fontawesome.min.css') }}">

    {{-- SweetAlert2 --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.5/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.5/sweetalert2.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    {{-- ============================================================
     SEÇÃO CONTADOR
    ============================================================ --}}
    <div class="backgrounds-counter displaynone" style="padding-top: 1rem;">
        <div class="container">
            <div class="titilo-counter">
                <h4>Fique ligado!</h4>
                <h1>Faltam apenas...</h1>
            </div>
            <div class="counter-count">
                <div class="bord">
                    <div class="linear-count">
                        <p class="count-numbers" id="days"></p>
                        <p class="count-text">Dias</p>
                    </div>
                </div>
                <div class="bord">
                    <div class="linear-count">
                        <p class="count-numbers" id="hours"></p>
                        <p class="count-text">Horas</p>
                    </div>
                </div>
                <div class="bord">
                    <div class="linear-count">
                        <p class="count-numbers" id="minutes"></p>
                        <p class="count-text">Minutos</p>
                    </div>
                </div>
            </div>
            <div class="text-counter">
                <p>Para abertura do estande na <b>Assembleia Legislativa</b> em <b>{{ $contador->bairro }}</b></p>
            </div>
        </div>
    </div>

    {{-- ============================================================
     SEÇÃO HERO/BANNER PRINCIPAL
    ============================================================ --}}
    <section class="section section-swiper-absoulte context-dark text-center wow fadeIn">
        <div class="backgroundslider">
            <div class="junta-tudo">
                <img id="logo-principal" src="{{ asset('img/itinerante_bairros/logo.png') }}" class="itineranteleterring">
                <img id="logo-embreve" src="https://assets.assembleia.pr.leg.br/img/banner-destaque-home/logo-em-breve.png"
                    class="itineranteleterring displaynone">

                <div class="camada">
                    <div class="alinha displaynone">
                        <div class="junto">
                            <span class="glyphicon glyphicon-globe"></span><p>{{ $slider->bairro }}</p>
                        </div>
                        <div class="junto">
                            <span class="glyphicon glyphicon-calendar"></span> <p>DIA {{ strtoupper($dataFormatada) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    {{-- ============================================================
     FORMULÁRIO DE SUGESTÕES
    ============================================================ --}}
    <a id="sugestao"></a>
    <div id="row1">
        <div id="col1">
            <div class="form-title">
                <h1>deixe aqui a sua sugestão para melhorar o seu bairro e nosso paraná</h1>
            </div>

            {{-- Mensagens de feedback --}}
            <div class="container-alerta">
                @if ($errors->any())
                    <div class="alert alert-danger ml-auto mr-auto mb-3 text-center" id="erros-validacao">
                        <strong>⚠️ Por favor, corrija os erros abaixo:</strong>
                        <ul class="mb-0 mt-2 text-left">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if (isset($statuserror))
                    <div class="alert alert-danger text-center dix" id="falha" role="alert">
                        <strong>❌ Erro!</strong><br>
                        {{ $statuserror }}
                    </div>
                @endif
            </div>

            <form action="{{ route('site.eventositinerantes_bairros') }}" method="post" id="formulario-sugestao">
                @csrf
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control @error('nome_completo') is-invalid @enderror"
                            id="nomeCompleto" name="nome_completo" placeholder="Nome completo"
                            value="{{ old('nome_completo') }}" required>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                            placeholder="E-mail" name="email" value="{{ old('email') }}" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control @error('telefone') is-invalid @enderror" id="telefone"
                            placeholder="Telefone" name="telefone" value="{{ old('telefone') }}" required>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control @error('bairro') is-invalid @enderror"
                            placeholder="Bairro" id="cidade" name="bairro" value="{{ old('bairro') }}" required>

                    </div>
                </div>
                <div class="form-group col-md-12">
                    <textarea class="form-control @error('sugestao') is-invalid @enderror" id="sugestao" name="sugestao" rows="3"
                        placeholder="Sugestões" required>{{ old('sugestao') }}</textarea>
                </div>

                <div class="form-group col-md-12">
                    <label for="avaliacao">Como você avalia o estande da Assembleia? <span
                            class="text-danger">*</span></label>
                    <div id="avaliacao" class="text-left @error('avaliacao') border border-danger rounded p-2 @enderror">
                        <span class="star" data-rating="1">☆</span>
                        <span class="star" data-rating="2">☆</span>
                        <span class="star" data-rating="3">☆</span>
                        <span class="star" data-rating="4">☆</span>
                        <span class="star" data-rating="5">☆</span>
                        <input type="hidden" name="avaliacao" id="rating" value="{{ old('avaliacao', '0') }}"
                            required>
                    </div>
                    <small class="form-text text-muted">Clique nas estrelas para avaliar (obrigatório)</small>
                    @error('avaliacao')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                    <div id="avaliacao-erro" class="text-danger small mt-1" style="display: none;">
                        Por favor, selecione uma avaliação clicando nas estrelas.
                    </div>
                </div>

                <div class="form-group col-md-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="whatsapp" name="whatsapp"
                            {{ old('whatsapp') ? 'checked' : '' }}>
                        <label class="form-check-label" for="whatsapp">
                            Quero receber novidades da Assembleia Legislativa pelo WhatsApp.
                        </label>
                    </div>
                </div>

                <div class="recaptcha-container col-md-12 mb-3">
                    <div class="g-recaptcha @error('g-recaptcha-response') border border-danger rounded @enderror"
                        data-sitekey="6Ld-VY8mAAAAAPVDXZon4XjLTox8LGQtXOWr69wy"></div>
                    @error('g-recaptcha-response')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group col-md-12" id="last">
                    <button class="btu" type="submit">Enviar</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ============================================================

    SEÇÃO SOBRE A ASSEMBLEIA NOS BAIRROS
    ============================================================ --}}
    <div class="container-fluid">
        <div id="row">
            <div id="col">
                <div class="text-content">
                    <h3>Saiba mais sobre a</h3>
                    <h1>Assembleia nos Bairros</h1>
                    <p>
                        A Assembleia Legislativa do Paraná vem percorrendo todas as regiões do Estado com a
                        Assembleia Itinerante, para ouvir e se aproximar da população paranaense. Agora, chegou a
                        vez de percorrer os bairros da capital, para se conectar com os curitibanos que não
                        conseguem ir até o Centro Cívico.
                    </p>
                    <p>
                        Além de oferecer diversos serviços em parceria com a Prefeitura Municipal de Curitiba, os
                        deputados estaduais do Paraná percorrerão os bairros da capital, recebendo propostas,
                        iniciativas, sugestões e demandas de todas as regiões.
                    </p>
                </div>
            </div>
            <div id="col">
                <img src="{{ asset('img/banner-destaque-home/img1-institucional.png') }}">
                <img id="image" src="{{ asset('img/banner-destaque-home/img2-institucional.png') }}">
            </div>
        </div>
    </div>

    {{-- ============================================================
     SEÇÃO NOTÍCIAS E GALERIA
    ============================================================ --}}
    <div class="container-fluid galeria"
        style="background-image:url({{ asset('img/itinerante_bairros/noticias.jpg') }})">
        <div class="backgroundcover">
            <div class="container">
                {{-- Abas das notícias --}}
                <div id="ul_li" class="owl-carousel ul_li">
                    <div class="tabs-custom tabs-horizontal tabs-corporate">
                        <ul class="nav nav-tabs">
                            @foreach ($noticias as $not)
                                <li class="nav-item {{ $cont1 == 1 ? 'active in' : '' }}" id="tabs-{{ $cont1 }}"
                                    role="presentation">
                                    <a class="nav-link nav-link-purple-{{ $cont1 % 2 == 0 ? 'heart' : 'blue' }}"
                                        href="#tabs-1-{{ $cont1 }}" data-toggle="tab"
                                        data-triangle=".nav-link-overlay">
                                        <span class="nav-link-overlay"></span>
                                        <span class="nav-link-cite">{{ $not->bairro }}</span>
                                    </a>
                                </li>
                                <div class="displaycontador">{{ $cont1++ }}</div>
                            @endforeach
                        </ul>
                    </div>
                </div>

                {{-- Conteúdo das abas --}}
                <div class="tabs-custom tabs-horizontal tabs-corporate">
                    <div class="tab-content wow fadeIn">
                        @foreach ($noticias as $index => $noticia)
                            <div class="tab-pane fade {{ $cont2 == 1 ? 'active in' : '' }}"
                                id="tabs-1-{{ $cont2 }}">
                                <div class="card-group-custom card-group-corporate" id="accordion{{ $cont2 }}"
                                    role="tablist" aria-multiselectable="false">
                                    <div class="noticias-title">
                                        <p>notícias de {{ $noticia->bairro }}</p>
                                    </div>

                                    @foreach ($noticia->noticia as $line)
                                        <hr>
                                        <article class="card card-custom card-corporate">
                                            <div class="card-header" role="tab">
                                                <div class="card-title">
                                                    <div class="foat">
                                                        @if (isset($line->imagem_caminho))
                                                            <img
                                                                src="{{ Storage::url('imagens/' . $line->imagem_caminho) }}">
                                                        @else
                                                            <img
                                                                src="https://storage.assembleia.pr.leg.br/imagens/HfHT3EMURHaxoQknMoh2eAgnqImpos1g9iz44dGD.png">
                                                        @endif
                                                        <a class="collapsed" target="_blank"
                                                            href="https://www.assembleia.pr.leg.br/comunicacao/noticias/{{ $line->slug }}">
                                                            <span class="schedule-classic">
                                                                <span
                                                                    class="unit unit-spacing-md align-items-center d-block d-md-flex">
                                                                    <span class="unit-body">
                                                                        <span class="schedule-classic-content">
                                                                            <span
                                                                                class="schedule-classic-title heading-4">{{ $line->titulo }}</span>
                                                                            <span class="schedule-classic-author">
                                                                                Por <span
                                                                                    class="schedule-classic-author-name">{!! $line->autor !!}</span>
                                                                            </span>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    @endforeach

                                    <div class="stica">
                                        <button class="btu-1">
                                            <a href="https://www.assembleia.pr.leg.br/pesquisa?termo={{ $noticia->tag }}">Saiba
                                                mais</a>
                                        </button>
                                    </div>
                                    <hr>

                                    {{-- Galeria de fotos --}}
                                    @if (!empty($noticia->flickr_urls) && count($noticia->flickr_urls) > 0)
                                        <div class="container-alinha">
                                            <div id="titulo" style="margin-top: 0vh">
                                                <h1>{{ $noticia->bairro }}</h1>
                                            </div>
                                            <div class="owl-carousel owl-theme ore-veide">
                                                @foreach ($noticia->flickr_urls as $index => $flickr)
                                                    <div class="item">
                                                        <a href="{{ $flickr }}" data-lightbox="gallery">
                                                            <img src="{{ $flickr }}"
                                                                alt="Image {{ $index }}">
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <button class="btu-1 one">
                                                <a href="{{ $noticia->flicker }}" target="_blank">Ver mais</a>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="displaycontador">{{ $cont2++ }}</div>
                        @endforeach
                    </div>
                </div>

                <hr>

                {{-- Galeria de vídeos --}}
                <div class="container yout">
                    <div class="container">
                        <div id="titul">
                            <h1>galeria de vídeos</h1>
                        </div>
                        <div class="videos-display">
                            <div class="owl-carousel owl-theme owe-video">
                                @foreach ($videos->youtube as $index => $video)
                                    <div class="item">
                                        <div class="video-item-1"
                                            data-video="https://www.youtube.com/embed/{{ $video }}">
                                            <img src="https://img.youtube.com/vi/{{ $video }}/maxresdefault.jpg"
                                                alt="Miniatura do vídeo {{ $index }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="modal">
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <iframe id="video-player" src="" frameborder="0" allowfullscreen
                                        allow='autoplay'></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ============================================================
     SCRIPTS JAVASCRIPT
    ============================================================ --}}
    <script src="{{ asset('js/escola/core.min.js') }}"></script>

    <script>
        // Função para scroll suave até elemento (melhorada)
        function scrollToElement(elementId) {
            const element = document.getElementById(elementId);
            if (!element) return;

            // Usar scroll nativo mais suave e moderno
            element.scrollIntoView({
                behavior: 'smooth',
                block: 'start',
                inline: 'nearest'
            });
        }

        // Verificar URL e fazer scroll automático
        function checkURLAndScroll() {
            var targetURLs = ['https://www.assembleia.pr.leg.br/assembleia-itinerante'];

            if (targetURLs.includes(window.location.href)) {
                setTimeout(function() {
                    scrollToElement('sugestao');
                }, 3000);
            }
        }

        // Contador regressivo
        var deadline = new Date("{{ $contador->data_evento }}").getTime();
        var x = setInterval(function() {
            var now = new Date().getTime();
            var t = deadline - now;
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;

            if (t < 0) {
                clearInterval(x);
                document.getElementById("days").innerHTML = '0';
                document.getElementById("hours").innerHTML = '0';
                document.getElementById("minutes").innerHTML = '0';
            }
        }, 1000);

        // Configuração principal quando DOM carrega
        document.addEventListener('DOMContentLoaded', function() {
            const stars = document.querySelectorAll('.star');
            const ratingInput = document.getElementById('rating');
            const formulario = document.getElementById('formulario-sugestao');
            const avaliacaoErro = document.getElementById('avaliacao-erro');

            // SWEETALERT DE SUCESSO
            @if (session('sweet_success'))
                Swal.fire({
                    title: '{{ session('sweet_title') }}',
                    text: '{{ session('sweet_message') }}',
                    icon: 'success',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#06516b',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    timer: null,
                    customClass: {
                        popup: 'swal-wide'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = '{{ session('sweet_redirect') }}';
                    }
                });
            @endif

            // DETECÇÃO AUTOMÁTICA DE ERROS E SCROLL
            const temErros = document.querySelector('.alert-danger') ||
                document.querySelector('.is-invalid') ||
                document.querySelector('#falha') ||
                document.querySelector('#erros-validacao');

            // Se há erros, fazer scroll para o formulário automaticamente
            if (temErros) {
                setTimeout(function() {
                    scrollToElement('sugestao');
                }, 500);
            }

            // Detectar âncora pela URL (caso venha com #sugestao)
            if (window.location.hash === '#sugestao') {
                setTimeout(function() {
                    scrollToElement('sugestao');
                }, 300);
            }

            // Configurar valor inicial das estrelas se já existe (para casos de erro de validação)
            const valorInicial = ratingInput.value;
            if (valorInicial && valorInicial !== '0') {
                highlightStars(valorInicial);
            }

            // Eventos das estrelas
            stars.forEach(function(star) {
                star.addEventListener('mouseover', function() {
                    const rating = this.getAttribute('data-rating');
                    highlightStars(rating);
                });

                star.addEventListener('mouseout', function() {
                    highlightStars(ratingInput.value);
                });

                star.addEventListener('click', function() {
                    const rating = this.getAttribute('data-rating');
                    ratingInput.value = rating;
                    highlightStars(rating);

                    // Remover erro visual quando usuário seleciona
                    if (avaliacaoErro) {
                        avaliacaoErro.style.display = 'none';
                    }
                    document.getElementById('avaliacao').classList.remove('border', 'border-danger',
                        'rounded', 'p-2');
                });
            });

            function highlightStars(rating) {
                stars.forEach(function(star) {
                    if (star.getAttribute('data-rating') <= rating) {
                        star.textContent = '★';
                        star.classList.add('selected');
                    } else {
                        star.textContent = '☆';
                        star.classList.remove('selected');
                    }
                });
            }

            // Validação antes do envio do formulário
            formulario.addEventListener('submit', function(e) {
                const avaliacaoValue = ratingInput.value;

                if (!avaliacaoValue || avaliacaoValue === '0') {
                    e.preventDefault();

                    if (avaliacaoErro) {
                        avaliacaoErro.style.display = 'block';
                    }
                    document.getElementById('avaliacao').classList.add('border', 'border-danger', 'rounded',
                        'p-2');

                    // Scroll até a seção de avaliação
                    setTimeout(function() {
                        scrollToElement('avaliacao');
                    }, 100);

                    return false;
                }
            });

            // Máscara para telefone
            if (typeof $ !== 'undefined' && $.fn.mask) {
                $('#telefone').mask('(00) 00000-0000');
            }

            // Configuração dos carrosséis Owl Carousel
            $(".owl-carousel").each(function() {
                var $carousel = $(this);

                if ($carousel.hasClass("owl-theme") && $carousel.hasClass("owe-video")) {
                    $carousel.owlCarousel({
                        items: 3,
                        loop: true,
                        nav: true,
                        dots: false,
                        autoplay: true,
                        autoplayTimeout: 5000,
                        slideBy: 2,
                        margin: 10,
                        responsive: {
                            0: {
                                items: 1
                            },
                            600: {
                                items: 3
                            }
                        }
                    });
                } else if ($carousel.hasClass("ul_li")) {
                    var itemCount = $carousel.children().length;
                    var enableLoop = itemCount > 7;

                    $carousel.owlCarousel({
                        items: 7,
                        loop: enableLoop,
                        nav: false,
                        dots: false,
                        autoplay: false,
                        autoWidth: false,
                        center: false,
                        margin: 15,
                        stagePadding: 0,
                        responsive: {
                            0: {
                                items: 2,
                                margin: 5
                            },
                            480: {
                                items: 3,
                                margin: 8
                            },
                            600: {
                                items: 4,
                                margin: 10
                            },
                            768: {
                                items: 5,
                                margin: 12
                            },
                            1000: {
                                items: 6,
                                margin: 15
                            },
                            1200: {
                                items: 7,
                                margin: 15
                            }
                        }
                    });
                } else {
                    $carousel.owlCarousel({
                        items: 5,
                        loop: true,
                        nav: true,
                        dots: true,
                        autoplay: true,
                        autoplayTimeout: 5000,
                        slideBy: 2,
                        margin: 10,
                        responsive: {
                            0: {
                                items: 2
                            },
                            600: {
                                items: 5
                            }
                        }
                    });
                }
            });

            // Configuração das abas
            const tabs = document.querySelectorAll('.nav.nav-tabs li');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(tab => {
                        tab.classList.remove('active');
                    });
                    tab.classList.add('active', 'in');
                });
            });

            // Modal de vídeos
            var videoItems = document.getElementsByClassName("video-item-1");
            var modal = document.getElementsByClassName("modal")[0];
            var videoPlayer = document.getElementById("video-player");
            var closeModal = document.getElementsByClassName("close")[0];

            if (videoItems.length > 0 && modal && videoPlayer && closeModal) {
                Array.from(videoItems).forEach(function(item) {
                    item.addEventListener("click", function() {
                        var videoUrl = item.getAttribute("data-video");
                        videoPlayer.setAttribute("src", videoUrl);
                        modal.style.display = "block";
                    });
                });

                closeModal.addEventListener("click", function() {
                    videoPlayer.setAttribute("src", "");
                    modal.style.display = "none";
                });

                window.addEventListener("click", function(event) {
                    if (event.target == modal) {
                        videoPlayer.setAttribute("src", "");
                        modal.style.display = "none";
                    }
                });

                window.addEventListener("keydown", function(event) {
                    if (event.key === "Escape") {
                        videoPlayer.setAttribute("src", "");
                        modal.style.display = "none";
                    }
                });
            }

            // Correção de modal Bootstrap
            setTimeout(function() {
                const body = document.querySelector('body.site.modal-open');
                if (body) {
                    body.style.paddingRight = '0px';
                    body.classList.remove('modal-open');
                }
                const backdrop = document.querySelector('.modal-backdrop.fade.in');
                if (backdrop) {
                    backdrop.style.display = 'none';
                }
            }, 3000);
        });

        // Eventos de carregamento da página
        window.addEventListener('load', function() {
            checkURLAndScroll();
        });

        // Configuração de âncora se fornecida pelo controller
        @if (isset($ancora))
            document.addEventListener("DOMContentLoaded", function() {
                var anchor = "{{ $ancora }}";
                if (anchor) {
                    setTimeout(function() {
                        scrollToElement(anchor);
                    }, 500);
                }
            });
        @endif

        // Configuração das ondas (se necessário)
        var plugins = {
            waves: document.querySelectorAll('.waves')
        };

        if (plugins.waves.length) {
            for (var i = 0; i < plugins.waves.length; i++) {
                var wave = plugins.waves[i];
                var waves = new SineWaves({
                    el: wave,
                    speed: wave.getAttribute('data-speed') || 5,
                    width: function() {
                        return $(window).width();
                    },
                    height: function() {
                        return $(window).height();
                    },
                    ease: wave.getAttribute('data-animation') || 'SineInOut',
                    wavesWidth: wave.getAttribute('data-wave-width') || '150%',
                    waves: [{
                        timeModifier: 0.6,
                        lineWidth: 5,
                        amplitude: -200,
                        wavelength: 200
                    }, {
                        timeModifier: 0.13,
                        lineWidth: 5,
                        amplitude: -300,
                        wavelength: 300
                    }],
                    resizeEvent: function() {
                        var gradient1 = this.ctx.createLinearGradient(0, 0, this.width, 0);
                        gradient1.addColorStop(0, "rgba(0, 172, 238, 1)");
                        gradient1.addColorStop(0.54, "rgba(239, 165, 6, 1)");
                        gradient1.addColorStop(1, "rgba(236, 57, 139, 1)");

                        var gradient2 = this.ctx.createLinearGradient(0, 0, this.width, 0);
                        gradient2.addColorStop(0, "rgba(32, 171, 208, 1)");
                        gradient2.addColorStop(0.50, "rgba(83, 72, 182, 1)");
                        gradient2.addColorStop(1, "rgba(234, 8, 140, 1)");

                        var index = -1;
                        var length = this.waves.length;
                        while (++index < length) {
                            if (index === 0) {
                                this.waves[index].strokeStyle = gradient1;
                            } else {
                                this.waves[index].strokeStyle = gradient2;
                            }
                        }
                    }
                });

                if (typeof $ !== 'undefined') {
                    $(window).scroll(function() {
                        if (!isScrolledIntoView($(wave))) {
                            waves.running = false;
                            waves.update();
                        } else {
                            waves.running = true;
                            waves.update();
                        }
                    });
                }
            }
        }
    </script>

    {{-- ============================================================
     CSS
    ============================================================ --}}
    <style>
        .displaycontador {
            display: none;
        }

        @if ($contador->em_breve == '0')
            .displaynone {
                display: none !important;
            }
        @endif

        .mb-3 {
            margin-bottom: 1rem;
        }

        .text-content {
            color: #ffff;
        }

        .text-content h1 {
            text-transform: uppercase;
            color: #06516b;
            font-weight: 800;
        }

        .text-content h3 {
            text-transform: uppercase;
            font-size: xx-large;
        }

        .text-content p {
            font-size: large;
        }

        /* Estilos para o sistema de estrelas */
        .star {
            font-size: 2rem;
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s ease;
            margin-right: 5px;
            user-select: none;
        }

        .star:hover,
        .star.selected {
            color: #ffc107;
        }

        .star.selected {
            text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
        }

        /* Melhorar aparência dos campos com erro */
        .is-invalid {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

        .invalid-feedback {
            display: block !important;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }

        /* Melhorar aparência das mensagens de erro */
        .alert-danger ul {
            margin-bottom: 0;
            padding-left: 1rem;
        }

        .alert-danger li {
            margin-bottom: 0.25rem;
        }

        /* Responsividade das estrelas */
        @media (max-width: 768px) {
            .star {
                font-size: 1.5rem;
                margin-right: 3px;
            }
        }

        /* Melhorar aparência do reCAPTCHA com erro */
        .g-recaptcha.border-danger {
            padding: 0.5rem;
            background-color: #fff5f5;
        }

        /* Animação suave para elementos */
        .alert {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Melhorar foco nos elementos */
        .form-control:focus {
            border-color: #06516b;
            box-shadow: 0 0 0 0.2rem rgba(6, 81, 107, 0.25);
        }

        /* Estilo do botão de envio */
        .btu:hover {
            transform: translateY(-2px);
            transition: transform 0.2s ease;
        }

        /* Estilos personalizados para SweetAlert */
        .swal-wide {
            width: 600px !important;
        }

        .swal2-popup {
            font-family: inherit;
        }

        .swal2-title {
            color: #06516b !important;
            font-weight: 700;
        }

        .swal2-content {
            font-size: 1.1rem;
        }

        .swal2-confirm {
            background-color: #06516b !important;
            border: none;
            padding: 10px 30px;
            font-size: 1rem;
            font-weight: 600;
        }

        .swal2-confirm:hover {
            background-color: #054055 !important;
        }

        @media (max-width: 768px) {
            .swal-wide {
                width: 95% !important;
            }
        }
    </style>
@endsection