@extends('layouts.menu')

@section('tittle')
    MIS KANBAN
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <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">MIS KANBAN</h3>
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" data-bs-toggle="modal"
                                data-bs-target="#gestionPlanesModal" title="Crear Nuevo" alt="Crear Nuevo"><i
                                    class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>
                    <div class="row" id="plan-cards-container">

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

        </div>
    </div>


    @include('panel.kanban.modales.modalPlanes')
@endsection

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

            $('#kanbanMenu, #misKanban').addClass('active');

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

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2500,
                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 renderPlanCards(plans) {
                let planCardsHtml = '';

                plans.forEach(plan => {
                    const color = getRandomColor();
                    const textColor = getContrastYIQ(color);
                    const initials = getInitials(plan.nombre_plan);

                    planCardsHtml += `
                        <div class="col-md-3">
                            <div class="card shadow-lg mb-3 plan" data-id="${plan.id_plan}" data-name="${plan.nombre_plan}" style="cursor: pointer;">
                                <div class="card-body d-flex align-items-center justify-content-between">
                                    <div class="p-2" style="margin-right: 1%; background-color: ${color}; width: 70px; height: 70px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: ${textColor}; font-size: 22px;">
                                        ${initials}
                                    </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">${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;" 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;" data-id="${plan.id_plan}"></i>
                                            </div>
                                        </div>
                                        <p class="card-text">${plan.descripcion_plan}</p>
                                        <small>${plan.icono + ' ' + plan.estado_plan + ' | '}<i class="fas fa-calendar-alt text-success"></i> ${plan.fecha_final}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                });

                $('#plan-cards-container').html(planCardsHtml);
            }


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

            // Cargar los planes al cargar la página
            loadPlans();



            $(document).on('click', '.plan', function() {
                const planId = $(this).data('id');
                const planName = $(this).data('name');
                window.location.href = `{{ url('/admin/kanban/') }}/${planId}/${planName}`;
            });



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

                $('#formPlanes').trigger('reset');
                plan_id = null;
                opcion = 1;
            });


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

                nombre_plan = $('#nombre_plan').val();
                descripcion_plan = $('#descripcion_plan').val();
                tipo_plan = $('#tipo_plan').val();
                area_plan = $('#area_plan').val();
                date1 = $('#fecha_inicio').val();
                date2 = $('#fecha_final').val();

                fecha_inicio = new Date($('#fecha_inicio').val());
                fecha_final = new Date($('#fecha_final').val());

                if (!$('#nombre_plan').val() || !$('#descripcion_plan').val() || tipo_plan == 0 ||
                    area_plan == 0 || !$('#fecha_inicio').val() || !$('#fecha_final').val()) {
                    toastMixin.fire({
                        icon: 'warning',
                        animation: true,
                        title: 'Debes llenar y/o seleccionar TODOS los campos!'
                    });
                    return false;
                }

                if (fecha_final < fecha_inicio) {
                    toastMixin.fire({
                        icon: 'warning',
                        animation: true,
                        title: 'Debes ingresar una Fecha Final mayor o igual a la Fecha Inicial!'
                    });
                    return;
                }
                
                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/plan/kanban') }}",
                        data: {
                            plan_id: plan_id,
                            nombre_plan: nombre_plan,
                            descripcion_plan: descripcion_plan,
                            tipo_plan: tipo_plan,
                            area_plan: area_plan,
                            date1: date1,
                            date2: date2,
                            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: 'Plan Creado!'
                                        });
                                    } else {
                                        toastMixin.fire({
                                            icon: 'success',
                                            animation: true,
                                            title: 'Plan Editado!'
                                        });
                                    }

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

            });

            $(document).on('click', '.editPlan, .deletePlan', function(e) {
                e.stopPropagation();

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

                if ($(this).hasClass("editPlan")) {
                    $('#formPlanes').trigger('reset');
                    opcion = 2;

                    nombre_plan = $(this).data('name');
                    descripcion_plan = $(this).data('desc');
                    id_tipo_plan = $(this).data('tipo');
                    id_area = $(this).data('area');
                    fecha_inicio = $(this).data('date1');
                    fecha_final = $(this).data('date2');

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


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

                } else if ($(this).hasClass("deletePlan")) {
                    $.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/plan') }}",
                        data: {
                            plan_id: plan_id
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                $(`[data-id=${plan_id}]`).remove();
                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        }
                    });

                }



            });

        });
    </script>
@endsection