@extends('welcome')
<link rel="stylesheet" href="{{ URL::asset('css/contact.css') }}">
@section('conteudo')
    <div class="content">
        <!--FORM CORE-->

        <div class="container">
            <section class="contact-page-section">
                <div class="container">
                    <div class="sec-title">
                        <div class="title">Formulário</div>
                        <h2>@yield('title', 'Chamado <i class="bi bi-ticket-perforated" style="margin-left:20px;"></i>')</h2>
                    </div>
                    <div class="inner-container">
                        <div class="row clearfix">
                            <div class="form-column col-md-8 col-sm-12 col-xs-12">
                                <div class="inner-column">
                                    <div class="contact-form">
                                        @yield('form')
                                    </div>

                                </div>
                            </div>
                            <div class="info-column col-md-4 col-sm-12 col-xs-12">
                                <div class="inner-column">
                                    <h2>Info</h2>
                                    <ul class="list-info">
                                        @yield('info')
                                    </ul>
                                </div>
                            </div>

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

            <div class="row align-items-stretch justify-content-center no-gutters">
                <div class="col-md-9">

                    <div class="max-width mt-5">
                    </div>

                </div>
            </div>


        </div>
        <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
            © 2022 Desenvolvido por : Casas da Água
        </div>
    </div>


    <!-- Modal Body -->
    <!-- if you want to close by clicking outside the modal, delete the last endpoint:data-bs-backdrop and data-bs-keyboard -->
    <div class="modal fade" id="modalId" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog"
        aria-labelledby="modalTitleId" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body row">
                    <div class="col-md-6">
                        <div class="card">
                            <div id="section-to-print">
                                <div class="header text-center">
                                    <i>Envio de material</i>
                                </div>
                                <div class="printbody">
                                    <p>De: <strong>Filial <span id="text_filial"></span></strong></p>
                                    <p>Para: <strong>Matriz - TI </strong></p>
                                    <p class="complement">Complemento: <span id="text_msg"></span></p>
                                </div>

                                <div class="footer">
                                    <p>Enviado por:<br> <strong><span id="text_nome"></span> - <span
                                                id="text_setor"></span></strong></p>
                                    <img src="{{ URL::asset('images/logo-novo.png') }}" width="100" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="not-print col-md-6 ">

                        <h4>Não esqueça!<br><br>Imprima e envie as informações junto a embalagem de envio</h4>
                    </div>





                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-home cancel" id="cancel_print">
                        <strong>NÃO IMPRIMIR</strong>
                    </button>

                    <button type="button" id="print" class="btn btn-home"><strong>IMPRIMIR</strong></button>
                </div>
            </div>
        </div>
    </div>


    <style>
        #section-to-print {
            width: 100%;
            height: 30em;

        }

        .btn-home.cancel {
            color: #000;
            background: #d6d6d6;
        }

        .btn-home.cancel:hover {
            color: #e4e4e4 !important;
        }

        .not-print {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .header {
            position: relative;
            top: 10;
            left: 0;
            right: 0;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }

        .printbody {
            position: relative;
            top: 50;
            left: 0;
            right: 0;
            font-size: 20px;
            text-align: center;


        }

        .footer {
            position: absolute;
            bottom: 10;
            left: 0;
            right: 0;

            text-align: center;
            font-size: 16px;
        }

        .footer img {
            width: 100px;
        }

        .printbody p {
            margin-top: 30px
        }

        .printbody .remetent {
            font-size: 16px;
        }

        .printbody .complement {
            font-size: 16px;
        }


        @media print {


            .content *,
            .modal-footer,
            .not-print {
                visibility: hidden;
                display: none;

            }

            .modal-content {
                border: none;
            }

            #section-to-print,
            #section-to-print * {
                visibility: visible;

            }

            #section-to-print {

                width: 100%;
                margin: 0;
                padding: 0;

            }

            .header {
                position: fixed;
                top: 200;
                left: 0;
                right: 0;
                height: 50px;
                font-size: 48px;
                text-align: center;
                font-weight: bold;
            }

            .printbody {
                position: fixed;
                top: 350;
                left: 0;
                right: 0;
                font-size: 42px;
                text-align: center;
                line-height: 50px;

            }

            .footer {
                position: fixed;
                bottom: 300;
                left: 0;
                right: 0;
                height: 50px;
                text-align: center;
                font-size: 30px;
            }

            .footer img {
                width: 200px;
            }

            .printbody p {
                margin-top: 100px;
            }

            .printbody .remetent {
                font-size: 38px;
            }

            .printbody .complement {
                font-size: 38px;
            }
        }
    </style>
    <script>
        $(document).ready(function() {

            $('#submit').on('click', function() {

                if ($('.categ').val() == 'Computador') {
                    $('#text_filial').html($('#filial option:selected').text());
                    $('#text_nome').html($('#nome').val());
                    $('#text_setor').html($('#setor').val());
                    $('#text_msg').html($('#msg').val());


                    $("#modalId").modal({
                        show: true
                    });

                } else {
                    $('#finish').click()
                }

            })
            $('#cancel_print').on('click', function() {
                $("#modalId").modal('hide');

                $('#finish').click()
            })

            $('#print').on('click', function() {
                window.print();
                $("#modalId").modal('hide');
                $('#finish').click()


            })



        });
    </script>
@endsection

@if ($message = Session::get('feedback') && Auth::check())
    <div id="feedback" class="hidden">
        <div class="card">
            <a type="button" class="btn-close close-card" aria-label="Close"><i class="bi bi-x"></i>
            </a>
            <div class="card-body">
                <h3 class="card-title">Feedback</h3>
                <p class="text-muted">Colabore avaliando nosso sistema!</p>
                <div class="icon-group">
                    <i class="bi bi-star-fill star"></i>
                    <i class="bi bi-star-fill star"></i>
                    <i class="bi bi-star-fill star"></i>
                    <i class="bi bi-star-fill star"></i>
                    <i class="bi bi-star-fill star"></i>
                    <input type="hidden" id="star">
                </div>

                <div class="text-group ">
                    <textarea id="msg-feedback" cols="30" rows="3"
                        placeholder="Se preferir, descreva sobre sua avaliação, nos ajude a melhorar ainda mais."></textarea>
                </div>
            </div>
            <div class="btn-grp">

                <a class="btn btn-home float-right mb-3 mr-3" id="send-feedback"><strong>ENVIAR</strong></a>
            </div>
        </div>
    </div>
    <script>
        if (!Cookies.get('feedback')) {
            Cookies.set('feedback', 'seen', {
                expires: 20
            })
            $('#feedback').removeClass('hidden')
            console.log('create')
        }

        const container = document.querySelector('.icon-group');
        const estrelas = document.querySelectorAll('.star');
        const card = document.querySelector('#feedback .card');
        const star = document.getElementById('star');

        estrelas.forEach((estrela, index) => {
            estrela.addEventListener('mouseover', () => {
                for (let i = 0; i <= index; i++) {
                    estrelas[i].classList.add('active');
                }
            });
            estrela.addEventListener('click', () => {
                removeStar();
                card.classList.add('expand');
                for (let i = 0; i <= index; i++) {
                    estrelas[i].classList.add('selected');
                    star.value = i + 1;


                }
            });
        });

        container.addEventListener('mouseout', () => {
            estrelas.forEach((estrela) => {
                estrela.classList.remove('active');
            });
        });

        function removeStar() {
            estrelas.forEach((estrela) => {
                estrela.classList.remove('selected');

            })
        }
    </script>
@endif
<script>
    $(document).ready(function() {
        const urlParams = new URLSearchParams(window.location.search);
        let data = urlParams.get('data');
        if (data === 'login') {
            $('#modalLogin').modal('show');
        }

        $('form').submit(function(event) {
            $('#alert').html(
                '<div class="alert-div wait-alert"><i class="bi bi-exclamation-triangle-fill"></i>Aguarde enquanto enviamos o sua solicitação...</div>'
            );
            $('.theme-btn').addClass('hidden');
        })

        $('.close-card').on('click', function() {
            $('#feedback').addClass('hidden')
        })

        $('#send-feedback').on('click', function() {
            let msg = $('#msg-feedback').val();
            let star = $('#star').val();

            $.post("/send_feedback", {
                    '_token': '{{ csrf_token() }}',
                    'msg': msg,
                    'star': star,
                    'sector': 'geral'
                },
                (result) => {
                    $('#alert').html(
                        '<div class="alert-div success-alert"><i class="bi bi-check-circle-fill"></i><strong>Obrigado,</strong> recebemos seu feedback!</div>'
                        );
                    $('#feedback').addClass('hidden')
                }
            );
        })



        $('.toast:not(#dicas-toast)').toast('show');



    })
</script>