@extends('layouts.site.default')
@section('content')
    <div class="container especial-container">
        <div class="row">
            <div class="col-md-12 text-center my-4">
                <img src="https://assets.assembleia.pr.leg.br/images/escola/assembleia-itinerante-banner.png" alt="itinerante"
                    class="banneritinerante" id="banner-itinerante">
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var banner = document.getElementById('banner-itinerante');
                        var mobileSrc =
                            'https://assets.assembleia.pr.leg.br/images/escola/assembleia-itinerante-banner-mobile.png';

                        if (window.innerWidth <= 767) {
                            banner.src = mobileSrc;
                        }
                    });
                </script>
                <h1 class="display-4" style="display: none">Deixe aqui a sua sugestão para melhorar a sua cidade e o nosso
                    Paraná.</h1>
            </div>
        </div>
                <!-- Mensagem de sucesso ou erro-->
        @if (isset($statussuccess))
            <div class="alert alert-success text-center" role="alert">
                {{ $statussuccess }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger ml-auto mr-auto mb-3 text-center">
                @lang('labels.msg.verifique')
            </div>
        @endif

        @if (isset($statuserror))
            <div class="alert alert-danger text-center" role="alert">
                {{ $statuserror }}
            </div>
        @endif

        <form action="/assembleia-itinerante/salvarsugestao" method="post">
            @csrf
            <div class="form-row">
                <div class="form-group col-md-6">
                    <!-- evento hidden-->
                    <input type="hidden" class="form-control" id="evento" name="evento"
                        value="Assembleia Itinerante Maringá">
                        <input type="hidden" name="formulario" value="formbase">
                    <label for="nomeCompleto">Nome completo</label>
                    <input type="text" class="form-control" id="nomeCompleto" name="nome_completo" required>
                </div>
                <div class="form-group col-md-6">
                    <label for="email">E-mail</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="telefone">Telefone</label>
                    <input type="text" class="form-control" id="telefone" name="telefone" required>
                </div>
                <div class="form-group col-md-6">
                    <label for="cidade">Cidade</label>
                    <input type="text" class="form-control" id="cidade" name="cidade" required>
                </div>
            </div>
            <div class="form-group col-md-12">
                <label for="sugestao">Sugestões</label>
                <textarea class="form-control" id="sugestao" name="sugestao" rows="3" required></textarea>
            </div>

            <div class="form-group col-md-12">
                <label for="avaliacao">Como você avalia o estande da Assembleia?</label>
                <div id="avaliacao" class="text-left">
                    <span class="star" data-rating="1">&#9734;</span>
                    <span class="star" data-rating="2">&#9734;</span>
                    <span class="star" data-rating="3">&#9734;</span>
                    <span class="star" data-rating="4">&#9734;</span>
                    <span class="star" data-rating="5">&#9734;</span>
                    <input type="hidden" name="avaliacao" id="rating" value="0" required>
                </div>
            </div>
            <div class="form-group col-md-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="whatsapp" name="whatsapp">
                    <label class="form-check-label" for="whatsapp">Quero receber novidades da Assembleia Legislativa pelo
                        WhatsApp.</label>
                </div>
            </div>
            <div class="form-group col-md-12">
                <button type="submit" class="btn btn-primary">Enviar</button>
            </div>

        </form>
    </div>

    <div class="test" style="display: none">
      
        

    </div>

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        form {
            padding-top: 5vh;
        }

        .container {
            margin-top: 2rem;
        }

        .display-4 {
            font-weight: bold;
            font-size: 2.5rem;
            color: #333;
        }

        .form-control,
        .form-check-input {
            border-radius: 0;
        }

        .star {
            font-size: 3rem;
            color: #aaa;
            cursor: pointer;
            padding: 0 5px;
            transition: color 200ms;
        }

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



        .especial-container {
            margin-bottom: 30vh;
        }

        .banneritinerante {
            max-width: 100%;
        }

        /*responsivo*/
        @media (max-width: 768px) {
            .banneritinerante {
                max-width: 120%;
                margin: -2rem -10vw 0rem;
            }

            /*limita a largura do body a tela do dispositio evitando scroll horizontal*/
            body {
                overflow-x: hidden;
                max-width: 100vw;
            }

            .form-check {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
            }

            .form-check input#whatsapp {
                margin-right: 10px;
            }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const stars = document.querySelectorAll('.star');
            const ratingInput = document.getElementById('rating');

            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);
                });
            });

            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');
                    }
                });
            }
        });
    </script>
@endsection