@extends('layouts.app')

@section('scripts')
    <script src="{{{ URL::asset('js/views/financeiro/graficofin.js?12345') }}}"></script>
    <!-- ChartJS -->
<script src="{{ URL::asset('AdminLTE-3.0.5/plugins/chart.js/Chart.min.js') }}"></script>
<!-- Sparkline -->
<script src="{{ URL::asset('AdminLTE-3.0.5/plugins/sparklines/sparkline.js') }}"></script>

<script src="{{{ URL::asset('js/charts/highcharts.js') }}}"></script>
<script src="{{{ URL::asset('js/charts//highcharts-more.js') }}}"></script>
@endsection

@section('titulo')
    MOVIMENTO FINANCEIRO - {{ Auth::user()->Unidade->getTitulo() }}
@endsection

@section('pagina')
    

<div class="content-wrapper">
    <input type="hidden" id="hdnUsuario" name="idusuario"   data="{{ Auth::user()->getId() }}"/>
    <input type="hidden" id="hdnId"      name="id"          data=""/>
    <!-- <input type="hidden" id="hdnUnidade" name="unidade"     data="{{ Auth::user()->getUnidade() }}"/> -->
    <input type="hidden" id="hdnDatarec" name="hdndatarec" data=""/>
    <input type="hidden" id="hdnDatamov" name="hdndatamov" data=""/>
    

    <div class="container-fluid mt-2">
        
        <div id="cadastro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            
            @csrf
            
            <div class="card-body">
                <div class="row" style="padding-right: 2px;">
                    <div class="col-md-6">
                        <h4 style="color:#056367;"><i class="fas fa-search"></i> Consulta Movimento</h4>
                    </div>
                    <div class="col-md-6">
                        <div class="col text-right">
                            <button id="btnVoltar" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>

                            <button id="btnSalvar" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-check"></i> Baixar
                            </button>

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

                <hr></hr>

                <div class="row" >
                    <div class="col-md-12">
                        <label id="txtDescricao_label" for="txtDescricao"  class="col-form-label text-md-left">Descrição</label>
                        <input id="txtDescricao" class="form-control" name="descricao" type="text" maxlength="200" value="" required/>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtDatamov_label" for="txtDatamov"  class="col-form-label text-md-left">Data Mov</label>
                        <input id="txtDatamov" class="form-control" name="datamov" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtDatarec_label" for="txtDatarec" class="col-form-label text-md-left">Data Rec/Pag</label>
                        <input id="txtDatarec" class="form-control" name="datarec" onKeyUp="mascara_data(this)" type="text" maxlength="10" value="" />
                    </div>
                    <!-- <div class="col col-lg-2 col-12 text-left">
                        <label for="cbStatus" class="col-form-label text-md-left">Status</label>
                        <br/>
                        <select id="cbStatus" class="form-control">
                            <option value="" selected>...Selecione</option>
                            <option value="1">RECEBIDO</option>
                            <option value="2">A RECEBER</option>
                            <option value="3">PAGO</option>
                            <option value="4">A PAGAR</option>
                        </select>
                    </div> -->
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbContafin" class="col-form-label text-md-left">Conta Financeira <span style="color: #ff0000;">*</span></label>
                        <br/>
                        <select id="cbContafin" class="form-control">
                           
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label id="txtDoc_label" for="txtDoc"  class="col-form-label text-md-left">Doc</label>
                        <input id="txtDoc" class="form-control" name="doc" type="text" maxlength="100" value="" />
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtValor_label" for="txtValor"  class="col-form-label text-md-left">Valor</label>
                        <input id="txtValor" class="form-control"  onkeyup="calcula()"  name="valor" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtJuros_label" for="txtJuros"  class="col-form-label text-md-left">Juros</label>
                        <input id="txtJuros" class="form-control"  onkeyup="calcula()" name="juros" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtMulta_label" for="txtMulta"  class="col-form-label text-md-left">Multa</label>
                        <input id="txtMulta" class="form-control"  onkeyup="calcula()" name="multa" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtDesconto_label" for="txtDesconto"  class="col-form-label text-md-left">Desconto</label>
                        <input id="txtDesconto" class="form-control"  onkeyup="calcula()" name="desconto" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtTotal_label" for="txtTotal"  class="col-form-label text-md-left">Valor Total</label>
                        <input id="txtTotal" class="form-control" name="total" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbForma" class="col-form-label text-md-left">Forma Pgto/Rec <span style="color: #ff0000;">*</span></label>
                        <br/>
                        <select id="cbForma" class="form-control">
                            <option value="">...Selecione</option>
                            <option value="CC">CARTÃO CRÉDITO</option>
                            <option value="CD">CARTÃO DÉBITO</option>
                            <option value="DC">DÉBITO EM CONTA</option>
                            <option value="DN">ESPÉCIE</option>
                            <option value="PX">PIX</option>
                            <option value="TB">TRANSFERÊNCIA</option>
                        </select>
                    </div>
                </div>
                <div class="row" >
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbPessoa" class="col-form-label text-md-left">Cliente/Fornecedor</label>
                        <br/>
                        <select id="cbPessoa" class="form-control">
                           
                        </select>
                    </div>
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbConta" class="col-form-label text-md-left">Conta Custo <span style="color: #ff0000;">*</span></label>
                        <br/>
                        <select id="cbConta" class="form-control">
                           
                        </select>
                    </div>
                    <div class="col col-lg-4 col-12 text-left">
                        <label for="cbCCusto" class="col-form-label text-md-left">Centro de Custos <span style="color: #ff0000;">*</span></label>
                        <br/>
                        <select id="cbCCusto" class="form-control">
                           
                        </select>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-11">
                        <label id="txtObs_label" for="txtDoc"  class="col-form-label text-md-left">Observação</label>
                        <!-- <input id="txtObs" class="form-control" name="obs" type="text" maxlength="100" value="" /> -->
                        <textarea id="txtObs" name="txtObs" style="width: 100%" rows="4" maxlength="200"></textarea>
                    </div>
                    <div class="col-md-1">
                        <label id="txtExcluido_label" for="txtAtivo"  class="col-form-label text-md-left">Excluído?</label>
                        <br/>
                        <label class="switch">
                            <input id="cbExcluido"  type="checkbox" data-off-color="danger" data-on-text="1" data-off-text="0">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div class="row" style="padding-right: 2px;">
                    <div class="col-md-4">
                        <div class="col text-left">
                            <label id="txtLegenda_label" for="txtLegenda"  ><span style="color: #ff0000;">( * )</span> Campos obrigatórios</label>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <div class="col text-right">
                            <button id="btnVoltar2" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>

                            <button id="btnSalvar2" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-check"></i> Baixar
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            
        </div>



        <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-md-6">
                        <h4 style="color:#056367;"><i class="fas fa-search"></i> Consulta Movimento</h4>
                    </div>
                </div>
                <div class="row" >
                    <div class="col col-lg-2 col-12 text-left">
                        <label for="cbStatusLabel" class="col-form-label text-md-left">Tipo</label>
                        <br/>
                        <select id="cbStatus" class="form-control">
                            <option value="">...Selecione</option>
                            <option value="3">DESPESAS</option>
                            <option value="1">RECEITAS</option>
                           
                        </select>
                    </div>
                    <div class="col col-lg-1 col-12 text-left">
                        <label for="cbAno" class="col-form-label text-md-left">Ano</label>
                        <br/>
                        <select id="cbAno" class="form-control">
                            <option value="" selected>...Selecione</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                            <option value="2026">2026</option>
                            <option value="2027">2027</option>
                            <option value="2028">2028</option>
                            <option value="2029">2029</option>
                            <option value="2030">2030</option>
                            <option value="2031">2031</option>
                            
                        </select>
                    </div>
                    <!-- <div class="col col-lg-2 col-12 text-left">
                        <label for="cbStatusPesq" class="col-form-label text-md-left">Status</label>
                        <br/>
                        <select id="cbStatusPesq" class="form-control">
                            <option value="" selected>...Todos</option>
                            <option value="2">A RECEBER</option>
                            <option value="4">A PAGAR</option>
                        </select>
                    </div>
                    <div class="col col-lg-3 col-12 text-left">
                        <label id="txtBusca_label" for="txtBusca"  class="col-form-label text-md-left">Busca</label>
                        <input id="txtBusca" class="form-control" name="busca" type="text" maxlength="50" value="" required/>
                    </div> -->
                    <div class="col-md-9 text-right">
                        <label id="txtPesquisar_label" for="txtNome"  class="col-form-label text-md-left">&nbsp;</label><br>
                        <button id="btnPesquisar" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                        <button type="button" class="btn btn-info btn-redondo" onclick="printDIV('prt2')">
                            <i class="fas fa-print"></i> Impressão
                        </button>
                    </div>
                </div>
                <div id="prt2">
                    <div class="row mt-2">
                        <div class="col-lg-8 col-12">
                            <div class="card  bg-default" style="background-color:#fff; color:#056367; border-radius: 0px 0px 20px 0px;">
                            
                                <h5 style="color: #999999;">GRÁFICO DO MOV FINANCEIRO</h5>
                                <div class="card bar-chart-example">
                                    <div class="card-body">
                                        <div id="chartContainer" style="height: 350px; width: 100%; border-width: 0px;">
                                    
                                        </div>
                                    </div>
                                </div>
                            
                            </div>
                        </div> 
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>


<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