@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 --}}
    <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: 0px !important;
            padding-left: 0px !important;
            margin-left: 5px !important;
            /* margin-right: 5px !important; */

        }

        .col-lg-9 .col-md-10 {
            padding-right: 0px !important;
            /* margin-right: 100px !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;
        }
    </style>
@endsection

@section('content-title')
    {{-- Le titre du contenu qui a gauche en haut dans le content --}}
    Activité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)
            <a type="button" data-toggle="modal" data-target="#add-subactivity" id="myAddSubactivity"
                class="ml-auto mr-4 btn btn-primary text-white btn-rounded btn-sm py-2 px-3 mb-3">Ajouter une sous-activité
                <i class="ti-plus ml-2"></i></a>
            @if (!empty($successMessage))
                <div class="alert alert-success"> {{ $successMsg }}</div>
            @endif
        @endif
    </div>

    <div class="row col-lg-12 mt-4" style="margin-right: 0px !important; padding-right :0px !important">
        {{-- <div class="card col-lg-3 mr-3 ml-4">
            <h5 class="card-title text-uppercase p-3 bg-info text-white mb-0">
                Intitulé de l'activité principale
            </h5>
            <div class="p-3 ">
                <h4>{{$activity->name}}</h4>
            </div>
        </div> --}}
        <div class="card col-lg-12 mr-0">
            <h5 class="card-title text-uppercase p-3 bg-secondary text-white mb-0">
                Intitulé de l'activité principale
            </h5>
            <div class="p-3 ">
                <center>
                    <h5 class="">{{ $activity->name }}</h5>

                </center>
            </div>
        </div>
        {{-- <div class="card col-lg-3 mr-3">
            <h5 class="card-title text-uppercase p-3 bg-info text-white mb-0">
                Intitulé de l'activité principale
            </h5>
            <div class="p-3 ">
                <h4>{{$activity->name}}</h4>
            </div>
        </div> --}}

    </div>




    @foreach ($subActivities as $subactivity)
                {{-- @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 : {{ $subactivity->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>
                </div>
            </div>
            <div class="col-lg-9 col-md-10 ml-0">
                <div class="card card-body">
                    {{-- <span class="side-stick"></span> --}}
                    <h5 class="note-title text-truncate w-90 mb-0" data-noteheading="{{ $subactivity->name }}">
                        <strong>{{ $subactivity->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="myDeleteSubactivity" data-target="#delete-subactivity" data-toggle="modal">Supprimer</a>
                            <a href="{{ route('activity.subactivity.show', [$activity->id, $subactivity->id]) }}" type="button"
                                class="btn btn-sm btn-warning mb-4 ml-2 pull-right btn-rounded">Modifier</a>
                        </div>
                    @else
                        <div class="pull-right mt-2 mb-2"></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>{{ $subactivity->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>{{ $subactivity->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>{{ $subactivity->end_date }}</strong>
                            </div>
                            <div class="col mr-3">
                                <p class="note-inner-content text-muted mb-0">
                                    Fin au plus tard
                                </p>
                                <strong>{{ $subactivity->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 subactivity --}}
    <div id="add-subactivity" data-backdrop="static" class="modal" tabindex="-1" role="dialog"
        aria-labelledby="myAddSubactivity" 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-info">
                    <h4 class="modal-title" style="color:white">Ajouter une sous-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 method="post" id="activity_form"
                        action="{{ route('activity.subactivity.store', $activity->id) }}" class="form-horizontal">
                        @csrf
                        <div class="form-body">
                            <div class="form-group row">
                                <label class="control-label text-right ">Intitulé</label>
                                <div class="col-md-9" style=" ">
                                    <input type="text" name="name" value="{{ old('name') }}"
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Intitulé" required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label text-right " style="margin-right: 6px;">
                                    <h6>Début au plus tot</h6>
                                </label>
                                <div class="col-md-9" style="padding-right: 0px;">
                                    <input type="date" value="{{ old('start_date') }}"
                                        min="{{ $activity->start_date }}" max="{{ $activity->end_date_latest }}"
                                        class="form-control date-input  @error('start_date') is-invalid @enderror"
                                        name="start_date" required>
                                    @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 text-right ">
                                    <h6>Début au plus
                                        tard</h6>
                                </label>
                                <div class="col-md-9">
                                    <input type="date" value="{{ old('start_date_latest') }}"
                                        class="form-control date-input  @error('start_date_latest') is-invalid @enderror"
                                        min="{{ $activity->start_date }}" max="{{ $activity->end_date_latest }}"
                                        name="start_date_latest" required>
                                    @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 text-right" style="margin-right: 24px;">
                                    <h6>Fin au plus tot</h6>
                                </label>
                                <div class="col-md-9" style="padding-right: 0px;">
                                    <input type="date" value="{{ old('end_date') }}"
                                        class="form-control date-input  @error('end_date') is-invalid @enderror"
                                        min="{{ $activity->start_date }}" max="{{ $activity->end_date_latest }}"
                                        name="end_date" required>
                                    @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 text-right ">
                                    <h6>Fin au plus
                                        tard</h6>
                                </label>
                                <div class="col-md-9">
                                    <input type="date"
                                        class="form-control date-input  @error('end_date_latest') is-invalid @enderror"
                                        min="{{ $activity->start_date }}" max="{{ $activity->end_date_latest }}"
                                        name="end_date_latest" value="{{ old('end_date_latest') }}" required>
                                    @error('end_date_latest')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <input type="hidden" id="entity_id" value="{{ $entity }}" name="entity_id">
                                <input type="hidden" id="calendar_id" value="{{ $calendar->id }}" name="calendar_id">
                                <input type="hidden" id="activity_id" value="{{ $activity->id }}" name="activity_id">
                            </div>
                            <div class="form-group row">
                                <label class="control-label text-right col-md-3">Pourcentage</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control @error('percentage') is-invalid @enderror"
                                        value="0" name="percentage" id="percentage" required>
                                    @error('percentage')
                                        <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">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">
                                  @foreach ($calendars as $calendar)
                                      <option value="{{ $calendar->id }}">{{ $calendar->academic_year }}
                                      </option>
                                  @endforeach
                              </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-subactivity" data-backdrop="static" class="modal" tabindex="-1" role="dialog"
        aria-labelledby="myDeleteSubactivity" 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 la sous-activité</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body ml-4">
                    @if (!sizeof($subActivities))
                        <form method="post">
                        @else
                            <form action="{{ route('activity.subactivity.destroy', [$activity->id, $subactivity->id]) }}"
                                method="post">
                    @endif
                    @csrf
                    @method('delete')

                    <div class="form-bordy">
                        Voulez-vous vraiment supprimer cette sous-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="delete">Supprimer</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

<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>

@endsection