@extends('layout.padrao')
@section('content')

<div class="row" id="sopTemplateRow">
    <style>
        .sopTemplateImg span {
            text-align: justify !important;
            display: block !important;
        }

        .sopTemplateViewCardText {
            font-size: 1.0rem !important;
            color: #fff !important;
        }

        .sopTemplateViewCardTitle b {
            font-size: 1.4rem !important;
            color: #fff !important;
        }

        .card-body .col-lg-2 {
            height: 71px;
        }

        .SOPTemplateCard path {
            fill: #FFF !important;
        }

        .SOPTemplateCard {
            -webkit-box-shadow: -12px 10px 17px 0px rgb(0 0 0 / 25%);
            -moz-box-shadow: -12px 10px 17px 0px rgba(0, 0, 0, 0.25);
            box-shadow: -12px 10px 17px 0px rgb(0 0 0 / 25%);
            border-radius: 15px;
            background-color: #30546d;
            margin-top: 1%;
            height: 114px;
        }

        .msgPrint {
            font-size: 3.3rem;
            line-height: 29px;
            font-weight: 400;
            letter-spacing: -0.026em;
            color: #8ba9c2;
            background-color: aliceblue;
            padding: 35px;
            text-align: center;
        }

        @media print {
            .block-print,
            .block-print * {
                display: block !important;
            }

            body {
                min-height: 300vh;
                position: relative;
                margin: 0;
            }

            body:before {
                content: "";
                position: absolute;
                z-index: 9999;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                margin-top: 1500px;
                background: url('/image/tabexPDFLogo.png') 0 0/100% 100vh !important;
                opacity: 25%;
            } 
        }

        @page {
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            margin: 0;
            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
        }

        #textBox {
            padding: 0;
            margin: 0;
            min-width: 498px;
            min-height: 200px;
        }
    </style>

    <div class="col-lg-12 col-md-12 col-sm-12 ">
        <div class="col-lg-12 col-md-12 col-sm-12 cardDivSOPTemplate block-print"
            style="padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 10px !important;">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="block-print card SOPTemplateCard"
                    style="background-color:#30546d !important; color: #fff !important;">
                    <div class="card-body">
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <i class="fas fa-file fa-3x"
                                style="color:#fff !important; fill:#fff !important; position:absolute !important;top: 28% !important;right: 23% !important;left: 23% !important;}"></i>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <h5 class="card-title sopTemplateViewCardTitle" style="color:#fff !important;"><b>SOP</b>
                            </h5>
                            <p class="card-text sopTemplateViewCardText">
                                {{isset($sopTemplate->clients->fantasyName) ? $sopTemplate->clients->fantasyName : '-'}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="block-print card SOPTemplateCard"
                    style="background-color:#437292 !important; color: #fff !important">
                    <div class="card-body">
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <i class="fas fa-database fa-3x"
                                style="color:#fff !important; position:absolute !important;top: 28% !important;right: 23% !important;left: 23% !important;"></i>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <h5 class="card-title sopTemplateViewCardTitle"><b>PRODUTO:</b></h5>
                            <p class="card-text sopTemplateViewCardText">
                                @foreach($products as $platform)
                                    {{$platform->platforms['descricao']}}
                                    @if(!$loop->last)
                                    /
                                    @endif
                                @endforeach
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="block-print card SOPTemplateCard"
                    style="background-color:#4e85ab !important; color: #fff !important">
                    <div class="card-body">
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <i class="fas fa-user fa-3x"
                                style="color:#fff !important; position:absolute !important;top: 28% !important;right: 23% !important;left: 23% !important;"></i>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <h5 class="card-title sopTemplateViewCardTitle"><b>CONTATOS PRINCIPAIS</b></h5>
                            <p class="card-text sopTemplateViewCardText">{{$sopTemplate->mainContacts}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="block-print card SOPTemplateCard"
                    style="background-color:#5e94b9 !important; color: #fff !important">
                    <div class="card-body">
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <i class="fas fa-laugh-beam fa-3x"
                                style="color:#fff !important; position:absolute !important;top: 28% !important;right: 23% !important;left: 23% !important;"></i>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-9">
                            <h5 class="card-title sopTemplateViewCardTitle"><b>RESPONSIBLE:</b></h5>
                            <p class="card-text sopTemplateViewCardText">{{$sopTemplate->userResponsible->nome ?? ''}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col col-lg-12 col-md-12 col-sm-12">
        <div class="sopTemplateImg col-lg-12 col-md-12 col-sm-12 ">
            <div class="col-12 text-right margin-top-30 hidden-print" style="margin-bottom: -60px !important;">
                <button class="btn btn-blue" style="font-size: 18px !important;" onclick="CriaPDF()">
                    <i class="fas fa-print"></i> Print
                </button>
            </div>
            <div class=" col col-lg-1 col-md-2 col-sm-2"></div>
            <div class=" col col-lg-9 col-md-8 col-sm-8 block-print textPdf" style="font-size:14px !important;">
                <p style="margin-top:7% !important;">{!! $sopTemplate->template !!}</p>
            </div>
            <div class=" col col-lg-1 col-md-2 col-sm-2"></div>
            <div class="col col-lg-9 col-md-9 col-sm-9"></div>
            <div class="col col-lg-3 form-group filter-block hidden-print">
                <button class="btn btn-primary" type="reset" title="Return" onClick="history.go(-1)"
                    style="margin-bottom:1%; margin-right:3%;color:white;background-color:#1f3544 !important;border-color:#1f3544!important;">
                    <i class="fas fa-arrow-alt-circle-left fa-lg" title="Return"></i>
                </button>
                <button class="btn btn-primary" type="submit" title="Return to top" onclick="topFunction()"
                    style="margin-bottom:1%;color:white;background-color:#1f3544 !important;border-color:#1f3544!important;">
                    <i class="fas fa-arrow-alt-circle-up fa-lg" title="Return to top"></i>
                </button>
            </div>
        </div>
    </div>
</div>


<script>
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

    function CriaPDF() {
        var geraPDF = document.getElementById('sopTemplateRow').innerHTML;
        var win = window.open('', '', 'height=900,width=1100');
        // ABRINDO A TAG HEAD
        win.document.write('<html><head>');
        //  INSERINDO FOLHAS DE ESTILO AO IMPRIMIR O PDF.  
        win.document.write(
            '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">'
        );
        win.document.write(
            '<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">'
        );

        win.document.write('<title>PDF</title>');
        win.document.write('</head>');
        // ABRINDO A TAG BODY
        win.document.write('<body>');

        win.document.write('<style>.btn, .card, .textPdf, .cardDivSOPTemplate{display: none} .card-body .col-lg-2 {height: 40px !important; width: 40px !important; top: 5px !important; margin-right: 5% !important} .cardDivSOPTemplate{border-radius: 10px 10px 0 0 !important; background-image: linear-gradient(180deg,  #e3f0fc 0%, #e5f4ff 38%, rgba(255,255,255,1) 100%) !important;} .sopTemplateImg{ background-image: url(/image/csa_Logo.png) !important; width: 100% !important; height: 100% !important; background-size: 371px auto !important; background-repeat: no-repeat !important; background-color: rgba(255, 255, 255, 0.8) !important; background-blend-mode: lighten !important; background-position-y: 35% !important; background-position-x: 50% !important; margin-right: 0 !important; text-align: left !important;} .sopTemplateViewCardTitle{margin-top:5px !important} .sopTemplateViewCardText{margin-top:-2px !important} </style>');
        
        win.document.write('<h3 class="hidden-print msgPrint">Marque a opção "Gráficos de segundo plano" ao imprimir.</h3>');

        win.document.write(geraPDF); // INSERE O CONTEUDO DA TELA DENTRO DO PDF
        win.document.write('</html>');
        win.document.close();
        win.print(); // IMPRIME O PDF
    }

</script>
@endsection