@extends('layouts.candidate.main')

@section('style')
    <!-- This page CSS -->
    {{-- <link href="{{ asset("assets/libs/jquery-steps/jquery.steps.css") }}" rel="stylesheet"> --}}
    {{-- <link href="{{ asset("assets/libs/jquery-steps/steps.css") }}" rel="stylesheet"> --}}

    <style>
        .tags-input-wrapper{
            background: transparent;
            padding: 10px;
            border-radius: 4px;
            /* max-width: 400px; */
            border: 1px solid #ccc
        }
        .tags-input-wrapper input{
            border: none;
            background: transparent;
            outline: none;
            width: 140px;
            margin-left: 8px;
        }
        .tags-input-wrapper .tag{
            display: inline-block;
            background-color: #2cd07e; /* #fa0e7e; */
            color: white;
            border-radius: 40px;
            padding: 0px 3px 0px 7px;
            margin-right: 5px;
            margin-bottom:5px;
            box-shadow: 0 5px 15px -2px #2cd07e; /* rgba(250 , 14 , 126 , .7) */
        }
        .tags-input-wrapper .tag a {
            margin: 0 7px 3px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
@endsection

@section('content')
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb border-bottom">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-xs-12 justify-content-start d-flex align-items-center">
                    <h5 class="font-weight-medium text-uppercase mb-0">
                        @isset($activites_pedagogiques)
                            Edition du dossier de candidature
                        @else
                            Formulaire de soumission de candidature
                        @endisset
                    </h5>
                </div>
                <div class="col-lg-8 col-md-8 col-xs-12 d-flex justify-content-start justify-content-md-end align-self-center">
                    <nav aria-label="breadcrumb" class="mt-2">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('candidate.index') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">
                                @isset($activites_pedagogiques)
                                    Edition
                                @else
                                    Soumission
                                @endisset
                            </li>
                        </ol>
                    </nav>
                    {{-- <button class="btn btn-danger text-white ms-3 d-none d-md-block">Buy Ample Admin</button> --}}
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- -------------------------------------------------------------- -->
        <!-- Container fluid  -->
        <!-- -------------------------------------------------------------- -->
        <div class="container-fluid page-content">
            <!-- -------------------------------------------------------------- -->
            <!-- Start Page Content -->
            <!-- -------------------------------------------------------------- -->
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between mb-2">
                        <button
                            type="button"
                            class="btn fw-bold"
                            onclick="history.back()"
                        >
                            <h5>
                                <i class="fas fa-arrow-left"></i> <span class="mx-2">Retour</span>
                            </h5>
                        </button>
                        @isset($candidature)
                            @isset($suggestions)
                                @if($candidature->status == "en_cours" && count($suggestions) > 0)
                                    <button
                                        type="button"
                                        class="btn btn-danger fw-bold"
                                        data-bs-toggle="modal"
                                        data-bs-target="#suggestions-modal"
                                    >
                                        <i class="fas fa-exclamation-circle"></i>
                                        Suggestions
                                    </button>
                                @endif
                            @endisset
                        @endisset
                    </div>

                    @isset($candidature)
                        @isset($suggestions)
                            <!-- Vertically centered modal -->
                            <div class="modal fade" id="suggestions-modal" tabindex="-1" aria-labelledby="vertical-center-modal" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header d-flex align-items-center">
                                            <h4 class="modal-title" id="myLargeModalLabel"> Recommendations et suggestions </h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            @php $i = 1;@endphp
                                            @foreach ($suggestions as $suggestion)
                                                <h4>Suggestion N°{{ $i }}</h4>
                                                <p>
                                                    <small class="text-muted">
                                                        <i class="fas fa-clock"></i>
                                                        Fait le {{ $suggestion->created_at }}
                                                    </small>
                                                </p>
                                                <p>{{ $suggestion->content }}</p>
                                                @if($suggestion->filename)
                                                    <div class="mb-3 p-2 d-flex flex-column align-items-center mt-3">
                                                        <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                        <button
                                                            type="button"
                                                            class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium"
                                                            id="openPdfButton_suggestion-{{ $suggestion->id }}"
                                                            data-pdf="{{ config('app.aws_url') . $suggestion->filename }}"
                                                        >
                                                            Lire
                                                        </button>
                                                    </div>
                                                @endif
                                                <hr>
                                                @php $i++;@endphp
                                            @endforeach
                                        </div>
                                        <div class="modal-footer">
                                            <button
                                                type="button"
                                                class="btn btn-light-danger text-danger font-weight-medium waves-effect text-start"
                                                data-bs-dismiss="modal"
                                            >
                                                Fermer
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endisset
                    @endisset

                    <div class="card">
                        <div class="border-bottom title-part-padding">
                            <h4 class="card-title mb-0">Candidature - Etape 3/14 : <span class="text-success">Activités pédagogiques</span></h4>
                        </div>
                        <div class="card-body wizard-content">
                            <h6 class="card-subtitle mb-3"></h6>
                            @isset($activites_pedagogiques)
                                <form method="POST" action="{{ url("/pedagogie/update") }}" class="validation-wizard wizard-circle" enctype="multipart/form-data">
                                @method('PATCH')
                            @else
                                <form method="POST" action="{{ url("/pedagogie") }}" class="validation-wizard wizard-circle" enctype="multipart/form-data">
                            @endisset
                                 @csrf
                                <!-- Step 3 -->
                                <section>
                                    <div class="">
                                        {{-- <h2 class="text-center text-success mt-3 mb-5 mx-auto">Constitution du dossier de candidature au CAMES</h2> --}}
                                        <fieldset>
                                            {{-- <h3 class="text-center mb-3 mx-auto">Activités pédagogiques</h3> --}}
                                            <div class="mt-2 mb-2">
                                                <div class="repeater-default mt-4">
                                                    <ol>
                                                        <div data-repeater-list="activites_pedagogiques">
                                                            @isset($activites_pedagogiques)
                                                                @foreach ($activites_pedagogiques as $activite_pedagogique)
                                                                    <div data-repeater-item="activite_pedagogique">
                                                                        <div class="border shadow-lg mt-2" style="border-radius: 2.5rem;">
                                                                            <div class="col-md-1 d-flex flex-column justify-content-center mt-2">
                                                                                <li class="fw-bold mx-auto"></li>
                                                                            </div>
                                                                            <input type="hidden" class="form-control" name="id" value="{{ $activite_pedagogique->id }}">
                                                                            <div class="row p-4">
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="annee_exercice_update_{{ $activite_pedagogique->id }}">Année d'exercice :</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control"
                                                                                        id="annee_exercice_update_{{ $activite_pedagogique->id }}"
                                                                                        name="annee"
                                                                                        value="{{ $activite_pedagogique->annee }}"
                                                                                        placeholder="Insérez l'année d'exercice de l'activité"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="heures_theoriques_update_{{ $activite_pedagogique->id }}">Masse horaire Cours théoriques</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control cours-theoriques"
                                                                                        id="heures_theoriques_update_{{ $activite_pedagogique->id }}"
                                                                                        name="heures_theoriques"
                                                                                        value="{{ $activite_pedagogique->heures_theoriques }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le masse horaire des cours théoriques"
                                                                                        onchange="calculateTotal('heures_theoriques_update_{{ $activite_pedagogique->id }}', 'heures_tps_update_{{ $activite_pedagogique->id }}', 'heures_tds_update_{{ $activite_pedagogique->id }}', 'heures_sorties_update_{{ $activite_pedagogique->id }}', 'heures_tpes_update_{{ $activite_pedagogique->id }}', 'volume_horaire_update_{{ $activite_pedagogique->id }}')"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="heures_tps_update_{{ $activite_pedagogique->id }}">Masse horaire TPs</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control tps"
                                                                                        id="heures_tps_update_{{ $activite_pedagogique->id }}"
                                                                                        name="heures_tps"
                                                                                        value="{{ $activite_pedagogique->heures_tps }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le masse horaire des TPs"
                                                                                        onchange="calculateTotal('heures_theoriques_update_{{ $activite_pedagogique->id }}', 'heures_tps_update_{{ $activite_pedagogique->id }}', 'heures_tds_update_{{ $activite_pedagogique->id }}', 'heures_sorties_update_{{ $activite_pedagogique->id }}', 'heures_tpes_update_{{ $activite_pedagogique->id }}', 'volume_horaire_update_{{ $activite_pedagogique->id }}')"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="heures_tds_update_{{ $activite_pedagogique->id }}">Masse horaire TDs</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control tds"
                                                                                        id="heures_tds_update_{{ $activite_pedagogique->id }}"
                                                                                        name="heures_tds"
                                                                                        value="{{ $activite_pedagogique->heures_tds }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le masse horaire des TDs"
                                                                                        onchange="calculateTotal('heures_theoriques_update_{{ $activite_pedagogique->id }}', 'heures_tps_update_{{ $activite_pedagogique->id }}', 'heures_tds_update_{{ $activite_pedagogique->id }}', 'heures_sorties_update_{{ $activite_pedagogique->id }}', 'heures_tpes_update_{{ $activite_pedagogique->id }}', 'volume_horaire_update_{{ $activite_pedagogique->id }}')"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="heures_sorties_update_{{ $activite_pedagogique->id }}">Masse horaire Sorties pédagogiques</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control sorties"
                                                                                        id="heures_sorties_update_{{ $activite_pedagogique->id }}"
                                                                                        name="heures_sorties"
                                                                                        value="{{ $activite_pedagogique->heures_sorties }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le masse horaire des sorties pédagogiques"
                                                                                        onchange="calculateTotal('heures_theoriques_update_{{ $activite_pedagogique->id }}', 'heures_tps_update_{{ $activite_pedagogique->id }}', 'heures_tds_update_{{ $activite_pedagogique->id }}', 'heures_sorties_update_{{ $activite_pedagogique->id }}', 'heures_tpes_update_{{ $activite_pedagogique->id }}', 'volume_horaire_update_{{ $activite_pedagogique->id }}')"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="heures_tpes_update_{{ $activite_pedagogique->id }}">Masse horaire TPE</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control tpes"
                                                                                        id="heures_tpes_update_{{ $activite_pedagogique->id }}"
                                                                                        name="heures_tpes"
                                                                                        value="{{ $activite_pedagogique->heures_tpes }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le masse horaire des travaux personnels de l'étudiant (TPE)"
                                                                                        onchange="calculateTotal('heures_theoriques_update_{{ $activite_pedagogique->id }}', 'heures_tps_update_{{ $activite_pedagogique->id }}', 'heures_tds_update_{{ $activite_pedagogique->id }}', 'heures_sorties_update_{{ $activite_pedagogique->id }}', 'heures_tpes_update_{{ $activite_pedagogique->id }}', 'volume_horaire_update_{{ $activite_pedagogique->id }}')"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="volume_horaire_update_{{ $activite_pedagogique->id }}">Volume horaire total :</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control volume-horaire"
                                                                                        id="volume_horaire_update_{{ $activite_pedagogique->id }}"
                                                                                        name="volume_horaire"
                                                                                        value="{{ $activite_pedagogique->volume_horaire }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez le volume horaire total de l'activité"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="mb-3 col-md-6">
                                                                                    <label for="etablissement_update_{{ $activite_pedagogique->id }}">Etalissement</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="etablissement_update_{{ $activite_pedagogique->id }}"
                                                                                        name="etablissement"
                                                                                        value="{{ $activite_pedagogique->etablissement }}"
                                                                                        min="0"
                                                                                        placeholder="Insérez l'intitulé de l'établissement"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                </div>
                                                                                <div class="col-md-11"></div>
                                                                                <div class="d-flex justify-content-center align-items-center col-md-1 mb-3 ml-auto">
                                                                                    <a
                                                                                        href="{{ route("pedagogique.delete", ['id' => $activite_pedagogique->id]) }}"
                                                                                        data-repeater-delete=""
                                                                                        class="delete-buttons btn rounded-pill px-4 btn-light-danger text-danger text-center font-weight-medium waves-effect waves-light ml-auto"
                                                                                        type="button"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    style="pointer-events: none;"
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                        <i data-feather="trash-2" class="feather-sm ms-2 fill-white"></i>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <div data-repeater-item="activite_pedagogique">
                                                                    <div class="border shadow-lg mt-2" style="border-radius: 2.5rem;">
                                                                        <div class="col-md-1 d-flex flex-column justify-content-center mt-2">
                                                                            <li class="fw-bold mx-auto"></li>
                                                                        </div>
                                                                        <div class="row p-4">
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="annee_exercice">Année d'exercice :</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control"
                                                                                    id="annee_exercice"
                                                                                    name="annee"
                                                                                    placeholder="Insérez l'année d'exercice de l'activité"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="heures_theoriques">Masse horaire Cours théoriques</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control cours-theoriques"
                                                                                    id="heures_theoriques"
                                                                                    name="heures_theoriques"
                                                                                    min="0"
                                                                                    placeholder="Insérez le masse horaire des cours théoriques"
                                                                                    onchange="calculateTotal('heures_theoriques', 'heures_tps', 'heures_tds', 'heures_sorties', 'heures_tpes', 'volume_horaire')"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="heures_tps">Masse horaire TPs</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control tps"
                                                                                    id="heures_tps"
                                                                                    name="heures_tps"
                                                                                    min="0"
                                                                                    placeholder="Insérez le masse horaire des TPs"
                                                                                    onchange="calculateTotal('heures_theoriques', 'heures_tps', 'heures_tds', 'heures_sorties', 'heures_tpes', 'volume_horaire')"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="heures_tds">Masse horaire TDs</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control tds"
                                                                                    id="heures_tds"
                                                                                    name="heures_tds"
                                                                                    min="0"
                                                                                    placeholder="Insérez le masse horaire des TDs"
                                                                                    onchange="calculateTotal('heures_theoriques', 'heures_tps', 'heures_tds', 'heures_sorties', 'heures_tpes', 'volume_horaire')"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="heures_sorties">Masse horaire Sorties pédagogiques</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control sorties"
                                                                                    id="heures_sorties"
                                                                                    name="heures_sorties"
                                                                                    min="0"
                                                                                    placeholder="Insérez le masse horaire des sorties pédagogiques"
                                                                                    onchange="calculateTotal('heures_theoriques', 'heures_tps', 'heures_tds', 'heures_sorties', 'heures_tpes', 'volume_horaire')"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="heures_tpes">Masse horaire TPE</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control tpes"
                                                                                    id="heures_tpes"
                                                                                    name="heures_tpes"
                                                                                    min="0"
                                                                                    placeholder="Insérez le masse horaire des travaux personnels de l'étudiant (TPE)"
                                                                                    onchange="calculateTotal('heures_theoriques', 'heures_tps', 'heures_tds', 'heures_sorties', 'heures_tpes', 'volume_horaire')"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="volume_horaire">Volume horaire total :</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control volume-horaire"
                                                                                    id="volume_horaire"
                                                                                    name="volume_horaire"
                                                                                    min="0"
                                                                                    placeholder="Insérez le volume horaire total de l'activité"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3 col-md-6">
                                                                                <label for="etablissement">Etalissement</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="etablissement"
                                                                                    name="etablissement"
                                                                                    placeholder="Insérez l'intitulé de l'établissement"
                                                                                >
                                                                            </div>
                                                                            <div class="col-md-11"></div>
                                                                            <div class="d-flex justify-content-center align-items-center col-md-1 mb-3 ml-auto">
                                                                                <button
                                                                                    data-repeater-delete=""
                                                                                    class="btn rounded-pill px-4 btn-light-danger text-danger text-center font-weight-medium waves-effect waves-light ml-auto"
                                                                                    type="button"
                                                                                >
                                                                                    <i data-feather="trash-2" class="feather-sm ms-2 fill-white"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endisset
                                                        </div>
                                                    </ol>
                                                    <div class="mt-3 pt-3 border-top">
                                                        <button
                                                            type="button"
                                                            data-repeater-create="diplomes"
                                                            class="btn btn-info rounded-pill px-4 waves-effect waves-light"
                                                            @isset($candidature)
                                                                @isset($suggestions)
                                                                    @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                        disabled
                                                                    @endif
                                                                @endisset
                                                            @endisset
                                                        >
                                                            <div class="d-flex align-items-center">
                                                                Ajouter
                                                                <i data-feather="plus-circle" class="feather-sm ms-2 fill-white"></i>
                                                            </div>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <hr>
                                        <fieldset>
                                            <h3 class="text-center mt-4 mb-3 mx-auto">Fichiers à télécharger</h3>
                                            <div class="row mt-5 mb-5 mx-5">
                                                <div class="mb-3 col-md-6">
                                                    <label for="attestation_activites_1">Attestation des activités pédagogiques 1ère partie</label>
                                                    <input
                                                        type="file"
                                                        class="form-control"
                                                        id="attestation_activites_1"
                                                        name="attestation_activites_1"
                                                        placeholder="Insérez l'Attestation des activités pédagogiques 1ère partie"
                                                        accept="application/pdf"
                                                        @isset($candidature)
                                                            @isset($suggestions)
                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                    disabled
                                                                @endif
                                                            @endisset
                                                        @endisset
                                                    >
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label for="attestation_activites_2">Attestation des activités pédagogiques 2ème partie</label>
                                                    <input
                                                        type="file"
                                                        class="form-control"
                                                        id="attestation_activites_2"
                                                        name="attestation_activites_2"
                                                        placeholder="Insérez l'Attestation des activités pédagogiques 2ème partie"
                                                        accept="application/pdf"
                                                        @isset($candidature)
                                                            @isset($suggestions)
                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                    disabled
                                                                @endif
                                                            @endisset
                                                        @endisset
                                                    >
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label for="attestation_formation">Attestation de formation pédagogique (LAFMA)</label>
                                                    <input
                                                        type="file"
                                                        class="form-control"
                                                        id="attestation_formation"
                                                        name="attestation_formation"
                                                        placeholder="Insérez l'Attestation de formation pédagogique (LAFMA)"
                                                        accept="application/pdf"
                                                        @isset($candidature)
                                                            @isset($suggestions)
                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                    disabled
                                                                @endif
                                                            @endisset
                                                        @endisset
                                                    >
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label for="lettre">Lettre de désignation de l'évaluateur pédagogique</label>
                                                    <input
                                                        type="file"
                                                        class="form-control"
                                                        id="lettre"
                                                        name="lettre"
                                                        placeholder="Insérez la lettre de désignation de l'évaluateur pédagogique"
                                                        accept="application/pdf"
                                                        @isset($candidature)
                                                            @isset($suggestions)
                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                    disabled
                                                                @endif
                                                            @endisset
                                                        @endisset
                                                    >
                                                </div>
                                                <div class="mb-3 col-md-6">
                                                    <label for="attestation_charges">Attestation des charges pédagogiques et de recherche (LAFPT)</label>
                                                    <input
                                                        type="file"
                                                        class="form-control"
                                                        id="attestation_charges"
                                                        name="attestation_charges"
                                                        placeholder="Insérez l'Attestation des charges pédagogiques et de recherche (LAFPT)"
                                                        accept="application/pdf"
                                                        @isset($candidature)
                                                            @isset($suggestions)
                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                    disabled
                                                                @endif
                                                            @endisset
                                                        @endisset
                                                    >
                                                </div>
                                            </div>
                                            @isset($pedagogiques_files)
                                                <input type="hidden" name="files_id" value="{{ $pedagogiques_files->id }}">
                                                <div class="d-flex justify-content-around mt-5 mb-5 mx-5">
                                                    @if($pedagogiques_files->attestation_activites_1)
                                                        <div class="d-flex flex-column align-items-center">
                                                            <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                            <p class="card-title text-center mt-3">Attestation des activités pédagogiques 1ère partie</p>
                                                            <button
                                                                type="button"
                                                                class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                id="openPdfButton_attestation_activites_1"
                                                                data-pdf="{{ config('app.aws_url') . $pedagogiques_files->attestation_activites_1 }}"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    @endif
                                                    @if($pedagogiques_files->attestation_activites_2)
                                                        <div class="d-flex flex-column align-items-center">
                                                            <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                            <p class="card-title text-center mt-3">Attestation des activités pédagogiques 2ème partie</p>
                                                            <button
                                                                type="button"
                                                                class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                id="openPdfButton_attestation_activites_2"
                                                                data-pdf="{{ config('app.aws_url') . $pedagogiques_files->attestation_activites_2 }}"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    @endif
                                                    @if($pedagogiques_files->attestation_formation)
                                                        <div class="d-flex flex-column align-items-center">
                                                            <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                            <p class="card-title text-center mt-3">Attestation de formation pédagogique (LAFMA)</p>
                                                            <button
                                                                type="button"
                                                                class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                id="openPdfButton_attestation_formation"
                                                                data-pdf="{{ config('app.aws_url') . $pedagogiques_files->attestation_formation }}"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    @endif
                                                    @if($pedagogiques_files->lettre)
                                                        <div class="d-flex flex-column align-items-center">
                                                            <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                            <p class="card-title text-center mt-3">Lettre de désignation de l'évaluateur pédagogique</p>
                                                            <button
                                                                type="button"
                                                                class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                id="openPdfButton_lettre"
                                                                data-pdf="{{ config('app.aws_url') . $pedagogiques_files->lettre }}"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    @endif
                                                    @if($pedagogiques_files->attestation_charges)
                                                        <div class="d-flex flex-column align-items-center">
                                                            <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                            <p class="card-title text-center mt-3">Attestation des charges pédagogiques et de recherche (LAFPT)</p>
                                                            <button
                                                                type="button"
                                                                class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                id="openPdfButton_attestation_charges"
                                                                data-pdf="{{ config('app.aws_url') . $pedagogiques_files->attestation_charges }}"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog modal-fullscreen">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title h4" id="pdfModalLabel">Visualiseur PDF</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <iframe id="pdfViewer" width="100%" height="500"></iframe>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-light-danger text-danger font-weight-medium" data-bs-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endisset
                                        </fieldset>
                                    </div>
                                </section>
                                <div class="d-flex justify-content-end">
                                    <button
                                        type="submit"
                                        class="btn px-4 rounded-pill btn-info ml-auto"
                                        style="margin-right: 10px;"
                                        @isset($candidature)
                                            @isset($suggestions)
                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                    disabled
                                                @endif
                                            @endisset
                                        @endisset
                                    >
                                        Enregistrer
                                    </button>
                                    <button
                                        type="button"
                                        class="btn px-4 rounded-pill btn-primary d-flex flex-column justify-content-center"
                                        style="margin-right: 10px;"
                                        onclick="history.back()"
                                    >
                                        {{-- Précédent --}}
                                        <i class="icon-arrow-left-circle"></i>
                                    </button>
                                    <a
                                        @isset($activites_pedagogiques)
                                            href="{{ route("candidate.get_step4") }}"
                                        @else
                                            href="{{ route('candidate.submission_step4') }}"
                                        @endisset
                                        type="button"
                                        class="btn px-4 rounded-pill btn-primary d-flex flex-column justify-content-center"
                                    >
                                        {{-- Suivant --}}
                                        <i class="icon-arrow-right-circle"></i>
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- -------------------------------------------------------------- -->
            <!-- End PAge Content -->
            <!-- -------------------------------------------------------------- -->
        </div>
        <!-- -------------------------------------------------------------- -->
        <!-- End Container fluid  -->
        <!-- -------------------------------------------------------------- -->
    </div>
@endsection

@section('script')

    {{-- <script src="{{ asset("assets/libs/jquery-steps/build/jquery.steps.min.js") }}"></script> --}}
    <script src="{{ asset("assets/libs/jquery-validation/dist/jquery.validate.min.js") }}"></script>
    <script src="{{ asset("assets/libs/jquery.repeater/jquery.repeater.min.js") }}"></script>
    {{-- <script src="{{ asset("assets/extra-libs/jquery.repeater/repeater-init.js") }}"></script> --}}

    <script>
        function calculateTotal (heures_theoriques_id, heures_tps_id, heures_tds_id, heures_sorties_id, heures_tpes_id, volume_horaire_id) {

            let heures_theoriques = document.getElementById(heures_theoriques_id);
            let heures_tps = document.getElementById(heures_tps_id);
            let heures_tds = document.getElementById(heures_tds_id);
            let heures_sorties = document.getElementById(heures_sorties_id);
            let heures_tpes = document.getElementById(heures_tpes_id);
            let volume_horaire = document.getElementById(volume_horaire_id);

            let heures_theoriques_value = 0;
            let heures_tps_value = 0;
            let heures_tds_value = 0;
            let heures_sorties_value = 0;
            let heures_tpes_value = 0;
            let volume_horaire_value = 0;

            if (heures_theoriques.value) {
                heures_theoriques_value = heures_theoriques.value
            }

            if (heures_tps.value) {
                heures_tps_value = heures_tps.value;
            }

            if (heures_tds.value) {
                heures_tds_value = heures_tds.value;
            }

            if (heures_sorties.value) {
                heures_sorties_value = heures_sorties.value;
            }

            if (heures_tpes.value) {
                heures_tpes_value = heures_tpes.value;
            }

            volume_horaire.value = parseInt(heures_theoriques_value)
                                    + parseInt(heures_tps_value)
                                    + parseInt(heures_tds_value)
                                    + parseInt(heures_sorties_value)
                                    + parseInt(heures_tpes_value);

        }
    </script>

    <script>

        @isset($pedagogiques_files)
            $('#openPdfButton_attestation_activites_1').on("click", (event) => {
                event.preventDefault();

                const file = $('#openPdfButton_attestation_activites_1')[0].dataset.pdf;

                // const pdfPath = "/storage/pdfs/ample-admin-template-by-wrappixel_20231023133936.pdf";
                const pdfPath = file;
                const pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = `${pdfPath}`;
                openPdfModal();
            });

            $('#openPdfButton_attestation_activites_2').on("click", (event) => {
                event.preventDefault();

                const file = $('#openPdfButton_attestation_activites_2')[0].dataset.pdf;

                const pdfPath = file;
                const pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = `${pdfPath}`;
                openPdfModal();
            });

            $('#openPdfButton_attestation_formation').on("click", (event) => {
                event.preventDefault();

                const file = $('#openPdfButton_attestation_formation')[0].dataset.pdf;

                const pdfPath = file;
                const pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = `${pdfPath}`;
                openPdfModal();
            });

            $('#openPdfButton_lettre').on("click", (event) => {
                event.preventDefault();

                const file = $('#openPdfButton_lettre')[0].dataset.pdf;

                const pdfPath = file;
                const pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = `${pdfPath}`;
                openPdfModal();
            });

            $('#openPdfButton_attestation_charges').on("click", (event) => {
                event.preventDefault();

                const file = $('#openPdfButton_attestation_charges')[0].dataset.pdf;

                const pdfPath = file;
                const pdfViewer = document.getElementById("pdfViewer");
                pdfViewer.src = `${pdfPath}`;
                openPdfModal();
            });
        @endisset

        @isset($suggestionsIds)
            let suggestionsIds = @json($suggestionsIds, JSON_PRETTY_PRINT);
            suggestionsIds.forEach(element => {
                $('#openPdfButton_suggestion-'+ element).on("click", (event) => {
                    event.preventDefault();
                    console.log(element);

                    const file = $('#openPdfButton_suggestion-'+ element)[0].dataset.pdf;

                    const pdfPath = file;
                    const pdfViewer = document.getElementById("pdfViewer");
                    pdfViewer.src = `${pdfPath}`;
                    openPdfModal();
                });
            });
        @endisset

        function openPdfModal() {
            const pdfModal = new bootstrap.Modal(document.getElementById("pdfModal"));
            pdfModal.show();
        }
    </script>

    <script>

        $(function() {
            'use strict';

            // Default
            $('.repeater-default').repeater({
                show: function() {
                    $(this).slideDown();

                    var index = $(this).closest('[data-repeater-item]').index();

                    let cours_theoriques = $('.cours-theoriques');
                    let tps = $('.tps');
                    let tds = $('.tds');
                    let sorties = $('.sorties');
                    let tpes = $('.tpes');
                    let volume_horaire = $('.volume-horaire');

                    cours_theoriques[cours_theoriques.length - 1].setAttribute('id', 'heures_theoriques_'+ index);
                    tps[tps.length - 1].setAttribute('id', 'heures_tps_'+ index);
                    tds[tds.length - 1].setAttribute('id', 'heures_tds_'+ index);
                    sorties[sorties.length - 1].setAttribute('id', 'heures_sorties_'+ index);
                    tpes[tpes.length - 1].setAttribute('id', 'heures_tpes_'+ index);
                    volume_horaire[volume_horaire.length - 1].setAttribute('id', 'volume_horaire_'+ index);

                    cours_theoriques[cours_theoriques.length - 1].setAttribute("onchange", "calculateTotal('heures_theoriques_"+ index +"', 'heures_tps_"+ index +"', 'heures_tds_"+ index +"', 'heures_sorties_"+ index +"', 'heures_tpes_"+ index +"', 'volume_horaire_"+ index +"')");
                    tps[tps.length - 1].setAttribute("onchange", "calculateTotal('heures_theoriques_"+ index +"', 'heures_tps_"+ index +"', 'heures_tds_"+ index +"', 'heures_sorties_"+ index +"', 'heures_tpes_"+ index +"', 'volume_horaire_"+ index +"')");
                    tds[tds.length - 1].setAttribute("onchange", "calculateTotal('heures_theoriques_"+ index +"', 'heures_tps_"+ index +"', 'heures_tds_"+ index +"', 'heures_sorties_"+ index +"', 'heures_tpes_"+ index +"', 'volume_horaire_"+ index +"')");
                    sorties[sorties.length - 1].setAttribute("onchange", "calculateTotal('heures_theoriques_"+ index +"', 'heures_tps_"+ index +"', 'heures_tds_"+ index +"', 'heures_sorties_"+ index +"', 'heures_tpes_"+ index +"', 'volume_horaire_"+ index +"')");
                    tpes[tpes.length - 1].setAttribute("onchange", "calculateTotal('heures_theoriques_"+ index +"', 'heures_tps_"+ index +"', 'heures_tds_"+ index +"', 'heures_sorties_"+ index +"', 'heures_tpes_"+ index +"', 'volume_horaire_"+ index +"')");

                    // console.log(index);

                    @isset($activites_pedagogiques)
                        let delete_buttons = $('.delete-buttons');

                        delete_buttons[delete_buttons.length - 1].setAttribute("href", "javascript:void(0);");
                        console.log(delete_buttons);
                    @endisset

                },
            });
        });

    </script>

@endsection