@extends('adminlte::page')

@section('title', 'Lista de Egresos')
@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)
@section('content_header')
    <h1>Lista de Egresos</h1>
@stop

@section('content')

    <a href="#" class="btn btn-primary mb-3" id="nuevoEgresoBtn">Nuevo Egreso</a>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Egresos</h2>
        </div>
        <div class="card-body">
            <table class="table table-bordered" id="table-egresos">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Usuario</th>
                        <th>Fecha</th>
                        <th>Monto</th>
                        <th>descripcion</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($egresos as $egreso)
                        <tr>
                            <td>{{ $egreso->id }}</td>
                            <td>{{ $egreso->user->name }}</td>
                            <td>{{ $egreso->fecha_registro }}</td>
                            <td>{{ $egreso->monto }}</td>
                            <td>{{ $egreso->descripcion }}</td>
                            <td>
                                <form method="POST">
                                    <a href="{{ route('egresos.edit', $egreso) }}" class="btn btn-sm btn-info mr-2">Editar</a>
                                    <button type="button" class="btn btn-sm btn-danger" id="btnEliminar"
                                        target-data-id="{{ $egreso->id }}">Eliminar</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>


    <div class="modal fade" id="nuevoEgresoModal" tabindex="-1" role="dialog" aria-labelledby="nuevoEgresoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="nuevoEgresoModalLabel">Nuevo Egreso</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="egresoForm">
                        @csrf

                        <div class="form-group">
                            <label for="">Fecha de registro</label>
                            <input type="date" class="form-control" name="fecha_registro" id="fecha_registro">
                        </div>

                        <div class="form-group">
                            <label for="monto">Monto</label>
                            <input type="number" class="form-control" id="monto" name="monto" required
                                step="2">
                        </div>

                        <div class="form-group">
                            <label for="descripcion">Motivo y/o Descripción</label>
                            <textarea name="descripcion" id="descripcion" cols="30" rows="4" class="form-control"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-success" id="btnGuardarEgreso">Guardar Egreso</button>
                </div>
            </div>
        </div>
    </div>




@stop
@section('js')
    <script>
        $(document).ready(function() {

            $('#table-egresos').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                order: [
                    [0, 'desc']
                ],
                pageLength: 25
            });

            $('#nuevoEgresoBtn').click(function() {
                $('#nuevoEgresoModal').modal('show');
            });

            function getLocalDateString() {
                const today = new Date();
                const year = today.getFullYear();
                const month = String(today.getMonth() + 1).padStart(2, '0'); // Meses empiezan en 0
                const day = String(today.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            }

            document.getElementById('fecha_registro').value = getLocalDateString();

            $('#btnGuardarEgreso').click(function(e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('egresos.store') }}',
                    method: 'POST',
                    data: $('#egresoForm').serialize(),
                    success: function(response) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Egreso registrado con éxito!',
                            icon: 'success',
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                location.reload(); // Recargar la página
                            }
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = '';

                            for (let field in errors) {
                                errorMessages += errors[field].join(', ') + '\n';
                            }
                            alert('Error al registrar el egreso:\n' + errorMessages);
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: 'Error al registrar el egreso: ' + xhr.responseJSON.error,
                                icon: 'error',
                                confirmButtonText: 'ok'
                            })
                        }
                    }
                });
            });


            $('#table-egresos #btnEliminar').click(function(e) {
                e.preventDefault();
                let egresoId = $(this).attr('target-data-id');

                // Confirmar la acción de eliminación
                Swal.fire({
                    title: '¿Estás seguro?',
                    text: 'No podrás recuperar este registro!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, eliminarlo!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Realizar la solicitud de eliminación
                        $.ajax({
                            url: '{{ route('egresos.destroy', ':id') }}'.replace(':id',egresoId),
                            method: 'DELETE',
                            success: function(response) {
                                Swal.fire(
                                    'Eliminado!',
                                    'El egreso ha sido eliminado.',
                                    'success'
                                ).then((result) => {
                                    if (result.isConfirmed) {
                                        location.reload(); // Recargar la página
                                    }
                                });
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error!',
                                    'No se pudo eliminar el egreso: ' + xhr.responseJSON.message,
                                    'error'
                                );
                            }
                        });
                    }
                });

            });





        });
    </script>
@stop