@extends('layouts.admin-base')

@section('css')
    <!-- This Page CSS -->
    <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}">
    <!-- Custom CSS -->
	<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/quill/dist/quill.snow.css')}}">
    <!-- Custom CSS -->
    <link href="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.css')}}" rel="stylesheet">

@endsection

@section('under-header')

<div style="margin-bottom:0;" class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <div class="page-breadcrumb border-bottom">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
                <h5 class="font-medium  mb-0">Liste des tâches</h5>
            </div>
            <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                <!--button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample En cours</button-->
                <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                    <ol class="breadcrumb mb-0 justify-content-end p-0">
                        <li class="breadcrumb-item">{{ $activity->name }}</li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $activity->project->name }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Container fluid  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- footer -->
    <!-- ============================================================== -->


@endsection

@section('content')

    <div class="page-content container-fluid">

        <div class="card-group">

            <div class="card rounded-lg p-2 p-lg-3 mr-2">
                <div class="p-lg-3 p-2">
                    <div class="d-flex align-items-center">
                        <button class="btn btn-circle btn-cyan text-white btn-lg" href="javascript:void(0)">
                            <i class="mdi mdi-calendar-check"></i>
                        </button>
                        <div class="ml-4">
                            <h5 class="font-bold">Date de début de l'activité</h5>
                            <span class="h3 text-primary">
                                {{ date('d/m/Y H:i', strtotime($activity->start_date)) }}
                            </span>
                            <input type="hidden" id="activity_start_date" value="{{ $activity->start_date}}" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="card rounded-lg p-2 p-lg-3 mx-2">
                <div class="p-lg-3 p-2">
                    <div class="d-flex align-items-center">
                        <button class="btn btn-circle btn-danger text-white btn-lg" href="javascript:void(0)">
                            <i class="mdi mdi-calendar-clock"></i>
                        </button>
                        <div class="ml-4">
                            <h5 class="font-bold">Date limite de l'activité</h5>
                            <span class="h3 text-danger">
                                {{ date('d/m/Y H:i', strtotime($activity->end_date)) }}
                            </span>
                            <input type="hidden" id="activity_end_date" value="{{ $activity->end_date }}" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="card p-2 p-lg-3 ml-2">
                <div class="p-lg-3 p-2">
                    <div class="d-flex align-items-center">
                        <button class="btn btn-circle btn-cyan text-white btn-lg" href="javascript:void(0)">
                            <i class="ti-stats-up"></i>
                        </button>
                        <div class="ml-4" style="width: 38%;">
                            <h4 class="font-light">Evolution</h4>
                            <div class="progress">
                                <div class="progress-bar bg-cyan" role="progressbar" style="width: {{ $activity->percentage }}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                            </div>
                        </div>
                        <div class="ml-auto">
                            <h2 class="display-7 mb-0">{{ $activity->percentage }}%</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-12">
                <div class="material-card card">
                <h4 class="col-12 col-lg-6 card-title" style="margin : 20px">Liste des tâches - Activité : <span class="text-info font-bold">{{ $activity->name }}</span></h4>
                    <div class="card-header row align-items-center px-5 py-3 mx-0">
                        {{-- <h4 class="col-12 col-lg-6 card-title">Liste des tâches - Activité : <span class="text-info font-bold">{{ $activity->name }}</span></h4> --}}
                        <!-- <h4 class="col-12 col-lg-6 card-title">Liste des tâches - Activité : <span class="text-info font-bold">{{ $activity->name }}</span></h4> -->
                        {{-- <div class="offset-lg-3"></div> --}}
                        <div class="offset-lg-1"></div>
                        {{-- <div class="col-12 col-lg-3 mt-3"> --}}
                        <div class="col-12 col-lg-12 mt-3">
                            <div class="d-flex align-items-center justify-content-end ml-auto">
                                @if ($user_connected->id == $project->user_id)
                                    <button
                                        type="button"
                                        data-toggle="modal"
                                        data-target="#assign"
                                        class="btn btn-info text-white d-none d-md-block my-4"
                                        href=""
                                    >
                                        Associer un utilisateur
                                    </button>
                                @endif
                                <div class="modal" id="assign">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Créer</h4>
                                            </div>
                                            @php
                                                $id_users = [];
                                                foreach($users as $user)
                                                {
                                                    $id_users[] = $user->id;
                                                }
                                                // dd($id_users);
                                            @endphp
                                            <div class="modal-body">
                                                <form action="{{ route('assignation-user', ['project_id' => $project->id]) }}" method="POST">
                                                    @csrf
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Affecter un membre:</label>
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <select class="select2 form-control block" name="membres[]" multiple="multiple" style="width: 75%">
                                                                    @foreach ($allUsers as $user)
                                                                        <option
                                                                            value="{{ $user->id }}"
                                                                            @if(in_array($user->id, $id_users)) selected @endif
                                                                            @if($user_connected->id == $user->id) disabled @endif
                                                                        >
                                                                            {{ $user->username }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Annuler</button>
                                                        <button type="submit" class="btn btn-success waves-effect waves-light">Associer</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!-- Associer un utilisateur au projet fin -->

                                

                                <!-- <a href="{{ URL::previous() }}" class="btn btn-circle btn-light"><i class="ti-arrow-left"></i></a> -->
                            </div>
                            <div class="modal" id="create">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Créer</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form method="POST" action="{{ route('task_store') }}" id="task_form">
                                                @csrf
                                                <div class="form-group">
                                                    <label for="name" class="control-label">Intitulé de la tâche:</label>
                                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name">
                                                    @error('name')
                                                        <div class="invalid-feedback">
                                                            {{ $errors->first('name') }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <label for="statut" class="control-label">Statut:</label>
                                                    <select class="form-control category-select @error('statut') is-invalid @enderror" disabled name="statut" id="statut">
                                                        <option value="todo" selected>A faire</option>
                                                        <option value="done">Terminée</option>
                                                        <option value="doing">En cours</option>
                                                        <option value="late">En retard</option>
                                                    </select>
                                                    @error('statut')
                                                        <div class="invalid-feedback">
                                                            {{ $errors->first('statut') }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <label for="date" class="control-label">Date de début:</label>
                                                    <input
                                                        type="datetime-local"
                                                        name="start_date"
                                                        class="form-control @error('start_date') is-invalid @enderror"
                                                        id="date"
                                                        min="{{ $activity->start_date }}"
                                                        max="{{ $activity->end_date }}"
                                                    >
                                                    @error('start_date')
                                                        <div class="invalid-feedback">
                                                            {{ $errors->first('start_date') }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <label for="datel" class="control-label">Date limite:</label>
                                                    <input
                                                        type="datetime-local"
                                                        name="end_date"
                                                        class="form-control @error('end_date') is-invalid @enderror"
                                                        id="datel"
                                                        min="{{ $activity->start_date }}"
                                                        max="{{ $activity->end_date }}"
                                                    >
                                                    @error('end_date')
                                                        <div class="invalid-feedback">
                                                            {{ $errors->first('end_date') }}
                                                        </div>
                                                    @enderror
                                                </div>
                                                <input type="hidden" name="percentage" class="form-control" id="percentage" value="0" placeholder="">
                                                <input type="hidden" name="activity_id" class="form-control" id="activity_id" value="{{ $activity->id }}" placeholder="">
                                                <input type="hidden" name="project_id" class="form-control" id="project_id" value="{{ $activity->project->id }}" placeholder="">
                                                <div class="form-group">
                                                    <label for="" class="control-label">Affecter un membre:</label>
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <select class="select2 form-control block" name="membres[]" multiple="multiple" style="width: 75%">
                                                                <option value="{{ $user_connected->id }}">{{ $user_connected->username }}</option>
                                                                @foreach ($users as $user)
                                                                    <option value="{{ $user->id }}">{{ $user->username }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                    <button type="submit" id="create_task" class="btn btn-success waves-effect waves-light">Créer</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped border">
                                <thead>
                                    <tr>
                                        <th>N°</th>
                                        <th>Intitulé de la tâche</th>
                                        <th>Evolution</th>
                                        <th>Statut</th>
                                        <th>Date de début</th>
                                        <th>Date Limite</th>
                                        <th>Utilisateurs</th>
                                        

                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 1;
                                    @endphp
                                    @foreach ($tasks as $task)
                                    <tr>
                                        <td>{{ $i++ }}</td>
                                        <td>{{ $task->name }}</td>
                                        <td>{{ $task->percentage }}%</td>
                                        <td>{{ $task->getStatusOptions()[$task->statut] }}</td>
                                        <td>{{ date('d/m/Y H:i', strtotime($task->start_date)) }}</td>
                                        <td>{{ date('d/m/Y H:i', strtotime($task->end_date)) }}</td>
                                        <td>
                                            @foreach ($tasks_users[$task->id] as $user)
                                                <img class="user_photo" src="
                                                @if($user->photo == null)
                                                    {{ asset('assets/images/users/1.jpg') }}    
                                                @else
                                                 {{config('app.aws_url').$user->photo}}
                                                @endif
                                                " alt="user_tof" width="40" class="rounded-circle">  {{ $user->username }} ; <br>
                                            @endforeach
                                        </td>
                                        
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>N°</th>
                                        <th>Intitulé de la tâche</th>
                                        <th>Evolution</th>
                                        <th>Statut</th>
                                        <th>Date de début</th>
                                        <th>Date Limite</th>
                                        <th>Utilisateurs</th>
                                        
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@section('script')
    <!-- This Page JS -->
    <script src="{{asset('assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/forms/select2/select2.init.js')}}"></script>
    <!--This page JavaScript -->
    <script src="{{asset('dist/js/pages/notes/notes.js')}}"></script>
    <script src="{{asset('assets/libs/quill/dist/quill.min.js')}}"></script>
    <!-- Initialize Quill editor -->
    <script src="{{asset('dist/js/pages/todo/todo.js')}}"></script>

    <!--This page plugins -->
    <script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/datatable/datatable-basic.init.js')}}"></script>
    <script src="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/toastr/toastr-init.js')}}"></script>
    <script src="{{asset('dist/js/custom.min.js')}}"></script>
    <script>
        let images = document.getElementsByClassName('user_photo');
        for(let i=0; i < images.length; i++){
            if(images[i].height <= 16 ){
                images[i].src = "{{asset('assets/avatars/user.jpg')}}"
            }
        }

    </script>
    <!-- <script>

        if(@json(session('statut'), JSON_PRETTY_PRINT)){
            toastr.success('{{session('statut')}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
        if(@json(session('erreur'), JSON_PRETTY_PRINT)){
            toastr.error('{{session('erreur')}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
        if(@json($errors->any(), JSON_PRETTY_PRINT)){
            toastr.error('{{$errors->first()}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 7000})
        }
 //hefr
    </script> -->

    <script>
        $(function() {

            document.getElementById("create_task").addEventListener("click", function(event) {
                event.preventDefault();

                let start_date = document.getElementsByName("start_date")[0].value.replace('T',' ');
                //let start_date_latest = document.getElementsByName("start_date_latest")[0].value;
                let end_date = document.getElementsByName("end_date")[0].value.replace('T',' ');
                let activity_start_date = document.getElementById("activity_start_date").value;
                let activity_end_date = document.getElementById("activity_end_date").value;
                //let end_date_latest = document.getElementsByName("end_date_latest")[0].value;
                let title = document.getElementById("name").value;
                console.log(title);
                console.log(start_date);
                console.log(activity_start_date);
                console.log(end_date);
                console.log(activity_end_date);

                if( title && start_date <= end_date && activity_start_date <= start_date && activity_end_date >= end_date){
                    document.getElementById('task_form').submit();
                    //toastr.success('Ajout réussi', 'Succès')

                }
                else{
                    if(start_date > end_date){
                        toastr.error('La date de début doit être inférieure à la date limite', 'Contrainte de date non respectée')
                    }
                    else if(end_date > activity_end_date){
                        toastr.error('La date limite de la tâche doit être inférieure ou égale à la date limite de l\'activité', 'Erreur')
                    }
                    else if(start_date < activity_start_date){
                        toastr.error('La date de début de la tâche doit être supérieure ou égale à la date de début de l\'activité', 'Erreur')
                    }
                    else if (title == "")
                    {
                        toastr.error('Veuillez renseigner un nom pour la tâche !', 'Erreur')
                    }
                }
            });
        }())
    </script>

    <script>
        function modify(clicked_id)
        {
            event.preventDefault();
            //alert(event.srcElement.id);
            console.log(clicked_id);
            let theid = clicked_id.split('-')[1];
            //document.getElementById(clicked_id).addEventListener("click", function(event) {
                //event.preventDefault();

                console.log(document.getElementById("start_date"+ theid));
                    let start_date = document.getElementById("start_date"+ theid).value.replace('T',' ');
                    //let start_date_latest = document.getElementsByName("start_date_latest")[0].value;
                    let end_date = document.getElementById("end_date"+ theid).value.replace('T',' ');
                    let activity_start_date = document.getElementById("activity_start_date").value;
                    let activity_end_date = document.getElementById("activity_end_date").value;
                    //let end_date_latest = document.getElementsByName("end_date_latest")[0].value;
                    let task_percentage = document.getElementById("percentage"+ theid).value;
                    let title = document.getElementById("name"+theid).value;
                    console.log(task_percentage);
                    console.log(start_date);
                    console.log(activity_start_date);
                    console.log(end_date);
                    console.log(activity_end_date);

                    if( title && start_date < end_date && activity_start_date <= start_date && activity_end_date >= end_date && task_percentage <=100 && task_percentage >=0){
                        document.getElementById("modify_task_form"+ theid).submit();
                        //toastr.success('Ajout réussi', 'Succès')

                    }
                    else{
                        if(start_date > end_date) {
                            toastr.error('La date de début de la tâche doit être antérieure à sa date limite', 'Contrainte de date non respectée')
                        }
                        else if(end_date > activity_end_date) {
                            toastr.error('La date limite de la tâche doit être antérieure ou égale à la date limite de l\'activité', 'Erreur')
                        }
                        else if(start_date < activity_start_date) {
                            toastr.error('La date de début de la tâche doit être postérieure ou égale à la date de début de l\'activité', 'Erreur')
                        }
                        else if(task_percentage < 0 || task_percentage > 100) {
                            toastr.error('Le pourcentage de la tâche doit être compris entre 0 et 100 inclus. Veuillez corriger s\'il vous plaît', 'Erreur');
                        }
                        else if (title == "")
                        {
                            toastr.error('Vous devez renseigner un nom pour la tâche !', 'Erreur')
                        }
                    }
            //});

        }
        /* $(function() {

            // var i = {!! json_encode($i, JSON_HEX_TAG) !!};
            // for (i = 1; i <= 3; i++){

                document.getElementById("modify_task").addEventListener("click", function(event) {
                    event.preventDefault();

                    let e = $(this).attr('taskid');
                    console.log(e);

                    console.log(document.getElementById("start_date"+ e));
                    let start_date = document.getElementById("start_date"+ e).value;
                    //let start_date_latest = document.getElementsByName("start_date_latest")[0].value;
                    let end_date = document.getElementById("end_date"+ e).value;
                    let activity_start_date = document.getElementById("activity_start_date").value.split(' ')[0];
                    let activity_end_date = document.getElementById("activity_end_date").value.split(' ')[0];
                    //let end_date_latest = document.getElementsByName("end_date_latest")[0].value;
                    console.log(start_date);
                    console.log(activity_start_date);
                    console.log(end_date);
                    console.log(activity_end_date);

                    if( start_date < end_date && activity_start_date <= start_date && activity_end_date >= end_date){
                        document.getElementById('modify_task_form').submit();
                        toastr.success('Ajout réussi', 'Succès')

                    }
                    else{
                        if(start_date > end_date){
                            toastr.error('La date de début doit être inférieure à la date limite', 'Contrainte de date non respectée')
                        }
                        else if(end_date > activity_end_date){
                            toastr.error('La date limite de la tâche doit être inférieure ou égale à la date limite de l\'activité', 'Erreur')
                        }
                        else if(start_date < activity_start_date){
                            toastr.error('La date de début de la tâche doit être supérieure ou égale à la date de début de l\'activité', 'Erreur')
                        }
                    }
                });
            // }
        }()) */
    </script>



@endsection