@extends('layouts.app')

@section('scripts')
    <script src="{{{ URL::asset('js/views/patio/patiovivo.js?1234567') }}}"></script>
    <!-- <script src="{{{ URL::asset('js/tempus-dominus/tempusdominus-bootstrap-4.min.js') }}}"></script> -->
@endsection

@section('titulo')
  SGPT - {{ Auth::user()->Unidade->getNome() }}</b> - <i class="fas fa-heartbeat"></i> Pátio Vivo
@endsection

@section('pagina')
    

<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="hdnCancelar"   name="cancelar"  data="{{ Auth::user()->getCancelar() }}"/>
    <input type="hidden" id="hdnOcorrencia" name="ocorrencia" data="{{ Auth::user()->getOcorrencia() }}"/>
    <input type="hidden" id="hdnBloquear"   name="bloquear"  data="{{ Auth::user()->getBloquear() }}"/>
    <input type="hidden" id="hdnPrioridade" name="prioridade" data="{{ Auth::user()->getPrioridade() }}"/>
    <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="hdnNome"       name="nome"      data=""/>
    <input type="hidden" id="hdnPlaca"      name="placa"     data=""/>
    <input type="hidden" id="hdnCelular"    name="celular"   data=""/>
    <input type="hidden" id="hdnDestino"    name="destino"   data=""/>
    <input type="hidden" id="hdnData"       name="data"      data=""/>
    <input type="hidden" id="hdnDataBloqueio" name="databloqueio" data=""/>
    <input type="hidden" id="hdnDataCancelar" name="datacancelar" data=""/>
    <input type="hidden" id="hdnDataOcorrencia" name="dataocorrencia" 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-8">
                        <!-- <h4 style="color:#056367;"><i class="fas fa-bullhorn"></i> Veículos no Pátio (chamada para sair)</h4> -->
                    </div>
                    <div class="col-md-4">
                        <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="btnBloquear" type="button" data="" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-lock"></i> Bloquear Veículo
                            </button>

                            <button id="btnDesbloquear" type="button" data="" class="btn btn-warning" aria-label="Left Align" >
                                <i class="fas fa-unlock"></i> Desbloquear Veículo
                            </button>

                            <button id="btnCancelar" type="button" data="" class="btn btn-danger btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-times"></i> Cancelar Estadia
                            </button>

                            <button id="btnPrioridade" type="button" data="" class="btn btn-primary btn-redondo" aria-label="Left Align" title="Dar prioridade na limpeza/inspeção">
                                <i class="far fa-star"></i> Dar Prioridade
                            </button>

                            <button id="btnSemPrioridade" type="button" data="" class="btn btn-warning" aria-label="Left Align" title="Retirar prioridade na limpeza/inspeção">
                                <i class="far fa-star"></i> Retirar Prioridade
                            </button>

                        </div>

                    </div>
                    
                </div>
                <div id="bloqueio">
                    <h6><i class="fas fa-lock fa-lg"></i><b> Informações sobre o bloqueio</b></h6>
                    <hr style="color:gray;"></hr>
                    <div class="row" >
                        <div class="col-md-2">
                            <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Data do Bloqueio <span style="color: #ff0000;"></span></label>
                            <input id="txtDataBloqueio" class="form-control" name="databloqueio" type="text" maxlength="20" value="" />
                        </div>
                        <div class="col-md-2">
                            <label id="cbTipobloqueio_label" for="cbTipocarga"  class="col-form-label text-md-left">Tipo de Bloqueio <span style="color: #ff0000;">*</span></label>
                            <select id="cbTipobloqueio" class="form-control">
                                <option value="" selected>...Selecione</option>
                                <option value="FM">FALHA MECÂNICA</option>
                                <option value="DO">DOENÇA</option>
                                <option value="DE">DESISTÊNCIA</option>
                                <option value="PC">PEDIDO CANCELADO</option>
                                <option value="OU">OUTROS</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Motivo do Bloqueio <span style="color: #ff0000;">*</span></label>
                            <textarea id="txtMotivoBloqueio" name="motivobloqueio" style="width: 100%" rows="3" maxlength="200"></textarea>
                        </div>
                        <div class="col-md-2">
                            <label id="txtConfirmab_label" for="txtPlaca"  class="col-form-label text-md-left">&nbsp;</label><br>
                            <button id="btnConfirmarBloqueio" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" title="Confirma efetuar o bloqueio do veículo.">
                                <i class="fas fa-check"></i> Confirmar
                            </button>
                        </div>

                    </div>
                </div>

                <div id="cancelar">
                    <h6><i class="fas fa-lock fa-lg"></i><b> Informações sobre o cancelamento</b></h6>
                    <hr style="color:gray;"></hr>
                    <div class="row" >
                        <div class="col-md-2">
                            <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Data do Cancelamento <span style="color: #ff0000;"></span></label>
                            <input id="txtDataCancelar" class="form-control" name="databloqueio" type="text" maxlength="20" value="" />
                        </div>
                        <div class="col-md-2">
                            <label id="cbTipobloqueio_label" for="cbTipocarga"  class="col-form-label text-md-left">Tipo de Cancelamento <span style="color: #ff0000;">*</span></label>
                            <select id="cbTipocancelar" class="form-control">
                                <option value="" selected>...Selecione</option>
                                <option value="FM">FALHA MECÂNICA</option>
                                <option value="DO">DOENÇA</option>
                                <option value="DE">DESISTÊNCIA</option>
                                <option value="PC">PEDIDO CANCELADO</option>
                                <option value="OU">OUTROS</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Motivo do Cancelamento <span style="color: #ff0000;">*</span></label>
                            <textarea id="txtMotivoCancelamento" name="motivocancelar" style="width: 100%" rows="3" maxlength="185"></textarea>
                        </div>
                        <div class="col-md-2">
                            <label id="txtConfirmab_label" for="txtPlaca"  class="col-form-label text-md-left">&nbsp;</label><br>
                            <button id="btnConfirmarCancelar" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" title="Confirma efetuar o cancelamento da estadia.">
                                <i class="fas fa-check"></i> Confirmar
                            </button>
                        </div>

                    </div>
                </div>



                <h6><i class="fas fa-truck fa-lg"></i><b> Dados do Veículo</b></h6>
                <hr style="color:gray;"></hr>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Placa Cavalo <span style="color: #ff0000;"></span></label>
                        <input id="txtPlaca" class="form-control" name="placa" type="text" maxlength="7" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtPlaca_carreta_label" for="txtPreco"  class="col-form-label text-md-left">Placa Carreta</label>
                        <input id="txtPlaca_carreta" class="form-control" name="placa_carreta" type="text" maxlength="7" value="" />
                    </div>
                    <div class="col-md-4">
                        <label id="txtMarca_label" for="txtMarca"  class="col-form-label text-md-left">Marca</label>
                        <input id="txtMarca" class="form-control" name="marca" type="text" maxlength="50" value="" />
                    </div>
                    <div class="col-md-4">
                        <label id="txtModelo_label" for="txtModelo"  class="col-form-label text-md-left">Modelo</label>
                        <input id="txtModelo" class="form-control" name="modelo" type="text" maxlength="50" value="" />
                    </div>
                </div>

                <br>
                <h6><i class="fas fa-user-tie fa-lg"></i><b> Dados do Motorista</b></h6>
                <hr style="color:gray;"></hr>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtCpf_label" for="txtCpf"  class="col-form-label text-md-left">CPF <span style="color: #ff0000;"></span></label>
                        <input id="txtCpf" class="form-control" name="cpf" type="text" maxlength="11" value="" />
                    </div>
                    <div class="col-md-5">
                        <label id="txtNome_carreta_label" for="txtNome"  class="col-form-label text-md-left">Nome do Motorista <span style="color: #ff0000;"></span></label>
                        <input id="txtNome" class="form-control" name="nome" type="text" maxlength="50" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtCelular_label" for="txtCelular"  class="col-form-label text-md-left">Celular (com DDD)<span style="color: #ff0000;"></span></label>
                        <input id="txtCelular" class="form-control" name="celular" type="text" maxlength="11" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtCnh_label" for="txtCnh"  class="col-form-label text-md-left">CNH</label>
                        <input id="txtCnh" class="form-control" name="cnh" type="text" maxlength="20" value="" />
                    </div>
                    <div class="col-md-1">
                        <label id="txtCategoria_label" for="txtCategoria"  class="col-form-label text-md-left">Categoria</label>
                        <input id="txtCategoria" class="form-control" name="categoria" type="text" maxlength="3" value="" />
                    </div>
                </div>

                <br>
                <h6><i class="fas fa-box fa-lg"></i><b> Dados da Carga</b></h6>
                <hr style="color:gray;"></hr>
                <div class="row" >
                    <div class="col-md-3">
                        <label id="txtCliente_label" for="txtCliente"  class="col-form-label text-md-left">Cliente <span style="color: #ff0000;"></span></label>
                        <input id="txtCliente" class="form-control" name="cliente" type="text" maxlength="7" value="" />
                    </div>
                    <div class="col-md-4">
                        <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Produto <span style="color: #ff0000;"></span></label>
                        <select id="cbProduto" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col-md-1">
                        <label id="txtQtde_label" for="txtQtde"  class="col-form-label text-md-left">Qtde (ton)</label>
                        <input id="txtQtde" class="form-control" name="qtde" type="text" maxlength="10" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="txtPedido_label" for="txtPedido"  class="col-form-label text-md-left">Pedido</label>
                        <input id="txtPedido" class="form-control" name="pedido" type="text" maxlength="20" value="" />
                    </div>
                    <div class="col-md-2">
                        <label id="cbTipocarga_label" for="cbTipocarga"  class="col-form-label text-md-left">Tipo de Carga <span style="color: #ff0000;"></span></label>
                        <select id="cbTipocarga" class="form-control">
                            <option value="" selected>...Todos</option>
                            <option value="BG">BAGS</option>
                            <option value="CS">CARGA GERAL</option>
                            <option value="GR">GRANEL</option>
                            <option value="TQ">TANQUE</option>
                            
                        </select>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtData_label" for="txtData"  class="col-form-label text-md-left">Data Entrada <span style="color: #ff0000;"></span></label>
                        <input id="txtEntrada" class="form-control" name="data"  type="text" maxlength="10" value="" required/>
                    </div>
                    <div class="col-md-2">
                        <label id="txtData_label" for="txtData"  class="col-form-label text-md-left">Data Prevista <span style="color: #ff0000;"></span></label>
                        <input id="txtData" class="form-control" name="data" onKeyUp="mascara_data(this)" type="text" maxlength="10" value="" required/>
                    </div>
                    <div class="col-md-4">
                        <label id="cbDestino_carreta_label" for="cbDestino"  class="col-form-label text-md-left">Destino <span style="color: #ff0000;"></span></label>
                        <select id="cbDestino" class="form-control">
                            
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label id="cbTransp_label" for="cbTransp"  class="col-form-label text-md-left">Transportador <span style="color: #ff0000;"></span></label>
                        <select id="cbTransp" class="form-control">
                            
                        </select>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-2">
                        <label id="txtObs_label" for="txtObs"  class="col-form-label text-md-left">Tipo Operação</label>
                        <input id="txtOperacao" class="form-control" name="operacao" type="text" maxlength="200" value="" />
                    </div>
                    <div class="col-md-10">
                        <label id="txtObs_label" for="txtObs"  class="col-form-label text-md-left">Fórmula</label>
                        <input id="txtFormula" class="form-control" name="formula" type="text" maxlength="200" value="" />
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-12">
                        <label id="txtObs_label" for="txtObs"  class="col-form-label text-md-left">Observação</label>
                        <input id="txtObs" class="form-control" name="marca" type="text" maxlength="200" value="" />
                    </div>
                </div>
                <div class="row  mt-2">
                    <div class="col-md-12">
                        <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="btnBloquear2" type="button" data="" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-lock"></i> Bloquear Veículo
                            </button>

                            <button id="btnDesbloquear2" type="button" data="" class="btn btn-warning" aria-label="Left Align" >
                                <i class="fas fa-unlock"></i> Desbloquear Veículo
                            </button>

                            <button id="btnCancelar2" type="button" data="" class="btn btn-danger btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-times"></i> Cancelar Estadia
                            </button>
                            
                        </div>
                    </div>
                </div>

            </div>
            
        </div>


        <div id="cadocorrencia" class="card mt-2" style=" background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            
            @csrf
            
            <div class="card-body">
                <div>
                    <div class="row" >
                        <h6><i class="fas fa-lock fa-lg"></i><b> Informações sobre a ocorrência</b></h6>
                        <hr style="color:gray;"></hr>
                    </div>
                    <div class="row" >
                        <div id="titulo"></div>
                    </div>
                    <div class="row" >
                        <div class="col-md-5">
                            
                            <table id="tbOcorrencia2" class="table table-striped table-bordered text-left mt-2">
                                <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                    <tr>
                                        <th style="width: 90%;"><i class="far fa-comment-dots fa-lg"></i> OCORRÊNCIAS DA PLACA</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    

                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-7">
                            <div class="row mt-2 text-right" style="background: #404040;">
                                <div class="col-md-12">
                                    <!-- <label id="txtConfirmab_label" for="txtPlaca"  class="col-form-label text-md-left">&nbsp;</label><br> -->
                                    <button id="btnVoltarOcorrencia" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                        <i class="fas fa-arrow-left"></i> Voltar
                                    </button>
                                    <button id="btnNovaOcorrencia" type="button" data="" class="btn btn-primary btn-redondo" aria-label="Left Align" title="Cadastrar nova ocorrência da estadia.">
                                        <i class="fas fa-plus-circle"></i> Nova
                                    </button>
                                    <button id="btnConfirmarOcorrencia" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" title="Confirma cadastrar a ocorrência da estadia.">
                                        <i class="fas fa-check"></i> Salvar
                                    </button>
                                </div>
                            </div>

                            <div class="row" >
                                <div class="col-md-4">
                                    <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Data <span style="color: #ff0000;"></span></label>
                                    <input id="txtDataOcorrencia" class="form-control" name="databloqueio" type="text" maxlength="20" value="" />
                                </div>
                                <div class="col-md-4">
                                    <label id="cbTipobloqueio_label" for="cbTipocarga"  class="col-form-label text-md-left">Tipo <span style="color: #ff0000;">*</span></label>
                                    <select id="cbTipoocorrencia" class="form-control">
                                        <option value="" selected>...Selecione</option>
                                        <option value="FM">FALHA MECÂNICA</option>
                                        <option value="DO">DOENÇA</option>
                                        <option value="DE">DESISTÊNCIA</option>
                                        <option value="PC">PEDIDO CANCELADO</option>
                                        <option value="OU">OUTROS</option>
                                    </select>
                                </div>
                                <div class="col-md-4 ">
                                    
                                </div>
                            </div>
                            <div class="row" >
                                <div class="col-md-12">
                                    <label id="txtPlaca_label" for="txtPlaca"  class="col-form-label text-md-left">Motivo <span style="color: #ff0000;">*</span></label>
                                    <textarea id="txtMotivoOcorrencia" name="motivocancelar" style="width: 100%" rows="3" maxlength="185"></textarea>
                                </div>
                            </div>
                        </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-4">
                        <label id="txtForm_label" for="txtForm"  class="col-form-label text-md-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cliente</label><br>
                        <div class="input-group mb-3">
                            <i class="fas fa-home fa-2x"></i>&nbsp;
                            <select id="cbClientePesq" class="form-control">
                            
                            </select>
                            <div class="input-group-append">
                                <button id="btnPatio" type="button" class="btn btn-info btn-redondo" aria-label="Left Align" >
                                    <i class="fas fa-search"></i> Pátio
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label id="txtForm_label" for="txtForm"  class="col-form-label text-md-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Placa</label><br>
                        <div class="input-group mb-3">
                            <i class="fas fa-truck fa-2x"></i>&nbsp;
                            <input id="txtPlacaPesq" class="form-control" name="data"  type="text" maxlength="7" value="" />
                            <div class="input-group-append">
                                <button id="btnHistorico" type="button" class="btn btn-info btn-redondo" aria-label="Left Align" >
                                    <i class="fas fa-search"></i> Histórico
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label id="txtForm_label" for="txtForm"  class="col-form-label text-md-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Placa</label><br>
                        <div class="input-group mb-3">
                            <i class="far fa-comment-dots fa-2x"></i>&nbsp;
                            <input id="txtPlacaOcorr" class="form-control" name="data"  type="text" maxlength="7" value="" />
                            <div class="input-group-append">
                                <button id="btnOcorrencia" type="button" class="btn btn-info btn-redondo" aria-label="Left Align" >
                                    <i class="fas fa-search"></i> Ocorrências
                                </button>
                            </div>
                        </div>
                    </div>
                    
                </div>

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

                        <table id="tbChamar" class="table table-striped table-bordered text-left ">
                            <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                <tr>
                                    <th style="width: 75%;"><i class="fas fa-truck fa-lg"></i> VEÍCULOS NO PÁTIO</th>
                                    <th style="width: 25%;">AÇÕES</th>
                                </tr>
                            </thead>
                            <tbody>
                                

                            </tbody>''
                        </table>

                    </div>
                </div>


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

                        <table id="tbHistorico" class="table table-striped table-bordered text-left ">
                            <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                <tr>
                                    <th style="width: 90%;"><i class="fas fa-exchange-alt fa-lg"></i> HISTÓRICO DO VEÍCULO</th>
                                    <th style="width: 10%;">AÇÕES</th>
                                </tr>
                            </thead>
                            <tbody>
                                

                            </tbody>
                        </table>

                    </div>
                </div>

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

                        <table id="tbOcorrencia" class="table table-striped table-bordered text-left ">
                            <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                <tr>
                                    <th style="width: 90%;"><i class="far fa-comment-dots fa-lg"></i> HISTÓRICO DO OCORRÊNCIAS</th>
                                </tr>
                            </thead>
                            <tbody>
                                

                            </tbody>
                        </table>

                    </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 += '';
        }
    
    }

</script>

@endsection