@extends('both.template')
@section('title', 'TACHES PROJETS | 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') }}">
    <!-- Summernote CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/summernote/dist/summernote-bs4-me.css') }}">
@endsection

@section('content')

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar2">
        <div class="sidebar-inner ">
            <div class="sidebar-menu">

                <ul>
                    <li class="text-center">
                        <span class="display-projects pointerCursor text-center">
                            <i class="la la-caret-square-o-left" style="font-size: 3em"></i>
                        </span>
                    </li>
                    <li class=" text-center" style="margin: 10px 0 20px 0">
                        Listing des projets
                    </li>
                    @foreach($projects as $project)
                        <li>
                            <a href="javascript:void(0)" class="projectSidebarLink" id="{{ $hashids->encode($project->idProjectList)  }}" onclick="loadThisProjectTasksDetails('{{ $hashids->encode($project->idProjectList)  }}')" style="font-size: 1.5em; font-weight: 700">
                                <i class="la la-archive" style="display: inline-block; margin-right: 10px"></i> {{ $project->projectName }}
                            </a>
                        </li>
                        
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <!-- /Sidebar -->.

    <div id="viewerLoader" style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            width: 100vw;
            height: 100vh;
            bottom: 0;
            right: 0;
           	background-color: transparent;
            overflow: hidden;
            transition: .64s ease-in-out;">
        <img alt src="{{ asset('img/loading.gif') }}">
    </div>

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="chat-main-row" id="tasksViewer" style="padding-top: 40px;">

        </div>

        <!-- Task Followers Modal -->
        <div id="task_followers" 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">Add followers to this task</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="Search to add" class="form-control search-input" type="text">
                            <span class="input-group-append">
										<button class="btn btn-primary">Search</button>
									</span>
                        </div>
                        <div>
                            <ul class="chat-user-list">
                                <li>
                                    <a href="#">
                                        <div class="media">
                                            <span class="avatar"><img alt="" src="assets/img/profiles/avatar-16.jpg"></span>
                                            <div class="media-body media-middle text-nowrap">
                                                <div class="user-name">Jeffery Lalor</div>
                                                <span class="designation">Team Leader</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="media">
                                            <span class="avatar"><img alt="" src="assets/img/profiles/avatar-08.jpg"></span>
                                            <div class="media-body media-middle text-nowrap">
                                                <div class="user-name">Catherine Manseau</div>
                                                <span class="designation">Android Developer</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="media">
                                            <span class="avatar"><img alt="" src="https://dreamguys.co.in/smarthr/light/assets/img/profiles/avatar-26.jpg"></span>
                                            <div class="media-body media-middle text-nowrap">
                                                <div class="user-name">Wilmer Deluna</div>
                                                <span class="designation">Team Leader</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="submit-section">
                            <button class="btn btn-primary submit-btn">Add to Follow</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Task Followers Modal -->
        {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')


    <script type="text/javascript">
        $(document).ready(function(){
            loadThisProjectTasksDetails('{{ $hashids->encode($projects->first()->idProjectList) }}')
        });

        let tasksViewer = $('#tasksViewer');
        let viewerLoader = $('#viewerLoader');
        let projectSidebarLink = $('.projectSidebarLink');

        function loadThisProjectTasksDetails(idProject){

            tasksViewer.fadeOut();
            viewerLoader.fadeIn(); 

            projectSidebarLink.css({"color":"#000"});
            $('#'+idProject).css({"color":"#2dc3e8"});

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

                success: function (result) {
                    tasksViewer.empty();
                    tasksViewer.html(result);
                    viewerLoader.fadeOut();
                    tasksViewer.fadeIn();
                    // console.log(result);

                },

                error: function (error) {
                    viewerLoader.fadeOut();
                    console.log(error);
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Echec de chargement',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'Hummmm'
                    })
                }
            });
        }
    </script>
@endsection