/*
Template Name: Skote - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: themesbrand@gmail.com
File: Task Form Init Js File
*/

var updateid = '';
var selectedstatus = '';
var taskid = '';
var i= 0;

$(document).ready(function () {
    'use strict';

    //Task Assign User Validation

    $("#NewtaskForm").validate({
        rules: {
            'member[]': {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            if (element.is(':checkbox')) {
                error.insertAfter('#taskassignee');
            } else {
                error.insertAfter(element);
            }
        }
    });

    //Add New Task

    $( ".addtask-btn" ).click(function() {
        var id= $(this).attr('data-id');
        $('#updatetaskdetail').css('display', 'none');
        $('#addtask').css('display', 'block');
        $('.update-task-title').css('display', 'none');
        $('.add-task-title').css('display', 'block');
        $('#taskname').val('');
        $('#taskdesc').val('');
        $('#TaskStatus').val('');
        $('#taskbudget').val('');
        $('#taskassignee input').prop("checked", false);
        taskid = id;
    });

    $("select#TaskStatus").change(function(){
        selectedstatus = $(this).children("option:selected").val();  
    });

    //Add New Task with Validation
    
    $("#addtask").click(function(){
        $('#updatetaskdetail').css('display','none');
        $('#addtask').css('display','block');
        $('.update-task-title').css('display','none');
        $('.add-task-title').css('display','block');
        var newtaskid= makeid(5);
        var taskname=$("#taskname").val();
        var d = new Date();
        var strDate = d.getDate() + " " + (d.toLocaleString('default', { month: 'short' })) + ", " + d.getFullYear();
        var taskdesc=$("#taskdesc").val();
        var newtaskdesc='';
        if(taskdesc.length > 0) {
            newtaskdesc=  "<ul class='ps-3 mb-4 text-muted' id='task-desc'>"+
                "<li class='py-1'>"+taskdesc+"</li>"+
            "</ul>"
        }
        var taskbudget=$("#taskbudget").val();
        var taskassignee = new Array();
        var taskassigneevalue = new Array();
        var src = "";
        $('#taskassignee input[type=checkbox]:checked').each(function() {
            taskassigneevalue.push($(this).attr("id"));
            taskassignee.push($(this).nextAll("img").attr("src"));
        });
        for (i = 0; i < taskassignee.length; i++) {
            src=src+'<div class="avatar-group-item"><a href="#" class="d-inline-block" value="'+taskassigneevalue[i]+'"><img src="'+taskassignee[i]+'" class="rounded-circle avatar-xs" alt=""></a></div>';
        }
        var statuscolor;
        if(selectedstatus == "Waiting"){
            statuscolor="badge-soft-secondary";
        }
        else if(selectedstatus == "Approved"){
            statuscolor="badge-soft-primary";
        }
        else if(selectedstatus == "Complete"){
            statuscolor="badge-soft-success";
        }
        else if(selectedstatus == "Pending"){
            statuscolor="badge-soft-warning";
        }
        
        if(taskname.length == 0 || taskbudget.length == 0 || selectedstatus.length == 0 || taskassignee.length == 0) {
            $("#NewtaskForm").validate().element("#taskname");
            $("#NewtaskForm").validate().element("#taskassignee input:checkbox");
            $("#NewtaskForm").validate().element("#TaskStatus");
            $("#NewtaskForm").validate().element("#taskbudget");
        } else {
            $(taskid).append("<div class='card task-box' id='"+newtaskid+"'>"+
            "<div class='card-body'>"+
                "<div class='dropdown float-end'>"+
                    "<a href='#' class='dropdown-toggle arrow-none' data-bs-toggle='dropdown' aria-expanded='false'>"+
                        "<i class='mdi mdi-dots-vertical m-0 text-muted h5'></i>"+
                    "</a>"+
                    "<div class='dropdown-menu dropdown-menu-end'>"+
                        "<a class='dropdown-item edittask-details' href='#' data-bs-toggle='modal' data-bs-target='.bs-example-modal-lg' data-id='#"+newtaskid+"'>Edit</a>"+
                        "<a class='dropdown-item deletetask' href='#' data-id='#"+newtaskid+"'>Delete</a>"+
                    "</div>"+
                "</div>"+
                "<div class='float-end ms-2'>"+
                    "<span class='badge rounded-pill font-size-12 "+statuscolor+"' id='task-status'>"+selectedstatus+"</span>"+
                "</div>"+
                "<div>"+
                    "<h5 class='font-size-15'><a href='javascript: void(0);' class='text-dark' id='task-name'>"+taskname+"</a></h5>"+
                    "<p class='text-muted mb-4' id='task-date'>"+strDate+"</p>"+
                "</div>"+
                newtaskdesc+
                "<div class='avatar-group float-start task-assigne'>"+src+
                "</div>"+
                "<div class='text-end'>"+
                    "<h5 class='font-size-15 mb-1' id='task-budget'>$ "+taskbudget+"</h5>"+
                    "<p class='mb-0 text-muted'>Budget</p>"+
                "</div>"+
            "</div>"+
        "</div>");
        $('#modalForm').modal('toggle');
        }
    });

    $('#modalForm').on('hidden.bs.modal', function (e) {
        var validator = $("#NewtaskForm").validate();
        $('#taskname').removeClass('error').next('label.error').remove();
        $('#TaskStatus').removeClass('error').next('label.error').remove();
        $('#taskbudget').removeClass('error').next('label.error').remove();
        validator.resetForm();
    });

    //Update Task Details with Validation

    $("#updatetaskdetail").click(function(){ 
        var statuscolor ;
        if(selectedstatus == "Waiting"){
            statuscolor="badge-soft-secondary";
        }
        else if(selectedstatus == "Approved"){
            statuscolor="badge-soft-primary";
        }
        else if(selectedstatus == "Complete"){
            statuscolor="badge-soft-success";
        }
        else if(selectedstatus == "Pending"){
            statuscolor="badge-soft-warning";
        }
        var taskname = $('#taskname').val();
        var d = new Date();
        var strDate = d.getDate() + " " + (d.toLocaleString('default', { month: 'short' })) + ", " + d.getFullYear();
        var taskdesc=$("#taskdesc").val();
        var taskbudget=$("#taskbudget").val();
        var taskassignee = new Array();        
        var taskassigneevalue = new Array();        

        var src = "";
        $('#taskassignee input[type=checkbox]:checked').each(function() {
            taskassigneevalue.push($(this).attr("id"));
            taskassignee.push($(this).nextAll("img").attr("src"));
        });

        for (i = 0; i < taskassignee.length; i++) {
            src=src+'<div class="avatar-group-item"><a href="#" class="d-inline-block" value="'+taskassigneevalue[i]+'"><img src="'+taskassignee[i]+'" class="rounded-circle avatar-xs" alt=""></a></div>';
        }
        var newtaskdesc='';
        if(taskdesc.length > 0) {
            newtaskdesc=  "<ul class='ps-3 mb-4 text-muted' id='task-desc'>"+
                "<li class='py-1'>"+taskdesc+"</li>"+
            "</ul>"
        }
        if(taskname.length == 0 || taskbudget.length == 0 || selectedstatus.length == 0 || taskassignee.length == 0) {
            $("#NewtaskForm").validate().element("#taskname");
            $("#NewtaskForm").validate().element("#taskassignee input:checkbox");
            $("#NewtaskForm").validate().element("#TaskStatus");
            $("#NewtaskForm").validate().element("#taskbudget");
        } else {
            $(updateid).html("<div class='card-body'>"+
            "<div class='dropdown float-end'>"+
            "<a href='#' class='dropdown-toggle arrow-none' data-bs-toggle='dropdown' aria-expanded='false'>"+
            "<i class='mdi mdi-dots-vertical m-0 text-muted h5'></i>"+
            "</a>"+
            "<div class='dropdown-menu dropdown-menu-end'>"+
            "<a class='dropdown-item edittask-details' href='#' data-bs-toggle='modal' data-bs-target='.bs-example-modal-lg' data-id='"+updateid+"'>Edit</a>"+
            "<a class='dropdown-item deletetask' href='#' data-id='"+updateid+"'>Delete</a>"+
            "</div>"+
            "</div> "+
            "<div class='float-end ms-2'>"+
            "<span class='badge rounded-pill font-size-12 "+statuscolor+"' id='task-status'>"+selectedstatus+"</span>"+
            "</div>"+
            "<div>"+
            "<h5 class='font-size-15'><a href='javascript: void(0);' class='text-dark' id='task-name'>"+taskname+"</a></h5>"+
            "<p class='text-muted'>"+strDate+"</p>"+
            "</div>"+
            newtaskdesc+
            "<div class='avatar-group float-start task-assigne'>"+src+
            "</div>"+
            "<div class='text-end'>"+
            "<h5 class='font-size-15 mb-1' id='task-budget'>$ "+taskbudget+"</h5>"+
            "<p class='mb-0 text-muted'>Budget</p>"+
            "</div>"+
            "</div>");
            $('#modalForm').modal('hide');
        }
    });

    //Edit Task Details with Validation

    $('.main-content').on('click', '.edittask-details', function(event){ 
        var id= $(this).attr('data-id');
        updateid = id;
        var validator = $("#NewtaskForm").validate();
        validator.resetForm();
        $('#updatetaskdetail').css('display','block');
        $('#addtask').css('display','none');
        $('.update-task-title').css('display','block');
        $('.add-task-title').css('display','none');
        var name = $(id).find('#task-name').text();
        var desc = $(id).find('#task-desc').text();
        var budget = parseInt($(id).find('#task-budget').text().replace(/[^0-9.]/g, ""));
        var status = $(id).find('#task-status').text();
        $('#taskassignee input').prop("checked", false);
        $(id).find('.task-assigne a').each(function () {
            var assigneusers = $(this).attr('value');
            $("#"+assigneusers).prop("checked", true);
        });
        $('#taskname').val(name); 
        $('#taskdesc').val(desc); 
        $('#taskbudget').val(budget);
        $('#TaskStatus').val(status);
        selectedstatus=status;
    });
    
    //Delete Task
    $('.main-content').on('click', '.deletetask', function(event){  
        var id= $(this).attr('data-id');
        console.log('Task Deleted Successfully');
        $(id).remove();
    });
});

//Generate ID
function makeid(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}