@extends('helper.include.view.modal', ['id' => 'modal-CADDECOLAB_QRCODE_PORTAL', 'class_size' => 'modal-lg'])

@section('modal-start')
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<span ng-if="vm.CADDECOLAB.ALTERANDO == false">{{ Lang::get('pessoal/_23180.titulo11-exibir-qrcode') }}</span>
</h4>

@overwrite

@section('modal-header-right')  

    <button ng-if="!vm.CADDECOLAB.ALTERANDO" type="button" class="btn btn-warning" ng-click="vm.CADDECOLAB.imprimirQRCodePortal()" data-hotkey="f1">
     	<span class="glyphicon glyphicon-print"></span> Imprimir
    </button>
	
	<button ng-if="!vm.CADDECOLAB.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.CADDECOLAB.fecharModalQRCodePortal()" data-hotkey="esc">
     	<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: 100%;">

    @php $url_portal = getUrl('') . '/portal-colaborador';
    @php $qrcode_url = 'https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=' . $url_portal;
    @php $qrcode_url = 'https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=' . $url_portal;

    <div class="row" style="height: 100%;">

        <div id="iframe-view" class="iframe-view">

            <div 
                class="container-fluid" 
                id="qrcode-display" 
                style="display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                height: -webkit-fill-available;">

                <img src="{{ $qrcode_url }}" alt="{{ $qrcode_url }}" srcset="">

            </div>

        </div>

        <div style="display: none;">

            <iframe src="" id="qrcode_iframe" frameborder="0" style="width: 100%; height: 100%;"></iframe>

        </div>
		
    </div>

</div>

@overwrite