@extends('template.main')

@section('titulo','Gastos Administrativos')

@section('cabecera')
    <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>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        $(document).ready(function () {
            $("#validacion").submit(function(e){
                e.preventDefault();
                $.ajax({
                    data: $(this).serialize(),
                    type: "POST",
                    url: "{{ route('gastos.busqueda') }}",

                    beforeSend: function () {
                        $('#contenedor').html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                    },

                    success: function (response) {

                        $('#contenedor').html(response);

                    }
                });

            });
        });
    </script>
@endsection

@section('contenido')

    <div style="padding-left: 50px; padding-right: 50px;" class="row">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    <li class="breadcrumb-item"><i class="fas fa-search"></i> Consultar gastos</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-9">
            <h3 class="contexto"> <i class="fas fa-search"></i> Consultar gastos. </h3>
        </div>
        <div class="col-lg-12">
            <form method="post" id="validacion">
                @csrf
                <label>Seleccione rango de fechas.</label>
                <input type="text" name="fechas" id="campo" class="form-control">
        </div>
        <div class="col-lg-12">
            <br>
            <button type="submit" style="float: right" class="btn btn-success">Buscar</button>
        </div>
        </form>
        <div id="contenedor" class="col-lg-12">

        </div>



        <script>
            $(document).ready(function () {
                $('#campo').daterangepicker({
                    "autoApply": true,
                    "locale": {
                        "format": "YYYY-MM-DD",
                        "separator": " - ",
                        "applyLabel": "Aplicar",
                        "cancelLabel": "Cancelar",
                        "fromLabel": "Desde",
                        "toLabel": "Hasta",
                        "customRangeLabel": "Custom",
                        "weekLabel": "S",
                        "daysOfWeek": [
                            "Do",
                            "Lu",
                            "Ma",
                            "Mi",
                            "Ju",
                            "Vi",
                            "Sa"
                        ],
                        "monthNames": [
                            "Enero",
                            "Febrero",
                            "Marzo",
                            "Abril",
                            "Mayo",
                            "Junio",
                            "Julio",
                            "Agosto",
                            "Septiembre",
                            "Octubre",
                            "Noviembre",
                            "Deciembre"
                        ],
                        "firstDay": 1
                    },
                    "startDate": "{{ date("Y-m-d") }}",
                    "endDate": "{{ date("Y-m-d", strtotime("+14 days")) }}"
                }, function(start, end, label) {
                    console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                });
            });
        </script>
    </div>
@endsection