@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - 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"> <i class="fas fa-plus"></i> Nuevo Egreso</a>

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Egresos</h2>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="table-egresos" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Usuario</th>
                            <th>Fecha Registro</th>
                            <th>Monto</th>
                            <th>Motivo</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>
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Acciones
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="{{ route('egresos.edit', $egreso) }}" class="dropdown-item">Editar</a>
                                            <form method="POST">
                                                <button type="button" class="dropdown-item btn-delete" id="btnEliminar"
                                                    target-data-id="{{ $egreso->id }}">Eliminar</button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </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"
                                value="{{ now()->format('Y-m-d') }}">
                        </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">Registrar</button>
                </div>
            </div>
        </div>
    </div>




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

            $('#table-egresos').DataTable({
                language: {
                    "url": "/js/spanish.json"
                },
                order: [
                    [0, 'desc']
                ] // This will order by the first column (index 0) in ascending order
            });

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


            $('#btnGuardarEgreso').click(function(e) {
                e.preventDefault();

                Swal.fire({
                    title: '¿Confirmar registro?',
                    text: "¿Estás seguro de registrar este egreso?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('egresos.store') }}',
                            method: 'POST',
                            data: $('#egresoForm').serialize(),
                            success: function(response) {
                                Swal.fire({
                                    title: 'Éxito!',
                                    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';
                                    }
                                    Swal.fire({
                                        title: 'Error!',
                                        text: 'Error al registrar el egreso:\n' +
                                            errorMessages,
                                        icon: 'error',
                                        confirmButtonText: 'ok'
                                    })
                                } 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