{% extends 'kanban/menu.html' %}
{% load static %}

{% block title %}

CREAR KANBAN

{% endblock %}

{% block content %}

<div class="page-wrapper content container-fluid">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card p-3">

                <div class="d-flex justify-content-between align-items-center">
                    <h4>MIS KANBAN</h4>
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalKanban">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <div id="plan-cards-container" class="row">

                </div>


            </div>
        </div>
    </div>


</div>
{% include 'complementos/m_empleado_modal_kanban.html' %}
{% include 'complementos/m_empleado_modal_comentario.html' %}

{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    console.log('Hasta aqui llegada');
    $(document).ready(function () {



        $('#tipo-plan').select2({
            placeholder: "Seleccione tipo de plan",
            allowClear: true
        });
        $('#area').select2({
            placeholder: "Seleccione una area",
            allowClear: true
        });
        $(document).on('submit', '#formCrearKanba', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: '{% url "gestion_planes" %}',
                data: $(this).serialize(),
                success: function (response) {
                    if (response.status === 'success') {
                        swal("Éxito", response.message, "success").then(() => {

                            $('#formCrearKanba')[0].reset();

                            $('#modalKanban').modal('hide');
                        });
                    } else {
                        swal("Error", response.message, "error");
                    }
                },
                error: function (xhr, status, error) {
                    swal("Error", "Ha ocurrido un error", "error");
                }
            });


        });
        function loadPlans() {
            $.ajax({
                beforeSend: function (xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
                    }
                },
                url: "{% url 'obtener_planes_usuario' %}",
                method: 'GET',
                success: function (response) {
                    if (response.success) {
                        renderPlanCards(response.data);
                    }
                },
                error: function (error) {
                    console.log('Error:', error);
                }
            });
        }

        // Función para renderizar las tarjetas de los planes
        // Función para renderizar las tarjetas de los planes
        function renderPlanCards(plans) {
            let planCardsHtml = '';

            plans.forEach(plan => {
                const color = getRandomColor();  // Función para color aleatorio
                const textColor = getContrastYIQ(color);  // Función para contraste de color

                // Construcción de la tarjeta HTML con ajustes
                planCardsHtml += `
                    <div class="col-md-3">
                        <div class="card shadow-lg plan" data-id="${plan.id_plan}" data-name="${plan.nombre_plan}" style="cursor: pointer;" onclick="window.location.href='/CWS/kanban/detalle_plan/${plan.id_plan}/'">
                            <div class="card-body d-flex align-items-center justify-content-between" style="padding: 10px;">
                                <div class="p-2" style="margin-right: 5px; background-color: ${color}; width: 80px; height: 80px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: ${textColor}; font-size: 48px; line-height: 80px;">
                                    ${plan.nombre_plan.charAt(0)}
                                </div>
                                <div class="d-flex flex-column" style="flex-grow: 1;">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h5 class="card-title mb-0" style="margin-bottom: 5px; font-size: 16px;">${plan.nombre_plan}</h5>
                                        <div class="d-flex align-items-center ms-2">
                                            <i class="fas fa-edit text-warning me-2 editPlan" style="cursor:pointer; font-size: 14px;" data-id="${plan.id_plan}"
                                            data-name="${plan.nombre_plan}"
                                            data-desc="${plan.descripcion_plan}"
                                            data-tipo="${plan.id_tipo_plan}"
                                            data-area="${plan.id_area}"
                                            data-date1="${plan.fecha_inicio}"
                                            data-date2="${plan.fecha_final}"></i>
                                            <i class="fas fa-trash-alt text-danger deletePlan" style="cursor:pointer; font-size: 14px;" data-id="${plan.id_plan}"></i>
                                        </div>
                                    </div>
                                    <p class="card-text" style="font-size: 12px; margin-bottom: 5px;">${plan.descripcion_plan}</p>
                                    <small style="font-size: 12px;">${plan.icono + ' ' + plan.estado_plan + ' | '}<i class="fas fa-calendar-alt text-success"></i> ${plan.fecha_final}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    `;
            });

            // Inserta las tarjetas generadas en el contenedor
            $('#plan-cards-container').html(planCardsHtml);

            // Añadir el evento para eliminar plan
            $('.deletePlan').on('click', function (e) {
                e.stopPropagation();  // Evitar que el evento de click en el plan se dispare
                var idPlan = $(this).data('id');
                eliminarPlan(idPlan);  // Llamar a la función de eliminación del plan
            });
        }

        function eliminarPlan(idPlan) {
            // Confirmar eliminación
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Esta acción no se puede deshacer.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, eliminarlo',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'eliminar_plan' %}",  // Asegúrate de tener esta URL configurada en Django
                        data: {
                            'id_plan': idPlan,
                            'eliminado_por': '{{ userName }}',  // Suponiendo que el nombre del usuario está disponible
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        },
                        success: function (response) {
                            if (response.status === 'success') {
                                // Eliminar la tarjeta del plan del DOM
                                $(`.plan[data-id="${idPlan}"]`).remove();

                                Swal.fire(
                                    'Eliminado!',
                                    'El plan ha sido eliminado.',
                                    'success'
                                );
                            } else {
                                Swal.fire(
                                    'Error!',
                                    'Error al eliminar el plan: ' + response.message,
                                    'error'
                                );
                            }
                        },
                        error: function () {
                            Swal.fire(
                                'Error!',
                                'Hubo un problema al eliminar el plan.',
                                'error'
                            );
                        }
                    });
                }
            });
        }


        // Cargar los planes al cargar la página
        $(document).ready(function () {
            loadPlans();
        });
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        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';
        }

        $(document).on('click', '.plan', function () {
            const planId = $(this).data('id');  // Obtener el ID dinámico desde el atributo data-id
            const planName = $(this).data('name');  // Obtener el nombre del plan

            // Verificar si el planId se está obteniendo correctamente
            console.log(`Plan ID: ${planId}`);
            console.log(`Plan Name: ${planName}`);

            // Redireccionar a la URL usando el ID dinámico del plan
            window.location.href = `/CWS/modulos/kanban/detalle_plan/${planId}/`;
        });




        
    });

</script>

{% endblock %}