@extends('layouts.app')

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-3">
                    <div class="container">
                        <h3>Variables Globales</h3>
                        <hr>
                        <table class="table table-bordered" id="global-variables-data">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nombre</th>
                                <th>Valor</th>
                                <th>Acciones</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Editar Datos</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId" name="id">
                        <input type="hidden" id="editField" name="field">
                        <div class="mb-3">
                            <label for="editValue" class="form-label">Valor</label>
                            <input type="text" class="form-control" id="editValue" name="value">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="saveChanges">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>
    <x-datatables></x-datatables>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#global-variables-data').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        text: 'Añadir Variable',
                        className: 'btn btn-primary',
                        action: function (e, dt, node, config) {
                            addVariableFunction();
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                ajax: "{{ route('variables.data') }}",
                "order": [],
                "ordering": false,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    {
                        data: 'value',
                        name : 'value',
                        render: function(data, type, row, meta) {
                            return `<div class="editable" data-id="${row.id}" data-field="${row.id}">${data}</div>`;
                        }
                    },
                    {
                        data : 'actions',
                        name : 'actions',
                        render : (d,t,r,m) => {
                            return `<span class="dt-column-order delete-column" data-id="${r.id}">
                                        <i class="fa fa-trash"></i>
                                    </span>`
                        }
                    }
                ],
                createdRow: function(row, data, dataIndex) {
                    $(row).find('.editable').on('dblclick', function() {
                        var cell = $(this);
                        var id = cell.data('id');
                        var field = cell.data('field');
                        var value = cell.text();

                        $('#editId').val(id);
                        $('#editField').val(field);
                        $('#editValue').val(value);

                        $('#editModal').modal('show');
                        $('#editModal').find("input[type=text]").focus();
                    });
                    $(row).find('.delete-column').on('click',function() {
                        var id = $(this).data('id');
                        Swal.fire({
                            title: 'Confirmar Eliminación',
                            text: "¿Estás seguro de que quieres eliminar esta variable?",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Eliminar',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    url: "{{ route('variables.delete') }}",
                                    type: 'POST',
                                    data: {
                                        _token: $('meta[name="csrf-token"]').attr('content'),
                                        id
                                    },
                                    success: function(response) {
                                        if (response.status === 'success') {
                                            location.reload();
                                            Swal.fire('Eliminado', 'La variable ha sido eliminada', 'success');
                                        } else {
                                            Swal.fire('Error', response.msg || 'Error al eliminar la variable', 'error');
                                        }
                                    },
                                    error: function() {
                                        Swal.fire('Error', 'Error al eliminar la variable', 'error');
                                    }
                                });
                            }
                        });
                    });
                }
            });

            $('#saveChanges').on('click', function() {
                var id = $('#editId').val();
                var field = $('#editField').val();
                var newValue = $('#editValue').val();

                updateTableCell(id, field, newValue);
            });

            // Handle Enter key press in the input field
            $('#editValue').on('keypress', function(e) {
                if (e.which === 13) { // Enter key pressed
                    e.preventDefault(); // Prevent default form submission
                    var id = $('#editId').val();
                    var field = $('#editField').val();
                    var newValue = $('#editValue').val();

                    updateTableCell(id, field, newValue);
                }
            });


            function updateTableCell(id, field, newValue) {
                $.ajax({
                    url: "{{ route('variables.update_inline') }}",
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        id: id,
                        field: field,
                        value: newValue
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            var cell = $('#global-variables-data').find(`.editable[data-id="${id}"][data-field="${field}"]`);
                            cell.text(newValue);
                            $('#editModal').modal('hide');
                        } else {
                            alert(response.msg || 'Error en la actualización');
                        }
                    },
                    error: function() {
                        alert('Error en la actualización');
                    }
                });
            }

            let addVariableFunction = () => {
                Swal.fire({
                    title: 'Añadir Nueva Variable Global',
                    input : 'text',
                    focusConfirm: false,
                    showCancelButton: true,
                    confirmButtonText: 'Añadir',
                    cancelButtonText: 'Cancelar',
                    preConfirm: (name) => {
                        if (!name) {
                            Swal.showValidationMessage('Por favor, complete todos los campos');
                        }
                        const regex = /^[a-z_]+$/;
                        if (!name || !regex.test(name)) {
                            Swal.showValidationMessage('El nombre de la variable solo puede contener letras minúsculas y guiones bajos (_).');
                        }
                        return { name: name };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('variables.add_variable') }}",
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                name: result.value.name,
                            },
                            success: function(response) {
                                if (response.status === 'success') {
                                    location.reload();
                                } else {
                                    Swal.fire('Error', response.msg || 'Error al añadir la variable', 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('Error', 'Error al añadir la variable', 'error');
                            }
                        });
                    }
                });
            };

        });
    </script>
@endpush