@extends('layouts.appfordashhome')
@section('title')
    Acceuil
@endsection

@section('css')
<link href="{{ asset('assets/libs/chartist/dist/chartist.min.css') }}">
</link>
<link href="{{ asset('dist/js/pages/chartist/chartist-init.css') }}">
</link>
<link href="{{ asset('assets/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css') }}">
</link>
<link href="{{ asset('assets/extra-libs/jvector/jvector.css') }}">
</link>
<link href="{{ asset('assets/extra-libs/jvector/jquery-jvectormap-2.0.2.css') }}">
</link>
<link href="{{ asset('assets/libs/morris.js/morris.css') }}">
</link>
@endsection

@section('head')
    <style>
        @media screen and (max-width: 1023px) {
            button {
                position: relative !important;
                margin-top: 30px;
            }
        }

        .btn {
            position: absolute;
            right: 5px;
            bottom: 16px;
        }

        .toast {
            position: relative;
        }

        .toast-body {
            padding: 1.4rem;
        }

        a {
            color: #2c75e3;
        }

        .list {
            text-align: right;
            font-size: 1rem;
        }

        button {
            min-width: 6rem;
        }
    </style>
@endsection

@section('content-title')
    {{-- Le titre du contenu qui a gauche en haut dans le content --}}
    Acceuil
@endsection

@section('content')

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



        {{-- <div class="card-group">
        <div class="card p-2 p-lg-3">
            <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 pull-left " href="javascript:void(0)">
                        <i class="ti-clipboard"></i>
                    </button>
                    <div class="ml-4" style="width: 38%;">
                        <h4 class="font-light">Total Projects</h4>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                        </div>
                    </div>
                    <div class="ml-auto">
                        <h2 class="display-7 mb-0">23</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card p-2 p-lg-3">
            <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-wallet"></i>
                </button>
                    <div class="ml-4" style="width: 38%;">
                        <h4 class="font-light">Total Earnings</h4>
                        <div class="progress">
                            <div class="progress-bar bg-cyan" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                        </div>
                    </div>
                    <div class="ml-auto">
                        <h2 class="display-7 mb-0">76</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card p-2 p-lg-3">
            <div class="p-lg-3 p-2">
                <div class="d-flex align-items-center">
                    <button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
                    <i class="fas fa-dollar-sign"></i>
                </button>
                    <div class="ml-4" style="width: 38%;">
                        <h4 class="font-light">Total Earnings</h4>
                        <div class="progress">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
                        </div>
                    </div>
                    <div class="ml-auto">
                        <h2 class="display-7 mb-0">83</h2>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}



        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Activités en cours</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h2 class="mb-0 display-5"><i class="ti-stats-up text-info"></i></h2>
                            <div class="ml-auto">
                                <h2 class="mb-0 display-6"><span class="font-normal">{{ $activities_in_progress }}</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Sous activités démarrées</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h2 class="mb-0 display-5"><i class="ti-unlock text-primary"></i></h2>
                            <div class="ml-auto">
                                <h2 class="mb-0 display-6"><span class="font-normal">{{ $subactivities_started }}</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Activités non démarrées</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h2 class="mb-0 display-5"><i class="ti-lock text-danger"></i></h2>
                            <div class="ml-auto">
                                <h2 class="mb-0 display-6"><span class="font-normal">{{ $activities_not_started }}<span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Activités terminées</h5>
                        <div class="d-flex align-items-center mb-2 mt-4">
                            <h2 class="mb-0 display-5"><i class="ti-check-box text-success"></i></h2>
                            <div class="ml-auto">
                                <h2 class="mb-0 display-6"><span class="font-normal">{{ $activities_ended }}</span></h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Section a --}}
        <div class="row">
            <div class="col-md-12 col-lg-6">
                <div class="card bg-primary">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="mr-3 align-self-center">
                                <h1 class="text-white"><i class="ti-pie-chart"></i></h1>
                            </div>
                            <div>
                                <h4 class="card-title text-white">Pourcentage d'avancement globale du calendrier académique
                                </h4>
                                <h5 class="card-subtitle text-white">Année académique {{$academic_year}}</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 align-self-center">
                                <font class="display-6 text-white">{{ $global_percentage }} %</font>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- Card -2  -->
                <div class="card bg-success">
                    <div class="card-body">

                        <div class="d-flex">
                            <div class="mr-3 align-self-center">
                                <h1 class="text-white"><i class="ti-stats-up"></i></h1>
                            </div>
                            <div>
                                <h4 class="card-title text-white">
                                    Activités en bonne marche
                                </h4>
                                <h5 class="card-subtitle text-white">{{$academic_year}} | Activités respectant les contraintes de
                                    date</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 align-self-center">
                                <font class="display-6 text-white">{{ $activities_well_going_on }}</font>
                                <h6 class="text-white">Activités</h6>
                            </div>
                            <div class="col-6 align-self-center">
                                <font class="display-6 text-white">{{ $subactivities_well_going_on }}</font>
                                <h6 class="text-white">Sous-activités</h6>
                            </div>

                            @if ($activities_well_going_on > 0 || $subactivities_well_going_on > 0)
                            <div class="col-1 align-self-center">
                                <a href="{{ route('listOfActSub',"well-going") }}" type="button"
                                class="btn-light btn-sm rounded py-1 px-2 ml-auto"><i class="fa fa-arrow-right" style="color : green"></i></a>
                            </div>
                            @endif

                        </div>
                    </div>
                </div>
                {{-- Card 3 --}}
                <div class="card bg-danger">
                    <div class="card-body">

                        <div class="d-flex">
                            <div class="mr-3 align-self-center">
                                <h1 class="text-white"><i class="ti-alert"></i></h1>
                            </div>
                            <div>
                                <h4 class="card-title text-white">Activités critiques
                                </h4>
                                <h5 class="card-subtitle text-white">{{$academic_year}} | Activités en retard de démarrage ou avec
                                    progression insatisfaisante </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 align-self-center">
                                <div class="row"></div>
                                <font class="display-6 text-white">{{ $activities_bad_going_on }}</font>
                                <h6 class="text-white">Activités</h6>
                            </div>
                            <div class="col-5 align-self-center">
                                <font class="display-6 text-white">{{ $subactivities_bad_going_on }}</font>
                                <h6 class="text-white">Sous-activités</h6>
                            </div>
                            @if ($activities_bad_going_on > 0 ||  $subactivities_bad_going_on > 0)
                            <div class="col-1 align-self-center">
                                <a href="{{ route('listOfActSub',"bad-going") }}" type="button"
                                class="btn-light btn-sm rounded py-1 px-2 ml-auto"><i class="fa fa-arrow-right" style="color : red"></i></a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="mr-3 align-self-center">
                                <h1 class="text-white"><i class="ti-alert"></i></h1>
                            </div>
                            <div>
                                <h4 class="card-title text-white">Activités critiques
                                </h4>
                                <h5 class="card-subtitle text-white">2020-2021 | Activités en retard de démarrage ou avec progression insatisfaisante </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 align-self-center">
                                <div class="row"></div>
                                <font class="display-6 text-white">{{$activities_bad_going_on}}</font>
                                <h6 class="text-white">Activités</h6>
                            </div>
                            <div class="col-6 align-self-center">
                                <font class="display-6 text-white">{{$subactivities_bad_going_on}}</font>
                                <h6 class="text-white">Sous-activités</h6>
                            </div>

                        </div>
                    </div>
                </div> --}}

            </div>

            {{-- ----- --}}

            <div class="col-md-12 col-lg-6">
                <div class="card" style="height: 555px !important">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Dernières mises à jour de statut/niveau d'avancement</h5>
                    </div>
                    <div class="comment-widgets scrollable ps-container ps-theme-default ps-active-y" style="height:531px;"
                        data-ps-id="d08d3d6f-fcbb-c21e-14b5-1363eba0b8dc">


                        <!-- Comment Row -->


                        @if (!sizeof($updates))
                            <p class="ml-4">Aucune mise à jour récente</p>
                        @else
                            @foreach ($updates as $i => $update)
                                <div class="d-flex flex-row comment-row mt-0 mb-0">
                                    <!-- Message -->
                                    <li class="d-flex py-3">
                                        <div class="user-img">
                                            <span class="round bg-warning">
                                                <i class="mdi mdi-email"></i>
                                            </span>
                                        </div>
                                        <div class="comment-text w-100">
                                            <h5 class="font-normal mb-1">{{ $update['name'] }}</h5>
                                            <div class="row mt-3">
                                                <span class="text-muted ml-3 mr-4 font-12">{{ $update['type'] }}</span>
                                                <span
                                                    class="badge badge-info badge-rounded text-uppercase font-medium mr-4">{{ $update['percentage'] }}</span>
                                                <span
                                                    class="badge badge-info badge-rounded text-uppercase font-medium mr-4">{{ $update['status'] }}</span>
                                                <span class="text-muted font-12 ml-3 mt-1">Horodotage :
                                                    {{ $update['date'] }}</span>
                                            </div>
                                        </div>
                                </div>
                            @endforeach
                            <div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 0px;">
                                <div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                            </div>
                            <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 531px;">
                                <div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 422px;"></div>
                            </div>
                        @endif


                    </div>

                </div>
            </div>


            {{-- ------- --}}



        </div>


        {{-- Section 2 --}}


        {{-- Add a calendar --}}
        <div id="add-calendar" data-backdrop="static" class="modal" tabindex="-1" role="dialog"
            aria-labelledby="myAddActivity" style="display: none;" aria-hidden="true" data-dismiss="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info" style="color:white">
                        <h4 class="modal-title">Ajouter un calendrier académique</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body">
                        {{-- action="{{route('activity.store')}}" --}}
                        <form method="post" id="activity_form" action="{{ route('calendar.store') }}">
                            @csrf
                            <div class="form-body">
                                <div class="form-group row">
                                    <label class="control-label label-text col-md-4 ">Année académique</label>
                                    <div class="col-md-8">
                                        <input type="text" name="academic_year" value="{{ old('academic_year') }}"
                                            required class="form-control @error('academic_year') is-invalid @enderror"
                                            placeholder="2022-2023">
                                        @error('academic_year')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer form-actions">
                                {{-- <button type="button" class="btn btn-danger  waves-effect"
                              data-dismiss="modal">Annuler</button> --}}
                                <button type="submit" class="btn btn-info waves-effect waves-light"
                                    id="createActivity">Créer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>



    </div>
@endsection

@section('scripts')
    {{-- Ajouter de nouveau script a votre page --}}
    <script src="{{ asset('assets/libs/chartist/dist/chartist.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/chartist/chartist-plugin-tooltip.js') }}"></script>
    <script src="{{ asset('assets/libs/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/chartist/chartist-plugin-tooltip.js') }}"></script>
    <script src="{{ asset('assets/libs/morris.js/morris.min.js') }}"></script>
    <script src="{{ asset('assets/libs/echarts/dist/echarts-en.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/dashboards/dashboard6.js') }}"></script>
    {{-- <script type="text/javascript">
        $('.toast').toast('show');
    </script> --}}

    <script src="{{ asset('dist/js/pages/notes/notes.js') }}"></script>
    <script src="{{ asset('assets/dist/js/custom.min.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> --}}

@endsection