@extends('template.layoutAdmin', ['activeButton' => 'gastos'])

@section('cabecera')
    <h1>
        {{ trans('gastos.gastos') }}
    </h1>
@endsection

@section('style')
    <style media="screen">
        .modal-xl {
        width: 90%;
        max-width: 1200px;
        }

        /* Los modales no pueden estar encima de uno del otro */
        /* Esto arregla ese problema.  */
        .modal {
        overflow-y: auto;
        }

        .modal-lg {
        max-width: 1000px !important;
        }
        .oblLabel {
            color: #FF0000;
        }
    </style>
@endsection

@section('title')
@endsection

@section('contenido')
    <div class="box">
        <div class="box-header with-border">
            <div class="col-md-12 text-right">
                <a class="btn btn-info" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <i class="fa fa-filter" aria-hidden="true"></i>
                </a>
                <button class="btn btn-info" data-toggle="modal" data-target="#crearGastoModal" id="btnCrearGastos" onclick="clearCrearGastoTable()">{{ trans('gastos.agregarGasto') }}</button>
                <button class="btn btn-info" data-toggle="modal" data-target="#configuracionGastoModal" id="btnConfiguracionGastos" onclick="indexItemGasto()">{{ trans('gastos.configuracionDeGastos') }}</button>
            </div>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    <form class="form-group" action="" method="get">
                        <div class="row">
                            <div class="col-2"></div>


                            <div class="col-2"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="box-body">
            <!-- Tabla para listar los gastos -->
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered table-responsive" id="tableGastos">
                        <thead>
                            <tr>
                                <th class="text-center">{{ trans('gastos.nombre') }}</th>
                                <th class="text-center">{{ trans('gastos.descripcion') }}</th>
                                <th class="text-center">{{ trans('gastos.fecha') }}</th>
                                <th class="text-center">{{ trans('gastos.total') }}</th>
                                <th class="text-center">{{ trans('gastos.estado') }}</th>
                                <th class="text-center">{{ trans('gastos.acciones') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($gastos["data"] as $currentGasto)
                                <tr>
                                    <td class="text-center">{{$currentGasto->nombre}}</td>
                                    <td class="text-center">{{$currentGasto->descripcion}}</td>
                                    <td class="text-center">{{$currentGasto->fecha}}</td>
                                    <td class="text-center">{{$currentGasto->total}} {{App\Helpers\monedaH::getCurrentSimbol()}}</td>
                                    <td class="text-center">
                                        @if ($currentGasto->state == 1)
                                            <span class="badge" style="background:rgb(1, 151, 1)"> {{ trans('gastos.activo') }} </span>
                                        @endif

                                        @if($currentGasto->state == 0)
                                            <span class="badge" style="background:rgb(212, 10, 10)"> {{ trans('gastos.anulado') }} </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <div class="form-group">
                                            <!-- Botón ver -->
                                            <button class="btn btn-info" data-toggle="modal" data-target="#verGastoModal" onclick="prepareGastoForm('show', {{$currentGasto->idRegistroGasto}})">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <!-- Botón eliminar -->
                                            @if ($currentGasto->state == 1)
                                                <button class="btn btn-danger" data-toggle="modal" data-target="#eliminarGastoModal" onclick="prepareGastoForm('delete', {{$currentGasto->idRegistroGasto}})">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="box-footer">

        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="configuracionGastoModal">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">
                        <div class="col-12 text-right">
                            
                        </div>
                    </div>
                    <div class="col-12 text-right">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button class="btn btn-info" data-toggle="modal" data-target="#crearItemGastoModal" id="btnCreateItemGasto" onclick="resetFormItemGastoInfo('create')">{{ trans('gastos.crearItemGasto') }}</button>
                        </div>
                    </div>
                    <br>
                    <!-- Tabla para listar los gastos -->
                    <div class="row">
                        <div class="col-sm-12">
                            <table class="table table-bordered table-responsive" id="tableItemGastos">
                                <thead>
                                    <tr>
                                        <th class="text-center">{{ trans('gastos.nombre') }}</th>
                                        <th class="text-center">{{ trans('gastos.descripcion') }}</th>
                                        <th class="text-center">{{ trans('gastos.opciones') }}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>

<x-gastos.crear-item-gasto-modal></x-gastos.crear-item-gasto-modal>
<x-gastos.ver-item-gasto-modal></x-gastos.ver-item-gasto-modal>
<x-gastos.editar-item-gasto-modal></x-gastos.editar-item-gasto-modal>
<x-gastos.eliminar-item-gasto-modal></x-gastos.eliminar-item-gasto-modal>

<x-gastos.crear-gasto-modal></x-gastos.crear-gasto-modal>
<x-gastos.ver-gasto-modal></x-gastos.ver-gasto-modal>
{{-- <x-gastos.editar-gasto-modal></x-gastos.editar-gasto-modal> --}}
<x-gastos.eliminar-gasto-modal></x-gastos.eliminar-gasto-modal>

<x-gastos.agregar-item-gasto-registro-gasto-modal></x-gastos.agregar-item-gasto-registro-gasto-modal>


@endsection

@section('js')
<script>
    function resetFormItemGastoInfo(formType) {
        let form;
        if (formType == 'create') {
            form = document.getElementById('formCreateItemGasto');
        }
        if (formType == 'show') {
            form = document.getElementById('formShowItemGasto');
        }
        if (formType == 'edit') {
            form = document.getElementById('formEditItemGasto');
        }
        if (formType == 'delete') {
            form = document.getElementById('formDeleteItemGasto');
        }
        form.reset();
    }
    function createItemGasto() {

        // Realizamos chequeos.

        let form = document.getElementById('formCreateItemGasto');

        let nombreItemGasto = form.elements["nombre"].value;
        if (nombreItemGasto == null || nombreItemGasto == "") {
            swal({
            title: "Error",
            text: "{{trans('gastos.digiteElNombreDelItemGasto')}}",
            showConfirmButton: true
          });
          return false;
        }

        let descripcionItemGasto = form.elements["descripcion"].value;
        if (descripcionItemGasto == null || descripcionItemGasto == "") {
            swal({
            title: "Error",
            text: "{{trans('gastos.digiteLaDescripcionDelItemGasto')}}",
            showConfirmButton: true
          });
          return false;
        }

        // Procedemos a guardar.

        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plano

        for (let currentElement of form.elements) {
            data[currentElement.name] = currentElement.value;
        }

        // Enviamos por AJAX

        $.ajax({
            url: "{{route("gastos.itemStore")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{('gastos.creandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('gastos.exito')}}", "{{trans('gastos.seHaGuardadoExitosamenteElItemGasto')}}", "success");
                    location.replace(location.href)
                    return;
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCrearElItemGasto')}}", "error");
            }
        });
    }

    function prepareItemGastoForm(formType, idItemGasto) {

        // Limpiamos el formulario

        resetFormItemGastoInfo(formType);

        // Buscamos el formulario para cargarlo de información

        let form;
        if (formType == 'show') {
            form = document.getElementById('formShowItemGasto');
        }
        if (formType == 'edit') {
            form = document.getElementById('formEditItemGasto');
        }
        if (formType == 'delete') {
            form = document.getElementById('formDeleteItemGasto');
        }

        // Preparamos la información

        data = {
            idItemGasto: idItemGasto,
        };

        // Lo cargamos de información

        $.ajax({
            url: "{{route("gastos.itemShow")}}",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.cargandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    if (formType == 'show'||formType == 'edit') {
                        form.elements["nombre"].value = response.data.nombre;
                        form.elements["descripcion"].value = response.data.descripcion;
                    }
                    if (formType == 'edit'||formType == 'delete') {
                        form.elements["idItemGasto"].value = response.data.idItemGasto;
                    }
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCargarElItemDeGasto')}}", "error");
            }
        });


    }

    function prepareGastoForm(formType, idRegistroGasto) {

        // Limpiamos el formulario

        resetFormItemGastoInfo(formType);

        // Buscamos el formulario para cargarlo de información

        let form;

        if (formType == 'show') {
            form = document.getElementById('formShowGasto');
        }

        if (formType == 'delete') {
            form = document.getElementById('formDeleteGasto');
        }

        // Preparamos la información

        data = {
            idRegistroGasto: idRegistroGasto,
        };

        // Lo cargamos de información

        $.ajax({
            url: "{{route("gastos.show")}}",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.cargandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    if (formType == 'show') {
                        form.elements["nombre"].value = response.data.nombre;
                        form.elements["descripcion"].value = response.data.descripcion;
                        populateShowGastoTable(response.data.items_gasto_registro_gasto, response.data.items_gastos);

                    }
                    if (formType == 'delete') {
                        form.elements["idRegistroGasto"].value = response.data.idRegistroGasto;

                    }
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCargarElGasto')}}", "error");
            }
        });


    }

    function populateShowGastoTable(itemGastoRegistroGasto, registroGasto) {

        // Limpiamos la tabla.

        $('#tableShowRegistroItemGastos tbody').empty();

        // La llenamos.
        itemGastoRegistroGasto.forEach(function(currentItemGastoRegistroGasto, index) {
            registroGasto.forEach(function(currentRegistroGasto, index) {
                if (currentItemGastoRegistroGasto["idItemGasto"] == currentRegistroGasto["idItemGasto"]) {
                    $('#tableShowRegistroItemGastos tbody').append(
                        '<tr class="text-center">'+
                            '<td>' + currentRegistroGasto["nombre"]                                                                 + '</td>' +
                            '<td>' + currentRegistroGasto["descripcion"]                                                            + '</td>' +
                            '<td>' + currentItemGastoRegistroGasto["fecha"]                                                         + '</td>' +
                            '<td>' + currentItemGastoRegistroGasto["valor"]   + ' {{App\Helpers\monedaH::getCurrentSimbol()}}'       + '</td>' +
                        '</tr>');
                }
                });
            });

    }

    function deleteGasto() {

        // Conseguimos el formulario.

        let form = document.getElementById('formDeleteGasto');

        // Procedemos a eliminar.

        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plano

        for (let currentElement of form.elements) {
            data[currentElement.name] = currentElement.value;
        }

        // Enviamos por AJAX

        $.ajax({
            url: "{{route("gastos.destroy")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.eliminandoGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('gastos.exito')}}", "{{trans('gastos.seHaEliminadoExitosamenteElGasto')}}", "success");
                    location.replace(location.href);
                    return;
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlEliminarElGasto')}}", "error");
            }
        });

    }
    function indexItemGasto() {

        // Limpiamos la tabla

        $('#tableItemGastos tbody').empty();

        // Cargamos de datos la tabla

        $.ajax({
            url: "{{route("gastos.itemIndex")}}",
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.cargandoItemsDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    response.data.forEach(function (value, index, array) {
                      $('#tableItemGastos tbody').append(
                        '<tr class="text-center">'+
                            '<td>' + value["nombre"]        + '</td>' +
                            '<td>' + value["descripcion"]   + '</td>' +
                            '<td>' +
                                '<div class="form-group">' +
                                    // Botón ver
                                    '<button class="btn btn-info" data-toggle="modal" data-target="#showItemGastoModal" onclick="prepareItemGastoForm(\'show\', ' + value["idItemGasto"] + ')">' +
                                        '<i class="fa fa-eye"></i>' +
                                    '</button>' +
                                    // Botón editar
                                    '<button class="btn btn-info" data-toggle="modal" data-target="#editarItemGastoModal" onclick="prepareItemGastoForm(\'edit\', ' + value["idItemGasto"] + ')">' +
                                        '<i class="fa fa-pencil-square-o"></i>' +
                                    '</button>' +
                                    // Botón eliminar
                                    '<button class="btn btn-danger" data-toggle="modal" data-target="#eliminarItemGastoModal" onclick="prepareItemGastoForm(\'delete\', ' + value["idItemGasto"] + ')">' +
                                        '<i class="fa fa-trash"></i>' +
                                    '</button>' +
                                '</div>' +
                            '</td>'+
                        '</tr>');

                    });
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCargarLosItemsDeGastos')}}", "error");
            }
        });
    }

    function editItemGasto() {

        // Realizamos chequeos.

        let form = document.getElementById('formEditItemGasto');

        let nombreItemGasto = form.elements["nombre"].value;
        if (nombreItemGasto == null || nombreItemGasto == "") {
            swal({
            title: "Error",
            text: "{{trans('gastos.digiteElNombreDelItemGasto')}}",
            showConfirmButton: true
          });
          return false;
        }

        let descripcionItemGasto = form.elements["descripcion"].value;
        if (descripcionItemGasto == null || descripcionItemGasto == "") {
            swal({
            title: "Error",
            text: "{{trans('gastos.digiteLaDescripcionDelItemGasto')}}",
            showConfirmButton: true
          });
          return false;
        }

        // Procedemos a editar.

        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plano

        for (let currentElement of form.elements) {
            data[currentElement.name] = currentElement.value;
        }

        // Enviamos por AJAX

        $.ajax({
            url: "{{route("gastos.itemUpdate")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.editandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('gastos.exito')}}", "{{trans('gastos.seHaEditadoExitosamenteElItemGasto')}}", "success");
                    location.replace(location.href)
                    return;
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlEditarElItemGasto')}}", "error");
            }
        });
    }

    function deleteItemGasto() {

        // Conseguimos el formulario.

        let form = document.getElementById('formDeleteItemGasto');

        // Procedemos a eliminar.

        let data = {};

        // Iteramos sobre toda su data y la colocamos en un objeto plano

        for (let currentElement of form.elements) {
            data[currentElement.name] = currentElement.value;
        }

        // Enviamos por AJAX

        $.ajax({
            url: "{{route("gastos.itemDestroy")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.eliminandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('gastos.exito')}}", "{{trans('gastos.seHaEliminadoExitosamenteElItemGasto')}}", "success");
                    location.replace(location.href);
                    return;
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlEliminarElItemGasto')}}", "error");
            }
        });
    }

    function indexItemGastoRegistroGasto() {

        // Limpiamos la tabla

        $('#tableItemGastoRegistroItemGasto tbody').empty();

        // Cargamos de datos la tabla

        $.ajax({
            url: "{{route("gastos.itemIndex")}}",
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.cargandoItemsDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    response.data.forEach(function (value, index, array) {
                      $('#tableItemGastoRegistroItemGasto tbody').append(
                        '<tr class="text-center">'+
                            '<td>' + value["nombre"]        + '</td>' +
                            '<td>' + value["descripcion"]   + '</td>' +
                            '<td>' +
                                '<div class="form-group">' +
                                    // Botón agregar
                                    '<button class="btn btn-info" type="button" data-toggle="modal" data-target="#agregarItemGastoRegistroGastoModal" onclick="addItemGastoRegistroGasto(' + value["idItemGasto"] + ')">' +
                                        '<i class="fa fa-plus"></i>' +
                                    '</button>' +
                                '</div>' +
                            '</td>'+
                        '</tr>');

                    });
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCargarLosItemsDeGastos')}}", "error");
            }
        });
    }

    function addItemGastoRegistroGasto(idItemGasto) {

        // Chequeamos que no esté el nuevo item gasto.

        let exitFlag = false;
        document.querySelectorAll('#tableRegistroItemGastos > tbody  > tr').forEach(function(row, index) {
            if (parseInt(row.getAttribute('data-idItemGasto')) == parseInt(idItemGasto)) {
                swal("Error", "{{trans('gastos.elItemDeGastoYaEstaEnElRegistro')}}.", "error");
                exitFlag = true;
            }
        });

        if (exitFlag) {
            return;
        }

        // Lo cargamos en la tabla.

        data = {
            idItemGasto : idItemGasto,
        };

        $.ajax({
            url: "{{route("gastos.itemShow")}}",
            data: data,
            type: 'get',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.cargandoItemDeGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal.close();
                    $('#tableRegistroItemGastos tbody').append(
                    '<tr class="text-center" data-idItemGasto="' +response.data.idItemGasto +'">'+
                        '<td>' + response.data.nombre        + '</td>' +
                        '<td>' + response.data.descripcion   + '</td>' +
                        '<td> <input type="date" class="form-control" required="true" name="fechaGasto"> </td>' +
                        '<td> <input type="number" class="form-control" required="true" name="costoGasto"> </td>' +
                    '</tr>');
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlCargarElItemDeGasto')}}", "error");
            }
        });

    }

    function clearCrearGastoTable() {
        $('#tableRegistroItemGastos tbody').empty();
    }
    function createGasto() {

        // Preparamos la información

        let form = document.getElementById('formCreateGasto');

        // Validamos el nombre y la descripción

        let nombreRegistroGasto = form.elements["nombre"].value;
        let descripcionRegistroGasto = form.elements["descripcion"].value;

        if (nombreRegistroGasto == null || nombreRegistroGasto == "") {
            swal({
                title: "Error",
                text: "{{trans('gastos.digiteElNombreDelGasto')}}.",
                showConfirmButton: true
            });
            return false;
        }

        if (descripcionRegistroGasto == null || descripcionRegistroGasto == "") {
            swal({
                title: "Error",
                text: "{{trans('gastos.digiteLaDescripcionGasto.')}}",
                showConfirmButton: true
            });
            return false;
        }

        // Validamos que la tabla no esté vacía.

        if (document.querySelectorAll('#tableRegistroItemGastos > tbody > tr').length == 0) {
            swal({
                title: "Error",
                text: "{{trans('gastos.debesColocarAlMenosUnItemDeGasto')}}.",
                showConfirmButton: true
            });
            return false;
        }
        
        let gastos = [];

        // Recorremos la tabla, sus filas
        document.querySelectorAll('#tableRegistroItemGastos > tbody  > tr').forEach(function(row, index) {
            let idCurrentGasto = parseInt(row.getAttribute('data-idItemGasto'));
            let currentDate;
            let valor;
            let formattedData;
            // Recorremos cada columna de las filas
            Array.from(row.cells).forEach(function (element) {

                // Son 4 columnas, por lo tanto, recorremos 4 veces
                // Las que nos importan son las que tienen el input por dentro

                let inputElement = element.firstElementChild;

                if ( ( inputElement != null) && (inputElement.nodeName == 'INPUT') ) {

                    let inputType = element.firstElementChild.type;

                    // Iteración 3 del for, tomamos la fecha

                    if (inputType == "date") {
                        currentDate = inputElement.value.toString();
                    }

                    // Iteración 4 del for (final del for), tomamos el costo
                    // Lo metemos en un objeto y lo guardamos en la data.

                    if (inputType == "number") {
                        valor = parseFloat(inputElement.value);
                        let formattedData = {idGasto: idCurrentGasto, date: currentDate, value: valor};
                        gastos.push(Object.values(formattedData));
                    }
                }
                formattedData = {};
            });
          });

        // Recorremos los datos y realizamos validaciones

        let exitFlag = false;

        gastos.forEach(function (gastoObj) {
            /*
            Objetos de la forma...

            gastoObj = {
                idGasto: idGasto,
                date: date,
                value: value,
            }
            */

            // Validamos la fecha

            if (gastoObj[1] == null || gastoObj[1] == "") {
                swal({
                title: "Error",
                text: "{{trans('gastos.laFechaDeUnoDeLosGastosNoEsValida')}}.",
                showConfirmButton: true
              });
            exitFlag = true;
            }

            // Validamos el costo

            if (typeof(gastoObj[2]) != 'number' || isNaN(gastoObj[2]) ) {
                swal({
                    title: "Error",
                    text: "{{trans('gastos.elCostoDeUnoDeLosGastosNoEsNumerico')}}.",
                    showConfirmButton: true
                });
            exitFlag = true;
            }

        });

        // Hubo un fallo al validar, salirse de la ejecución

        if (exitFlag) {
            return;
        }

        // La empaquetamos y la enviamos
        let data = {
            gastos: gastos,
            nombre: nombreRegistroGasto,
            descripcion: descripcionRegistroGasto,
        }

        $.ajax({
            url: "{{route("gastos.store")}}",
            data: data,
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                swal({
                    title: "{{trans('gastos.guardandoGasto')}}...",
                    text: "{{trans('gastos.espereUnMomento')}}",
                    showConfirmButton: false,
                });
            },
            success: function (response) {
                if (response.code == 200) {
                    swal("{{trans('gastos.exito')}}", "{{trans('gastos.seHaGuardadoExitosamenteElGasto')}}", "success");
                    location.replace(location.href);
                }
            },
            error: function (xhr) {
                swal("Error", "{{trans('gastos.errorAlGuardarElGasto')}}", "error");
            }
        });


    }
</script>
@endsection