@extends('layouts.app') 

@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
    .divCategorias {
        padding: 10px 10px 15px;
        background-color: #00c88b;
        color: #fff;
        margin: 0px 20px;
        cursor: pointer;
    }

    .divCategorias:hover {
        background-color: #fff;
        color: #00c88b;
        border: 1px solid #00c88b;
    }

    .editCustom {
        position: absolute;
        vertical-align: middle;
        right: 30px;
        top: -14px;
        color: black;
        background: #f2edf3;
        border-radius: 8px;
        width: 25px;
        height: 25px;
        text-align: center;
        border: 1px;
    }

    .pagination li {
        display: inline-block;
        padding: 5px;
    }

    .editList {
        background-color: #f9f9f9;
        padding: 10px;
        cursor: pointer;
        margin: 10px 0px;
        position: relative;
        border-radius: 4px;
    }

    .editListActive {
        padding: 20px 30px;
        background-color: #fff;
        z-index: 1;
        position: relative;
        margin: 20px 0px;
        border-radius: 4px;
    }

    .input-visualizacion {
        border: none;
        background-color: #f9f9f9;
        /* width: 8rem; */
        /* color: #fe7c96 !important;
        font-size: 1.88rem;
        font-weight: 500;
        width: 100px; */
    }

    select.input-visualizacion {
        -moz-appearance: none;
        /* for Chrome */
        -webkit-appearance: none;
    }

    select::-ms-expand.input-visualizacion {
        display: none;
    }

    .input-edicion {
        border: 1px solid #d4d4d4;
        background-color: transparent;
        /* width: auto !important; */
        margin-top: 5px;
        border-top: none;
        border-right: none;
        border-left: none;
        /* color: #fe7c96 !important;
        font-size: 1.88rem;
        font-weight: 500;
        width: 100px; */
    }

    .input-edicion:focus {
        outline: 1px;
        border-bottom: 1px solid #d4d4d4;
    }

    .input_detalle {
        width: 100%;
    }

    .input-visualizacion.input_importe {
        margin-right: 80px;
    }

    .input_importe {
        text-align: right;
    }

    .label_edit {
        display: none;
    }

    #overlay {
        position: fixed;
        /* Sit on top of the page content */
        width: 100%;
        /* Full width (cover the whole page) */
        height: 100%;
        /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        /* Black background with opacity */
        z-index: 0;
        /* Specify a stack order in case you're using a different order for other elements */
    }

    .overlayActive {
        display: block !important;
    }

    .overlayInactive {
        display: none !important;
    }

    .botonera {
        display: none;
        position: absolute;
        bottom: 20px;
        right: 30px;
    }

    .containerBtnTrash {
        width: 40px;
        height: 40px;
        right: 14px;
        top: 0px;
        position: absolute;
        margin-left: 20px;
        border-radius: 8px;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .btn-danger-custom {
        background-color: #f9f9f9 !important;
        color: #fd2626 !important;
    }

    .btn-danger-custom:hover {
        background-color: #fff !important;
        color: #fd2626 !important;
    }

    .daterangepicker .ranges li.active {
        background: #00c88b !important;
    }

    .daterangepicker td.in-range {
        background: #00c88c38;
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background: #00c88b;
    }

    .btnArrow {
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }

    #daterange {
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title text-uppercase">
            <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
                <i class="mdi mdi-chart-areaspline menu-icon"></i>
            </span> gastos
        </h3>

        <nav aria-label="breadcrumb">
            <ul class="breadcrumb text-uppercase">
                <li class="breadcrumb-item active" aria-current="page">
                    <span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
                </li>
            </ul>
        </nav>
    </div>

    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <div class="clearfix">
                        <h4 class="card-title float-left text-uppercase">listado de gastos</h4>
                        <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right">

                            <div class="template-demo">
                                <a class="btn btn-primary_local btn-md" href="#" data-toggle="modal" data-target="#createGastoModal">+ gasto</a>
                                <a class="btn btn-primary_local btn-md" href="#" data-toggle="modal" data-target="#createCategoriaModal">+ categoría</a>
                            </div>
                        </div>
                    </div>
                    @include('flash::message') 
                    <div class="row mt-3">
                        @if(Auth::user()->tipo_usuario == "Admin")
                            <div class="offset-1 col-10 text-center">
                                <div class="btn-group w-50">
                                    <button class="btnArrow" data-tipo="anterior">
                                        < </button>
                                            <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{$inicio_mes.' / '.$fin_mes}}" />
                                            <button class="btnArrow" data-tipo="siguiente"> > </button>
                                </div>
                            </div>
                        @endif
                        <div class="col-12">
                            <div class="card-body no-gutter hacker-list">
                                <h2>Gastos</h2>
                                <br />
                                <div id="listGastos">
                                    @if(count($gastos) > 0)
                                        @include('gastos.table') 
                                    @else
                                        <h2>Sin gastos en estas fecha</h2>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="overlay" class="overlayInactive"></div>
    <div class="modal fade" id="createCategoriaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form action="{{url('gastos/categorias/create')}}" method="POST" id="formCategoria">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border: none !important;">
                    <div class="modal-header" style="background-color: #00c88b;">
                        <h5 class="modal-title text-white text-uppercase" id="exampleModalLabel">Crear categoría</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body" style="background: #fff;">
                        @csrf
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <h4>Crea una nueva categoría</h4>
                            </div>
                            <div class="col-sm-12">
                                <!-- Nombre Field -->
                                <div class="form-group col-sm-12">
                                    {!! Form::label('nombre', 'Nombre:') !!}
                                    {!! Form::text('nombre', null , ['class' => 'form-control','id' => 'nombre_categoria','onkeypress' => 'return check(event)']) !!}
                                    <p class="text-danger" id="msgCategoriaCreate"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnCrearCategoria" class="btn btn-primary_local">guardar</button>
                        <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="createGastoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form action="{{url('gastos/create')}}" method="POST" id="formCrearGasto">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border: none !important;">
                    <div class="modal-header" style="background-color: #00c88b;">
                        <h5 class="modal-title text-white text-uppercase" id="exampleModalLabel">Crear gasto</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body" style="background: #fff;">
                        @csrf
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <h4>Crea un nuevo gasto</h4>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group col-sm-12">
                                    {!! Form::label('categoria_id', 'Selecciona una categoría:') !!}
                                    <br />
                                    <select name="categoria_id" id="categoria_id" class="form-control">
                                        <option disabled selected value="-1">Selecciona una opción</option>
                                        @foreach($array_categorias as $key => $item)
                                            <option value="{{$key}}">{{$item}}</option>
                                        @endforeach
                                    </select>
                                    <p class="text-danger" id="msgCategoria"></p>
                                    {!! Form::label('tipo_pago', 'Selecciona un tipo de pago:') !!}
                                    <br />
                                    <select name="tipo_pago" id="tipo_pago" class="form-control">
                                        <option disabled selected value="-1">Selecciona una opción</option>
                                        <option value="Efectivo">Efectivo</option>
                                        <option value="Tarjeta">Tarjeta</option>
                                    </select>
                                    <p class="text-danger" id="msgTipoPago"></p>
                                </div>

                                <div class="form-group col-sm-12">
                                    {!! Form::label('concepto', 'Concepto:') !!}
                                    {!! Form::text('concepto', null , ['class' => 'form-control', 'onkeypress' => 'return check(event)']) !!}
                                    <p class="text-danger" id="msgConcepto"></p>
                                </div>
                                <div class="form-group col-sm-12">
                                    {!! Form::label('detalle', 'Detalle:') !!}
                                    {!! Form::text('detalle', null , ['class' => 'form-control','onkeypress' => 'return check(event)']) !!}
                                    <p class="text-danger" id="msgDetalle"></p>
                                </div>

                                @if(Auth::user()->tipo_usuario == 'Admin')
                                    <div class="form-group col-sm-12">
                                        {!! Form::label('fecha', 'Fecha:') !!}
                                        <input type="text" class="form-control w-100" id="calendario_crear_cita" value="{{now()->format('Y-m-d')}}" name="fecha">
                                        <p class="text-danger" id="msgDetalle"></p>
                                    </div>
                                @endif


                                <div class="form-group col-sm-12">
                                    {!! Form::label('importe', 'Importe:') !!}
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-gradient-primary_local text-white" id="spanMoney">$</span>
                                        </div>
                                        <input id="importe" class="form-control" aria-label="Amount (to the nearest dollar)" name="importe" type="text">
                                        <div class="input-group-append">
                                            <span class="input-group-text">mxm</span>
                                        </div>
                                    </div>
                                    <p class="text-danger" id="msgImporte"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnCrearGasto" class="btn btn-primary_local">guardar</button>
                        <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="deteleGasto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4>Al aceptar se eliminara este gasto, ¿Estás seguro?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">cerrar</button>
                    <div id="agregar_enlace">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="md-overlay"></div>
@endsection


@section('scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="{{asset('/js/citas')}}/bootstrap-datetimepicker.min.js"></script>
    <script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <script src="{{asset('/js/citas')}}/loadingoverlay.min.js"></script>
    <script>
    window.concepto = '';
    window.importe = '';
    window.categoria = '';
    window.detalle = '';
    var options = {
        valueNames: ['name', 'city'],
        page: 3,
        pagination: true
    };
    // $(".input-visualizacion").style.width((this.value.length + 1) * 8) + 'px';

    var hackerList = new List('hacker-list', options);

    function activarEdit(elemento) {
        $("#overlay").addClass('overlayActive');
        $("#overlay").removeClass('overlayInactive');
        $(elemento).removeClass('editList');
        $(elemento).addClass('editListActive');
        $(elemento).find('.botonera').show();
        $(elemento).find('.label_edit').show();
        $(elemento).find('.btnDeleteGasto').hide();


        $(elemento).find('.input-visualizacion').addClass('input-edicion').removeClass('input-visualizacion');
        $(elemento).attr('onclick', '');
        window.concepto = $(elemento).find('.input_concepto').val();
        window.importe = $(elemento).find('.input_importe').val();
        window.categoria = $(elemento).find('.input_categoria').val();
        window.detalle = $(elemento).find('.input_detalle').val();
        esucharEvento($(elemento).find('.btnGuardar'));
    }

    function cerrarEdit(elemento) {
        $("#overlay").addClass('overlayInactive');
        $("#overlay").removeClass('overlayActive');
        var primer_nivel = $(elemento).parent().parent().parent().parent().parent().parent();

        primer_nivel.removeClass('editListActive');
        primer_nivel.addClass('editList');

        primer_nivel.find('.botonera').hide();
        primer_nivel.find('.label_edit').hide();
        primer_nivel.find('.btnDeleteGasto').show();

        primer_nivel.find('.input-edicion').addClass('input-visualizacion').removeClass('input-edicion');
        primer_nivel.find('.btnGuardar').attr('disabled', true);

        primer_nivel.find('.input_concepto').val(window.concepto);
        primer_nivel.find('.input_importe').val(window.importe);
        primer_nivel.find('.input_categoria').val(window.categoria);
        primer_nivel.find('.input_detalle').val(window.detalle);

        setTimeout(function() {
            primer_nivel.attr('onclick', 'activarEdit(this)');
        }, 100);
    }

    function esucharEvento(button) {
        $(".input-edicion").change(function() {
            button.attr('disabled', false);
        });
        $(".input-edicion").keyup(function() {
            button.attr('disabled', false);
        });
    }

    $(".input_importe").keyup(function() {
        var cantidad = $(this);
        // cantidad.val(numeral(cantidad.val()).format('$0,0.00'));
        cantidad.val("$" + formatNumber(cantidad.val()));
        // var string = numeral(1000).format('0,0');
    });

    $("#importe").keyup(function() {
        var cantidad = $(this);
        // console.log(formatNumber(cantidad.val()));
        cantidad.val(formatNumber(cantidad.val()));
        // replace(/[^0-9]/g, '')
        // cantidad.val(numeral(cantidad.val()).format('0,0.00'));
        // var string = numeral(1000).format('0,0');
    });

    function formatNumber(num) {
        var prueba = num.toString().replace(/[^0-9?:\.\d+]/g, '');
        return prueba.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
        // /\d{1,3}(?:,\d{3})*(?:\.\d+)?/
    }

    function enviarDatos(elemento) {
        var primer_nivel = $(elemento).parent().parent().parent().parent().parent().parent();
        var concepto = primer_nivel.find('.input_concepto').val();
        var importe = primer_nivel.find('.input_importe').val();
        var categoria = primer_nivel.find('.input_categoria').val();
        var detalle = primer_nivel.find('.input_detalle').val();
        var id = primer_nivel.find('.input_id').val();

        var url = "{{url('')}}";
        var data = {
            "id": id,
            "concepto": concepto,
            "importe": importe,
            "categoria": categoria,
            "detalle": detalle,
        };
        $.ajax({
                type: 'POST',
                url: url_dinamica + "/api/actualizar_gasto",
                data: data,
                dataType: 'json',
                encode: true
            })
            .done(function(data) {
                console.log(data);
                primer_nivel.find('.input_concepto').val(data.data.concepto);
                primer_nivel.find('.input_detalle').val(data.data.detalle);
                $("#overlay").addClass('overlayInactive');
                $("#overlay").removeClass('overlayActive');

                primer_nivel.removeClass('editListActive');
                primer_nivel.addClass('editList');

                primer_nivel.find('.botonera').hide();
                primer_nivel.find('.label_edit').hide();
                primer_nivel.find('.btnDeleteGasto').show();

                primer_nivel.find('.input-edicion').addClass('input-visualizacion').removeClass('input-edicion');
                primer_nivel.find('.btnGuardar').attr('disabled', true);
                setTimeout(function() {
                    primer_nivel.attr('onclick', 'activarEdit(this)');
                }, 100);
            })
            .fail(function(error) {
                console.log('error', error);
            });
    }

    function modalEliminar(gasto_id) {
        $(".editList").attr('onclick', '');
        $("#agregar_enlace").html('<a href="{{url('eliminar_gasto/')}}/' + gasto_id + '" class="btn btn-primary_local">aceptar</a>');
        $("#deteleGasto").modal();
    }

    $("#deteleGasto").on('hidden.bs.modal', function() {
        $(".editList").attr('onclick', 'activarEdit(this)');
    });

    moment.locale('es');
    var inicio = "{{$inicio_mes}}";
    var fin = "{{$fin_mes}}";
    $('#daterange').daterangepicker({
        "cancelButtonClasses": "btn btn-secondary",
        "applyButtonClasses": "btn btn-primary_local",
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        "startDate": inicio,
        "endDate": fin,
        "opens": "center",
        "locale": {
            "format": "DD-MMM-YYYY",
            "separator": " / ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizado",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mie",
                "Jue",
                "Vie",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "monthsShort": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
            "firstDay": 1
        },
    });

    // $("#daterange").change(function(){
    function actualizarDatos() {
        var result = $("#daterange").val().split('/');
        console.log('varios');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        $.ajax({
                type: 'GET',
                url: url_dinamica + "/api/get_gastos/" + fecha_inicio + "/" + fecha_final,
                dataType: 'json',
                encode: true
            })
            .done(function(data) {
                var datos = (data.data);

                if (data.data == '') {
                    $("#listGastos").html('<h2>Sin gastos en estas fecha</h2>');
                } else {
                    var lista = $("#listGastos");
                    var fecha_aux = '';
                    lista.html('');

                    var categorias = {!!$categorias!!};

                    datos.forEach(element => {
                        if (fecha_aux != element.fecha) {
                            fecha_aux = element.fecha
                            lista.append('<hr><h3>' + fecha_aux + '</h3>');
                        }
                        var html_categorias = '';
                        html_categorias = '<select name="input_categoria" id="input_categoria" class="input_categoria user-name input-visualizacion">';
                        categorias.forEach(categoria => {
                            if (categoria.id == element.categoria_id) {
                                html_categorias += '<option selected value="' + categoria.id + '">' + categoria.nombre + '</option>';
                            } else {
                                html_categorias += '<option value="' + categoria.id + '">' + categoria.nombre + '</option>';
                            }
                        });
                        html_categorias += '</select>';

                        lista.append('<div class="list editList" onclick="activarEdit(this)">' +
                            '<div class="containerBtnTrash">' +
                            '<button onclick="modalEliminar(' + element.id + ')" data-toggle2="tooltip" data-placement="top" title="Eliminar" type="button" class="btn btn-danger-custom btn-xs btnDeleteGasto" data-gastoid="' + element.id + '"><i class="mdi mdi-delete-forever"></i></button>' +
                            '</div>' +
                            '<input class="input_id" type="hidden" value="' + element.id + '">' +
                            '<div class="list-item">' +
                            '<div class="content">' +
                            '<div class="d-flex align-items-baseline">' +
                            '<div>' +
                            '<span class="label_edit">Concepto</span>' +
                            '<br class="label_edit" />' +
                            '<input type="text" class="h6 input-visualizacion product-name input_concepto" value="' + element.concepto + '">' +
                            '</div>' +
                            '<div>' +
                            '<br class="label_edit" />' +
                            '<small class="time ml-3 d-none d-sm-block">' + element.hora + '</small>' +
                            '</div>' +
                            '<div class="ml-auto text-right">' +
                            '<span class="label_edit">Importe</span>' +
                            '<br class="label_edit" />' +
                            '<input class="text-danger h1 input-visualizacion input_importe" type="text" value="$' + element.importe + '">' +
                            '<div class="botonera">' +
                            '<button onclick="enviarDatos(this)" disabled class="btnGuardar btn btn-xs btn-primary_local">guardar</button>' +
                            '<button onclick="cerrarEdit(this)" class="btnCancelar btn btn-xs btn-secondary">cancelar</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="d-flex align-items-center">' +
                            '<div>' +
                            '<span class="label_edit">Categoría</span>' +
                            '<br class="label_edit" />' +
                            html_categorias +
                            '</div>' +
                            '&nbsp;' +
                            '&nbsp;' +
                            '&nbsp;' +
                            '&nbsp;' +
                            '<div style="width: 50%">' +
                            '<span class="label_edit">Detalle</span>' +
                            '<br class="label_edit" />' +
                            '<input class="review-text d-block input-visualizacion input_detalle" value="' + element.detalle + '">' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>');
                    });
                    $(".input_importe").keyup(function() {
                        var cantidad = $(this);
                        // cantidad.val(numeral(cantidad.val()).format('$0,0.00'));
                        cantidad.val("$" + formatNumber(cantidad.val()));
                        // var string = numeral(1000).format('0,0');
                    });
                }
            })
            .fail(function(error) {
                console.log('error', error);
            });
    }

    $("#btnCrearGasto").click(function() {
        var categoria_id = $("#categoria_id").val();
        var concepto = $("#concepto").val();
        var detalle = $("#detalle").val();
        var importe = $("#importe").val();
        var msgCategoria = $("#msgCategoria");
        var msgConcepto = $("#msgConcepto");
        var msgDetalle = $("#msgDetalle");
        var msgImporte = $("#msgImporte");
        if (categoria_id == null || concepto == "" || detalle == "" || importe == "") {
            if (categoria_id == null) {
                msgCategoria.text('Debes de seleccionar una categoría.');
            } else {
                msgCategoria.text('');
            }

            if (concepto == "") {
                msgConcepto.text('Debes de ingresar un concepto.');
            } else {
                msgConcepto.text('');
            }

            if (detalle == "") {
                msgDetalle.text('Debes de ingresar un detalle.');
            } else {
                msgDetalle.text('');
            }

            if (importe == "") {
                msgImporte.text('Debes de ingresar un importe.');
            } else {
                msgImporte.text('');
            }
        } else {
            $("#formCrearGasto").submit();
        }
    });

    $("#btnCrearCategoria").click(function() {
        var nombre = $("#nombre_categoria").val();
        var msg = $("#msgCategoriaCreate");
        if (nombre == "") {
            msg.text('Debes ingresar una categoría.');
        } else {
            $("#formCategoria").submit();
        }
    });
    //


    function check(e) {
        tecla = (document.all) ? e.keyCode : e.which;

        //Tecla de retroceso para borrar, siempre la permite
        if (tecla == 8) {
            return true;
        }

        // Patron de entrada, en este caso solo acepta numeros y letras
        // patron = /[A-Za-z0-9]/;
        patron = /[A-Za-z0-9 ]/;
        tecla_final = String.fromCharCode(tecla);
        var gola = patron.test(tecla_final)

        console.log(patron.test(tecla_final));

        return patron.test(tecla_final);
    }

    $(".btnArrow").click(function() {
        $.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
                type: 'GET',
                url: url_dinamica + "/api/get_fecha/" + tipo + "/" + fecha_inicio + "/" + fecha_final,
                dataType: 'json',
                encode: true
            })
            .done(function(data) {
                console.log(data);

                $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
                $('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);
                actualizarDatos();
                $.LoadingOverlay("hide");
            })
            .fail(function(error) {
                console.log('error', error);
            });
    });

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });


    $("#calendario_crear_cita").datepicker({
        format: 'yyyy/mm/dd',
        language: 'es'
    });
    </script>
@endsection