@extends('layouts.app')

@section('scripts')
    <script src="{{{ URL::asset('js/views/consulta/consultavira.js?12345678') }}}"></script>
    
@endsection

@section('titulo')
    SGPT - {{ Auth::user()->Unidade->getNome() }}</b> - <i class="fas fa-truck"></i> Consulta Vira
@endsection

@section('pagina')
    
<div class="content">
<div class="content-wrapper">
    <input type="hidden" id="hdnUsuario"    name="idusuario" data="{{ Auth::user()->getId() }}"/>
    <input type="hidden" id="hdnCliente"    name="idcliente" data="{{ Auth::user()->getCliente() }}"/>
    <input type="hidden" id="hdnDestino"    name="iddestino" data="{{ Auth::user()->getDestino() }}"/>
    <input type="hidden" id="hdnUnidade"    name="unidade" data="{{ Auth::user()->getUnidade() }}"/>
    <input type="hidden" id="hdnId"         name="id"        data=""/>
    <input type="hidden" id="hdnVeiculo"    name="veiculo"   data=""/>
    <input type="hidden" id="hdnMotorista"  name="motorista" data=""/>
    <input type="hidden" id="hdnData"       name="data"      data=""/>
    <input type="hidden" id="hdnDataChamada" name="datachamada" data=""/>
    <input type="hidden" id="hdnDataIni"    name="dataini"   data=""/>
    <input type="hidden" id="hdnDataFim"    name="datafim"   data=""/>
    <input type="hidden" id="hdnTransp"     name="transp"    data=""/>

    <div class="container-fluid mt-2">
        
        <div id="lista" class="card mt-2" style="background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            <div class="card-body">
                <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                    <div class="col col-sm-12 text-right">
                        <button id="btnPesquisar" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                        <button id="btnFaturar" type="button" class="btn btn-success btn-redondo" aria-label="Left Align" >
                            <i class="fas fa-check"></i> Faturar
                        </button>
                        <button id="btnImpressao" type="button" class="btn btn-default btn-redondo" onclick="printDIV('report')">
                            <i class="fas fa-print"></i> Impressão
                        </button>
                        <button id="btnExcell" type="button" class="btn btn-warning" aria-label="Left Align" >
                            <i class="fas fa-file-excel"></i> Excell
                        </button>
                        
                    </div>
                </div>  
                <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                    <!-- <div class="col-md-2">
                        <label id="txtDataini_label" for="txtDataini"  class="col-form-label text-md-left">Data/hora início</label>
                        <input id="txtDataini" class="form-control" name="dataini" onKeyUp="mascara_data(this)" type="text" maxlength="10" value=""/>
                    </div> -->
                    <!-- <div class="col-md-1">
                        <label id="txtDataini_label" for="txtDataini"  class="col-form-label text-md-left">&nbsp;</label>
                        <input id="txtHoraini" class="form-control" name="dataini" onKeyUp="mascara_hora(this)" type="text" maxlength="5" value=""/>
                    </div> -->
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbFatura" class="col-form-label text-md-left">Consultar Faturas</label>
                        <br/>
                        <select id="cbFatura" class="form-control">
                            
                        </select>
                    </div>
                    
                    
                    <div class="col-md-2">
                        <label id="txtDatafim_label" for="txtDatafim"  class="col-form-label text-md-left">Faturar até (data/hora)</label>
                        <input id="txtDatafim" class="form-control" name="datafim" onKeyUp="mascara_data(this)" type="text" maxlength="10" value=""/>
                    </div>
                    <div class="col-md-1">
                        <label id="txtHorafim_label" for="txtDatafim"  class="col-form-label text-md-left">&nbsp;</label>
                        <input id="txtHorafim" class="form-control" name="datafim" onKeyUp="mascara_hora(this)" type="text" maxlength="5" value=""/>
                    </div>
                    <div class="col col-lg-5 col-12 text-left">
                        <label for="cbTRansp" class="col-form-label text-md-left">Transportador</label>
                        <br/>
                        <select id="cbTransp" class="form-control">
                            
                        </select>
                        <select id="cbTransp2" class="form-control">
                            
                        </select>
                        <select id="cbFaturadoAte" class="form-control">
                            
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label id="txtFatura_label" for="txtDatafim"  class="col-form-label text-md-left">Fatura Número</label>
                        <input id="txtFatura" class="form-control" name="datafim" type="text" maxlength="20" value=""/>
                    </div>

                    <!-- <div class="col col-lg-3 col-12 text-left">
                        <label for="cbOper" class="col-form-label text-md-left">Operação</label>
                        <br/>
                        <select id="cbOper" class="form-control">
                            
                        </select>
                    </div> -->
                   
                </div>


                <div id="report">
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <div class="col panel panel-primary table-responsive">
                                <h5 id="titulo"></h5>
                                <table id="tbEstadia" class="table table-striped table-bordered text-left " border="1" width="100%" cellspacing="0">
                                    <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                        <tr>
                                            <th>Placa</th>
                                            <th>Data/Hora</th>
                                            <th>Valor (R$)</th>
                                        </tr>
                                    </thead>
                                    <tbody>                                

                                    </tbody>
                                </table>

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="col panel panel-primary table-responsive">
                                <h5 id="titulo2"></h5>
                                <table id="tbVira" class="table table-striped table-bordered text-left " border="1" width="100%" cellspacing="0">
                                    <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                        <tr>
                                            <th>Transportador</th>
                                            <th>Qtde Veículos Cobrados</th>
                                            <th>Valor (R$)</th>
                                        </tr>
                                    </thead>
                                    <tbody>                                

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>

                    
                </div>
            </div>
        </div>
    </div>
</div>
</div>



<!-- <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
 -->

<!-- <script>
var doc = new jsPDF('l', 'pt', "a4");
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#lista').html(), 10, 0, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.setFontSize(6);
    doc.save('sample-file.pdf');
});
</script> -->

<script>

    function mascara_data(campo) {
        if (campo.value.length == 2) {
            campo.value += '/';
        }
        if (campo.value.length == 5) {
            campo.value += '/';
        }
    }

    function mascara_hora(campo) {
        if (campo.value.length == 2) {
            campo.value += ':';
        }
    }

    function mascara_letra(campo) {
        if (campo.value == '-') {
            campo.value += '';
        }
        if (campo.value == '=') {
            campo.value += '';
        }
    
    }

    function printDIV(i){
        var cssEstilos = '';
        var imp = window.open('', 'div', 'width='+window.innerWidth+',height='+window.innerWidth);
        //

        var cSs = document.querySelectorAll("link[rel='stylesheet']");
        for(x=0;x<cSs.length;x++){
            cssEstilos += '<link rel="stylesheet" href="'+cSs[x].href+'">';
        }

        imp.document.write('<html><head><title>' + document.title  + '</title>');
        imp.document.write(cssEstilos+'</head><body>');
        imp.document.write(document.getElementById(i).innerHTML);
        imp.document.write('</body></html>');
    }


</script>

@endsection