@extends('both.template')
@section('title', 'DETAILS PROJET | 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">
                <input type="hidden" name="projectid" id="projectid" value="{{$project->idProjectList}}">
                <input type="hidden" name="idprojecttaskboard" id="idprojecttaskboard" value="{{$ids->idProjectTaskBoard}}">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">{{ $project->projectName }}</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/root/projects/') }}">Projets</a></li>
                            <li class="breadcrumb-item active">Details Projet</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <!-- <a href="#" class="btn add-btn" data-toggle="modal" data-target="#edit_project"><i class="fa fa-plus"></i> Editer ce projet</a> -->
                        <a href="javascript:void(0);" class="btn btn-white float-right m-r-10" data-toggle="tooltip" title="Task Board"><i class="fa fa-bars"></i></a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->
            <script type="text/javascript" src="{{ asset('/js/jquery.countdown.min.js') }}"></script>
            <div class="row">
                <div class="col-lg-8 col-xl-9">
                    <div class="card">
                        <div class="card-body">
                            <div class="project-title">
                                <h5 class="card-title">Projet {{  $project->projectName }}</h5>
                                <small class="block text-ellipsis m-b-15">
                                    <span class="text-xs">{{ $openTasks }}</span> <span class="text-muted"> {{ $openTasks>1?'Tâches ouvertes':'Tâche ouverte' }} ,
                                    </span><span class="text-xs">{{ $completeTasks }}</span> <span class="text-muted">{{ $completeTasks>1?'Tâches terminées':'Tâche terminée' }}</span>
                                </small>
                            </div>
                            <p>{!! $project->projectDescription  !!}  </p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title m-b-20">Fichiers Projets</h5>
                            <ul class="files-list">
                                @if(count($files) > 0)
                                @foreach($files as $file) 
                                    <li>
                                        <div class="files-cont">
                                            <div class="file-type">
                                                <span class="files-icon">
                                                    {!! \App\Utils\Utils::getIcon(asset('storage/fileManager/'.$file->HashName)) !!}
                                                </span>
                                            </div>
                                            <div class="files-info">
                                                <span class="file-name text-ellipsis"><a href="#">{{ $file->fileName }}</a></span>
                                                <span class="file-author"><a href="#">{{ $file->employeeFirstname.' '.$file->employeeLastname }}</a></span>
                                                <span class="file-date">{{ date('d M Y | H:i', strtotime($file->createdDate)) }}</span>
                                                <div class="file-size">
                                                    Taille:
                                                    @php
                                                        //$bytSize = Storage::size('fileManager/stickersheet-components.xd'); //For test size
                                                        $bytSize = Storage::size('fileManager/'.$file->HashName);
                                                       // echo $bytSize;
                                                        if ($bytSize/1000000 > 1)  echo (round($bytSize/1000000)).' MB';
                                                       else echo (round($bytSize/1000)).' KB';
                                                    @endphp
                                                </div>
                                            </div>
                                            <ul class="files-action">
                                                <li class="dropdown dropdown-action">
                                                    <a href="#" class="dropdown-toggle btn btn-link" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_horiz</i></a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a class="dropdown-item" href="javascript:void(0)">Télécharger</a>
                                                        <a class="dropdown-item" href="javascript:void(0)" data-toggle="modal" data-target="#share_files">Partager</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Supprimer</a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                @endforeach
                                @endif

                            </ul>
                        </div>
                    </div>
                        <div class="project-task">
                            <!-- Page Wrapper -->
                            <div class="page-wrapper">

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


                                    <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('projectIdTaskType', '1')->count() }}</span></span>
                                                    </div>
                                                    <div class="kanban-wrap" id="kanban-wrap-1">
                                                        @foreach($tasks as $task)
                                                            @if ($task->projectIdTaskType == 1)
                                                                <div id="{{ $hashids->encode($task->idProjectTaskList) }}" class="card panel">
                                                                    <div class="kanban-box">
                                                                        <div class="task-board-header">
                                                                            <span class="status-title">{{ $task->projectTaskName }}</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->idProjectTaskList }}", "{{ $task->projectTaskName }}", "{{ $task->projectTaskDueDate }}")'>Editer</a>
                                                                                    <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idProjectTaskList) }}')">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>20%</span>
                                                                            </div>
                                                                            <div class="kanban-footer">
                                                                                <span class="task-info-cont">
                                                                                    <span class="task-date"><i class="fa fa-clock-o"></i> {{ $task->projectIaskDueDate }}</span>
                                                                                   
                                                                                </span>
                                                                                <span class="task-users">
                                                                                    @if ($task->projectTaskPriority === 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->projectIaskPriorityName }}</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('projectIdTaskType', '2')->count() }}</span></span>
                                                    </div>
                                                    <div class="kanban-wrap" id="kanban-wrap-2">
                                                        @foreach($tasks as $task)
                                                            @if ($task->projectIdTaskType == 2)
                                                                <div id="{{ $hashids->encode($task->idProjectTaskList) }}" class="card panel">
                                                                    <div class="kanban-box">
                                                                        <div class="task-board-header">
                                                                            <span class="status-title">{{ $task->projectTaskName }}</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->projectIdTaskBoard }}", "{{ $task->projectTaskName }}", "{{ $task->projectTaskDueDate }}")'>Editer</a>
                                                                                    <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->projectIdTaskBoard) }}')">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>20%</span>
                                                                            </div>
                                                                            <div class="kanban-footer">
                                                                                <span class="task-info-cont">
                                                                                    <span class="task-date"><i class="fa fa-clock-o"></i> {{$task->projectTaskDueDate}}</span>
                                                                                </span>
                                                                                <span class="task-users">
                                                                                   @if ($task->projectIdTaskPriority === 1)
                                                                                        {{--                                                                Hight--}}
                                                                                        <span class="task-priority badge bg-danger text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                    @elseif ($task->projectIdTaskPriority === 2)
                                                                                        {{--                                                                Normal--}}
                                                                                        <span class="task-priority badge bg-warning text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                        {{--                                                                Low--}}
                                                                                    @else
                                                                                        <span class="task-priority badge bg-success text-white">{{ $task->projectTaskPriorityName }}</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('projectIdTaskType', '3')->count() }}</span></span>
                                                    </div>
                                                    <div class="kanban-wrap" id="kanban-wrap-3">
                                                        @foreach($tasks as $task)
                                                            @if ($task->projectIdTaskType == 3)
                                                                <div id="{{ $hashids->encode($task->idProjectTaskList) }}" class="card panel">
                                                                    <div class="kanban-box">
                                                                        <div class="task-board-header">
                                                                            <span class="status-title">{{ $task->projectTaskName }}</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->projectIdTaskBoard }}", "{{ $task->projectTaskName }}", "{{ $task->projectTaskDueDate }}")'>Editer</a>
                                                                                    <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->projectIdTaskBoard) }}')">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> {{ $task->projectTaskDueDate }}</span>
                                                                                </span>
                                                                                <span class="task-users">
                                                                                    @if ($task->projectIdTaskPriority === 1)
                                                                                        {{--                                                                Hight--}}
                                                                                        <span class="task-priority badge bg-danger text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                    @elseif ($task->projectIdTaskPriority === 2)
                                                                                        {{--                                                                Normal--}}
                                                                                        <span class="task-priority badge bg-warning text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                        {{--                                                                Low--}}
                                                                                    @else
                                                                                        <span class="task-priority badge bg-success text-white">{{ $task->projectTaskPriorityName }}</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('projectIdTaskType', '4')->count() }}</span></span>
                                                    </div>
                                                    <div class="kanban-wrap" id="kanban-wrap-4">
                                                        @foreach($tasks as $task)
                                                            @if ($task->projectIdTaskType == 4)
                                                                <div id="{{ $hashids->encode($task->idProjectTaskList) }}" class="card panel">
                                                                    <div class="kanban-box">
                                                                        <div class="task-board-header">
                                                                            <span class="status-title">{{ $task->projectTaskName }}</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->idProjectTaskList }}", "{{ $task->projectTaskName }}", "{{ $task->projectTaskDueDate }}")'>Editer</a>
                                                                                    <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisTask('{{  $hashids->encode($task->idProjectTaskList) }}')">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> {{ $task->projectTaskDueDate }}</span>
                                                                                </span>
                                                                                <span class="task-users">
                                                                                    @if ($task->projectIdTaskPriority === 1)
                                                                                        {{--                                                                Hight--}}
                                                                                        <span class="task-priority badge bg-danger text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                    @elseif ($task->projectIdTaskPriority === 2)
                                                                                        {{--                                                                Normal--}}
                                                                                        <span class="task-priority badge bg-warning text-white">{{ $task->projectTaskPriorityName }}</span>
                                                                                        {{--                                                                Low--}}
                                                                                    @else
                                                                                        <span class="task-priority badge bg-success text-white">{{ $task->projectTaskPriorityName }}</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 select" id="idFollower">
                                                        <option>Selectionnez un membre</option>
                                                        @foreach ($employees as $employee)
                                                            <option value="{{ $employee->idEmployee }}">{{ $employee->employeeLastname }} {{ $employee->employeeFirstname }}</option>
                                                        @endforeach
                                                    </select>
                                                </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" onclick="addNewFollower()">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=""><input class="form-control" type="date" 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=""><input class="form-control " type="date" 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 -->
                        

                        @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 addNewFollower(){
                                    let projectid = $('#projectid');
                                    let idFollower = $('#idFollower');

                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ route("root-addNewFollower") }}', 
                                        data: {
                                            projectid: projectid.val(),
                                            idFollower: idFollower.val(),
                                            _token: $('input[name="_token"]').val()
                                        },

                                        success: function (result) {
                                            if (result === '1') {
                                                swalWithBootstrapButtons.fire({
                                                    title: 'Good Job',
                                                    text: 'Follower 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'
                                            })
                                        }
                                    })

                                }

                                function addNewLeader(){
                                    let projectid = $('#projectid');
                                    let idLeader = $('#idLeader');

                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ route("root-addNewLeader") }}', 
                                        data: {
                                            projectid: projectid.val(),
                                            idLeader: idLeader.val(),
                                            _token: $('input[name="_token"]').val()
                                        },

                                        success: function (result) {
                                            if (result === '1') {
                                                swalWithBootstrapButtons.fire({
                                                    title: 'Good Job',
                                                    text: 'Leader ajouté 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'
                                            })
                                        }
                                    })

                                }

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

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

                                                    success: function (result) {
                                                        if (result === '1') {
                                                            swalWithBootstrapButtons.fire({
                                                                title: 'Good Job',
                                                                text: 'Tâche ajouté 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-editProjectTask") }}',
                                               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-moveProjectTask") }}',
                                        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
                    </div>
                </div>
                <div class="col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title m-b-15">Details Projet</h6>
                            <table class="table table-striped table-border">
                                <tbody>
                                <tr>
                                    <td>Projet Client</td>
                                    <td class="text-right">
                                        <strong>{{ $project->clientFullName }}</strong>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Coût:</td>
                                    <td class="text-right">
                                        <script type="text/javascript">
                                            document.write(
                                                new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $project->projectCost }}')
                                            );
                                        </script>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Création:</td>
                                    <td class="text-right">{{ date('d M Y', strtotime($project->createdDate)) }}</td>
                                </tr>
                                <tr>
                                    <td>Bornline:</td>
                                    <td class="text-right">{{  \App\Utils\Utils::getDBDateFormat($project->projectBornLine, true) }}</td>
                                </tr>
                                <tr>
                                    <td>Deadline:</td>
                                    <td class="text-right">{{  \App\Utils\Utils::getDBDateFormat($project->projectDeadLine, true) }}</td>
                                </tr>
                                <tr>
                                    <td>Décompte:</td>
                                    <td class="text-right">
                                        <span id="timer-{{ $project->idProjectList }}" style="font-weight: 700; display: block; min-width: 120px; color: #2dc3e8" class="">00<sup>J</sup>:00<sup>H</sup>:00<sup>M</sup>:00<sup>S</sup></span>
                                    </td>

                                    <script type="text/javascript">
                                        $('#timer-{{ $project->idProjectList }}').countdown('{{ \App\Utils\Utils::getDBDateFormat($project->projectDeadLine, false) }}', function(event) {
                                            $(this).html(event.strftime(
                                                '%D<sup>J</sup>:%H<sup>H</sup>:%M<sup>M</sup>:%S<sup>S</sup>'
                                            ));
                                        });
                                    </script>

                                </tr>
                                <tr>
                                    <td>Auteur:</td>
                                    <td class="text-right"><a href="profile.html" style="color: #1b1e21;">{{ $project->employeeFirstname.' '.$project->employeeLastname }}</a></td>
                                </tr>
                                <tr>
                                    <td>Status:</td>
                                    <td class="text-right">{{ $project->projectStateName }}</td>
                                </tr>
                                </tbody>
                            </table>
                            <p class="m-b-5">Progress <span class="text-success float-right">40%</span></p>
                            <div class="progress progress-xs mb-0">
                                <div class="progress-bar bg-success" role="progressbar" data-toggle="tooltip" title="40%" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card project-user">
                        <div class="card-body">
                            <h6 class="card-title m-b-20">Leaders Projet <button type="button" class="float-right btn btn-primary btn-sm" data-toggle="modal" data-target="#assign_leader"><i class="fa fa-plus"></i> Ajouter</button></h6>
                            <ul class="list-box">
                                @php $leads = 0; @endphp
                                @foreach($authors as $author)
                                    @if ($author->isLeader === 1)
                                        @php $leads++; @endphp
                                        <li>
                                            <a href="profile.html">
                                                <div class="list-item">
                                                    <div class="list-left">
                                                        <span class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/'.$author->employerProfile.'') }}"></span>
                                                    </div>
                                                    <div class="list-body">
                                                        <span class="message-author">{{ $author->employeeFirstname.' '.$author->employeeLastname }}</span>
                                                        <div class="clearfix"></div>
                                                        <span class="message-content">{{ $author->designationName }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach

                                @if ($leads == 0)
                                    <h6>Aucun leader assigné</h6>
                                @endif
                            </ul>
                        </div>
                    </div>
                    <div class="card project-user">
                        <div class="card-body">
                            <h6 class="card-title m-b-20">
                              Equipe Projet
                                <button type="button" class="float-right btn btn-primary btn-sm" data-toggle="modal" data-target="#assign_user"><i class="fa fa-plus"></i> Ajouter</button>
                            </h6>
                            <ul class="list-box">
                                @php $team = 0; @endphp
                                @foreach($authors as $author)
                                    @if ($author->isLeader === 0)
                                        @php $team++; @endphp
                                        <li>
                                            <a href="profile.html">
                                                <div class="list-item">
                                                    <div class="list-left">
                                                        <span class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/'.$author->employerProfile.'') }}"></span>
                                                    </div>
                                                    <div class="list-body">
                                                        <span class="message-author">{{ $author->employeeFirstname.' '.$author->employeeLastname }}</span>
                                                        <div class="clearfix"></div>
                                                        <span class="message-content">{{ $author->designationName }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach

                                @if ($team == 0)
                                    <h6>Aucune équipe assignée</h6>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Assign Leader Modal -->
        <div id="assign_leader" 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">Assigner un leader à ce projet</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 select" id="idLeader">
                                <option>Selectionnez un membre</option>
                                @foreach ($employees as $employee)
                                    <option value="{{ $employee->idEmployee }}">{{ $employee->employeeLastname }} {{ $employee->employeeFirstname }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <ul class="chat-user-list">
                                @foreach($authors as $author)
                                    @if ($author->isLeader === 1)
                                        <li>
                                            <a href="#">
                                                <div class="media">
                                                    <span class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/'.$author->employerProfile.'') }}"></span>
                                                    <div class="media-body align-self-center text-nowrap">
                                                        <div class="user-name">{{ $author->employeeFirstname.' '.$author->employeeLastname }}</div>
                                                        <span class="designation">{{ $author->designationName }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                        <div class="submit-section">
                            <button class="btn btn-primary submit-btn" onclick="addNewLeader()">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Assign Leader Modal -->

        <!-- 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 employé à l'équipe projet</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">
                            <input placeholder="Renseigner le nom de l'employé" 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">
                                @foreach($authors as $author)
                                    @if ($author->isLeader === 0)
                                        <li>
                                            <a href="#">
                                                <div class="media">
                                                    <span class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/'.$author->employerProfile.'') }}"></span>
                                                    <div class="media-body align-self-center text-nowrap">
                                                        <div class="user-name">{{ $author->employeeFirstname.' '.$author->employeeLastname }}</div>
                                                        <span class="designation">{{ $author->designationName }}</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                        <div class="submit-section">
                            <button class="btn btn-primary submit-btn">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Assign User Modal -->

        <!-- Edit Project Modal -->
        <div id="edit_project" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Project</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Project Name</label>
                                        <input class="form-control" value="Project Management" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Client</label>
                                        <select class="select">
                                            <option>Global Technologies</option>
                                            <option>Delta Infotech</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <div class="cal-icon">
                                            <input class="form-control" type="date">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <div class="cal-icon">
                                            <input class="form-control " type="date">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Rate</label>
                                        <input placeholder="$50" class="form-control" value="$5000" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <select class="select">
                                            <option>Hourly</option>
                                            <option selected>Fixed</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Priority</label>
                                        <select class="select">
                                            <option selected>High</option>
                                            <option>Medium</option>
                                            <option>Low</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Add Project Leader</label>
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Team Leader</label>
                                        <div class="project-members">
                                            <a class="avatar" href="#" data-toggle="tooltip" title="Jeffery Lalor">
                                                <img alt="" src="assets/img/profiles/avatar-16.jpg">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Add Team</label>
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Team Members</label>
                                        <div class="project-members">
                                            <a class="avatar" href="#" data-toggle="tooltip" title="John Doe">
                                                <img alt="" src="assets/img/profiles/avatar-02.jpg">
                                            </a>
                                            <a class="avatar" href="#" data-toggle="tooltip" title="Richard Miles">
                                                <img alt="" src="assets/img/profiles/avatar-09.jpg">
                                            </a>
                                            <a class="avatar" href="#" data-toggle="tooltip" title="John Smith">
                                                <img alt="" src="assets/img/profiles/avatar-10.jpg">
                                            </a>
                                            <a class="avatar" href="#" data-toggle="tooltip" title="Mike Litorus">
                                                <img alt="" src="assets/img/profiles/avatar-05.jpg">
                                            </a>
                                            <span class="all-team">+2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea rows="4" class="form-control" placeholder="Enter your message here"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Upload Files</label>
                                <input class="form-control" type="file">
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Project Modal -->

    </div>
    <!-- /Page Wrapper -->

@endsection

@section('scriptsSheets')
    <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>
    <!-- Task JS -->
    <script src="{{ asset('js/task.js') }}"></script>

    <script type="text/javascript">
    </script>
@endsection