@extends('welcome')
@section('page_title', 'Chamados - Abertura de Ticket')

@section('conteudo')
    <div class="content">
        <div class="container">
            <section class="contact-page-section">
                <div class="container">

                    @yield('title')

                    <div class="inner-container">
                        <div class="row no-gutters">
                            <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><i class="bi bi-info-circle mr-2"></i>Info</h2>
                                    <ul class="list-info">
                                        @yield('info')
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>



        </div>

        <div class="text-center p-4" style="background-color: rgba(0,0,0,.04); font-size:13px; color:#94a3b8;">
            © {{ date('Y') }} Desenvolvido por Casas da Água
        </div>
    </div>

    {{-- Modal impressão de etiqueta --}}
    <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 à embalagem</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 { font-size: 20px; text-align: center; font-weight: bold; }
        .printbody { font-size: 20px; text-align: center; }
        .footer { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 16px; }
        .footer img { width: 100px; }
        .printbody p { margin-top: 30px; }
        .printbody .remetent, .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: 200px; left: 0; right: 0; font-size: 48px; }
            .printbody { position: fixed; top: 350px; left: 0; right: 0; font-size: 42px; line-height: 50px; }
            .footer { position: fixed; bottom: 300px; left: 0; right: 0; font-size: 30px; }
            .footer img { width: 200px; }
            .printbody p { margin-top: 100px; }
        }
    </style>

    @if ($message = Session::get('feedback') && Auth::check())
        <div id="feedback" class="hidden" data-sector="ti">
            <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 sua avaliação e nos ajude a melhorar."></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