@extends('both.template')
@section('title', 'TACHES GENERALES | OPTIMIA')

@section('styleSheets')
    <!-- Select2 CSS -->
    <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
    <!-- Datetimepicker CSS -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap-datetimepicker.min.css') }}">
@endsection

@section('content')
    <!-- Page Wrapper -->
    <div class="page-wrapper">

        <!-- Page Content -->
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col-sm-12">
                        <h3 class="page-title">Task Board</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Projets</li>
                            <li class="breadcrumb-item active">Task Board</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row board-view-header">
                <div class="col-4">
                    <div class="pro-teams">
                        <div class="pro-team-members">
                            <h4>Followers</h4>
                            <div class="avatar-group">
                                <div class="avatar">
                                    <img class="avatar-img rounded-circle border border-white" alt="" src="{{ asset('img/profiles/avatar-02.jpg') }}">
                                </div>

                                <div class="avatar">
                                    <a href="#" class="avatar-title rounded-circle border border-white" data-toggle="modal" data-target="#assign_user">
                                        <i class="fa fa-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">

                    <div class="pro-progress">
                        <div class="pro-progress-bar">
                            <h4>Progression</h4>
                            <div class="progress">
                                <div class="progress-bar bg-success" id="tasksProgressBar" role="progressbar" style="-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);"></div>
                            </div>
                            <span id="tasksProgressCount"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="kanban-board card mb-0">
                <div class="card-body">
                    <div class="kanban-cont">
                        <div class="kanban-list kanban-danger">
                            <div class="kanban-header">
                                <span class="status-title">Tâches à faire <i class="la la-angle-right"></i> <span id="counter1">{{ $tasks->where('idTaskType', '1')->count() }}</span></span>
                            </div>
                            <div class="kanban-wrap" id="kanban-wrap-1">
                                @foreach($tasks as $task)
                                    @if ($task->idTaskType == 1)
                                        <div id="{{ $hashids->encode($task->idTaskBoard) }}" class="card panel">
                                            <div class="kanban-box">
                                                <div class="task-board-header">
                                                    <span class="status-title">{{ $task->taskName }}</span>
                                                    <div class="dropdown kanban-task-action">
                                                        <a href="#" data-toggle="dropdown">
                                                            <i class="fa fa-angle-down"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_task_modal" onclick='editThisTask("{{ $task->idTaskBoard }}", "{{ $task->taskName }}", "{{ $task->taskDueDate }}")'>Editer</a>
                                                            <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idTaskBoard) }}')">Supprimer</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="task-board-body">
                                                    <div class="kanban-info">
                                                        <div class="progress progress-xs">
                                                            <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                        <span>70%</span>
                                                    </div>
                                                    <div class="kanban-footer">
                                                        <span class="task-info-cont">
                                                            <span class="task-date"><i class="fa fa-clock-o"></i> {{ \App\Utils\Utils::getDBDateFormat($task->taskDueDate, true) }}</span>
                                                        </span>
                                                        <span class="task-users">
                                                            @if ($task->idTaskPriority === 1)
                                                                {{--                                                                Hight--}}
                                                                <span class="task-priority badge bg-danger text-white">{{ $task->taskPriorityName }}</span>
                                                            @elseif ($task->idTaskPriority === 2)
                                                                {{--                                                                Normal--}}
                                                                <span class="task-priority badge bg-warning text-white">{{ $task->taskPriorityName }}</span>
                                                                {{--                                                                Low--}}
                                                            @else
                                                                <span class="task-priority badge bg-success text-white">{{ $task->taskPriorityName }}</span>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="add-new-task">
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#add_task_modal" onclick="addTaskOnThisTaskType(1)">Ajouter une tâche</a>
                            </div>
                        </div>
                        <div class="kanban-list kanban-info">
                            <div class="kanban-header">
                                <span class="status-title">En cours <i class="la la-angle-right"></i> <span id="counter2">{{ $tasks->where('idTaskType', '2')->count() }}</span></span>
                            </div>
                            <div class="kanban-wrap" id="kanban-wrap-2">
                                @foreach($tasks as $task)
                                    @if ($task->idTaskType == 2)
                                        <div id="{{ $hashids->encode($task->idTaskBoard) }}" class="card panel">
                                            <div class="kanban-box">
                                                <div class="task-board-header">
                                                    <span class="status-title">{{ $task->taskName }}</span>
                                                    <div class="dropdown kanban-task-action">
                                                        <a href="#" data-toggle="dropdown">
                                                            <i class="fa fa-angle-down"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_task_modal" onclick='editThisTask("{{ $task->idTaskBoard }}", "{{ $task->taskName }}", "{{ $task->taskDueDate }}")'>Editer</a>
                                                            <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idTaskBoard) }}')">Supprimer</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="task-board-body">
                                                    <div class="kanban-info">
                                                        <div class="progress progress-xs">
                                                            <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                        <span>70%</span>
                                                    </div>
                                                    <div class="kanban-footer">
                                                        <span class="task-info-cont">
                                                            <span class="task-date"><i class="fa fa-clock-o"></i> {{ \App\Utils\Utils::getDBDateFormat($task->taskDueDate, true) }}</span>
                                                        </span>
                                                        <span class="task-users">
                                                           @if ($task->idTaskPriority === 1)
                                                                {{--                                                                Hight--}}
                                                                <span class="task-priority badge bg-danger text-white">{{ $task->taskPriorityName }}</span>
                                                            @elseif ($task->idTaskPriority === 2)
                                                                {{--                                                                Normal--}}
                                                                <span class="task-priority badge bg-warning text-white">{{ $task->taskPriorityName }}</span>
                                                                {{--                                                                Low--}}
                                                            @else
                                                                <span class="task-priority badge bg-success text-white">{{ $task->taskPriorityName }}</span>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="add-new-task">
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#add_task_modal" onclick="addTaskOnThisTaskType(2)">Ajouter une tâche</a>
                            </div>
                        </div>
                        <div class="kanban-list kanban-success">
                            <div class="kanban-header">
                                <span class="status-title">Terminée <i class="la la-angle-right"></i> <span id="counter3">{{ $tasks->where('idTaskType', '3')->count() }}</span></span>
                            </div>
                            <div class="kanban-wrap" id="kanban-wrap-3">
                                @foreach($tasks as $task)
                                    @if ($task->idTaskType == 3)
                                        <div id="{{ $hashids->encode($task->idTaskBoard) }}" class="card panel">
                                            <div class="kanban-box">
                                                <div class="task-board-header">
                                                    <span class="status-title">{{ $task->taskName }}</span>
                                                    <div class="dropdown kanban-task-action">
                                                        <a href="#" data-toggle="dropdown">
                                                            <i class="fa fa-angle-down"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_task_modal" onclick='editThisTask("{{ $task->idTaskBoard }}", "{{ $task->taskName }}", "{{ $task->taskDueDate }}")'>Editer</a>
                                                            <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idTaskBoard) }}')">Supprimer</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="task-board-body">
                                                    <div class="kanban-info">
                                                        <div class="progress progress-xs">
                                                            <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                        <span>70%</span>
                                                    </div>
                                                    <div class="kanban-footer">
                                                        <span class="task-info-cont">
                                                            <span class="task-date"><i class="fa fa-clock-o"></i> {{ \App\Utils\Utils::getDBDateFormat($task->taskDueDate, true) }}</span>
                                                        </span>
                                                        <span class="task-users">
                                                            @if ($task->idTaskPriority === 1)
                                                                {{--                                                                Hight--}}
                                                                <span class="task-priority badge bg-danger text-white">{{ $task->taskPriorityName }}</span>
                                                            @elseif ($task->idTaskPriority === 2)
                                                                {{--                                                                Normal--}}
                                                                <span class="task-priority badge bg-warning text-white">{{ $task->taskPriorityName }}</span>
                                                                {{--                                                                Low--}}
                                                            @else
                                                                <span class="task-priority badge bg-success text-white">{{ $task->taskPriorityName }}</span>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="add-new-task">
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#add_task_modal" onclick="addTaskOnThisTaskType(3)">Ajouter une tâche</a>
                            </div>
                        </div>

                        <div class="kanban-list kanban-warning">
                            <div class="kanban-header">
                                <span class="status-title">A revoir <i class="la la-angle-right"></i> <span id="counter3">{{ $tasks->where('idTaskType', '4')->count() }}</span></span>
                            </div>
                            <div class="kanban-wrap" id="kanban-wrap-4">
                                @foreach($tasks as $task)
                                    @if ($task->idTaskType == 4)
                                        <div id="{{ $hashids->encode($task->idTaskBoard) }}" class="card panel">
                                            <div class="kanban-box">
                                                <div class="task-board-header">
                                                    <span class="status-title">{{ $task->taskName }}</span>
                                                    <div class="dropdown kanban-task-action">
                                                        <a href="#" data-toggle="dropdown">
                                                            <i class="fa fa-angle-down"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_task_modal" onclick='editThisTask("{{ $task->idTaskBoard }}", "{{ $task->taskName }}", "{{ $task->taskDueDate }}")'>Editer</a>
                                                            <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idTaskBoard) }}')">Supprimer</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="task-board-body">
                                                    <div class="kanban-info">
                                                        <div class="progress progress-xs">
                                                            <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                        </div>
                                                        <span>70%</span>
                                                    </div>
                                                    <div class="kanban-footer">
                                                        <span class="task-info-cont">
                                                            <span class="task-date"><i class="fa fa-clock-o"></i> {{ \App\Utils\Utils::getDBDateFormat($task->taskDueDate, true) }}</span>
                                                        </span>
                                                        <span class="task-users">
                                                            @if ($task->idTaskPriority === 1)
                                                                {{--                                                                Hight--}}
                                                                <span class="task-priority badge bg-danger text-white">{{ $task->taskPriorityName }}</span>
                                                            @elseif ($task->idTaskPriority === 2)
                                                                {{--                                                                Normal--}}
                                                                <span class="task-priority badge bg-warning text-white">{{ $task->taskPriorityName }}</span>
                                                                {{--                                                                Low--}}
                                                            @else
                                                                <span class="task-priority badge bg-success text-white">{{ $task->taskPriorityName }}</span>
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="add-new-task">
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#add_task_modal" onclick="addTaskOnThisTaskType(4)">Ajouter une tâche</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Assign User Modal -->
        <div id="assign_user" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajouter un follower à votre taskboard</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="input-group m-b-30">
                            <select class="form-control search-input">
                                <option>Rechercher un utilisateur</option>
                                <option>Rechercher un utilisateur</option>
                                
                            </select>
                            {{-- <input placeholder="Rechercher un utilisateur" class="form-control search-input" type="text"> --}}
                            {{-- <span class="input-group-append">
									<button class="btn btn-primary">Rechercher</button>
								</span> --}}
                        </div>
                        <div>
                            <ul class="chat-user-list">
                                <li>
                                    {{-- <a href="#">
                                        <div class="media">
                                            <span class="avatar"><img alt="" src=" {{ asset('/img/profiles/avatar-09.jpg') }} "></span>
                                            <div class="media-body align-self-center text-nowrap">
                                                <div class="user-name">Richard Miles</div>
                                                <span class="designation">Web Developer</span>
                                            </div>
                                        </div>
                                    </a> --}}
                                </li>

                            </ul>
                        </div>
                        <div class="submit-section">
                            <button class="btn btn-primary submit-btn">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Assign User Modal -->

        <!-- Add Task Modal -->
        <div id="add_task_modal" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Ajout d'une tâche</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false;" autocomplete="off" method="post">
                            <div class="form-group">
                                <label for="taskName">Nom de la tâche</label>
                                <input type="text" class="form-control" id="taskName">
                            </div>
                            <div class="form-group">
                                <label for="idTaskPriority">Priorité de la tâche</label>
                                <select class="form-control select" id="idTaskPriority">
                                    <option>Selectionnez une priorité</option>
                                    @foreach ($priorities as $priority)
                                        <option value="{{ $priority->idTaskPriority }}">Priorité {{ $priority->taskPriorityName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="taskDueDate">Date d'échéance</label>
                                <div class="cal-icon"><input class="form-control datetimepicker" type="text" id="taskDueDate"></div>
                            </div>
                            <div class="submit-section text-center">
                                <button class="btn btn-primary submit-btn" onclick="storeNewTask()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Task Modal -->

        <!-- Edit Task Modal -->
        <div id="edit_task_modal" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edition de la tâche</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false" method="post">
                            <div class="form-group">
                                <label>Nom de la tâche</label>
                                <input type="text" class="form-control" value="Website Redesign" id="taskNameEdit">
                            </div>
                            <div class="form-group">
                                <label for="idTaskPriorityEdit">Priorité de la tâche</label>
                                <select class="form-control select" id="idTaskPriorityEdit">
                                    <option>Selectionnez une priorité</option>
                                    @foreach ($priorities as $priority)
                                        <option value="{{ $priority->idTaskPriority }}">Priorité {{ $priority->taskPriorityName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="taskDueDateEdit">Date d'échéance</label>
                                <div class="cal-icon"><input class="form-control datetimepicker" type="text" id="taskDueDateEdit"></div>
                            </div>

                            <div class="submit-section text-center">
                                <button class="btn btn-primary submit-btn" onclick="submitTaskEditing()">Editer</button>
                            </div>

                            <input type="hidden" id="idTaskBoard" style="display: none; z-index: -9999; position:absolute;">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Task Modal -->
        {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')
    <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('js/jquery.ui.touch-punch.min.js') }}"></script>

    <script src="{{ asset('js/select2.min.js') }}"></script>
    <!-- Datetimepicker JS -->
    <script src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>

    <script type="text/javascript">

        let counter1 = $('#counter1');
        let counter2 = $('#counter2');
        let counter3 = $('#counter3');
        let counter4 = $('#counter4');
        let taskNameEdit = $('#taskNameEdit');
        let idTaskBoardEdit = $('#idTaskBoard');
        let taskDueDateEdit = $('#taskDueDateEdit');
        let idTaskPriorityEdit = $('#idTaskPriorityEdit');

        let variableTaskType = null;

        function addTaskOnThisTaskType(idTaskType){
            variableTaskType = idTaskType;
        }

        function storeNewTask(){
            let taskName = $('#taskName');
            let taskDueDate = $('#taskDueDate');
            let idTaskPriority = $('#idTaskPriority');

            if(taskName.val().length > 3 && taskDueDate.val().length === 10){
                if($.isNumeric(idTaskPriority.val())){
                    if(variableTaskType!=null){
                        $.ajax({
                            type: 'POST',
                            url: '{{ route("root-storeTask") }}',
                            data: {
                                idTaskType: variableTaskType,
                                idTaskPriority: idTaskPriority.val(),
                                taskName: taskName.val(),
                                taskDueDate: taskDueDate.val(),
                                _token: $('input[name="_token"]').val()
                            },

                            success: function (result) {
                                if (result === '1') {
                                    swalWithBootstrapButtons.fire({
                                        title: 'Good Job',
                                        text: 'Tâche ajoutée avec succès !',
                                        type: 'success',
                                        showConfirmButton: true,
                                        confirmButtonText: 'D\'accord'
                                    }).then((action) => {
                                        window.location.reload();
                                    });
                                } else {
                                    console.log(result);
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Echec de l\'opération',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'Hummmm'
                                    })
                                }
                            },

                            error: function (error) {

                                console.log(error);
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Echec de chargement',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'Hummmm'
                                })
                            }
                        })
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Type de tâche indéfinie !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'Réessayez'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Veuillez choisir la priorité de la tâche',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez renseigner tous les champs',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }

        }

        function editThisTask(idTaskBoard, taskName, taskDueDate) {
            idTaskBoardEdit.val(idTaskBoard);
            taskNameEdit.val(taskName);
            taskDueDateEdit.val(taskDueDate);
        }

        function deleteThisTask(idTaskBoard){
            swalWithBootstrapButtons.fire({
                title: 'Un instant',
                text: 'Etes vous sûr de vouloir supprimer cette tâche ?',
                type: 'warning',
                showConfirmButton: true,
                showCancelButton: true,
                confirmButtonText: 'Non',
                cancelButtonText: 'Oui ! Supprimé'
            }).then((action)=>{
                if (action.dismiss==="cancel") {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route("root-deleteTask") }}',
                        data: {
                            idTaskBoard: idTaskBoard,
                            _token: $('input[name="_token"]').val()
                        },

                        success: function (result) {
                            if (result === '1') {
                                swalWithBootstrapButtons.fire({
                                    title: 'Good Job',
                                    text: 'Tâche supprimée avec succès !',
                                    type: 'success',
                                    showConfirmButton: true,
                                    confirmButtonText: 'D\'accord'
                                }).then((state)=>{
                                    window.location.reload();
                                });
                            } else {
                                console.log(result);
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Echec de l\'opération',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'Hummmm'
                                })
                            }
                        },

                        error: function (error) {
                            console.log(error);
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Echec de chargement',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'Hummmm'
                            })
                        }
                    });
                }
            })
        }

        function submitTaskEditing() {
            if(taskNameEdit.val().length > 3 && taskDueDateEdit.val().length === 10){
               if($.isNumeric(idTaskPriorityEdit.val())){
                   $.ajax({
                       type: 'POST',
                       url: '{{ route("root-editTask") }}',
                       data: {
                           idTaskBoard: idTaskBoardEdit.val(),
                           idTaskPriority: idTaskPriorityEdit.val(),
                           taskName: taskNameEdit.val(),
                           taskDueDate: taskDueDateEdit.val(),
                           _token: $('input[name="_token"]').val()
                       },

                       success: function (result) {
                           if (result === '1') {
                               swalWithBootstrapButtons.fire({
                                   title: 'Good Job',
                                   text: 'Tâche editée avec succès !',
                                   type: 'success',
                                   showConfirmButton: true,
                                   confirmButtonText: 'D\'accord'
                               }).then((action) => {
                                   window.location.reload();
                               });
                           } else {
                               console.log(result);
                               swalWithBootstrapButtons.fire({
                                   title: 'Oops',
                                   text: 'Echec de l\'opération',
                                   type: 'error',
                                   showCancelButton: true,
                                   showConfirmButton: false,
                                   cancelButtonText: 'Hummmm'
                               })
                           }
                       },

                       error: function (error) {

                           console.log(error);
                           swalWithBootstrapButtons.fire({
                               title: 'Oops',
                               text: 'Echec de chargement',
                               type: 'error',
                               showCancelButton: true,
                               showConfirmButton: false,
                               cancelButtonText: 'Hummmm'
                           })
                       }
                   })
               } else{
                   swalWithBootstrapButtons.fire({
                       title: 'Oops',
                       text: 'Veuillez choisir la priorité de la tâche',
                       type: 'error',
                       showCancelButton: true,
                       showConfirmButton: false,
                       cancelButtonText: 'D\'accord'
                   })
               }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez renseigner tous les champs',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

        let kanbanWrap1 = $('#kanban-wrap-1');
        let kanbanWrap2 = $('#kanban-wrap-2');
        let kanbanWrap3 = $('#kanban-wrap-3');
        let kanbanWrap4 = $('#kanban-wrap-4');

        let kanbanWrap1_Children = 0;
        let kanbanWrap2_Children = 0;
        let kanbanWrap3_Children = 0;
        let kanbanWrap4_Children = 0;

        let allTasksCount = 0;
        let tasksProgressBar = $('#tasksProgressBar');
        let tasksProgressCount = $('#tasksProgressCount');

        $(document).ready(function () {
            miniSidebar();
            kanbanWrap1_Children = getKanbanChildren(kanbanWrap1);
            kanbanWrap2_Children = getKanbanChildren(kanbanWrap2);
            kanbanWrap3_Children = getKanbanChildren(kanbanWrap3);
            kanbanWrap4_Children = getKanbanChildren(kanbanWrap4);

            allTasksCount = kanbanWrap1_Children + kanbanWrap2_Children + kanbanWrap3_Children + kanbanWrap4_Children;
            updateProgress();
        });

        kanbanWrap1.on('DOMSubtreeModified', function(){
            let childrenCount = getKanbanChildren(kanbanWrap1);
            //child is add or remove
            if (kanbanWrap1_Children < childrenCount){
                //Wait 1/2sec before make request
                setTimeout(function () {
                    makeRequest ('{{ $hashids->encode(1) }}', kanbanWrap1);
                    updateProgress();
                }, 500);
            }
            kanbanWrap1_Children = childrenCount;
            counter1.text(childrenCount);
        });

        kanbanWrap2.on('DOMSubtreeModified', function(){
            let childrenCount = getKanbanChildren(kanbanWrap2);
            //child is add or remove
            if (kanbanWrap2_Children < childrenCount){
                //Wait 1/2sec before make request
                setTimeout(function () {
                    makeRequest ('{{ $hashids->encode(2) }}', kanbanWrap2);
                    updateProgress();
                }, 500);
            }
            kanbanWrap2_Children = childrenCount;
            counter2.text(childrenCount);
        });

        kanbanWrap3.on('DOMSubtreeModified', function(){
            let childrenCount = getKanbanChildren(kanbanWrap3);
            //child is add or remove
            if (kanbanWrap3_Children < childrenCount){
                //Wait 1/2sec before make request
                setTimeout(function () {
                    makeRequest ('{{ $hashids->encode(3) }}', kanbanWrap3);
                    updateProgress();
                }, 500);
            }
            kanbanWrap3_Children = childrenCount;
            counter3.text(childrenCount);
        });

        kanbanWrap4.on('DOMSubtreeModified', function(){
            let childrenCount = getKanbanChildren(kanbanWrap4);
            //child is add or remove
            if (kanbanWrap4_Children < childrenCount){
                //Wait 1/2sec before make request
                setTimeout(function () {
                    makeRequest ('{{ $hashids->encode(4) }}', kanbanWrap4);
                    updateProgress();
                }, 500);
            }
            kanbanWrap4_Children = childrenCount;
            counter4.text(childrenCount);
        });

        // make request to server to update tasks
        function makeRequest(taskType, kanbanWrap){
            taskBoardIds = getKanbanItems(kanbanWrap);
            console.log(taskBoardIds);
            $.ajax({
                type: 'POST',
                url: '{{ route("root-moveTask") }}',
                data: {
                    idTaskType: taskType,
                    taskBoardIds: getKanbanItems(kanbanWrap),
                    _token: $('input[name="_token"]').val()
                },

                success: function (result) {
                    console.log(result);
                },

                error: function (error) {
                    console.log(error);
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Echec de l\'opération',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'Hummmm'
                    })
                }
            })
        }

        //update master task progression
        function updateProgress(){
            let x = parseInt(
                100*(
                    (getKanbanChildren(kanbanWrap3) + (getKanbanChildren(kanbanWrap2)/2) + (getKanbanChildren(kanbanWrap4)/3)) / allTasksCount
                )
            );
            tasksProgressCount.text(x+'%');
            if(x >=70){
                tasksProgressBar.css({
                    'width':x+'%'
                });

                if (!tasksProgressBar.hasClass('bg-success')){
                    tasksProgressBar.removeClass('bg-info');
                    tasksProgressBar.removeClass('bg-danger');

                    tasksProgressBar.addClass('bg-success');
                }
            } else if( x >= 50){
                tasksProgressBar.css({
                    'width':x+'%'
                });

                if (!tasksProgressBar.hasClass('bg-info')){
                    tasksProgressBar.removeClass('bg-danger');
                    tasksProgressBar.removeClass('bg-success');

                    tasksProgressBar.addClass('bg-info');
                }
            } else{
                tasksProgressBar.css({
                    'width':x+'%'
                });

                if (!tasksProgressBar.hasClass('bg-danger')){
                    tasksProgressBar.removeClass('bg-info');
                    tasksProgressBar.removeClass('bg-success');

                    tasksProgressBar.addClass('bg-danger');
                }
            }
        }

        //return the children count
        function getKanbanChildren(kanbanWrap) {
            let children = 0;
            kanbanWrap.find(".card").each(function () { children++; });
            return children;
        }

        // return array who contains children ids
        function getKanbanItems(kanbanWrap){
            let childrens = [];
            kanbanWrap.find(".card").each(function (index) {
                childrens[index] = $(this).attr("id");
            });
            return childrens;
        }

        function miniSidebar(){
            if($('body').hasClass('mini-sidebar')) {
                $('body').removeClass('mini-sidebar');
                $('.subdrop + ul').slideDown();

                $('#img-logo').css({
                    'margin-left':'10px'
                })
                $('#text-logo').delay(100).fadeIn();
            } else {
                $('body').addClass('mini-sidebar');
                $('.subdrop + ul').slideUp();
                $('#text-logo').hide();
                $('#img-logo').css({
                    'width':'50px !important',
                    'height':'50px !important',
                    'margin-left':'-15px'
                });

            }
        }
    </script>
@endsection