@extends('layouts.admin-base')

@section('under-header')

        <div  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 activités</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"><a href="#">{{ $project->name }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Admin</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->

@endsection

@section('content')
<div class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card bg-white text-black rounded-lg">
                    <div class="card-body">
                        <div class="d-flex no-block align-items-center">
                            <div class="w-100 ml-3 mt-2 mb-0">
                                <div class="d-flex w-100 align-items-center justify-content-between">
                                    <h4 class="font-bold">Nom : {{ $project->name }}</h4>
                                    <div class="d-flex align-items-center ml-3">
                                        <div class="p-2 p-lg-3 ml-auto">
                                            <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</h5>
                                                        <span class="h3 text-primary">
                                                            {{ date('d/m/Y H:i', strtotime($project->start_date)) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-2 p-lg-3 ml-auto">
                                            <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-clock"></i>
                                                    </button>
                                                    <div class="ml-4">
                                                        <h5 class="font-bold">Date limite</h5>
                                                        <span class="h3 text-danger">
                                                            {{ date('d/m/Y H:i', strtotime($project->end_date)) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-2 p-lg-3 ml-auto">
                                            <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: 150px;">
                                                        <h4 class="font-light">Evolution</h4>
                                                        <div class="progress">
                                                            <div class="progress-bar bg-cyan" role="progressbar" style="width: {{ $project->percentage }}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                                                        </div>
                                                    </div>
                                                    <div class="ml-5">
                                                        <h2 class="display-7 mb-0">{{ $project->percentage }}%</h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="">Description : {{ $project->description }}</p>
                                <!-- Associer un utilisateur au projet début -->
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="offset-3"></div> --}}
        </div>

        <ul class="nav nav-pills p-3 bg-white mb-1 rounded-pill align-items-center">
            <li class="nav-item"> <a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center active px-2 px-md-3 mr-0 mr-md-2"  id="all-category">
                <i class="icon-layers mr-1"></i><span class="d-none d-md-block">Toutes les activités</span></a>
            </li>
            <li class="nav-item"> <a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-business">
                <i class="icon-check mr-1"></i><span class="d-none d-md-block">Terminées</span></a>
            </li>
            <li class="nav-item"> <a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-social">
                <i class="icon-refresh mr-1"></i><span class="d-none d-md-block">En cours</span></a>
            </li>
            <li class="nav-item"> <a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-important">
                <i class="icon-tag mr-1"></i><span class="d-none d-md-block">Nouveaux</span></a>
            </li>
            <li class="nav-item"> <a href="javascript:void(0)" class="nav-link rounded-pill note-link d-flex align-items-center px-2 px-md-3 mr-0 mr-md-2" id="note-danger">
                <i class="icon-speedometer mr-1"></i><span class="d-none d-md-block">En retard</span></a>
            </li>
            <!-- <li class="nav-item row ml-auto mr-2">
                    <input id="activitySearch" type="text" class="d-none d-lg-block col-lg-5 form-control p-4 shadow-sm border rounded-pill mr-auto" placeholder="Rechercher...">
                    <a href="javascript:void(0)" class="col-lg-6 nav-link btn-info rounded-pill d-flex align-items-center px-3" id="add-notes">
                        <i class="icon-note m-1"></i>
                        <span class="d-none d-md-block font-14">Ajouter une activité </span>
                    </a>
                
            </li> -->
        </ul>
        <div class="d-flex mb-3">
            <div class="d-flex align-items-center mx-1">
                <i class="point fas fa-circle ml-1 font-10 text-primary"></i>
                <span class="ml-1">Nouveau</span>
            </div>
            <div class="d-flex align-items-center mx-1">
                <i class="point fas fa-circle ml-1 font-10 text-info"></i>
                <span class="ml-1">En cours</span>
            </div>
            <div class="d-flex align-items-center mx-1">
                <i class="point fas fa-circle ml-1 font-10 text-danger"></i>
                <span class="ml-1">En retard</span>
            </div>
            <div class="d-flex align-items-center mx-1">
                <i class="point fas fa-circle ml-1 font-10 text-success"></i>
                <span class="ml-1">Terminé</span>
            </div>
        </div>
        <div class="tab-content bg-transparent">
            <div  id="note-full-container" class="row">
                @foreach ($activities as $activity)
                    <div class="col-12 col-md-6 col-lg-4 single-note-item all-category
                        @if ($activity->statut == 'new')
                            note-important
                        @elseif ($activity->statut == 'ended' || $activity->percentage == 100)
                            note-business
                        @elseif ($activity->statut == 'progress')
                            note-social
                        @else
                            note-danger
                        @endif">
                        <div class="card rounded-lg shadow-lg">
                            <div class="card-header rounded badge pt-3
                                @if($activity->statut == 'new')
                                    badge-primary
                                @elseif($activity->statut == 'ended' || $activity->percentage == 100)
                                    badge-success
                                @elseif ($activity->statut == 'progress')
                                    badge-info
                                @else
                                    badge-danger
                                @endif"
                            >
                                <h4
                                    class="note-title text-truncate font-medium w-100 mb-3 "
                                    data-noteHeading="{{ $activity->name }}"
                                >
                                    {{-- <i class="point fas fa-circle ml-1 font-10
                                        @if($activity->statut == 'new')
                                            text-primary
                                        @elseif($activity->statut == 'ended')
                                            text-success
                                        @else
                                            text-info
                                        @endif"
                                    >
                                    </i> --}}
                                    <a
                                        title="{{ $activity->name }}"
                                        
                                        {{-- style="color : @if($activity->statut == 'ended' || $activity->statut == 'progress') black @endif" --}}
                                        {{-- style="color : white;" --}}
                                        class="text-light"
                                    >
                                        {{ $activity->name }}
                                    </a>
                                </h4>
                            </div>
                            {{-- <span class="badge py-2
                                @if($activity->statut == 'new')
                                    badge-primary
                                @elseif($activity->statut == 'ended')
                                    badge-success
                                @else
                                    badge-info
                                @endif"
                            >
                                {{ $activity->getstatusOptions()[$activity->statut] }}
                            </span> --}}
                            <div class="d-flex align-items-center row justify-content-between m-3">
                                <div class="row note-content">
                                    <p class="col-4 note-date font-12 text-danger text-muted">
                                        Commence le
                                        <span class="text-info">
                                            {{-- {{ $activity->getDate(explode(' ', $activity->start_date)[0]) }} --}}
                                            {{ date('d/m/Y H:i', strtotime($activity->start_date)) }}
                                        </span>
                                    </p>
                                    <p class="col-4 note-date font-12 text-danger text-muted">
                                        Finit le
                                        <span class="text-danger">
                                            {{-- {{ $activity->getDate(explode(' ', $activity->end_date)[0]) }} --}}
                                            {{ date('d/m/Y H:i', strtotime($activity->end_date)) }}
                                        </span>
                                    </p>
                                    <h2 class="col-4 note-inner-content text-muted">
                                        {{ $activity->percentage }} %
                                    </h2>
                                </div>
                                {{-- <div class="note-content">

                                </div> --}}
                            </div>
                            <div class="d-flex align-items-center row mx-3 mb-4">
                                <a
                                    href="{{ route('admin-list-task', ['project_id' => $activity->projet_id, 'activity_id' => $activity->id]) }}"
                                    type="button"
                                    title="Voir les détails de l'activité"
                                    class="btn btn-circle btn-info my-1 mr-1"
                                >
                                    <i class="ti-eye"></i>
                                    {{-- Détails --}}
                                </a>
                                    <!-- @if($activity->statut != 'ended')
                                        <form
                                            action="{{ route('change-status-to-ended', ['activity_id' => $activity->id]) }}"
                                            method="POST"
                                        >
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="status-ended" value="ended">
                                            <button
                                                type="submit"
                                                title="Terminer l'activité"
                                                class="btn btn-circle waves-effect waves-light btn-success my-1 mx-1"
                                            >
                                                <i class="ti-check-box"></i>
                                                {{-- Terminer --}}
                                            </button>
                                        </form>
                                    @endif
                                    <button
                                        title="Modifier l'activité"
                                        type="button"
                                        data-toggle="modal"
                                        data-target="{{ '#modify'. $activity->id }}"
                                        class="btn btn-circle waves-effect waves-light btn-warning my-1 mx-1"
                                    >
                                        <i class="ti-pencil-alt"></i>
                                        {{-- Modifier --}}
                                    </button>
                                    <button
                                        type="button"
                                        title="Supprimer l'activité"
                                        data-toggle="modal"
                                        data-target="#modal_Supprimer{{ $activity->id }}"
                                        class="btn btn-circle waves-effect waves-light btn-danger my-1 ml-1"
                                    >
                                        <i class="ti-trash"></i>
                                        {{-- Supprimer --}}
                                    </button> -->
                                <h5 class="note-inner-content text-muted ml-auto">
                                    {{-- {{ $activity->tasks()->count() }} tache(s) --}}
                                    {{ $tasks_count[$activity->id] }} tache(s)
                                </h5>


                                <div class="modal" id="{{ 'modify'. $activity->id }}">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Modifier</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form method="POST" action="{{ route('activity_update', ['activity_id' => $activity->id]) }}" enctype="multipart/form-data" id="{{'modify_activity_form'. $activity->id}}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="id" class="form-control" id="id" value="{{ $activity->id }}">
                                                    <div class="form-group">
                                                        <label for="name" class="control-label">Intitulé de l'activité':</label>
                                                        <input type="text" name="title_modify" value="{{ $activity->name }}" class="form-control" id="activity-name">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="date" class="control-label">Date de début:</label>
                                                        <input type="datetime-local" name="start_date" value="{{ $activity->start_date }}" class="form-control" id="{{'start_date'. $activity->id}}"
                                                        min="{{ $project->start_date }}"
                                                        max="{{ $project->end_date }}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="datel" class="control-label">Date limite:</label>
                                                        <input type="datetime-local" name="end_date" value="{{ $activity->end_date }}" class="form-control" id="{{'end_date'. $activity->id}}"
                                                        min="{{ $project->start_date }}"
                                                        max="{{ $project->end_date}}">
                                                    </div>
                                                    <input type="hidden" name="percentage" class="form-control" id="percentage" value="0">
                                                    <input type="hidden" name="activity_id" class="form-control" id="activity_id" value="{{ $activity->id }}">
                                                    {{-- <input type="hidden" name="project_id" class="form-control" id="project_id" value="{{ $activity->projet_id }}"> --}}
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                        <button type="submit" id="{{$activity->id}}" onClick="modify(this.id)" class="btn btn-success waves-effect waves-light">Sauvegarder</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal" id="modal_Supprimer{{ $activity->id }}" style="color:rgb(32,0,32);">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <!-- Modal Header -->
                                            <div class="modal-header" >
                                                <h2 class="modal-title"> Supprimer l'activité : {{ $activity->name }}</h2>
                                            </div>
                                            <!-- Modal body -->
                                            <div class="modal-body">
                                                Etes-vous sûr de vouloir supprimer cette activité?
                                                <form class="mt-4" method="post" action="{{ route('activity_destroy',['activityid' =>$activity->id, 'project_id' => $project->id]) }}">
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <!-- Modal footer -->
                                                    <div class="modal-footer" style="margin-top: 5px; text-align:left;">
                                                        <button type="submit" class="btn btn-danger">Supprimer</button>
                                                        <button type="button" class="btn btn-success" data-dismiss="modal">Annuler</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Modal Add notes -->
        <div class="modal fade" id="addnotesmodal" tabindex="-1" role="dialog" aria-labelledby="addnotesmodalTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content border-0">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title text-white">Ajouter une activité</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="notes-box">
                            <div class="notes-content">
                                <form id="addnotesmodalTitle" method="POST" action="{{route('activity_store',['project_id' => $project->id])}}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <div class="note-title">
                                                <label>Titre de l'activité</label>
                                                <input type="text" id="note-has-title" class="form-control" placeholder="Titre" name="titre">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <div class="note-start-date">
                                                <label for="start-date">Date de début</label>
                                                <input
                                                    type="datetime-local"
                                                    id="note-has-start-date"
                                                    class="form-control"
                                                    placeholder="Date de début"
                                                    name="start_date"
                                                    value=""
                                                    min="{{ $project->start_date }}"
                                                    max="{{ $project->end_date }}"
                                                >
                                                <input type="hidden" id="project_start_date" value="{{$project->start_date}}">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <div class="note-end-date">
                                                <label for="end-date">Date de fin</label>
                                                <input
                                                    type="datetime-local"
                                                    id="note-has-end-date"
                                                    class="form-control"
                                                    placeholder="Date de fin"
                                                    name="end_date"
                                                    value=""
                                                    min="{{ $project->start_date }}"
                                                    max="{{ $project->end_date }}"
                                                >
                                                <input type="hidden" id="project_end_date" value="{{$project->end_date}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-danger" data-dismiss="modal" type="button"> Annuler</button>
                                        <button type="submit" id="create_activity" class="btn btn-success waves-effect waves-light">Ajouter</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        

</div>
@endsection

@section('script')

    <script src="{{asset('dist/js/pages/notes/notes.js')}}"></script>

    <!--This page JavaScript -->
	<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>

@endsection