@extends('layouts.app')

@section('title')
    {{-- Le nom de la page: Le nom que le navigateur affichera --}}
    Activités
@endsection

@section('head')
    {{-- Pour ajouter des css ou des balises dans la section head --}}
    {{-- Pour ajouter des css ou des balises dans la section head --}}

    <link href="{{ asset('assets/css/activity.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css') }}">
    <link href="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .col-12 {
            padding-right: 5px !important;
            padding-left: 0px !important;
            margin-left: 5px !important;
            /* margin-right: 5px !important; */

        }

        .col-lg-9 .col-md-10 {
            padding-right: 0px !important;
        }

        .bg-danger {
            background-color: #f57c72 !important;
        }

        .badge {
            vertical-align: middle;
        }

        .progress-cell {
            color: red;
        }

        .task {
            color: #2cabe3;
        }

        .task:hover {
            color: #707cd2;
            text-shadow: 0 0 1px #999;
        }

        .activity {
            max-width: 50rem;

        }

        thead {
            display: none;
        }

        .border {
            border: none !important;
        }

        .card {
            border-radius: 8px;
        }

        .academic-year {
            top: 0px;
            left: 11rem;
            width: 10rem;
            border: 1px solid #8898aa;
            /* height: 1rem; */
            padding: .375rem .75rem;
            font-size: .875rem;
            line-height: 1.5;
            border-radius: 2px;
            text-align: center;
        }

        .academ-year {
            position: absolute;

        }
    </style>
@endsection

@section('content-title')
    {{-- Le titre du contenu qui a gauche en haut dans le content --}}
    Activités<s></s>
@endsection

@section('content')
    {{-- Le contenu de la page --}}
    <div class="row ml-1">
        <a type="button" href="{{ URL::previous()}}"
            class="btn btn-light text-black btn-rounded btn-sm py-2 px-3 mb-3">Retour
            <i class="ti-arrow-left ml-2"></i></a>
        @if((session('type') == 2 or session('type') == 3) && sizeof($calendars) > 0)
            <a type="button" data-toggle="modal" data-target="#add-activity" id="myAddActivity"
                class="ml-auto mr-4 btn btn-primary text-white btn-rounded btn-sm py-2 px-3 mb-3">Ajouter une activité
                <i class="ti-plus ml-2"></i></a>
        @endif
    </div>


    <div class="card-group ml-1">
        <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" href="javascript:void(0)">
                        <i class="ti-clipboard"></i>
                    </button>
                    <div class="ml-4" style="width: 38%;">
                        <h4 class="font-light">Total d'activités</h4>

                    </div>
                    <div class="ml-auto">
                        <h2 class="display-7 mb-0">{{ sizeof($activities) }}</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-clipboard"></i>
                    </button>
                    <div class="ml-4" style="width: 80%;">
                        <h4 class="font-light">Total de sous-activités</h4>

                    </div>
                                        <div class="ml-auto">

                        <h2 class="display-7 mb-0">
                            {{ $n }}
                        </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="mdi mdi-calendar"></i>
                    </button>
                    <div class="ml-3" style="width: 80%;">
                        <div class="font-bold">Année académique </div>
                    </div>
                    <div class="col-5">

                        @if(sizeof($calendars) > 0)
                            <select class="ml-1 form-control" id="inputGroupSelect01" onchange="location = this.value;">
                                @if ($calendar != null)
                                <option value="?calendar={{ $calendar->id }}">{{ $calendar->academic_year }}

                                @endif
                                </option>
                                    @foreach ($calendars as $cal)
                                        @if ($cal->id != $calendar->id)
                                            <option value="?calendar={{ $cal->id }}">{{ $cal->academic_year }}
                                            </option>
                                        @endif
                                    @endforeach
                            </select>
                        @else
                            <p style="font-size: 10px">Aucun calendrier académique disponible pour le moment.</p><br>
                        @endif

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


    @foreach ($activities as $activity)
                {{-- @role('administa') --}}
        <div class="row col-12">
            <!-- Card -2  -->
            <div class="card {{ $class }} col-lg-3 col-md-2 mr-0">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="mr-2 align-self-center">
                            <h1 class="text-white"><i class="ti-pie-chart"></i></h1>
                        </div>
                        <div>
                            <h6 class="card-title text-white">Avancement : {{ $activity->percentage }}%
                            </h6>
                            {{-- <h5 class="card-subtitle text-white">2020-2021 | Activités respectant les contraintes de
                                date</h5> --}}
                        </div>
                    </div>
                    <div class="row mt-4">
                        {{-- <div class="col-6 align-self-center">
                            <font class="display-6 text-white">{{ $activity->subactivities_count }}</font>
                            <h6 class="text-white"></h6>
                        </div> --}}
                        <div class="col-6 align-self-center">
                            <h6 class="text-white ">{{ $activity->status }}</h6>
                            {{-- <h6 class="text-white">Statut</h6> --}}
                        </div>
                        <div class="col-6 align-self-center">
                            <h6 class="text-white">{{ $activity->subactivities_count }} Sous-activités</h6>
                            {{-- <h6 class="text-white">Statut</h6> --}}
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-10 " style="padding-right: 0px">
                <div class="card card-body">
                    {{-- <span class="side-stick"></span> --}}
                    <h5 class="note-title text-truncate w-90 mb-0" data-noteheading="{{ $activity->name }}">
                        <strong>{{ $activity->name }}</strong>
                    </h5>
                    @if(session('type') == 2 or session('type') == 3)
                        <div class="pull-right mt-2 mb-0">
                            <a type="button" class="btn btn-sm btn-danger mb-4 ml-2 pull-right btn-rounded text-white"
                                id="myDeleteActivity" data-target="#delete-activity" data-toggle="modal">Supprimer</a>
                            <a href="{{ route('activity.show', $activity->id) }}" type="button"
                                class="btn btn-sm btn-warning mb-4 ml-2 pull-right btn-rounded">Modifier</a>
                            <a href="{{ route('activity.show', $activity->id) }}" type="button"
                                class="btn btn-sm btn-info mb-4 pull-right btn-rounded ">Voir plus</a>
                        </div>
                    @else
                        <div class="pull-right mt-2 mb-0">
                            <a href="{{ route('activity.subactivity.index', $activity->id) }}" type="button"
                                class="btn btn-sm btn-info mb-4 pull-right btn-rounded ">Sous-activités</a>

                        </div>
                    @endif

                    <div class="note-content mt-0">
                        <div class="row col-lg-10 col-md-12">
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted mb-0">
                                    Début au plus tot
                                </p>
                                <strong>{{ $activity->start_date }}</strong>
                            </div>
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted mb-0">
                                    Début au plus tard
                                </p>
                                <strong>{{ $activity->start_date_latest }}</strong>
                            </div>
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted mb-0">
                                    Fin au plus tot
                                </p>
                                <strong>{{ $activity->end_date }}</strong>
                            </div>
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted mb-0">
                                    Fin au plus tard
                                </p>
                                <strong>{{ $activity->end_date_latest }}</strong>
                            </div>
                        </div>
                        {{-- <div class="row">
                            <div class="col mr-4">
                                <p class="note-inner-content text-muted">Début au plus tard :
                                    {{ $activity->start_date_latest }}</p>
                            </div>
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted">Fin au plus tard :
                                    {{ $activity->end_date_latest }}
                                </p>
                            </div>
                        </div> --}}
                    </div>
                    {{-- <div class="d-flex align-items-center">
                        <span class="mr-1"><i class="far fa-star favourite-note"></i></span>
                        <span class="mr-1"><i class="far fa-trash-alt remove-note"></i></span>
                        <div class="ml-auto">

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

                </div>
            </div>
            {{-- <a href="{{ route('activity.show', $activity->id) }}"
                class="btn btn-info mb-4 ">Voir plus</a>
            <hr> --}}
        </div>
    @endforeach



    {{-- Add an activity --}}
    <div id="add-activity" 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 une activité</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('activity.store') }}">
                        @csrf
                        <div class="form-body">
                            <div class="form-group row">
                                <label class="control-label label-text col-md-2 ">Intitulé</label>
                                <div class="col-md-10">
                                    <input type="text" name="name" value="{{ old('name') }}" required
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Devoir de première session">
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-4">Début au plus tot</label>
                                <div class="col-md-8">
                                    <input type="date" required
                                        class="form-control date-input @error('start_date') is-invalid @enderror"
                                        value="{{ old('start_date') }}" name="start_date">
                                    @error('start_date')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-4 ">Début au plus
                                    tard</label>
                                <div class="col-md-8">
                                    <input type="date" required
                                        class="form-control date-input @error('start_date_latest') is-invalid @enderror"
                                        value="{{ old('start_date_latest') }}" name="start_date_latest">
                                    @error('start_date_latest')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-4">Fin au plus tot</label>
                                <div class="col-md-8">
                                    <input type="date" required
                                        class="form-control date-input @error('end_date') is-invalid @enderror"
                                        value="{{ old('end_date') }}" name="end_date">
                                    @error('end_date')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-4 ">Fin au plus tard</label>
                                <div class="col-md-8">
                                    <input type="date" required
                                        class="form-control date-input @error('end_date_latest') is-invalid @enderror"
                                        value="{{ old('end_date_latest') }}" name="end_date_latest">
                                    @error('end_date_latest')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                {{-- @php
                                    $entityId = request()->get('user')["entity"];
                                @endphp --}}
                                <input type="hidden" id="entity_id" value="{{ $entity }}" name="entity_id">
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-5">Portée</label>
                                <div class="col-md-7">
                                    <select class="form-control custom-select @error('scope') is-invalid @enderror"
                                        name="scope" data-placeholder="Choose a Category" tabindex="1">
                                        <option value="public">PUBLIC</option>
                                        <option value="teacher">ENSEIGNANT</option>
                                        <option value="student">ETUDIANT</option>
                                    </select>
                                    @error('scope')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label label-text col-md-5">Calendrier</label>
                                <div class="col-md-7">
                                    <select class="form-control custom-select" name="calendar_id"
                                        data-placeholder="Choose a Category" tabindex="1">
                                        @if($calendars != null)
                                            @foreach ($calendars as $calendar)
                                                <option value="{{ $calendar->id }}">{{ $calendar->academic_year }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('calendar_id')
                                        <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>
    {{-- Delete an activity --}}
    <div id="delete-activity" data-backdrop="static" class="modal" tabindex="-1" role="dialog"
        aria-labelledby="myDeleteActivity" style="display: none; padding-left:70px" aria-hidden="true"
        data-dismiss="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h4 class="modal-title" style="color:white">Supprimer l'activité</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body ml-4">
                    {{-- action="{{route('activity.store')}}" --}}
                    <form action="{{ route('activity.destroy', $activity->id ?? 0) }}" method="post">
                        @csrf
                        @method('delete')

                        <div class="form-bordy">
                            Voulez-vous vraiment supprimer cette activité ?
                        </div><br>


                        <div class="modal-footer form-actions">
                            <button type="button" class="btn btn-sm btn-danger waves-effect"
                                data-dismiss="modal">Abandonner</button>
                            <button type="submit" class="btn btn-sm btn-info waves-effect waves-light"
                                id="deleteActivity">Supprimer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    {{-- Ajouter de nouveau script a votre page --}}

    <script>
        $(function() {

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

                let start_date = document.getElementsByName("start_date")[0].value;
                let start_date_latest = document.getElementsByName("start_date_latest")[0].value;
                let end_date = document.getElementsByName("end_date")[0].value;
                let end_date_latest = document.getElementsByName("end_date_latest")[0].value;
                let name = document.getElementsByName("name")[0].value;
                console.log(name);
                // console.log(start_date_latest);
                // console.log(end_date);
                // console.log(end_date_latest);

                if (!name.length) {
                    toastr.error(
                        "L'intitulé de l'activité est requis",
                        'Erreur')
                } else {
                    if (end_date <= end_date_latest && start_date <= start_date_latest && start_date <=
                        end_date) {
                        document.getElementById('activity_form').submit();
                        toastr.success('Ajout en cours. Patientez..', 'Données valides');
                    } else {
                        if (start_date > start_date_latest) {
                            toastr.error(
                                'La date de début au plus tot doit etre inférieure ou égale à la date de début au plus tard',
                                'Erreur')
                        } else if (end_date > end_date_latest) {
                            toastr.error(
                                'La date de fin au plus tot doit etre inférieure ou égale à la date de fin au plus tard',
                                'Erreur')
                        } else if (start_date > end_date) {
                            toastr.error(
                                'La date de début au plus tot doit etre inférieure ou égale à la date de fin au plus tot',
                                'Erreur')
                        }
                        // else if (start_date == start_date_latest && start_date_latest == end_date &&
                        //     end_date == end_date_latest) {
                        //     toastr.error(
                        //         "Ce type d'activité n'est pas prévu. Les contraintes de temps ne doivent pas etre égales",
                        //         'Erreur')
                        // }
                    }
                }
            });
        }())
    </script>

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

    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/js/jquery.dataTables.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('dist/js/pages/datatable/datatable-advanced.init.js') }}"></script>
@endsection