{{--Realizado por Yoniquer Chacon
01-08-2018
--}}

@extends('layouts/master')
@section('header')

    {{--<link href="{!! asset('/css/jquery.dataTables.min.css')  !!}" rel="stylesheet">
    <link href="{!! asset('/css/dataTables.bootstrap.min.css')  !!}" rel="stylesheet">
    <link rel="stylesheet" href="{!! asset('css/jquery.tablesorter.pager.css') !!}" type="text/css">
    <script type="text/javascript" src="{!! asset('/js/jquery-ui.min.js') !!}"></script>--}}
    @php

        $fecha = new DateTime();
        $fecha = $fecha->format('d-m-Y');

    @endphp
@endsection
@section('content')
    @include('Wscanguroazul.Recolecta.menurecolectas')

<div class="col-md-9 admin-content" id="generarNotas">
    @if(session('msj') && session('cod') == false)
        <div class="alert alert-danger col-sm-6 col-sm-push-3" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>{{ session('msj') }}</strong>
        </div>
    @endif
        @if(session('msj') && session('cod') == true)
            <div class="alert alert-success col-sm-6 col-sm-push-3" style="margin-top: 20px;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>{{ session('msj') }}</strong>
            </div>
        @endif
    <div class="row">
        <div class="col-sm-11">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-save-file"></i> Generar Notas:</h3>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="card-body">
                            <br />

                            <form method="post" target="_self" ONSUBMIT="return pregunta();" action="{{ route('listaNotas') }}" name="buscarNotas"
                                  accept-charset="UTF-8" enctype="multipart/form-data" id="buscarNotas">


                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">
                                        <label for="codrecolecta" class="text-primary" style="font-size: small"><b>TIPO DE RECOLECTA:</b></label>
                                        <div style="margin-bottom: 15px" class='input-group col-xs-3 col-md-3 col-sm-3'>
                                            <span class="input-group-addon">
                                                <label>Eventual</label>
                                                    <input type="radio" name="rdbtiporec" value="1" onClick="activaropciones(this.form)" checked="checked" id="recolectaEventual"  data-toggle="tooltip" data-placement="top" title='Por Eventuales'>
                                                </span>

                                            <span class="input-group-addon">
                                                <label>Fijas</label>
                                                    <input type="radio" name="rdbtiporec" id="recolectaFijas"   value="2" onclick ="activaropciones(this.form)" data-toggle="tooltip" data-placement="top" title='Por Fijas'>
                                                </span>
                                        </div>
                                    </div>
                                </div>



                                <div class="row"  id="mostrarFecha">
                                    <div class="col-md-3 col-md-offset-1 form-group">
                                        <label for="codrecolecta" class="text-primary" style="font-size: small"><b>FECHA DE INGRESO:</b></label>
                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                            <span class="input-group-addon">
                                                    <input type="checkbox" id="fechaDingreso" name="fechaDingreso" data-toggle="tooltip" data-placement="top" title='Por Fecha'  checked>
                                                </span>
                                            <div class='input-group date' id='datetimepicker'>
                                            <input type='text' class="form-control desde1 desdeCalendar"
                                                   name="fechadesde" id="fechadesde"
                                                   value="{{$fecha}}"
                                                   placeholder="Ingrese Fecha Desde"

                                            />
                                            <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha Desde'></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                @if($codoficina == 46 && ($departamento == 5 || $departamento == 3 || $departamento == 45))
                                    <div class="col-md-3 form-group">
                                        <label for="codrecolecta" class="text-primary" style="font-size: small"><b>OFICINA:</b></label>
                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                            <span class="input-group-addon">
                                                    <input type="checkbox" id="checkOfici" name="checkOfici" data-toggle="tooltip" data-placement="top" title='Por Oficina'>
                                                </span>
                                            <div class='input-group' >
                                                <select class="form-control" name="codOficina" id="codOficina" data-placement="bottom">
                                                    <option value="0">Seleccione Oficina</option>
                                                    @foreach($consultaOficinas['entidadRespuesta'] as $oficina)
                                                        <option value="{{$oficina['codoficina']}}">{{$oficina['nombre']}}</option>
                                                    @endforeach
                                                </select>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-home" data-toggle="tooltip" data-placement="top" title='Oficina'></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                </div>
                                <div class="row"  id="mostrarRecolectas">
                                    <div class="col-xs-12 col-md-12 col-sm-12 col-md-offset-1">
                                        <label for="codrecolecta" class="text-primary" style="font-size: small"><b>RECOLECTA:</b></label>
                                    </div>
                                    <div class="col-md-3 col-md-offset-1 form-group">

                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon">
                                                    <input type="checkbox" id="recolectaini" name="recolectaini" data-toggle="tooltip" data-placement="top" title='Recolecta Inicial'>
                                                </span>
                                            <input type='number' class="form-control desde1 desdeCalendar" name="recolectainiInput"  placeholder="Recolecta Inicial" />
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-group">
                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='hasta'>
                                            <input type='number' class="form-control hasta hastaCalendar" name="recolectafinInput" id="recolectafin" placeholder="Recolecta Final" data-placement="bottom" />
                                        </div>
                                    </div>
                                </div>


                                <div class="row"  id="mostrarRutas">
                                    <div class="col-xs-12 col-md-12 col-sm-12 col-md-offset-1">
                                        <label for="codrecolecta" class="text-primary" style="font-size: small"><b>RUTAS:</b></label>
                                    </div>
                                    <div class="col-md-3 col-md-offset-1 form-group">
                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon">
                                                    <input type="checkbox" id="rutaini" name="rutaini"  data-toggle="tooltip" data-placement="top" title='Ruta Inicial'>
                                                </span>
                                                <input type='number' class="form-control desde1 desdeCalendar" name="rutainiInput"  id="rutainiInput" placeholder="Ruta Inicial" />
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-group">
                                        <div style="margin-bottom: 0px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='hasta'>
                                            <input type='number' class="form-control hasta hastaCalendar" name="rutafinalInput" placeholder="Ruta Final" data-placement="bottom" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3" id="notaTipoBusqueda" >
                                    <div class="input-group col-xs-12 col-md-12 col-sm-12 col-md-offset-11">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un Tipo de Busqueda'></i></span>
                                        <select class="form-control" name="checkfecha" id="tiponota" data-placement="bottom">
                                            <option value="1">Ambos Turnos</option>
                                            <option value="2">Mañana</option>
                                            <option value="3">Tarde</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="panel-body col-md-offset-6">

                                    <button class="btn btn-primary" data-keyboard="false" data-backdrop="static"  type="submit" id="enviar"><span class=" glyphicon glyphicon-ok"></span> Aceptar</button>
                                </div>
                            </form>
                            <div class="panel-footer col-md-7" style="font-size:12px; width:64.3%;">
                                <span class="glyphicon glyphicon-info-sign red"></span> <b>Nota:</b> Al posicionar el "mouse" sobre los iconos del formulario, podrá ver una breve descripci&oacute;n del campo
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" style="margin-top:18%; position:fixed;" id="procesando" tabindex="-1" role="dialog" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Procesando búsqueda, Por Favor Espere...</h4>
                            </div>
                            <div class="modal-body">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-primary active" role="progressbar" id="progressBar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                        <div id="label">0%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script type="text/javascript">



            function pregunta(){
                if(confirm('¿Está seguro de que desea generar las notas de recolecta? ' +  'Recuerde que se trata de un proceso irreversible. ' +'Seleccione Aceptar si desea generar las notas y Cancelar si no requiere hacerlo.')){
                    $('#procesando').modal({backdrop: 'static', keyboard: false});
                    var elem = document.getElementById("progressBar");
                    var width = 1;
                    var id = setInterval(frame, 30);
                    function frame() {
                        if (width >= 100) {
                            clearInterval(id);
                        } else {
                            width++;
                            elem.style.width = width + '%';
                            document.getElementById("label").innerHTML = width * 1 + '%';
                        }
                    }
                    return true;
                }else{
                    return false;
                }

            }


          /*  $('#enviar').on('click', function() {
                var RegistroForm=$('#buscarNotas').valid();
                //alert(RegistroForm);
                if(RegistroForm==true) {
                    $('#procesando').modal('show');
                    var elem = document.getElementById("progressBar");
                    var width = 1;
                    var id = setInterval(frame, 30);
                    function frame() {
                        if (width >= 100) {
                            clearInterval(id);
                        } else {
                            width++;
                            elem.style.width = width + '%';
                            document.getElementById("label").innerHTML = width * 1 + '%';
                        }
                    }
                }
            });*/

            // VALIDO LOS CAMPOS DEL FORMULARIO

        $(function () {
            $('#datetimepicker').datetimepicker({
                format: 'DD-MM-YYYY',
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });



        $(function(){
            $('#recolectaEventual').change(function(){
                if(!$(this).prop('checked')){
                    $('#mostrarFecha').hide();
                    $('#mostrarRecolectas').hide();
                    $('#mostrarRutas').hide();
                    $('#notaTipoBusqueda').hide();
                }else{
                    $('#mostrarFecha').show();
                    $('#mostrarRecolectas').show();
                    $('#mostrarRutas').show();
                    $('#notaTipoBusqueda').show();
                    $("#recolectaFijas :checkbox").attr('checked', false);

                }

            })

        });

        $(function(){
            $('#recolectaFijas').change(function(){
                if(!$(this).prop('checked')){
                    $('#mostrarFecha').hide();
                    $('#mostrarRecolectas').hide();
                    $('#mostrarRutas').hide();
                    $('#notaTipoBusqueda').hide();
                }else{
                    $('#mostrarFecha').show();
                    $('#mostrarRecolectas').show();
                    $('#mostrarRutas').hide();
                    $('#notaTipoBusqueda').hide();


                }

            })

        });

            $('input:radio[id="recolectaFijas"]').change(
                function(){
                    if ($(this).is(':checked') && $(this).val() == '2') {

                        $("#fechaDingreso").bind("click", false);
                        $("#fechaDingreso").prop('checked', true);
                    }
                });

            $('input:radio[id="recolectaEventual"]').change(
                function(){
                    if ($(this).is(':checked') && $(this).val() == '1') {

                        $("#fechaDingreso").unbind("click");
                    }
                });


    </script>

@endsection