@extends('master')

@section('titulo')
    {{ Lang::get('refeitorio/_33010.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/33010.css') }}" />
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>

    <audio id="audio_alert">
        <source src="/assets/temp/mp3/incorrect.mp3" type="audio/mp3" />
    </audio>

    <script type="text/javascript">
		navigator.usb.getDevices()
		.then(devices => {
		  console.log("Total devices: " + devices.length);
		  devices.forEach(device => {
			console.log("Product name: " + device.productName + ", serial number " + device.serialNumber);
		  });
		});
	</script>

	<ul class="list-inline acoes">    
        <li>
            <button 
                type="button" 
                class="btn btn-primary btn-incluir"
                data-hotkey="f6"
                ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0 || vm.Refeicao.statusTela == 1 " 
                ng-click="vm.Refeicao.iniciar()">
                <span class="glyphicon glyphicon-play"></span> Iniciar Refeição
            </button>
        </li> 
        
        <li>
            <button 
                type="button" 
                class="btn btn-danger btn-incluir"
                data-hotkey="f7"
                ng-disabled="vm.Refeicao.statusTela == 0" 
                ng-click="vm.Refeicao.finalizar()">
                <span class="glyphicon glyphicon-stop"></span> Finalizar Refeição
            </button>
        </li> 
	</ul>  
        
    <div style="
        width: 100%;
        height: calc(52vh - 0px);
        border: 1px solid black;
        border-radius: 10px;
        max-width: 1020px;
        margin-left: calc(51% - 510px);">

        <div style="
            background-color: #0a0a0a;
            width: 100%;
            height: 80px;
            border-radius: 9px 9px 0px 0px;
            font-size: 54px;
            text-align: center;
            color: white;">

           <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: left;"><span id="hora_tela"></span>@{{' - '+vm.Refeicao.TIPO.DESCRICAO}}</span>
           <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; margin-right: 8px;">@{{vm.Refeicao.QTD_RED}}</span>
           <span ng-click="vm.Refeicao.dadosRefeicao()" ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; float: right; margin-top: 11px; margin-right: 8px;" class="glyphicon glyphicon-user" aria-hidden="true"></span>
        </div>

        <div style="
            width: 100%;
            height: calc(52vh - 80px);
            display: inline-flex;
            ">
            
            <div style="
                background-color: aliceblue;
                width: calc(50% - 4px);
                height: calc(100% - 2px);
                border-radius: 0px 0px 0px 9px;
                padding: 5px;"
                ng-class="{ 'cartao_ok' : vm.Refeicao.STATUS_CARTAO1 == 1, 'cartao_erro' : vm.Refeicao.STATUS_CARTAO1 == 2}">

                <div class="form-group" style="display: -webkit-box; margin-bottom: 5px;">
                    <input 
                        type="text"
                        id="campo_1"
                        autocomplete="off"
                        style="width: 80% !important;"
                        class="form-control input-maior" 
                        ng-model="vm.Refeicao.CARTAO1"
                        form-validate="true"
                        ng-disabled="vm.Refeicao.ID_REFEICAO == 0"
                        ng-keypress="vm.Refeicao.TratarCartao1($event)" >

                    <div style="width: 20%;
                        font-size: 25px;
                        padding: 2px;
                        height: 34px;">
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; margin-right: 8px;">@{{vm.Refeicao.QTD_RED1}}</span>
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; float: right; margin-top: 0px; margin-right: 8px; color: #ffd600;" class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    </div>
                </div>

                <div style="width: 100%; text-align: center;">

                    <img
                        class="pre-visualizacao-arquivo ng-scope ng-hide"
                        src="/assets/temp/files/@{{vm.Refeicao.FOTOS.FOTO1}}"
                        style="display: block !important;
                                width: 70%;
                                height: 20vh;
                                margin-left: 15%;
                                border: 1px solid;
                                border-radius: 10px;"
                        ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="font-size: 30px; font-weight: bold;" >
                        @{{vm.Refeicao.REFEICAO1}}
                    </span>

                </div>

                <span ng-if="vm.Refeicao.ID_REFEICAO > 0" 
                    style="font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                    width: 100%;
                    float: left;
                    position: relative;
                    bottom: 0px;
                    display: block;
                    background-color: black;
                    color: white;
                    border-radius: 16px;" >@{{vm.Refeicao.MSG1}}</span>

            </div>

            <div style="
                background-color: #0a0a0a;
                width: 8px;
                height: calc(100% - 2px);"></div>

            <div style="
                background-color: aliceblue;
                width: calc(50% - 4px);
                height: calc(100% - 2px);
                border-radius: 0px 0px 9px 0px;
                padding: 5px;"
                ng-class="{ 'cartao_ok' : vm.Refeicao.STATUS_CARTAO2 == 1, 'cartao_erro' : vm.Refeicao.STATUS_CARTAO2 == 2}">
                
                <div class="form-group" style="display: -webkit-box; margin-bottom: 5px;">

                    <div style="width: 20%;
                        font-size: 25px;
                        padding: 2px;
                        height: 34px;">
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: left; margin-left: 8px;">@{{vm.Refeicao.QTD_RED2}}</span>
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: left; margin-top: 0px; margin-left: 8px; color: blue;" class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    </div>

                    <input 
                        type="text"
                        id="campo_1"
                        autocomplete="off"
                        style="width: 80% !important;"
                        class="form-control input-maior" 
                        ng-model="vm.Refeicao.CARTAO2"
                        form-validate="true"
                        ng-disabled="vm.Refeicao.ID_REFEICAO == 0"
                        ng-keypress="vm.Refeicao.TratarCartao2($event)" >

                </div>

                <div style="width: 100%; text-align: center;">

                    <img
                        class="pre-visualizacao-arquivo ng-scope ng-hide"
                        src="/assets/temp/files/@{{vm.Refeicao.FOTOS.FOTO2}}"
                        style="display: block !important;
                                width: 70%;
                                height: 20vh;
                                margin-left: 15%;
                                border: 1px solid;
                                border-radius: 10px;"
                        ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="font-size: 30px;  font-weight: bold;" >
                        @{{vm.Refeicao.REFEICAO2}}
                    </span>

                </div>

                <span ng-if="vm.Refeicao.ID_REFEICAO > 0" 
                    style="font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                    width: 100%;
                    float: left;
                    position: relative;
                    bottom: 0px;
                    display: block;
                    background-color: black;
                    color: white;
                    border-radius: 16px;" >@{{vm.Refeicao.MSG2}}</span>
            
            </div>

        </div>

    </div>  

    <div style="
        width: 100%;
        height: calc(36vh - 1px);
        border: 1px solid black;
        border-radius: 10px;
        margin-top: 10px;
        max-width: 1020px;
        margin-left: calc(51% - 510px);">

        <div style="
            background-color: #0a0a0a;
            width: 100%;
            height: 60px;
            border-radius: 9px 9px 0px 0px;
            font-size: 40px;
            text-align: center;
            color: white;">

           <span style="">Reserva</span>

        </div>

        <div style="
            width: 100%;
            height: calc(36vh - 61px);
            display: inline-flex;
            border: 1px solid;
            border-radius: 10px;
            max-width: 1020px;
            border-radius: 0px 0px 10px 10px;">
            
            <div style="
                background-color: aliceblue;
                width: calc(50% - 4px);
                height: calc(100% - 2px);
                border-radius: 0px 0px 0px 9px;
                padding: 5px;
                border-radius: 10px;
                display: -webkit-box;">

                <div style="
                    width: 19%;
                    text-align: center;
                    padding-top: 4px;
                    font-size: 135px;
                    color: #ffd600;
                    font-weight: bold;"
                    ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <div style="font-size: 30px;">
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; margin-right: 8px;">@{{vm.Refeicao.QTD_RED3}}</span>
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: right; float: right; margin-right: 8px;" class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    </div>

                    1
                </div>

                <div style="width: 80%; text-align: center; padding-top: 4px;">

                    <img
                        class="pre-visualizacao-arquivo ng-scope ng-hide"
                        src="/assets/temp/files/@{{vm.Refeicao.FOTOS.FOTO3}}"
                        style=" display: block !important;
                                width: 60%;
                                height: 16vh;
                                margin-left: 20%;
                                border: 1px solid;
                                border-radius: 10px;"
                        ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="font-size: 30px; font-weight: bold;" >
                        @{{vm.Refeicao.OPCAO1}}
                    </span>
                </div>

            </div>

            <div style="
                background-color: #0a0a0a;
                width: 8px;
                height: calc(100% - 0px);"></div>

            <div style="
                background-color: aliceblue;
                width: calc(50% - 4px);
                height: calc(100% - 2px);
                border-radius: 0px 0px 9px 0px;
                padding: 5px;
                border-radius: 10px;
                display: -webkit-box;">

                <div style="width: 80%; text-align: center; padding-top: 4px;">

                    <img
                        class="pre-visualizacao-arquivo ng-scope ng-hide"
                        src="/assets/temp/files/@{{vm.Refeicao.FOTOS.FOTO4}}"
                        style=" display: block !important;
                                width: 60%;
                                height: 16vh;
                                margin-left: 20%;
                                border: 1px solid;
                                border-radius: 10px;"
                        ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="font-size: 30px;  font-weight: bold;" >
                        @{{vm.Refeicao.OPCAO2}}
                    </span>
                </div>

                <div style="
                    width: 19%;
                    text-align: center;
                    padding-top: 4px;
                    font-size: 135px;
                    color: blue;
                    font-weight: bold;"
                    ng-if="vm.Refeicao.ID_REFEICAO > 0">

                    <div style="font-size: 30px;">
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: left; margin-left: 8px;">@{{vm.Refeicao.QTD_RED4}}</span>
                        <span ng-if="vm.Refeicao.ID_REFEICAO > 0" style="float: left; float: left; margin-left: 8px;" class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    </div>

                    2
                </div>

            </div>

        </div>

    </div>

    @include($menu.'.modal.Refeicao')
	@include($menu.'.modal.RefeicaoItens')
</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/_33010.js') }}"></script>
@append