@extends('welcome')
@section('title', 'RH | Benefícios')
@section('conteudo')
    <div class="content">
        <!--FORM CORE-->

        <div class="container">
            <section class="contact-page-section">
                <div class="container">

                    @yield('title')
                    <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">
                        <!--FORM VALIDATE-->


                    </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>


    @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>
    @endif
@endsection