@extends('layouts.site.default')
@section('content')
    <div class="container mt-5">
        <div id="filtroDiv">
            <h2 class="mb-4 text-center">Filtros do Formulário</h2>
            <form id="filtroForm" method="GET" action="{{ route('site.PrintFormularios') }}">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="de" class="form-label">De:</label>
                        <input type="date" class="form-control" id="de" name="de"
                            value="{{ request()->get('de', '') }}">
                    </div>
                    <div class="col-md-6">
                        <label for="ate" class="form-label">Até:</label>
                        <input type="date" class="form-control" id="ate" name="ate"
                            value="{{ request()->get('ate', '') }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 display"> <!-- Botão alinhado à esquerda -->
                        <button type="submit" class="btn btn-primary">Filtrar</button>
                        <a href="{{ route('site.PrintFormularios', ['full' => 'on']) }}" class="btn btn-info"
                            role="button">Mostrar todos</a>
                    </div>
                </div>

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

    {{--     <div class="container">
        <div id="filtroDiv">
            <form id="filtroForm" method="GET" action="{{ route('site.PrintFormularios') }}">
                <div class="form-group">
                    <label for="de">De:</label>
                    <input type="date" class="form-control" value="{{request()->get('de', '')}}" id="de" name="de">
                </div>
                <div class="form-group">
                    <label for="ate">Até:</label>
                    <input type="date" value="{{request()->get('ate', '')}}" class="form-control" id="ate" name="ate">
                </div>
                <div class="display">
                    <button type="submit" class="btn btn-primary">filtrar</button>
                    <a class="btn btn-info" href="{{ route('site.PrintFormularios', ['full' => 'on']) }}" role="button">Mostrar todos</a>
                </div>
            </form>
        </div>
    </div> --}}

    <style>
        /*   .conteinerfilter:hover #exibirFiltro {
                                        display: block;
                                    }
                                    #exibirFiltro {
                                        display: none;
                                        position: absolute;
                                        right: 10px;
                                        top: 10px;
                                    } */
    </style>

    <script>
        $(document).ready(function() {
            $('#exibirFiltro').click(function() {
                $('#filtroDiv').toggle();
            });
        });
    </script>
    @if (!empty($respostas))
        @foreach ($respostas as $resposta)
            <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 Londrina">
                            <label for="nomeCompleto">Nome completo</label>
                            <input type="text" class="form-control" id="nomeCompleto" name="nome_completo" required
                                value="{{ $resposta->nome_completo }}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="email">E-mail</label>
                            <input type="email" class="form-control" id="email" name="email"
                                value="{{ $resposta->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"
                                value="{{ $resposta->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"
                                value="{{ $resposta->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>{{ $resposta->sugestao }}</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 {{ $resposta->nota_de_avaliacao >= 1 ? 'selected' : '' }}"
                                data-rating="1">{{ $resposta->nota_de_avaliacao >= 1 ? '★' : '☆' }}</span>
                            <span class="star {{ $resposta->nota_de_avaliacao >= 2 ? 'selected' : '' }}"
                                data-rating="2">{{ $resposta->nota_de_avaliacao >= 2 ? '★' : '☆' }}</span>
                            <span class="star {{ $resposta->nota_de_avaliacao >= 3 ? 'selected' : '' }}"
                                data-rating="3">{{ $resposta->nota_de_avaliacao >= 3 ? '★' : '☆' }}</span>
                            <span class="star {{ $resposta->nota_de_avaliacao >= 4 ? 'selected' : '' }}"
                                data-rating="4">{{ $resposta->nota_de_avaliacao >= 4 ? '★' : '☆' }}</span>
                            <span class="star {{ $resposta->nota_de_avaliacao == 5 ? 'selected' : '' }}"
                                data-rating="5">{{ $resposta->nota_de_avaliacao == 5 ? '★' : '☆' }}</span>
                            <input type="hidden" name="avaliacao" id="rating" value="0" required>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        @php
                            //dd($resposta);
                        @endphp
                        <div class="form-check">
                            <input class="form-check-input" {{ $resposta->receber_mailling_wp ? 'checked' : '' }}
                                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 class="datesended" style="float: right">
                            <p><b>Enviado em: {{ date('d/m/Y H:i', strtotime($resposta->created_at)) }}</b></p>
                        </div>
                    </div>
                    <hr>
                </form>
            </div>
            <hr>
        @endforeach
    @endif

    <style>
        .display {
            margin-top: 2%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;
        }

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

        .container.mt-5 {
            border: 4px solid #447da6;
            padding: 2%;
            border-radius: 20px;
        }

        h2.mb-4.text-center {
            /* padding: 0; */
            margin: 0;
            margin-bottom: 1%;
            margin-bottom: 3%;
        }

        .container {
            margin-top: 2rem;
            color:#447da6;
        }

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

        @media print {
            body {
                width: 100% !important;
            }

            textarea {
                height: auto !important;
                overflow: visible !important;
            }
        }
    </style>

    <script>
        /* document.addEventListener('DOMContentLoaded', function() {
                                                    var textareas = document.querySelectorAll('textarea.form-control');

                                                    for (var i = 0; i < textareas.length; i++) {
                                                        var textarea = textareas[i];

                                                        function adjustHeight() {
                                                            textarea.style.height = 'auto';
                                                            textarea.style.height = (textarea.scrollHeight) + 7 +  'px';
                                                        }

                                                        // Ajusta a altura imediatamente ao carregar a página
                                                        adjustHeight();
                                                    }
                                                }); */

        function prepareForPrint() {
            $('button#exibirFiltro').hide();
            $('textarea').each(function() {
                var content = $(this).val();
                var printDiv = $('<div class="printDiv" style="border:solid 1px #000000; padding: 5px"></div>')
                    .html(content);
                $(this).after(printDiv);
                $(this).hide();
            });
        }

        $(window).on('beforeprint', function() {
            prepareForPrint();
        });
        //apos imprimir volta ao normal
        $(window).on('afterprint', function() {
            $('button#exibirFiltro').show();
            $('textarea').each(function() {
                $(this).show();
                $(this).next('.printDiv').remove();
            });
        });
    </script>
@endsection