@extends('layouts.app')

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

@section('titulo')
    SGP . - {{ Auth::user()->Unidade->getNome() }}</b> - <i class="fas fa-truck"></i> Relatório Financeiro
@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="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 0px 20px 0px;">
            <div class="card-body">
                <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 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-2">
                        <label id="txtDatafim_label" for="txtDatafim"  class="col-form-label text-md-left">Data Final</label>
                        <input id="txtDatafim" class="form-control" name="datafim" onKeyUp="mascara_data(this)" type="text" maxlength="10" value=""/>
                    </div>
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbDestino" class="col-form-label text-md-left">Destino</label>
                        <br/>
                        <select id="cbDestino" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbCliente" class="col-form-label text-md-left">Cliente</label>
                        <br/>
                        <select id="cbCliente" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col-md-2 text-right">
                        <label for="cbTRansp" class="col-form-label text-md-left">&nbsp;</label>
                        <br/>
                        <button id="btnPesquisar" type="button" class="btn btn-secondary" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                        
                        <a href="{{route('home')}}">
                        <button id="btnInicio" type="button" class="btn btn-info" aria-label="Left Align" >
                            <i class="fas fa-home"></i> Início
                        </button>
                        </a>
                    </div>
                </div>

                <div class="row">
                    
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbTRansp" class="col-form-label text-md-left">Transportador</label>
                        <br/>
                        <select id="cbTransp" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbUsuario" class="col-form-label text-md-left">Operador</label>
                        <br/>
                        <select id="cbUsuario" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbCategoria" class="col-form-label text-md-left">Categoria</label>
                        <br/>
                        <select id="cbCategoria" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col col-lg-2 text-left">
                        <label for="cbFormapgto" class="col-form-label text-md-left">Forma Pgto</label>
                        <br/>
                        <select id="cbForma" class="form-control">
                            <option value="" selected>...Todos</option>
                            <option value="CC">CRÉDITO</option>
                            <option value="CD">DÉBITO</option>
                            <option value="ES">ESPÉCIE</option>                            
                            <option value="FA">FATURADO</option>
                            <option value="PX">PIX</option>
                        </select>
                    </div>
                    <div class="col-md-2 text-right">
                        <label for="cbTRansp" class="col-form-label text-md-left">&nbsp;</label>
                        <br/>
                        <button type="button" class="btn btn-default" 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">
                    <div class="col-md-3">
                        <label id="txtBuscaLabel" for="txtDataini"  class="col-form-label text-md-left">Busca (placa/ nome/ celular/ cpf)</label>
                        <input id="txtBusca" class="form-control"  name="busca"  type="text" maxlength="30" value=""/>
                    </div>
                    <div class="col-md-2">
                        <label id="cbTipooper_label" for="cbTipocarga"  class="col-form-label text-md-left">Tipo de Operação </label>
                        <select id="cbTipoOperacao" class="form-control">
                            <option value="" selected>...Todos</option>
                            <option value="C">CARREGAR</option>
                            <option value="D">DESCARREGAR</option>
                        </select>
                    </div>
                </div>


                <div id="report">

                    <div class="row mt-2">
                        <div class="col panel panel-primary table-responsive">

                            <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>Entrada</th>
                                        <th>Saída</th>
                                        <th>Permanência</th>
                                        <th>Motorista</th>
                                        <th>Cliente</th>
                                        <th>Destino</th>
                                        <th>Transportador</th>
                                        <th>Produto</th>
                                        <th style="text-align: right;">Total</th>
                                        <th>Forma Pgto</th>
                                        <th>Operador Cx</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>                                

                                </tbody>
                            </table>

                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col panel panel-primary table-responsive">
                            <div class="col col-lg-4 text-left">
                                <table id="tbSumario" 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>Forma Pgto</th>
                                            <th style="text-align: right;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>                                

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col panel panel-primary table-responsive">
                            <div class="col col-lg-4 text-left">
                                <table id="tbStatus" 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>Status do Fluxo</th>
                                            <th style="text-align: right;">Qtde</th>
                                        </tr>
                                    </thead>
                                    <tbody>                                

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col panel panel-primary table-responsive">
                            <div class="col col-lg-4 text-left">
                                <table id="tbCategoria" 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>Categoria</th>
                                            <th style="text-align: right;">Qtde</th>
                                            <th style="text-align: right;">Total (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>');

        /* setTimeout(function(){
            imp.print();
            imp.close();
        },500); */
    }
</script>

@endsection