@extends('layouts.menu')

@section('tittle')
    {{ $name }}
@endsection

@section('contenido')

    @if ($planData)
        @foreach ($planData as $plan)
            <div class="row">
                <div class="col-lg-12">

                    <input type="hidden" id="estado_plan_old" value="{{ $plan->id_estado_plan }}" readonly>
                    <input type="hidden" id="comentario_pausa_plan" value="{{ $plan->comentario_pausa }}" readonly>
                    <input type="hidden" id="comentario_final_plan" value="{{ $plan->comentario_final }}" readonly>

                    <div class="card card-table comman-shadow shadow-lg">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="page-title">{{ $plan->nombre_plan }}</h3>
                                    <p>{{ $plan->descripcion_plan }}</p>
                                </div>
                                <div class="col-auto text-end float-end ms-auto download-grp">
                                    <div class="form-group d-inline-block ms-2">
                                        <select class="form-select form-select-sm" id="estado_plan" name="estado_plan"
                                            @if (Session::get('editar_plan') == 0) disabled @endif>
                                            @foreach ($planesEstadosData as $pe)
                                                @if ($pe->id_estado_plan == $plan->id_estado_plan)
                                                    <option value="{{ $pe->id_estado_plan }}" selected>
                                                        {{ $pe->estado_plan }}</option>
                                                @else
                                                    <option value="{{ $pe->id_estado_plan }}">{{ $pe->estado_plan }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <button href="#" type="button" class="btn btn-sm btn-primary" id="btnColumna"
                                        data-bs-toggle="modal" data-bs-target="#modalColumnas" title="Agregar Columna"
                                        @if (Session::get('crear_columnas_plan') == 0) disabled @endif>Agregar Columna</button>
                                    <button type="button" class="btn btn-sm btn-warning" id="assignUsersPlanBtn"
                                        title="Miembros del Plan" @if (Session::get('editar_plan') == 0) disabled @endif>
                                        <i class="fas fa-user"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-info" id="infoPlanBtn"
                                        title="Informacion del Plan">
                                        <i class="fas fa-info text-white"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger" id="graphPlanBtn"
                                        title="Graficos del Plan">
                                        <i class="fas fa-chart-line text-white"></i>
                                    </button>

                                    <button type="button" class="btn btn-sm btn-success" id="porcPlanBtn"
                                        title="Porcentajes del Plan">
                                        <i class="fas fa-percent text-white"></i>
                                    </button>

                                </div>
                            </div>


                            <input type="date" hidden value="{{ $plan->fecha_inicio }}" id="fecha_inicio_plan" readonly>
                            <input type="date" hidden value="{{ $plan->fecha_final }}" id="fecha_final_plan" readonly>

                            <hr>

                            <div class="kanban-container">
                                <div class="d-flex flex-row flex-nowrap overflow-auto" id="columns-container">
                                    <!-- Aquí se insertarán las columnas -->
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
            </div>

            @include('panel.kanban.modales.modalPlanes')
            @include('panel.kanban.modales.modalColumnas')
            @include('panel.kanban.modales.modalTasks')
        @endforeach
    @else
        <div class="row">
            <p>No se encontró el plan.</p>
        </div>
    @endif

@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";
            let nullValue = "";

            function validarAcciones(accion) {

                console.log(accion);


                switch (accion) {
                    case 1:
                        if ("{{ Session::get('visualizar_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Visualizar NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 2:
                        if ("{{ Session::get('editar_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Editar NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 3:
                        if ("{{ Session::get('eliminar_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Eliminar NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 4:
                        if ("{{ Session::get('mover_columnas_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Mover Columnas NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 5:
                        if ("{{ Session::get('crear_tareas_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Crear Tarea NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 6:
                        if ("{{ Session::get('editar_tareas_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Editar Tarea NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    case 7:
                        if ("{{ Session::get('crear_columnas_plan') }}" == 0) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Accion Crear Columnas NO Disponible!'
                            });
                            return false;
                        }
                        break;

                    default:
                        toastMixin.fire({
                            icon: 'warning',
                            animation: true,
                            title: 'Acción NO Reconocida o Disponible!'
                        });
                        return false;
                        break;
                }

                // Si pasa todas las validaciones
                return true;

            }

            $('#menu, #sub_menu').addClass('active');

            plan_id = "{{ $id }}";

            $(".chosen-select").chosen({
                width: "100%"
            });

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            function getRandomColor() {
                const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A8', '#A833FF', '#33FFF3', '#FF9933',
                    '#33FF99', '#9933FF', '#FF3399', '#3399FF', '#99FF33', '#FF5733', '#33FF57', '#3357FF',
                    '#FF33A8', '#A833FF', '#33FFF3', '#FF6633', '#33FF66', '#3366FF', '#FF3366', '#66FF33',
                    '#FF33FF', '#33FFCC'
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }


            function getContrastYIQ(hexcolor) {
                hexcolor = hexcolor.replace("#", "");
                const r = parseInt(hexcolor.substr(0, 2), 16);
                const g = parseInt(hexcolor.substr(2, 2), 16);
                const b = parseInt(hexcolor.substr(4, 2), 16);
                const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
                return (yiq >= 128) ? 'black' : 'white';
            }


            function getInitials(name) {
                const words = name.split(' ');
                return words.map(word => word.charAt(0)).join('').toUpperCase();
            }

            function openModalComentarioPlan(estado_text) {
                $('#commentModalLabel').text('COMENTARIO DE ' + estado_text);
                $('#commentModal').modal('show');
                $('#formComentario').trigger('reset');
            }

            $('#estado_plan').change(function(e) {
                e.preventDefault();

                if (!validarAcciones(2)) {
                    e.preventDefault();
                    return;
                }

                estado_plan = $(this).val();
                estado_text = $('#estado_plan option:selected').text();
                estado_plan_old = $('#estado_plan_old').val();

                if (estado_plan == 4 || estado_plan == 5) {
                    if (estado_plan == 4) {
                        /* if ($('#comentario_pausa_plan').val()) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Ya hay un Comentario de Pausa!'
                            });

                            return false;
                        } */

                        $('#modalComentarioHeader').css({
                            'background-color': 'orange',
                            'color': 'black',
                        });
                    } else {
                        /* if ($('#comentario_final_plan').val()) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Ya hay un Comentario de Finalizado!'
                            });

                            return false;
                        } */

                        $('#modalComentarioHeader').css({
                            'background-color': 'green',
                            'color': 'white',
                        });
                    }

                    if (estado_plan == 5) {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                            'meta[name="csrf-token"]')
                                        .attr(
                                            'content'));
                                }
                            },
                            url: "{{ url('/api/validate/completado') }}",
                            method: 'POST',
                            data: {
                                plan_id: plan_id
                            },
                            success: function(data) {
                                if (data.save == 1) {
                                    if (data.sinTareas != 0 && data.pendientes == 0) {
                                        console.log('Puede Completar');

                                        openModalComentarioPlan(estado_text);
                                    } else {
                                        toastMixin.fire({
                                            icon: 'warning',
                                            animation: true,
                                            title: 'No Puedes Completar este Plan, debes tener Tasks Creadas y Finalizadas!'
                                        });

                                        $('#estado_plan').val(estado_plan_old).change();
                                    }
                                } else {
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            },

                        });
                    } else {
                        openModalComentarioPlan(estado_text);
                    }
                } else {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/update/status/plan') }}",
                        method: 'POST',
                        data: {
                            plan_id: plan_id,
                            estado_plan: estado_plan
                        },
                        success: function(data) {
                            if (data.save != 1) {
                                Swal.fire("", "Error L: " + data.error, "error");
                                $('#estado_plan').val(estado_plan_old).change();
                            }
                        },

                    });
                }

            });


            $('#formComentario').submit(function(e) {
                e.preventDefault();

                estado_plan = $('#estado_plan').val();
                comentario_estado = $('#comentario_estado').val();

                if (!$('#comentario_estado').val()) {
                    Swal.fire("", "", "warning");
                } else {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/comment/plan') }}",
                        method: 'POST',
                        data: {
                            plan_id: plan_id,
                            estado: estado_plan,
                            comentario: comentario_estado
                        },
                        success: function(data) {
                            if (data.save != 1) {
                                Swal.fire("", "Error L: " + data.error, "error");
                            } else {
                                toastMixin.fire({
                                    icon: 'success',
                                    animation: true,
                                    title: 'Comentario Realizado!'
                                });
                            }
                        },

                    });

                    $('#commentModal').modal('hide');
                }
            });

            function loadColumns() {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/get/columnas/plan') }}",
                    method: 'POST',
                    data: {
                        plan_id: plan_id
                    },
                    success: function(response) {
                        if (response.success) {
                            renderColumns(response.data);
                        }
                    },

                });
            }

            // Función para renderizar las columnas
            function renderColumns(columns) {
                let columnsHtml = '';

                columns.forEach(column => {
                    columnsHtml += `
                        <div class="kanban-column col-12 col-sm-6 col-md-4 col-lg-3 mb-3 p-2">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <input type="text" class="form-control new-task-input" placeholder="Escriba un Nombre de Tarea * (Enter para guardar)" data-column="${column.id_columna}">
                                    </div>
                                    <br>
                                    <div class="row d-flex justify-content-between align-items-center">
                                        <div class="col"><span><b>${column.nombre_columna}</b></span></div>
                                        <div class="col-auto text-end float-end ms-auto download-grp">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-edit text-warning me-2 editColumna" style="cursor:pointer;" data-id="${column.id_columna}" data-name="${column.nombre_columna}"></i>
                                                <i class="fas fa-trash-alt text-danger deleteColumna" style="cursor:pointer;" data-id="${column.id_columna}"></i>
                                            </div>    
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body shadow-lg">
                                    <ul class="list-group tasks-list" id="tasks-${column.id_columna}" data-column="${column.id_columna}" style="min-height: 50px">
                                        <!-- Aquí se insertarán las tareas -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    `;
                });

                $('#columns-container').html(columnsHtml);
                initializeSortable();

                columns.forEach(column => {
                    loadTasks(column.id_columna);
                });
            }

            function initializeSortable() {
                if (!validarAcciones(4)) {
                    return;
                }

                $('.tasks-list').each(function() {
                    const columnId = $(this).data('column');

                    Sortable.create(this, {
                        group: 'tasks', // Permitir que las tareas se muevan entre listas
                        animation: 150,
                        onEnd: function(evt) {
                            const taskId = $(evt.item).data('id');
                            const newColumnId = $(evt.to).data('column');
                            updateTaskColumn(taskId, newColumnId);
                        }
                    });
                });
            }

            // Función para actualizar la columna de una tarea en la base de datos
            function updateTaskColumn(id_tarea, id_columna) {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/change/columna/task') }}",
                    method: 'POST',
                    data: {
                        columna_id: id_columna,
                        tarea_id: id_tarea
                    },
                    success: function(data) {
                        if (data.save != 1) {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });
            }

            // Cargar las columnas al cargar la página
            loadColumns();


            // Función para cargar las tareas
            function loadTasks(columna_id) {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: `{{ url('/api/get/tasks/columna') }}/${columna_id}`,
                    method: 'GET',
                    success: function(response) {
                        if (response.success) {
                            renderTasks(response.data);
                        }
                    },

                });
            }

            // Función para renderizar las tareas
            function renderTasks(tasks) {
                tasks.forEach(task => {
                    let taskHtml = `
                        <li class="list-group-item d-flex justify-content-between align-items-center task-item" data-id="${task.id_tarea}" data-column="${task.id_columna}">
                            <div>
                                <span>${task.nombre_tarea}</span>
                                <br>
                                ${task.fecha_final ? `<small>${task.icono + ' ' + task.nombre_estado_tarea + ' | '}<i class="fas fa-calendar-alt text-success" style="margin: 5px"></i>${task.fecha_final}</small>` : ''}
                            </div>
                            <div>
                                <i class="fas fa-trash-alt text-danger delete-task" data-id="${task.id_tarea}" style="cursor:pointer;"></i>
                            </div>
                        </li>
                        <br>
                    `;
                    $(`#tasks-${task.id_columna}`).append(taskHtml);
                });
            }


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

                $('#columnasForm').trigger('reset');
                columna_id = null;
                opcion = 1;
            });


            $(document).on('click', '.editColumna', function(e) {
                $('#columnasForm').trigger('reset');

                if (!validarAcciones(2)) {
                    e.preventDefault();
                    return;
                }

                columna_id = $(this).data('id');
                nombre_columna = $(this).data('name');
                opcion = 2;

                $('#nombre_columna').val(nombre_columna);

                $('#modalColumnas').modal('show');
            });


            $(document).on('click', '.deleteColumna', function(e) {
                columna_id = $(this).data('id');

                if (!validarAcciones(3)) {
                    e.preventDefault();
                    return;
                }

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/delete/columna/plan') }}",
                    data: {
                        columna_id: columna_id
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            loadColumns();
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    }
                });
            });


            $(document).on('click', '.delete-task', function(e) {
                e.stopPropagation();

                if (!validarAcciones(3)) {
                    e.preventDefault();
                    return;
                }

                task_id = $(this).data('id');

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/delete/tasks/columna/plan') }}",
                    data: {
                        task_id: task_id
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            $(`[data-id=${task_id}]`).remove();
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    }
                });
            });


            $('#columnasForm').submit(function(e) {
                e.preventDefault();

                nombre_columna = $('#nombre_columna').val();

                if (!$('#nombre_columna').val()) {
                    toastMixin.fire({
                        icon: 'warning',
                        animation: true,
                        title: 'Debes llenar TODOS los campos!'
                    });
                    return false;
                }

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        type: "POST",
                        url: "{{ url('/api/insert/update/columna/kanban/plan') }}",
                        data: {
                            columna_id: columna_id,
                            nombre_columna: nombre_columna,
                            plan_id: plan_id,
                            opcion: opcion
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.save == 1) {
                                if (data.existe == 0) {
                                    if (opcion == 1) {
                                        toastMixin.fire({
                                            icon: 'success',
                                            animation: true,
                                            title: 'Columna Creada!'
                                        });
                                    } else {
                                        toastMixin.fire({
                                            icon: 'success',
                                            animation: true,
                                            title: 'Columna Editada!'
                                        });
                                    }

                                    $("#modalColumnas").modal("hide");
                                    loadColumns();
                                } else {
                                    toastMixin.fire({
                                        icon: 'warning',
                                        animation: true,
                                        title: 'Ya EXISTE esta Columna!'
                                    });
                                }
                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error");
                }

            });


            $(document).on('keypress', '.new-task-input', function(e) {
                if (e.which == 13) {
                    const columna_id = $(this).data('column');
                    const nombre_tarea = $(this).val();

                    if (!validarAcciones(5)) {
                        e.preventDefault();

                        $(this).val('');
                        return;
                    }

                    if (!$(this).val()) {
                        toastMixin.fire({
                            icon: 'warning',
                            animation: true,
                            title: 'Debes ingresar el Nombre de la Tarea!'
                        });
                        return false;
                    }

                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/insert/tarea/columna/plan/kanban') }}",
                        method: 'POST',
                        data: {
                            columna_id: columna_id,
                            nombre_tarea: nombre_tarea
                        },
                        success: function(data) {
                            if (data.save == 1) {


                                let task = data.task;

                                let taskHtml = `
                                    <li class="list-group-item d-flex justify-content-between align-items-center task-item" data-id="${task.id_tarea}" data-column="${task.id_columna}">
                                        <div>
                                            <span>${task.nombre_tarea}</span><br>${task.fecha_final ? `<small><i class="fas fa-calendar-alt text-success" style="margin: 5px"></i>${task.fecha_final}</small>` : ''}
                                        </div>
                                        <div>
                                            <i class="fas fa-trash-alt text-danger delete-task" data-id="${task.id_tarea}" style="cursor:pointer;"></i>
                                        </div>
                                    </li>
                                    <br>
                                `;
                                $(`#tasks-${columna_id}`).append(taskHtml);


                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        },
                    });

                    $(this).val('');

                }
            });



            $(document).on('click', '.task-item', function(e) {
                const id_tarea = $(this).data('id');

                if (!validarAcciones(1)) {
                    e.preventDefault();
                    return;
                }

                // Deshabilitar los campos del formulario mientras se cargan los datos
                $('#editTaskForm input:not(#porcentajeTask), #editTaskForm textarea, #editTaskForm select')
                    .prop('disabled', true);

                loading = true;

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/get/task/data') }}",
                    method: 'POST',
                    data: {
                        id_tarea: id_tarea
                    },
                    success: function(data) {
                        if (data.save == 1 && data.taskData.length > 0) {
                            let task = data.taskData[0];

                            $('#id_tarea_hidden').val(task.id_tarea);
                            $('#nombre_tarea').val(task.nombre_tarea);
                            $('#modificado_tarea').text("Modificado por " + task
                                .modificado_por ?? nullValue + " - " + task
                                .fecha_hora_modificado_text ?? nullValue);

                            $('#estado_tarea').val(task.estado_tarea).change();

                            $('#prioridad_tarea').val(task.id_prioridad).change();

                            $('#fecha_inicio_tarea').val(task.fecha_inicio);
                            $('#fecha_final_tarea').val(task.fecha_final);
                            $('#porcentajeTask').val(task.porcentaje);

                            $('#descripcion_tarea').val(task.descripcion_tarea);



                            loading = false;
                            $('#editTaskModal').modal('show');
                            $('#btnComment').val('');
                            loadChecklistItems(id_tarea);
                            loadCommentsTask(id_tarea);
                            loadTaskFiles(id_tarea);

                            if (!validarAcciones(6)) {
                                e.preventDefault();
                                return;
                            }
                            $('#editTaskForm input:not(#porcentajeTask), #editTaskForm textarea, #editTaskForm select')
                                .prop('disabled', false);
                        } else {
                            Swal.fire("", "Error L " + data.error, "error");
                            loading = false;
                        }
                    },
                    error: function(error) {
                        console.log('Error:', error);
                        loading = false;
                    }
                });
            });



            $('#editTaskForm input:not(#porcentajeTask), #editTaskForm textarea, #editTaskForm select').on(
                'change input',
                function() {
                    if (loading) return;

                    let formData = $('#editTaskForm').serialize();

                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/update/task/header') }}",
                        method: 'POST',
                        data: formData,
                        success: function(data) {
                            if (data.save == 1 && data.taskData.length > 0) {
                                let task = data.taskData[0];

                                let taskId = $('#id_tarea_hidden').val();
                                let taskElement = $(`.task-item[data-id="${taskId}"]`);

                                let taskHtml = `
                                <div>
                                    <span>${task.nombre_tarea}</span><br>
                                    ${task.fecha_final ? `<small>${task.icono + ' ' + task.nombre_estado_tarea + ' | '}<i class="fas fa-calendar-alt text-success" style="margin: 5px"></i>${task.fecha_final}</small>` : ''}
                                </div>
                                <div>
                                    <i class="fas fa-trash-alt text-danger delete-task" data-id="${task.id_tarea}" style="cursor:pointer;"></i>
                                </div>
                            `;
                                taskElement.html(taskHtml);
                            } else {
                                Swal.fire("", "Error al guardar cambios: " + data.error,
                                    "error");
                            }
                        },

                    });
                });

            /* $('#porcentajeTask').on('blur', function() {
                let formData = $('#editTaskForm').serialize();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/update/task/header') }}",
                    method: 'POST',
                    data: formData,
                    success: function(data) {
                        if (data.save == 1 && data.taskData.length > 0) {
                            if (data.val_msg == 1) {
                                Swal.fire(
                                    "Suma total de porcentajes mayor a 100, se te asignará la diferencia disponible!",
                                    "Nuevo Porcentaje Asignado: " + data.porcentaje_tarea,
                                    "warning");

                                $('#porcentajeTask').val(data.porcentaje_tarea);
                            }
                        } else {
                            Swal.fire("", "Error al guardar cambios: " + data.error,
                                "error");
                        }
                    },
                });
            }); */




            function loadChecklistItems(tarea_id) {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    url: "{{ url('/api/get/task/details') }}",
                    method: 'POST',
                    data: {
                        tarea_id: tarea_id
                    },
                    success: function(response) {
                        if (response.success) {
                            renderChecklistItems(response.data);
                        }
                    }
                });
            }

            function renderChecklistItems(items) {
                let checklistItemHtml = '';
                let checklistContainer = $('#checklist-container');
                checklistContainer.empty();

                let completedCount = 0;

                items.forEach(item => {
                    let isChecked = item.completado == 1 ? 'checked' : '';
                    if (item.completado == 1) completedCount++;

                    checklistItemHtml += `
                        <li class="list-group-item d-flex justify-content-between align-items-center checklist-item" data-id="${item.id_detalle_tarea}">
                            <div>
                                <input type="checkbox" class="checklist-checkbox" ${isChecked} data-id="${item.id_detalle_tarea}">
                                <span class="checklist-item-text w-100" contenteditable="true">${item.detalle}</span>
                            </div>
                            <div>
                                <i class="fas fa-trash-alt text-danger delete-checklist-item" data-id="${item.id_detalle_tarea}" style="cursor:pointer;"></i>
                            </div>
                        </li>
                    `;
                });

                checklistContainer.html(checklistItemHtml);
                updateChecklistStatus();
            }

            function updateChecklistStatus() {
                let totalItems = $('#checklist-container .checklist-item').length;
                let completedItems = $('#checklist-container .checklist-checkbox:checked').length;

                let percentage = totalItems === 0 ? 0 : (completedItems / totalItems) * 100;

                $('#checklist-status').text(`${completedItems} / ${totalItems}`);
                $('#checklist-progress').css('width', `${percentage}%`);
                $('#checklist-progress').attr('aria-valuenow', percentage);
            }

            function addNewChecklistItem() {
                let tarea_id = $('#id_tarea_hidden').val();
                let nombre_item = $('#new-checklist-item').val().trim();

                if (!validarAcciones(6)) {
                    $('#new-checklist-item').val('');
                    return;
                }

                if (nombre_item) {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/create/update/task/detail') }}",
                        method: 'POST',
                        data: {
                            detalle_id: null,
                            tarea_id: tarea_id,
                            nombre_item: nombre_item,
                            opcion: 1
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                let checklistContainer = $('#checklist-container');

                                item = data.itemData[0];

                                let checklistItemHtml = `
                                    <li class="list-group-item d-flex justify-content-between align-items-center checklist-item" data-id="${item.id_detalle_tarea}">
                                        <div>
                                            <input type="checkbox" class="checklist-checkbox" data-id="${item.id_detalle_tarea}">
                                            <span class="checklist-item-text w-100" contenteditable="true">${item.detalle}</span>
                                        </div>
                                        <div>
                                            <i class="fas fa-trash-alt text-danger delete-checklist-item" data-id="${item.id_detalle_tarea}" style="cursor:pointer;"></i>
                                        </div>
                                    </li>
                                `;
                                checklistContainer.append(checklistItemHtml);

                                $('#new-checklist-item').val('');

                                updateChecklistStatus();
                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        }
                    });
                }
            }

            $('#new-checklist-item').keypress(function(e) {
                if (e.which == 13) {
                    addNewChecklistItem();
                    return false;
                }
            });

            $(document).on('change', '.checklist-checkbox', function(e) {
                const itemId = $(this).data('id');
                const completado = $(this).is(':checked') ? 1 : 0;

                if (!validarAcciones(6)) {
                    e.preventDefault();

                    $(this).prop('checked', false);
                    return;
                }

                updateChecklistStatus();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/update/detalle/task/completado/check') }}",
                    method: 'POST',
                    data: {
                        id_detalle_tarea: itemId,
                        completado: completado
                    },
                    success: function(data) {
                        if (data.save != 1) {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });
            });

            $(document).on('click', '.delete-checklist-item', function(e) {
                let itemId = $(this).data('id');

                if (!validarAcciones(3)) {
                    e.preventDefault();
                    return;
                }

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/delete/task/detail') }}",
                    method: 'POST',
                    data: {
                        id_detalle_tarea: itemId
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            $(`.checklist-item[data-id="${itemId}"]`).remove();
                            updateChecklistStatus();
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });
            });

            $(document).on('blur', '.checklist-item-text', function(e) {
                let itemId = $(this).closest('.checklist-item').data('id');
                let newText = $(this).text();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/create/update/task/detail') }}",
                    method: 'POST',
                    data: {
                        detalle_id: itemId,
                        tarea_id: null,
                        nombre_item: newText,
                        opcion: 2
                    },
                    success: function(data) {
                        if (!data.save == 1) {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    }
                });
            });

            $(document).on('keypress', '.checklist-item-text', function(e) {
                if (e.which == 13) { // Enter key
                    e.preventDefault();

                    $(this).blur();
                }
            });

            $(document).on('focus', '.checklist-item-text', function(e) {
                let element = this;

                if (!validarAcciones(6)) {
                    e.preventDefault();

                    $(this).blur();
                    return;
                }

                setTimeout(function() {
                    let range = document.createRange();
                    let sel = window.getSelection();
                    range.setStart(element.childNodes[0], element.childNodes[0].length);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }, 1);
            });




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

                task_id = $('#id_tarea_hidden').val();
                task_name = $('#nombre_tarea').val();

                $("#membersTable").DataTable().clear().destroy();

                membersTable = $("#membersTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    ordering: false,
                    ajax: {
                        url: "{{ url('/api/get/tasks/members') }}" + "/" + task_id,
                        method: "GET",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_tarea_usuario"
                        },
                        {
                            data: "Nombre"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-danger btn-sm btnBorrarMiembro' title='Eliminar'><i class='material-icons'>delete</i></button></div></div>",
                        },
                    ]
                });


                $('#miembrosForm').trigger('reset');
                $('#task_member, #task_member_rol').val(0).trigger("chosen:updated");
                $('#task_member, #task_member_rol').trigger("chosen:updated");
                $('#assignUsersModalLabel').html('Miembros del Task <b>' + task_name + '</b>');
                $('#assignUsersModal').modal('show');
            });

            $('#miembrosForm').submit(function(e) {
                e.preventDefault();


                task_id = $('#id_tarea_hidden').val();
                member = $('#task_member').val();
                rol = 0;

                if (member == 0) {
                    toastMixin.fire({
                        icon: 'warning',
                        animation: true,
                        title: 'Debes seleccionar un Miembro y su Rol!'
                    });
                    return false;
                }

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/add/task/member') }}",
                    method: 'POST',
                    data: {
                        task_id: task_id,
                        user_id: member,
                        rol: rol
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            if (data.existe != 0) {
                                toastMixin.fire({
                                    icon: 'warning',
                                    animation: true,
                                    title: 'Ya has agregado a este Usuario!'
                                });
                                return false;
                            }
                            membersTable.ajax.reload(null, false);
                            $('#miembrosForm').trigger('reset');
                            $('#task_member, #task_member_rol').val(0).trigger("chosen:updated");
                            $('#task_member, #task_member_rol').trigger("chosen:updated");
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });



            });

            $(document).on('click', '.btnBorrarMiembro', function() {
                fila = $(this).closest("tr");

                id_secuencia = $.trim(fila.find("td:eq(0)").text());

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/delete/task/member') }}",
                    method: 'POST',
                    data: {
                        id_secuencia: id_secuencia
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Usuario Eliminado!'
                            });
                            membersTable.ajax.reload(null, false);
                            $('#miembrosForm').trigger('reset');
                            $('#task_member, #task_member_rol').val(0).trigger(
                                "chosen:updated");
                            $('#task_member, #task_member_rol').trigger("chosen:updated");
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });

            });


            $('#plan_hidden_section').css('visibility', 'hidden');
            $('#plan_hidden_section').css('height', '0');

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

                $('#formPlanes').trigger('reset');
                $('#formPlanes input, #formPlanes textarea, #formPlanes select, #comentario_pausa, #comentario_final')
                    .prop('disabled', true);

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/get/plan/data') }}",
                    method: 'POST',
                    data: {
                        id_plan: plan_id
                    },
                    success: function(data) {
                        if (data.save == 1 && data.planData.length > 0) {
                            let plan = data.planData[0];

                            $('#nombre_plan').val(plan.nombre_plan);
                            $('#descripcion_plan').val(plan.descripcion_plan);
                            $('#tipo_plan').val(plan.id_tipo_plan).change();
                            $('#area_plan').val(plan.id_area).change();
                            $('#fecha_inicio').val(plan.fecha_inicio);
                            $('#fecha_final').val(plan.fecha_final);
                            $('#comentario_pausa').val(plan.comentario_pausa);
                            $('#comentario_final').val(plan.comentario_final);

                            $('#modalTitle').text('INFORMACION DEL PLAN');
                            $('#gestionPlanesModal').modal('show');
                        } else {
                            Swal.fire("", "Error L " + data.error, "error");
                            loading = false;
                        }
                    }
                });
            });


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

                task_id = "{{ $id }}";

                $("#membersPlanTable").DataTable().clear().destroy();

                membersPlanTable = $("#membersPlanTable").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    ordering: false,
                    ajax: {
                        url: "{{ url('/api/get/plan/members') }}" + "/" + task_id,
                        method: "GET",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_plan_usuario"
                        },
                        {
                            data: "Nombre"
                        },
                        {
                            data: "tipo_usuario"
                        },
                        {
                            defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-danger btn-sm btnBorrarMiembroPlan' title='Eliminar'><i class='material-icons'>delete</i></button></div></div>",
                        },
                    ]
                });


                $('#miembrosPlanForm').trigger('reset');
                $('#plan_member').val(0).trigger("chosen:updated");
                $('#plan_member').trigger("chosen:updated");
                $('#assignUsersPlanModal').modal('show');
            });

            $('#miembrosPlanForm').submit(function(e) {
                e.preventDefault();


                plan_id = "{{ $id }}";
                member = $('#plan_member').val();
                rol = $('#plan_member_rol').val();

                if (member == 0 || rol == 0) {
                    toastMixin.fire({
                        icon: 'warning',
                        animation: true,
                        title: 'Debes seleccionar un Miembro!'
                    });
                    return false;
                }

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/add/plan/member') }}",
                    method: 'POST',
                    data: {
                        plan_id: plan_id,
                        user_id: member,
                        rol: rol
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            if (data.existe != 0) {
                                toastMixin.fire({
                                    icon: 'warning',
                                    animation: true,
                                    title: 'Ya has agregado a este Usuario!'
                                });
                                return false;
                            }
                            membersPlanTable.ajax.reload(null, false);
                            $('#miembrosPlanForm').trigger('reset');
                            $('#plan_member, #plan_member_rol').val(0).trigger(
                                "chosen:updated");
                            $('#plan_member, #plan_member_rol').trigger("chosen:updated");

                            $('#tasksMembersLoad').load(" #tasksMembersLoad");

                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });



            });

            $(document).on('click', '.btnBorrarMiembroPlan', function() {
                fila = $(this).closest("tr");

                id_secuencia = $.trim(fila.find("td:eq(0)").text());

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/delete/plan/member') }}",
                    method: 'POST',
                    data: {
                        id_secuencia: id_secuencia
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            toastMixin.fire({
                                icon: 'warning',
                                animation: true,
                                title: 'Usuario Eliminado!'
                            });
                            membersPlanTable.ajax.reload(null, false);
                            $('#miembrosPlanForm').trigger('reset');
                            $('#plan_member').val(0).trigger("chosen:updated");
                            $('#plan_member').trigger("chosen:updated");
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });

            });


            $('#comentario_tarea').keyup(function(e) {
                if (!$(this).val().trim()) {
                    $('#btnComment').prop('disabled', true); // Usa true sin comillas
                } else {
                    $('#btnComment').prop('disabled', false); // Usa false sin comillas
                }
            });


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

                if (!validarAcciones(6)) {
                    e.preventDefault();
                    return;
                }

                id_tarea_hidden = $('#id_tarea_hidden').val();
                comentario = $('#comentario_tarea').val();

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr('content'));
                        }
                    },
                    url: "{{ url('/api/comment/task') }}",
                    method: 'POST',
                    data: {
                        id_tarea_hidden: id_tarea_hidden,
                        comentario: comentario
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            $('#comentario_tarea').val('');
                            $('#btnComment').prop('disabled', 'true');
                            loadCommentsTask(id_tarea_hidden);
                        } else {
                            Swal.fire("", "Error L: " + data.error, "error");
                        }
                    },

                });

            });


            function renderComments(comments) {
                let commentsHtml = '';

                comments.forEach(comment => {
                    const color = getRandomColor();
                    const textColor = getContrastYIQ(color);
                    const initials = getInitials(comment.creado_por);

                    commentsHtml += `
                        <div class="d-flex align-items-start mb-3">
                            <div class="me-3">
                                <span class="avatar avatar-sm" style="margin-right: 1%; background-color: ${color}; width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: ${textColor}; font-size: 22px;">${initials}</span>
                            </div>
                            <div class="flex-grow-1">
                                <small class="mb-1">${comment.creado_por} <small class="text-muted">${comment.fecha_hora_creado_text}</small></small>
                                <p class="mb-0">${comment.comentario}</p>
                            </div>
                        </div>
                    `;
                });

                $('#commentsContainer').html(commentsHtml);
            }

            function loadCommentsTask(task_id) {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/get/tasks/comments') }}",
                    method: 'POST',
                    data: {
                        task_id: task_id
                    },
                    success: function(response) {
                        if (response.success) {
                            renderComments(response.data);
                        }
                    },

                });
            }


            /* upload file section */
            $('#btnUpload').on('click', function() {
                $('#fileInput').click();
            });


            function loadTaskFiles(id_tarea) {

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/load/archivos') }}",
                    type: 'POST',
                    data: {
                        id_tarea: id_tarea
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#adjuntosContainer').empty();

                            $.each(response.data, function(index, file) {
                                let fileItemHtml = `
                                    <div class="file-item card m-2" style="width: 120px;">
                                        <div class="card-body p-2">
                                            <p class="card-text text-truncate">${file.nombre_archivo}</p>
                                            <div class="d-flex justify-content-between">
                                                <a href="{{ url('/storage') }}/${file.ruta_archivo}" download="${file.nombre_archivo}" class="btn btn-sm btn-link">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                                <i class="fas fa-trash-alt text-danger file-delete" data-id="${file.id_archivo}" style="cursor:pointer;"></i>
                                            </div>
                                        </div>
                                    </div>
                                `;
                                $('#adjuntosContainer').append(fileItemHtml);
                            });
                        } else {
                            Swal.fire("", "Error al Listar Archivos", "error");
                        }
                    }
                });

            }



            $('#fileInput').change(function(e) {
                let files = this.files;
                let id_tarea = $('#id_tarea_hidden').val();

                if (!validarAcciones(6)) {
                    e.preventDefault();
                    return;
                }

                if (files.length > 0) {
                    let formData = new FormData();
                    formData.append('id_tarea', id_tarea);

                    for (let i = 0; i < files.length; i++) {
                        formData.append('archivo[]', files[i]);
                    }

                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/upload/archivos') }}",
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(response) {
                            if (response.save) {
                                loadTaskFiles(id_tarea);
                            } else {
                                Swal.fire("", "Error al Subir Archivos", "error");
                            }
                        }
                    });

                }
            });

            $(document).on('click', '.file-delete', function(e) {
                let id_archivo = $(this).data('id');

                if (!validarAcciones(3)) {
                    e.preventDefault();
                    return;
                }

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/delete/archivos') }}",
                    type: 'POST',
                    data: {
                        id_archivo: id_archivo
                    },
                    success: function(response) {
                        if (response.save == 1) {
                            $(this).parent('.file-item').remove();
                        } else {
                            Swal.fire("", "Error al Eliminar Archivo", "error");
                        }
                    }
                });
            });


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

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    url: "{{ url('/api/graph/plan') }}",
                    method: 'POST',
                    data: {
                        plan_id: plan_id
                    },
                    success: function(data) {
                        renderCompletionChart(data.completion_percentage);
                        renderTimeChart(data.time_progress_percentage);

                        $('#graphModal').modal('show');
                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                });

                function renderCompletionChart(percentage) {
                    Highcharts.chart('completionChartContainer', {
                        chart: {
                            type: 'pie'
                        },
                        title: {
                            text: 'Porcentaje de Tareas Completadas'
                        },
                        series: [{
                            name: 'Completado',
                            colorByPoint: true,
                            data: [{
                                name: 'Completado',
                                y: parseFloat(
                                    percentage
                                ), // Utiliza la variable 'percentage' que fue pasada como argumento
                                color: '#4CAF50'
                            }, {
                                name: 'Incompleto',
                                y: 100 - parseFloat(percentage),
                                color: '#FFC107'
                            }]
                        }]
                    });

                }

                function renderTimeChart(percentage) {
                    Highcharts.chart('timeChartContainer', {
                        chart: {
                            type: 'bar'
                        },
                        title: {
                            text: 'Porcentaje de Tiempo Transcurrido'
                        },
                        xAxis: {
                            categories: ['Cumplimiento', 'Plan']
                        },
                        yAxis: {
                            max: 100,
                            title: {
                                text: 'Porcentaje'
                            }
                        },
                        series: [{
                            name: 'Cumplimiento',
                            data: [percentage],
                            color: '#FF5733' // Naranja para el tiempo transcurrido
                        }]
                    });
                }
            });



            percentageTable = $("#percentageTable").DataTable({
                orderCellsTop: true,
                deferRender: true,
                scrollX: true,
                scrollY: '300px',
                scrollCollapse: true,
                pageLength: 50,
                initComplete: function() {
                    actualizarSumaPorcentajes();
                },
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader(
                            'X-CSRF-Token',
                            $(
                                'meta[name="csrf-token"]'
                            ).attr('content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/fill/table/porcentajes/tasks') }}" + "/" + plan_id,
                    method: "GET",
                },
                language: {
                    url: "{{ URL::asset('json/es-ES.json') }}",
                },
                colReorder: {
                    realtime: false,
                },
                dom: 'Bfrtlip',
                buttons: [{
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i>',
                        titleAttr: 'Excel',
                        className: 'btn btn-success',
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i>',
                        titleAttr: 'PDF',
                        className: 'btn btn-danger',
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print"></i>',
                        titleAttr: 'Imprimir',
                        className: 'btn btn-null',
                    }
                ],
                columns: [{
                        data: 'id_tarea',
                        width: '5%'
                    },
                    {
                        data: 'nombre_tarea',
                        className: 'text-wrap'
                    },
                    {
                        data: 'porcentaje',
                        className: 'text-center',
                        render: (data, type, row) =>
                            `<input type="number" class="form-control form-control-sm percentage-input" value="${data}" step="0.1">`
                    },
                    {
                        data: 'nombre_columna'
                    },
                ]
            });

            function actualizarSumaPorcentajes() {
                let sumaTotal = 0;

                // Iterar sobre cada input de porcentaje y sumar los valores
                $('.percentage-input').each(function() {
                    console.log($(this).val());
                    sumaTotal += parseFloat($(this).val()) || 0;
                });

                // Mostrar el valor total en el input de porcentaje total
                $('#porcentajeTotal').val(sumaTotal.toFixed(2)); // Mostrar con dos decimales
            }


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

                $(document).on('input', '.percentage-input', function() {
                    actualizarSumaPorcentajes();
                });
                
                percentageTable.ajax.reload(null, false);

                $('#percentagePlanModal').modal('show');

                $('#percentagePlanModal').on('shown.bs.modal', function() {
                    percentageTable.columns.adjust().draw();
                });
            });


            function insertTasksPercentage(task_id, porcentaje) {

                return {
                    task_id: task_id,
                    porcentaje: porcentaje,
                }

            }


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

                var porcentajeTotal = $("#porcentajeTotal").val();

                if (porcentajeTotal != 100) {
                    Swal.fire("", "El porcentaje total debe ser igual a 100!", "warning");
                } else {

                    Swal.fire({
                        title: '',
                        html: '<b></b>',
                        didOpen: () => {
                            Swal.showLoading()
                        },
                        allowOutsideClick: false, // Evita que el usuario cierre el modal haciendo clic fuera de él
                        allowEscapeKey: false, // Evita que el usuario cierre el modal con ESC
                        showConfirmButton: false // Oculta el botón de confirmación
                    });

                    var porcentajesTasks = [];

                    $("#percentageTable tbody tr").each(function() {
                        var task_id = $(this).find('td:eq(0)').text();
                        var porcentaje = $(this).find('td:eq(2) input').val();

                        porcentajesTasks.push(insertTasksPercentage(task_id, porcentaje));
                    });

                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader(
                                        'X-CSRF-Token',
                                        $(
                                            'meta[name="csrf-token"]'
                                        ).attr('content'));
                                }
                            },
                            datatype: "json",
                            type: "POST",
                            url: "{{ url('/api/update/porcentajes/x/tasks') }}",
                            data: {
                                porcentajesTasks: porcentajesTasks
                            },
                            success: function(data) {
                                if (data.save == 1) {
                                    Swal.close();
                                    Swal.fire("", "Porcentajes Editados!", "success");
                                    $("#percentagePlanModal").modal('hide');
                                } else {
                                    Swal.fire("", "Error D: " + data.error, "error");
                                }
                            },
                        });
                    } catch (error) {
                        Swal.close();
                    }

                }
            });



        });
    </script>
@endsection