@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-md-4 .col-lg-4 {
            padding-left: 0px !important;
        }
        .col-12 {
            padding-right: 0px !important;
            margin-bottom: 50px !important;
        }

        .form-group {
            margin-bottom: 0px !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;
        }
    </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 --}}
    <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>



    <div class="card-group ml-1 col-md-12">
        <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>
                            {{ $subactivity->percentage <= 1 ? 'Non commencée' : ($subactivity->status <= 99 ? 'En cours' : 'Terminée') }}

                        </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">
                        </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">
            <div class="card  mr-0 mb-3" style="height: 490px">
                <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<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 la sous-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 type="submit" class="btn btn-danger text-white btn-block btn-sm btn-rounded py-2 px-3"
                        id="myDeleteSubactivity" data-target="#delete-subactivity" data-toggle="modal">Supprimer cette sous-activité<i class=" ml-2"></i></button>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="mt-4 mb-2 ml-3">
                            <small><strong>Activité principale de cette sous-activité</strong> <br>{{ $activity->name }}</small>
                        </div>

                    </div>
                    <div class="row">
                        <div class="mt-4 mb-4 ml-3">
                            <small><strong>Date de création : </strong> <br>{{ $subactivity->created_at }}</small>
                        </div>
                        <div class="mt-4 ml-auto mr-3">
                            <small><strong>Dernière mise à jour :</strong> <br>{{ $subactivity->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 sous-activité est de
                                    : {{ $subactivity->percentage }} %
                                </h4>
                                <h5 class="card-subtitle text-white">Intitulé de la sous-activité : {{ $subactivity->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">
                    {{-- <div class="card-body">
                        <div class="d-flex justify-content-between">

                            <div class="d-flex">
                                <button type="button" class="btn waves-effect waves-light btn-outline-primary"
                                    id="edit">
                                    Modifier
                                </button>

                                <button type="submit" class="btn waves-effect waves-light btn-outline-danger"
                                    style="margin-left: 8px;" id="myDeleteSubactivity" data-target="#delete-subactivity"
                                    data-toggle="modal">
                                    Supprimer
                                </button>

                            </div>
                        </div>
                    </div> --}}
                    <hr class="mt-0 mb-2">
                    {{-- <center>

                        <div class="card col-4" >
                            <div class="text-center" >
                                <div class="row pt-2 pb-2">
                                    <div class="col text-center align-self-center">
                                        <div data-label="{{$subactivity->percentage}}%" class="css-bar mb-0 css-bar-dark css-bar-{{$subactivity->percentage}}">

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

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

                    {{-- ACTIVITY BEGIN FORM --}}
                    <form action="{{ route('activity.subactivity.update', [$activity->id, $subactivity->id]) }}"
                        class="form-horizontal" method="post">
                        @csrf
                        @method('PUT')
                        <div class="card-body" style="padding-left: 70px;">
                            <div class="row" style="position:relative;">
                                <div class="col-md-11">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <div class="form-group row">
                                                <label class="control-label font-bold ml-3">Intitulé de la sous-activité</label>
                                                <div class="col-md-9" style="padding-right: 6px;">
                                                    <input type="text" name="name" value="{{ $subactivity->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>


                                </div>
                            </div>



                            <div class="row mt-4">
                                <div class="col-md-5">

                                    <div class="form-group row">
                                        <div class="col-md-12" style="padding-right: 0px;">
                                            <label class="control-label font-bold" style="margin-right: 24px;">Date de
                                                début au plus tot</label>
                                            <input type="date"
                                                class="form-control is-editable  @error('start_date') is-invalid @enderror"
                                                value="{{ $subactivity->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">
                                    <div class="form-group row">
                                        <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="{{ $subactivity->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="padding-right: 24px;">
                                    <div class="form-group row">
                                        <div class="col-md-12" style="padding-right: 0px;">
                                            <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="{{ $subactivity->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">
                                        <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="{{ $subactivity->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="row mt-4">
                                <div class="form-group">
                                    <input type="hidden" id="entity_id" value="{{ $entity }}" name="entity_id">
                                    <input type="hidden" id="activity_id" value="{{ $activity->id }}"
                                        name="activity_id">
                                </div>
                                <div class="form-group row col-md-12">
                                    <div class="col-md-5">
                                        <label class="control-label  font-bold">
                                            Pourcentage
                                        </label>
                                        <input type="text"
                                            class="form-control is-editable  @error('percentage') is-invalid @enderror"
                                            value="{{ $subactivity->percentage }}" name="percentage" disabled>
                                        @error('percentage')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-6" hidden>
                                        <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>

                            </div>

                        </div>

                        <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"
                                        id="abort">
                                        Abandonner
                                    </button>
                                    <button type="submit" class="btn waves-effect waves-light btn-success ml-4"
                                        id="validate">
                                        Valider
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                </form>
                {{-- ACTIVITY END FORM --}}
            </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">
                        {{-- action="{{route('activity.store')}}" --}}
                        <form action="{{ route('activity.subactivity.destroy', [$activity->id, $subactivity->id]) }}"
                            method="post">
                            @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="createActivity">Supprimer</button>
                            </div>
                        </form>
                    </div>
                </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