{{--Vista Creada por Victor Moncada--}}
@extends('layouts/master')
@section('content')
    <script type="text/javascript">
        $(document).ready(function(){

            $('#fechadesdep').datetimepicker({
                format: 'DD-MM-YYYY',
//            maxDate : 'now' ----> Comentado para que no limite el calendario
            });

            $('#fechahastap').datetimepicker({
                format: 'DD-MM-YYYY',
//                daysOfWeekDisabled: [0, 6],
//            maxDate : 'now', ----> Comentado para que no limite el calendario
//                useCurrent: false //Important! See issue #1075
            });

            $('#fechadesde').datetimepicker({
                format: 'DD-MM-YYYY',
//            maxDate : 'now' ----> Comentado para que no limite el calendario
            });
            $('#fechahasta').datetimepicker({
                format: 'DD-MM-YYYY',
//                daysOfWeekDisabled: [0, 6],
//            maxDate : 'now', ----> Comentado para que no limite el calendario
//                useCurrent: false
            });
            $("#fechadesdep").on("dp.change", function (e) {
                $('#fechahasta').data("DateTimePicker").minDate(e.date);
            });
            $("#fechadesde").on("dp.change", function (e) {
                $('#fechahasta').data("DateTimePicker").minDate(e.date);
            });
            $("#fechahastap").on("dp.change", function (e) {
                $('#fechadesde').data("DateTimePicker").maxDate(e.date);
            });
            $("#fechahasta").on("dp.change", function (e) {
                $('#fechadesde').data("DateTimePicker").maxDate(e.date);
            });
            // Traducción al español del datespiker
            $(function($){
                $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '<Ant',
                    nextText: 'Sig>',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd-mm-yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
            });

            var ckbox = $('#opc_filtro_fechad');

            $('input').on('click',function () {
                if (ckbox.is(':checked')) {

                    $("#fechadesde").prop('disabled', false);
                } else {
                    $("#fechadesde").prop('disabled', true);
                }
            });

            var ckbox2 = $('#opc_filtro_fechadp');
            $('input').on('click',function () {
                if (ckbox2.is(':checked')) {
                    $("#fechadesdep").prop('disabled', false);

                } else {
                    $("#fechadesdep").prop('disabled', true);
                }
            });

            var ckbox3 = $('#opc_filtro_fechah');
            $('input').on('click',function () {
                if (ckbox3.is(':checked')) {
                    $("#fechahasta").prop('disabled', false);

                } else {
                    $("#fechahasta").prop('disabled', true);
                }
            });

            var ckbox4 = $('#opc_filtro_fechahp');
            $('input').on('click',function () {
                if (ckbox4.is(':checked')) {
                    $("#fechahastap").prop('disabled', false);

                } else {
                    $("#fechahastap").prop('disabled', true);
                }
            });


        });
    </script>
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
        <br>
        <div align=center class="panel panel-primary">
            <div style="margin-bottom: 15px" class="panel-heading"><strong><h3 class="panel-title" style="text-align:center;">Listado por Punto de Venta</h3></strong></div>
            <div style="margin-right:20px"align="Right"><p><i class="glyphicon glyphicon-chevron-left" data-toggle="tooltip" ></i>&nbsp;&nbsp;<a href="http://desarrollo3.grupozoom.com/faaszoom/public/canguroazul/selectreportes"> Regresar</a></p></div>
            <div class="container-fluid">
                <div class="row">
                        <div class="col-xs-2">
                            <b>Guía:</b>
                        </div>
                        <div class="col-xs-5">
                            <div class="input-group"> <!-- Fecha desde -->
                                <span class="input-group-addon"><input type="checkbox" id='opc_filtro_fechad' aria-label="..."></span>
                                <input class="form-control" id="fechadesde" name="fechadesde" disabled="disabled" placeholder="Fecha desde" type="text"/>
                            </div>
                        </div>
                        <div class="col-xs-5">
                            <div class="input-group">
                                <span class="input-group-addon"><input type="checkbox" id='opc_filtro_fechah' aria-label="..."></span>
                                <input class="form-control" id="fechahasta"  name="fechahasta" disabled="disabled" placeholder="Fecha hasta" type="text"/>
                            </div>
                        </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-xs-2">
                        <b>Proceso:</b>
                    </div>
                    <div class="col-xs-5">
                            <div class="input-group"><!-- Fecha desde -->
                                <span class="input-group-addon"><input type="checkbox" id='opc_filtro_fechadp' aria-label="..."></span>
                                <input class="form-control" id="fechadesdep" name="fechadesdep" disabled="disabled" placeholder="Fecha desde" type="text"/>
                            </div>
                    </div>
                    <div class="col-xs-5"> <!-- Fecha Hasta-->

                            <div class="input-group">
                                <span class="input-group-addon"><input type="checkbox" id='opc_filtro_fechahp' aria-label="..."></span>
                                <input class="form-control" id="fechahastap"  name="fechahasta" disabled="disabled" placeholder="Fecha hasta" type="text"/>
                            </div>
                    </div>
                </div>
                <br>
                <li class="list-group-item disabled" style="margin-bottom:15px;text-align:center;"><b>Estatus</b></li>

                <div class="col-lg-6 col-md-6 col-md-4 col-md-offset-3">
                    <div style="margin-bottom: 15px" class='input-group date col-xs-12 col-md-12 col-sm-12'>
                        {{--Estilo del Icono de boostrap--}}
                        <span class="input-group-addon input-sm"><i class="glyphicon glyphicon-list" data-toggle="tooltip" data-placement="top" title='Seleccione un Estatus'></i></span>
                        <select class="form-control" name="estatus" id="proceso" required data-placement="bottom">
                            <option value='0'  disabled selected>Seleccione Estatus</option>
                            <option value='1'> TODOS </option>
                            <option value='2'> ENTREGADOS
                            <option value='3'> DEVUELTOS</option>
                            {{--Nota: El valor de los option values deben ser modificados con los valores preestablecidos por la base de datos--}}
                        </select>
                    </div>
                <br>

                <button type="submit" class="btn btn-primary" id="buscar"
                            data-loading-text="<i class='glyphicon glyphicon-refresh spinning '></i> Procesando.."
                            data-style="expand-right">Buscar
                </button>

                </div>
            </div>
            <br><br>
            <div class="panel-footer"><span class="glyphicon glyphicon-info-sign color"></span> <b>Nota:</b> Al
                posicionar el mouse sobre los iconos del formulario, podra ver una breve descripci&oacute;n del campo
            </div>
        </div>
    </div>
@endsection