{{--
Creado por Yoniquer Chacon
Fecha: 01/08/2018/

Modificado por Ivan Salazar
05/08/2018

Modificado por Yoniquer Chacon
15/08/2018
--}}
@extends('layouts/master')
@section('header')

    @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-print"></i> Reimprimir Notas:</h3>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="card-body">
                                <br />

                                <form method="post" target="_self" ONSUBMIT="return pregunta();" action="{{ route('impresionesNotas') }}" 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"><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"><b>FECHA DESDE:</b></label>
                                            <div  class='input-group date col-xs-12 col-md-12'>
                                            <span class="input-group-addon">
                                                    <input type="checkbox" id="fechaDingreso" name="fechaDingreso" data-toggle="tooltip" data-placement="top" title='Por Fecha'>
                                                </span>
                                                <div class='input-group date' id='datetimepicker'>
                                                    <input type='text' class="form-control"
                                                           name="fechadesde" id="fechadesde"
                                                           value="{{$fecha}}"
                                                    />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha Desde'></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group" id="fechahasta">
                                            <div class="input-group date col-xs-12 col-md-12">
                                                <label for="codrecolecta" class="text-primary"><b>FECHA HASTA:</b></label>
                                                <div class='input-group date' id='datetimepickerhasta'>
                                                    <input type="text" class="form-control desde1 desdeCalendar"
                                                           id="fechahasta" name="fechahasta"
                                                           value="{{$fecha}}"
                                                    />
                                                    <span class="input-group-addon">
                                                        <span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="top" title='Fecha Hasta'></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </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"><b>RECOLECTA:</b></label>
                                        </div>
                                        <div class="col-md-3 col-md-offset-1 form-group">

                                            <div style="margin-bottom: 15px" 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: 15px" 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"><b>RUTAS:</b></label>
                                        </div>
                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div style="margin-bottom: 15px" 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: 15px" 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="row"  id="turnoVehiculo">

                                        <div class="col-md-3 col-md-offset-1 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-th-list" data-toggle="tooltip" data-placement="left" title='Debes Seleccionar un turno'></i></span>
                                                <select class="form-control" name="turno" id="turno" data-placement="bottom">
                                                    <option value="0">AMBOS TURNOS</option>
                                                    <option value="1">MAÑANA</option>
                                                    <option value="2">TARDE</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 form-group">
                                            <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12' id='hasta'>
                                                <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="vehiculo" id="vehiculo" data-placement="bottom">
                                                    <option value="0">TODOS LOS VEHICULOS</option>
                                                    <option value="1">MOTO</option>
                                                    <option value="2">CAMION</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>



                                    <div hidden class="col-md-3" id="cliente" >
                                        <div class="input-group col-xs-12 col-md-12 col-sm-12 col-md-offset-11">
                                            <span class="input-group-addon">
                                                    <input type="checkbox" id="cliente" name="cliente"  data-toggle="tooltip" data-placement="top" title='codCliente'>
                                                </span>
                                            <input type='number' class="form-control desde1 desdeCalendar" name="clienteInput"  id="clienteInput" placeholder="Codigo Cliente" />

                                        </div>
                                    </div>
                                    <div class="panel-body col-md-offset-6">

                                        <button class="btn btn-primary" data-keyboard="false" data-backdrop="static" target="_blank"  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%;">
                                    <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>



@endsection
@section('script')
    <script type="text/javascript">


        //Confirma si se desea imprimir las Notas
        function pregunta(){
            if(confirm('¿Esta Seguro que desea imprimir las Notas?.')){
                $('#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;
            }

        }
        //datepicker del calendario
        var minDate = moment().subtract(16, 'days');
        var maxDate = moment().add(15, 'days');
        $(function () {
            $('#datetimepicker').datetimepicker({
                minDate: minDate,
                maxDate: maxDate,
                format: 'DD-MM-YYYY',
                daysOfWeekDisabled: [0, 6],
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
        $(function () {
            $('#datetimepickerhasta').datetimepicker({
                minDate: minDate,
                maxDate: maxDate,
                format: 'DD-MM-YYYY',
                daysOfWeekDisabled: [0, 6],
                useCurrent: false,
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });

        //Dependiendo de la opción que escoja el usuario se mostrara el menú de cada opción
        $(function(){
            $('#recolectaEventual').change(function(){
                if(!$(this).prop('checked')){
                    $('#mostrarFecha').hide();
                    $('#mostrarRecolectas').hide();
                    $('#mostrarRutas').hide();
                    $('#turnoVehiculo').hide();
                    $('#cliente').hide();
                    $('#fechahasta').hide();
                    document.getElementById("fechaDingreso").disabled = true;
                    $('input[name=fechaDingreso]').attr('checked', true);
                    document.getElementById('fechaDingreso').checked=true;
                }else{
                    $('#mostrarFecha').show();
                    $('#fechahasta').show();
                    $('#mostrarRecolectas').show();
                    $('#mostrarRutas').show();
                    $('#turnoVehiculo').show();
                    $('#cliente').hide();
                    document.getElementById("fechaDingreso").disabled = false;
                    $('input[name=fechaDingreso]').attr('checked', false);
                    document.getElementById('fechaDingreso').checked=false;
                }

            })

        });

        $(function(){
            $('#recolectaFijas').change(function(){
                if(!$(this).prop('checked')){
                    $('#mostrarFecha').hide();
                    $('#mostrarRecolectas').hide();
                    $('#mostrarRutas').hide();
                    $('#turnoVehiculo').hide();
                    $('#cliente').hide();
                    $('#fechahasta').show();
                    $('input[name=fechaDingreso]').attr('checked', false);
                    document.getElementById("fechaDingreso").disabled = true;
                }else{
                    $('#mostrarFecha').show();
                    $('#fechahasta').hide();
                    $('#mostrarRecolectas').show();
                    $('#mostrarRutas').show();
                    $('#cliente').show();
                    $('#turnoVehiculo').hide();
                    $('input[name=fechaDingreso]').attr('checked', true);
                    document.getElementById("fechaDingreso").disabled = true;
                }

            })

        });




    </script>
@endsection