@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>Clientes</h3>
                        <hr>
                        <table class="table table-bordered " id="flow-pointer-table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Contact_ID</th>
                                <th>Nombre</th>
                                @foreach($variables as $variable)
                                    <th>{{ ucfirst($variable) }}</th>
                                @endforeach
                                <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 = $('#flow-pointer-table').DataTable({
                dom: 'Bfrtip',
                scrollX:true,
                buttons: [
                    {
                        text: 'Añadir Variable',
                        className: 'btn btn-primary',
                        action: function (e, dt, node, config) {
                            addVariableFunction();
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                ajax: "{{ route('contacts.data') }}",
                "order": [],
                "ordering": false,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'contact_id', name: 'contact_id' },
                    { data: 'name', name: 'name' },
                        @foreach($variables as $variable)
                    {
                        data: 'variable_data.{{ $variable }}',
                        name: '{{ $variable }}',
                        render: function(data, type, row, meta) {
                            return `<div class="editable" data-id="${row.id}" data-field="{{ $variable }}">${data}</div>`;
                        }
                    },
                        @endforeach
                    { data: 'actions', name: 'actions', orderable: false, searchable: false },
                ],
                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();
                    });
                },
                initComplete: function () {
                    $('#flow-pointer-table thead th').each(function() {
                        var title = $(this).text().toUpperCase();
                        let vars = {!! json_encode(array_map(fn($i) => mb_strtoupper($i),$variables)) !!};
                        if (vars.includes(title)) {
                            $(this).append(
                                `<span class="dt-column-order delete-column" data-title="${title}" data-column="${$(this).index()}">
                                    <i class="fa fa-trash"></i>
                                </span>`
                            );
                        }
                    });
                }
            });

            // Handle Save Changes button click
            $('#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('contacts.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 = $('#flow-pointer-table').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',
                    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('contacts.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');
                            }
                        });
                    }
                });
            };

            $('#flow-pointer-table').on('click', '.delete-column', function() {
                var columnIdx = $(this).data('column');
                var columnTitle = $(this).data('title');
                Swal.fire({
                    title: 'Confirmar Eliminación',
                    text: "¿Estás seguro de que quieres eliminar esta columna?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('contacts.delete_column') }}",
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                column: columnIdx,
                                title: columnTitle
                            },
                            success: function(response) {
                                if (response.status === 'success') {
                                    location.reload();
                                    Swal.fire('Eliminado', 'La columna ha sido eliminada', 'success');
                                } else {
                                    Swal.fire('Error', response.msg || 'Error al eliminar la columna', 'error');
                                }
                            },
                            error: function() {
                                Swal.fire('Error', 'Error al eliminar la columna', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush