@extends('layouts.app')

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

@section('head')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/extra-libs/css-chart/css-chart.css') }}">
    {{-- Pour ajouter des css ou des balises dans la section head --}}
    <style>
        .col-12 {
            padding-right: 5px !important;
            padding-left: 0px !important;
            margin-left: 5px !important;
            /* margin-right: 5px !important; */
        }

        .form-group {
            margin-bottom: 0px !important;
        }

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

        .col-md-4 .col-lg-4 {
            padding-left: 0px !important;
        }

        /* .form-group {
            margin-bottom: 0px !important;
        } */


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

        #edit-block {
            display: none;
        }

        #edit:disabled {
            cursor: not-allowed;
        }

        #sub-activity-pane {
            display: none;
        }

        .record-subactivity {
            position: absolute;
            bottom: 16px;
            right: 74px;
        }

        .record-subactivity: hover {
            font-weight: bold;
        }

        .card {
            margin-bottom: 0px;
            border-radius: 8px;
        }

        .form-check-input {
            position: absolute;
            margin-top: 0rem;
            margin-left: 0rem;
        }
    </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>
        @role('administrator')
            {{-- <a type="button" id="myAddSubactivity" data-target="#add-subactivity" data-toggle="modal"
                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> --}}
        @endrole
    </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="mdi mdi-diamond"></i>
                    </button>
                    <div class="ml-4" style="width: 38%;">
                        <h4 class="font-light">Statut</h4>

                    </div>
                    <div class="ml-auto">
                        <h4 class="">{{ $activity->status }}</h4>
                    </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">
                            {{ $activity->subactivities_count }}
                        </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-success text-white btn-lg" href="javascript:void(0)">
                        <i class="mdi mdi-access-point"></i>
                    </button>
                    <div class="ml-4" style="width: 80%;">
                        <h4 class="font-light">Portée</h4>
                    </div>

                    <div class="ml-auto">
                        <h4 class="">
                            @if ($activity->scope == 'public')
                                Publique
                            @elseif($activity->scope == 'etudiant')
                                Etudiant
                            @else
                                Enseignant
                            @endif
                        </h4>
                    </div>


                </div>
            </div>
        </div>
    </div>
    
    <div class="row col-12">
        <div class="col-md-4 col-lg-4 pl-0">
            <div class="card  mr-0 mb-3" style="height: 450px">
                <div class="card-body bg-light">
                    <div class="card-body font-bold">ACTIONS</div>
                    <hr>
                    <div class="form-actions">
                        <a type="button" href="{{ route('activity.subactivity.index', $activity->id) }}"
                            class="btn btn-warning text-black btn-block btn-sm btn-rounded py-2 px-3 mb-4">Voir les
                            sous-activités / Ajouter<i class=" ml-2"></i></a>
                        <button class="btn btn-info text-white btn-block btn-sm btn-rounded py-2 px-3 mb-4"
                            id="edit">Modifier l'activité<i class=" ml-2"></i></button>
                        {{-- <button class="btn btn-primary text-white btn-block btn-sm btn-rounded py-2 px-3 " hidden  id="abort" style="margin-bottom: 50px">Abandonner la modification<i class=" ml-2"></i></button> --}}
                        <button class="btn btn-danger text-white btn-block btn-sm btn-rounded py-2 px-3"
                            id="myDeleteActivity" data-target="#delete-activity" data-toggle="modal">Supprimer cette
                            activité<i class=" ml-2"></i></button>
                    </div>
                    <hr>
                    <div class="row">
                        {{-- <div class="mt-4 mb-4 ml-3">
                                <small ><strong>Intitulé de l'activité principale : </strong> <br>{{ $activity->created_at }}</small>
                            </div> --}}

                    </div>

                    <div class="row">
                        <div class="mt-4 mb-4 ml-3">
                            <small><strong>Date de création : </strong> <br>{{ $activity->created_at }}</small>
                        </div>
                        <div class="mt-4 ml-auto mr-3">
                            <small><strong>Dernière mise à jour :</strong> <br>{{ $activity->updated_at }}</small>
                        </div>
                    </div>

                </div>
            </div>



        </div>
        <div class="col-md-8 col-lg-8 mb-4 pr-0" style="height: 500px !important">
            <div class="card ">
                <div class="{{ $class }} ">
                    <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">Le pourcentage d'avancement de cette activité est de :
                                    {{ $activity->percentage }} %
                                </h4>
                                <h5 class="card-subtitle text-white">Intitulé de l'activité : {{ $activity->name }}</h5>
                            </div>
                        </div>
                        {{-- <div class="row">
                            <div class="col-md-4 align-self-center">
                                <font class="display-6 text-white">{{$activity->percentage}} %</font>
                            </div>
                        </div> --}}
                    </div>

                </div>
                <div class="form-body ">

                    {{-- <hr class="mt-0 "> --}}


                    {{-- ACTIVITY BEGIN FORM --}}
                    <form action="{{ route('activity.update', $activity->id) }}" class="form-horizontal" method="post">
                        @csrf
                        @method('PUT')

                        <div class="card-body col-lg-12" style="padding-left: 70px;">
                            <div class="row" style="position:relative;">
                                <div class="col-md-9">
                                    <div class="form-group row ml-0" style="margin-bottom: 0px !important">
                                        <label class="control-label text-right font-bold ">Intitulé de l'activité</label>
                                        <div class="col-md-12" style="padding-right: 0px; ">
                                            <input type="text" name="name" value="{{ old('name', $activity->name) }}"
                                                class="form-control is-editable @error('name') is-invalid @enderror"
                                                placeholder="Devoir de première session" disabled>
                                            @error('name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Dates --}}
                            <div class="row mt-4 ">
                                <div class="col-md-5" style="padding-right: 0px;">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-11" style="padding-right: 0px;">
                                            <label class="control-label font-bold " style="margin-right: 6px; ">Date de
                                                début au plus tot </label>
                                            <input type="date"
                                                class="form-control is-editable  @error('start_date') is-invalid @enderror"
                                                value="{{ $activity->start_date }}" name="start_date" disabled>
                                            @error('start_date')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>

                                </div>


                                <div class="col-md-5 mr-1">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-12">
                                            <label class="control-label font-bold">Date de début au plus
                                                tard</label>
                                            <input type="date"
                                                class="form-control is-editable  @error('start_date_latest') is-invalid @enderror"
                                                value="{{ $activity->start_date_latest }}" name="start_date_latest"
                                                disabled>
                                            @error('start_date_latest')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>


                            </div>

                            <div class="row mt-4">
                                <div class="col-md-5" style=" ">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-12" style="margin-right: 6px; ">
                                            <label class="control-label font-bold" style="margin-right: 24px;">Date de fin
                                                au plus tot</label>
                                            <input type="date"
                                                class="form-control is-editable  @error('end_date') is-invalid @enderror"
                                                value="{{ $activity->end_date }}" name="end_date" disabled>
                                            @error('end_date')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-5">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-12">
                                            <label class="control-label font-bold ">Date de fin au plus
                                                tard</label>
                                            <input type="date"
                                                class="form-control is-editable  @error('end_date_latest') is-invalid @enderror"
                                                value="{{ $activity->end_date_latest }}" name="end_date_latest" disabled>
                                            @error('end_date_latest')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-6" hidden style="margin-bottom: 0px !important">
                                <label class="control-label    font-bold ">Calendrier</label>
                                <div class="col-md-11">
                                    <select class="form-control is-editable custom-select" name="calendar_id"
                                        data-placeholder="Choose a Category" tabindex="1" disabled>
                                        <option value="{{ $calendar->id }}">{{ $calendar->academic_year }}
                                        </option>
                                    </select>
                                    @error('calendar_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-md-5 mt-0">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-12">
                                            <label class="control-label label-text font-bold">Portée</label>
                                            <select class="form-control custom-select @error('scope') is-invalid @enderror"
                                                name="scope" data-placeholder="Choose a Category" tabindex="1">

                                                <option value="teacher" @if ($activity->scope == 'teacher') selected @endif>
                                                    ENSEIGNANT</option>
                                                <option value="student" @if ($activity->scope == 'student') selected @endif>
                                                    ETUDIANT</option>
                                                <option value="public" @if ($activity->scope == 'public') selected @endif>
                                                    PUBLIC</option>
                                            </select>
                                            @error('scope')
                                                <span class="invalid-feedback" role="alert">
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5 mt-0">
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <input type="hidden" id="entity_id" value="{{ $entity }}"
                                            name="entity_id">
                                    </div>
                                    <div class="form-group row" style="margin-bottom: 0px !important">
                                        <div class="col-md-12">
                                            <label class="control-label font-bold">
                                                Pourcentage
                                            </label>
                                            <input type="text"
                                                class="form-control is-editable  @error('percentage') is-invalid @enderror"
                                                value="{{ $activity->percentage }}" name="percentage" disabled>
                                            @error('percentage')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>


                        {{-- SUBTASKS RECORD BEGIN --}}
                        {{-- <div class="record-subactivity" id="rec-subactivity">
                            <a href="{{route('activity.subactivity.index', $activity->id)}}">
                                <span class="badge badge-info">{{ $activity->subactivities_count }}</span> sous-activité(s)
                            </a>
                        </div> --}}
                        {{-- SUBTASKS RECORD END --}}

                        <div class="form-actions">
                            <div class="card-body" id="edit-block">
                                <div class="text-right">
                                    <button type="button" class="btn waves-effect waves-light btn-secondary mr-4"
                                        id="abort">
                                        Abandonner
                                    </button>
                                    <button type="submit" class="btn waves-effect waves-light btn-success"
                                        id="validate">
                                        Valider
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                </form>
                {{-- ACTIVITY END FORM --}}
            </div>
        </div>

    </div>


    </div>

    {{-- Add a 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 mb-3" style=" ">
                                    <input type="text" name="name" value="{{ old('name') }}"
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Devoir de première session" 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">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-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) }}" 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="delete">Supprimer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

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







    <script src="{{ asset('assets/scripts/ressources-edit.js') }}"></script>
    <script src="{{ asset('assets/scripts/activity-edit.js') }}"></script>
@endsection