@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"> --}}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/libs/dropzone/dist/min/dropzone.min.css") }}">
    <link rel="stylesheet" type="text/css" href="../assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

    <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')
    @isset($articles)
        @php
            $articles_ids = array_column(json_decode($articles, true), 'id');
        @endphp
    @endisset
    <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($articles)
                            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($articles)
                                    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 8/14 : <span class="text-success">Publications scientifiques</span> - Partie 1/8</h4>
                        </div>
                        <div class="card-body wizard-content">
                            <h6 class="card-subtitle mb-3"></h6>
                            @isset($articles)
                                <form method="POST" action= "{{ url("/article/update") }}" class="validation-wizard wizard-circle" enctype="multipart/form-data">
                                @method('PATCH')
                            @else
                                <form method="POST" action= "{{ url("/article") }}" class="validation-wizard wizard-circle" enctype="multipart/form-data">
                            @endisset
                                @csrf
                                <!-- Step 8 Part 1 -->
                                <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">Articles indexés dans les revues</h3>
                                            <div class="repeater-default mt-4">
                                                <ol>
                                                    <div class="mb-3" style="display:none">
                                                        <input
                                                            type="hidden"
                                                            class="form-control"
                                                            id="req"
                                                            name="source"
                                                            value="indexe"
                                                        >
                                                    </div>
                                                    <div data-repeater-list="articles">
                                                        @isset($articles)
                                                            @foreach ($articles as $article)
                                                                <div data-repeater-item="article">
                                                                    <div class="panel border shadow-lg mt-2 p-4" 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">
                                                                            <div class="mb-3" style="display:none">
                                                                                <input
                                                                                    type="hidden"
                                                                                    class="form-control"
                                                                                    id="genre_update_{{ $article->id }}"
                                                                                    name="genre"
                                                                                    value="indexe"
                                                                                >
                                                                            </div>
                                                                            <input type="hidden" name="id" value="{{ $article->id }}">
                                                                            <div class="col-md-6">
                                                                                <div class="mb-3">
                                                                                    <label for="titre_update_{{ $article->id }}">Titre :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="titre_update_{{ $article->id }}"
                                                                                        name="titre"
                                                                                        value="{{ $article->titre }}"
                                                                                        placeholder="Insérez le titre de l'article indexé"
                                                                                        @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">
                                                                                    <label for="nom_revue_update_{{ $article->id }}">Nom de la revue :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="nom_revue_update_{{ $article->id }}"
                                                                                        name="nom_revue"
                                                                                        value="{{ $article->revue_name }}"
                                                                                        placeholder="Insérez le nom de la revue de l'article indexé"
                                                                                        @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">
                                                                                    <label for="isbn_issn_update_{{ $article->id }}">ISBN/ISSN :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control isbn-inputmask"
                                                                                        id="isbn_issn_update_{{ $article->id }}"
                                                                                        name="isbn_issn"
                                                                                        value="{{ $article->isbn_issn }}"
                                                                                        placeholder="Insérez l'ISBN/ISSN de l'article indexé"
                                                                                        @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">
                                                                                    <label for="editeur_update_{{ $article->id }}">Editeur :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="editeur_update_{{ $article->id }}"
                                                                                        name="editeur"
                                                                                        value="{{ $article->editeur }}"
                                                                                        placeholder="Insérez l'éditeur de l'article indexé"
                                                                                        @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">
                                                                                    <label for="type_update_{{ $article->id }}">Type de revue :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="type_update_{{ $article->id }}"
                                                                                        name="type"
                                                                                        value="{{ $article->revue_type }}"
                                                                                        placeholder="Insérez le type de revue de l'article indexé"
                                                                                        @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">
                                                                                    <label for="langue_update_{{ $article->id }}">Langue de la revue :</label>
                                                                                    <select
                                                                                        class="form-select"
                                                                                        id="langue_update_{{ $article->id }}"
                                                                                        name="langue"
                                                                                        required
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                        <option value="" disabled>Sélectionnez la langue de la revue de l'article indexé</option>
                                                                                        <option value="anglais" @if ($article->revue_langue == "anglais") selected @endif>Anglais</option>
                                                                                        <option value="francais" @if ($article->revue_langue == "francais") selected @endif>Français</option>
                                                                                        <option value="espagnol" @if ($article->revue_langue == "espagnol") selected @endif>Espagnol</option>
                                                                                        <option value="portugais" @if ($article->revue_langue == "portugais") selected @endif>Portugais</option>
                                                                                        <option value="arabe" @if ($article->revue_langue == "arabe") selected @endif>Arabe</option>
                                                                                        <option value="allemand" @if ($article->revue_langue == "allemand") selected @endif>Allemand</option>
                                                                                        <option value="russe" @if ($article->revue_langue == "russe") selected @endif>Russe</option>
                                                                                        <option value="mandarin" @if ($article->revue_langue == "mandarin") selected @endif>Mandarin</option>
                                                                                        <option value="swahili" @if ($article->revue_langue == "swahili") selected @endif>Swahili</option>
                                                                                        <option value="hindi" @if ($article->revue_langue == "hindi") selected @endif>Hindi</option>
                                                                                    </select>
                                                                                </div>
                                                                                <div class="mb-3">
                                                                                    <label for="portee_update_{{ $article->id }}">Portée de la revue :</label>
                                                                                    <select
                                                                                        class="form-select"
                                                                                        id="portee_update_{{ $article->id }}"
                                                                                        name="portee"
                                                                                        required
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >
                                                                                        <option value="" disabled>Sélectionnez la portée de la revue de l'article indexé</option>
                                                                                        <option value="internationale" @if ($article->portee_revue == "internationale") selected @endif>Revue internationale</option>
                                                                                        <option value="regionale" @if ($article->portee_revue == "regionale") selected @endif>Revue régionale</option>
                                                                                        <option value="nationale" @if ($article->portee_revue == "nationale") selected @endif>Revue nationale</option>
                                                                                    </select>
                                                                                </div>
                                                                                <div class="mb-3">
                                                                                    <label for="references_update_{{ $article->id }}">Références de la revue :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="references_update_{{ $article->id }}"
                                                                                        name="references"
                                                                                        value="{{ $article->reference_revue }}"
                                                                                        placeholder="Insérez les références de la revue de l'article indexé"
                                                                                        @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">
                                                                                    <label for="nombre_pages_update_{{ $article->id }}">Nombre de pages :</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control"
                                                                                        id="nombre_pages_update_{{ $article->id }}"
                                                                                        name="pages"
                                                                                        value="{{ $article->pages }}"
                                                                                        placeholder="Insérez le nombre de pages de l'article indexé"
                                                                                        @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">
                                                                                    <label for="date_public_{{ $article->id }}">Date de publication :</label>
                                                                                    <div class="input-group">
                                                                                        <input
                                                                                            type="date"
                                                                                            class="form-control"
                                                                                            id="date_public_{{ $article->id }}"
                                                                                            name="date_publication"
                                                                                            value="{{ $article->date_publication }}"
                                                                                            placeholder="mm/dd/yyyy"
                                                                                            @isset($candidature)
                                                                                                @isset($suggestions)
                                                                                                    @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                        disabled
                                                                                                    @endif
                                                                                                @endisset
                                                                                            @endisset
                                                                                        >
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div class="mb-3">
                                                                                    <label for="resume_update_{{ $article->id }}">Résumé :</label>
                                                                                    <textarea
                                                                                        class="form-control"
                                                                                        id="resume_update_{{ $article->id }}"
                                                                                        name="resume"
                                                                                        cols="30"
                                                                                        rows="5"
                                                                                        placeholder="Insérez le résumé de l'article indexé"
                                                                                        @isset($candidature)
                                                                                            @isset($suggestions)
                                                                                                @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                    disabled
                                                                                                @endif
                                                                                            @endisset
                                                                                        @endisset
                                                                                    >{{ $article->resume }}</textarea>
                                                                                </div>
                                                                                <div class="mb-3">
                                                                                    <label for="mots_cles_update_{{ $article->id }}">Mots clés :</label>
                                                                                    <input
                                                                                        class=""
                                                                                        type="text"
                                                                                        id="mots_cles_update_{{ $article->id }}"
                                                                                        name="mots_cles"
                                                                                        @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">
                                                                                    <label for="auteurs_update_{{ $article->id }}">Auteurs :</label>
                                                                                    <input
                                                                                        class=""
                                                                                        type="text"
                                                                                        id="auteurs_update_{{ $article->id }}"
                                                                                        name="auteurs"
                                                                                        @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">
                                                                                    <label for="rang_update_{{ $article->id }}">Rang parmi les auteurs :</label>
                                                                                    <input
                                                                                        type="number"
                                                                                        class="form-control"
                                                                                        id="rang_update_{{ $article->id }}"
                                                                                        name="rang_auteur"
                                                                                        value="{{ $article->rang_auteur }}"
                                                                                        placeholder="Insérez le rang parmi les auteurs de l'article indexé"
                                                                                        @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">
                                                                                    <label for="correspondant_auteur_update_{{ $article->id }}">Correspondant de l'auteur :</label>
                                                                                    <input
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        id="correspondant_auteur_update_{{ $article->id }}"
                                                                                        name="correspondant_auteur"
                                                                                        value="{{ $article->correspondant_auteur }}"
                                                                                        placeholder="Insérez le correspondant de l'auteur de l'article indexé"
                                                                                        @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">
                                                                                    <label for="fichier_update_{{ $article->id }}" class="mb-3">Uploader le fichier ici :</label>

                                                                                    <div class="fallback">
                                                                                        <input
                                                                                            class="form-control"
                                                                                            id="fichier_update_{{ $article->id }}"
                                                                                            name="fichier"
                                                                                            type="file"
                                                                                            accept="application/pdf"
                                                                                            @isset($candidature)
                                                                                                @isset($suggestions)
                                                                                                    @if($candidature->status == "en_attente" || ($candidature->status == "en_cours" && count($suggestions) == 0))
                                                                                                        disabled
                                                                                                    @endif
                                                                                                @endisset
                                                                                            @endisset
                                                                                        />
                                                                                    </div>
                                                                                    @if($article->file)
                                                                                        <div class="d-flex justify-content-around mt-5 mb-5 mx-5">
                                                                                            <div class="pdf-tabs text-center">
                                                                                                <i class="mdi mdi-file-pdf mdi-48px text-danger"></i>
                                                                                                <p class="card-title text-center mt-3">Fichier descriptif</p>
                                                                                                <button
                                                                                                    type="button"
                                                                                                    class="btn btn-light-success text-success btn-lg px-4 fs-4 font-weight-medium pdf-btn"
                                                                                                    id="openPdfButton_file-{{ $article->id }}"
                                                                                                    data-pdf="{{ config('app.aws_url') . $article->file }}"
                                                                                                >
                                                                                                    Lire
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                    @endif
                                                                                </div>
                                                                                <div class="d-flex justify-content-end mt-4 mb-3 ml-auto">
                                                                                    <a
                                                                                        href="{{ route("article.delete", ['id' => $article->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"
                                                                                        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>
                                                                </div>
                                                            @endforeach
                                                            <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>
                                                        @else
                                                            <div data-repeater-item="article">
                                                                <div class="panel border shadow-lg mt-2 p-4" 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">
                                                                        <div class="mb-3">
                                                                            <input
                                                                                type="hidden"
                                                                                class="form-control"
                                                                                id="genre"
                                                                                name="genre"
                                                                                value="indexe"
                                                                            >
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="mb-3">
                                                                                <label for="titre">Titre :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="titre"
                                                                                    name="titre"
                                                                                    placeholder="Insérez le titre de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="nom_revue">Nom de la revue :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="nom_revue"
                                                                                    name="nom_revue"
                                                                                    placeholder="Insérez le nom de la revue de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="isbn_issn">ISBN/ISSN :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control isbn-inputmask"
                                                                                    id="isbn_issn"
                                                                                    name="isbn_issn"
                                                                                    placeholder="Insérez l'ISBN/ISSN de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="editeur">Editeur :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="editeur"
                                                                                    name="editeur"
                                                                                    placeholder="Insérez l'éditeur de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="type">Type de revue :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="type"
                                                                                    name="type"
                                                                                    placeholder="Insérez le type de revue de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="langue">Langue de la revue :</label>
                                                                                <select class="form-select" id="langue" name="langue" required>
                                                                                    <option value="" disabled>Sélectionnez la langue de la revue de l'article indexé</option>
                                                                                    <option value="anglais">Anglais</option>
                                                                                    <option value="francais">Français</option>
                                                                                    <option value="espagnol">Espagnol</option>
                                                                                    <option value="portugais">Portugais</option>
                                                                                    <option value="arabe">Arabe</option>
                                                                                    <option value="allemand">Allemand</option>
                                                                                    <option value="russe">Russe</option>
                                                                                    <option value="mandarin">Mandarin</option>
                                                                                    <option value="swahili">Swahili</option>
                                                                                    <option value="hindi">Hindi</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="portee">Portée de la revue :</label>
                                                                                <select class="form-select" id="portee" name="portee" required>
                                                                                    <option value="" disabled>Sélectionnez la portée de la revue de l'article indexé</option>
                                                                                    <option value="internationale">Revue internationale</option>
                                                                                    <option value="regionale">Revue régionale</option>
                                                                                    <option value="nationale">Revue nationale</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="references">Références de la revue :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="references"
                                                                                    name="references"
                                                                                    placeholder="Insérez les références de la revue de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="nombre_pages">Nombre de pages :</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control"
                                                                                    id="nombre_pages"
                                                                                    name="pages"
                                                                                    placeholder="Insérez le nombre de pages de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="date_public">Date de publication :</label>
                                                                                <div class="input-group">
                                                                                    <input
                                                                                        type="date"
                                                                                        class="form-control"
                                                                                        id="date"
                                                                                        name="date_publication"
                                                                                        placeholder="mm/dd/yyyy"
                                                                                        {{-- placeholder="Insérez la date de publication de l'article indexé" --}}
                                                                                    >
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="mb-3">
                                                                                <label for="resume">Résumé :</label>
                                                                                <textarea
                                                                                    class="form-control"
                                                                                    id="resume"
                                                                                    name="resume"
                                                                                    cols="30"
                                                                                    rows="5"
                                                                                    placeholder="Insérez le résumé de l'article indexé"
                                                                                ></textarea>
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="mots_cles">Mots clés :</label>
                                                                                <input
                                                                                    class=""
                                                                                    type="text"
                                                                                    id="mots_cles"
                                                                                    name="mots_cles"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="auteurs">Auteurs :</label>
                                                                                <input
                                                                                    class=""
                                                                                    type="text"
                                                                                    id="auteurs"
                                                                                    name="auteurs"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="rang">Rang parmi les auteurs :</label>
                                                                                <input
                                                                                    type="number"
                                                                                    class="form-control"
                                                                                    id="rang"
                                                                                    name="rang_auteur"
                                                                                    placeholder="Insérez le rang parmi les auteurs de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label for="correspondant_auteur">Correspondant de l'auteur :</label>
                                                                                <input
                                                                                    type="text"
                                                                                    class="form-control"
                                                                                    id="correspondant_auteur"
                                                                                    name="correspondant_auteur"
                                                                                    placeholder="Insérez le correspondant de l'auteur de l'article indexé"
                                                                                >
                                                                            </div>
                                                                            <div class="mb-3">
                                                                                <label class="mb-3">Uploader le fichier ici :</label>

                                                                                <div class="fallback">
                                                                                    <input
                                                                                        class="form-control"
                                                                                        id="fichier"
                                                                                        name="fichier"
                                                                                        type="file"
                                                                                        accept="application/pdf"
                                                                                    />
                                                                                </div>
                                                                            </div>
                                                                            <div class="d-flex justify-content-end mt-4 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"
                                                                                    type="button"
                                                                                >
                                                                                    <i data-feather="trash-2" class="feather-sm ms-2 fill-white"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endisset
                                                    </div>
                                                </ol>
                                                <div class="mt-3 pt-3 border-top">
                                                    <button
                                                        type="button"
                                                        data-repeater-create="articles"
                                                        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>
                                        </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($articles)
                                            href="{{ route('candidate.get_step8_part2') }}"
                                        @else
                                            href="{{ route('candidate.submission_step8_part2') }}"
                                        @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 src="{{ asset("assets/libs/dropzone/dist/min/dropzone.min.js") }}"></script>
    <script src="{{ asset("assets/libs/moment/moment.js") }}"></script>
    <script src="{{ asset("assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js") }}"></script>

    <script src="{{ asset("assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js") }}"></script>
    <script src="{{ asset("assets/libs/inputmask/dist/inputmask/inputmask.extensions.js") }}"></script>
    <script src="{{ asset("assets/libs/inputmask/dist/inputmask/inputmask.numeric.extensions.js") }}"></script>
    <script src="{{ asset("assets/libs/inputmask/dist/inputmask/inputmask.date.extensions.js") }}"></script>
    <script src="{{ asset("assets/libs/inputmask/dist/inputmask/jquery.inputmask.js") }}"></script>
    <script src="{{ asset("assets/libs/inputmask/dist/inputmask/inputmask.extensions.js") }}"></script>
    <script src="{{ asset("assets/js/pages/forms/mask/mask.init.js") }}"></script>

    <script>
        @isset($articles_ids)
            let articles_ids = @json($articles_ids, JSON_PRETTY_PRINT);

            articles_ids.forEach(element => {
                $('#openPdfButton_file-'+ element).on("click", (event) => {

                    event.preventDefault();

                    const file = $('#openPdfButton_file-'+ element)[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>

        var tagInputsMotsCles = [];
        var tagInputsAuteurs = [];

        $(function() {
            'use strict';

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

                    var index = 0;

                    @isset($articles)
                        index = $(this).closest('[data-repeater-item]').index() - 1;
                    @else
                        index = $(this).closest('[data-repeater-item]').index();
                    @endisset
                    // console.log(index);

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

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

                    let mots_cles_divs = document.getElementsByName('articles['+ index +'][mots_cles]');
                    let auteurs_divs = document.getElementsByName('articles['+ index +'][auteurs]');
                    let isbn_issn_divs = document.getElementsByName('articles['+ index +'][isbn_issn]');
                    let genre_divs = document.getElementsByName('articles['+ index +'][genre]');

                    mots_cles_divs[0].value = "";
                    auteurs_divs[0].value = "";
                    genre_divs[0].value = "indexe";

                    // console.log(mots_cles_divs[0]);

                    mots_cles_divs[0].setAttribute("id", "mots_cles_"+ index);
                    auteurs_divs[0].setAttribute("id", "auteurs_"+ index);
                    isbn_issn_divs[0].setAttribute("id", "isbn_issn_"+ index);
                    genre_divs[0].setAttribute("id", "genre_"+ index);

                    $("#isbn_issn_"+ index).inputmask("999-99-999-9999-9");

                    let tags_input_wrapper_divs = $(".tags-input-wrapper");

                    tags_input_wrapper_divs[tags_input_wrapper_divs.length - 1].hidden = true;
                    tags_input_wrapper_divs[tags_input_wrapper_divs.length - 2].hidden = true;

                    @isset($articles)
                        let pdf_tabs = $(".pdf-tabs");
                        pdf_tabs[pdf_tabs.length - 1].hidden = true;
                    @endisset

                    // console.log(tags_input_wrapper_divs);

                    // console.log(mots_cles_divs[0].getAttribute("id"));

                    tagInputsMotsCles.push(new TagsInput({
                        selector: mots_cles_divs[0].getAttribute("id"),
                        duplicate : false,
                        max : 10,
                    }));

                    tagInputsAuteurs.push(new TagsInput({
                        selector: auteurs_divs[0].getAttribute("id"),
                        duplicate: false,
                        max: 10,
                    }))

                    // console.log($("div[data-repeater-item] > div.panel"));

                },
            });

        });

        // Plugin Constructor
        var TagsInput = function(opts){
            this.options = Object.assign(TagsInput.defaults , opts);
            this.init();
        }

        // Initialize the plugin
        TagsInput.prototype.init = function(opts){
            this.options = opts ? Object.assign(this.options, opts) : this.options;

            if(this.initialized)
                this.destroy();

            if(!(this.orignal_input = document.getElementById(this.options.selector)) ){
                console.error("tags-input couldn't find an element with the specified ID");
                return this;
            }

            this.arr = [];
            this.wrapper = document.createElement('div');
            this.input = document.createElement('input');
            init(this);
            initEvents(this);

            this.initialized =  true;
            return this;
        }

        // Add Tags
        TagsInput.prototype.addTag = function(string){

            if(this.anyErrors(string))
                return ;

            this.arr.push(string);
            var tagInput = this;

            var tag = document.createElement('span');
            tag.className = this.options.tagClass;
            tag.innerText = string;

            var closeIcon = document.createElement('a');
            closeIcon.innerHTML = '&times;';

            // delete the tag when icon is clicked
            closeIcon.addEventListener('click' , function(e){
                e.preventDefault();
                var tag = this.parentNode;

                for(var i =0 ;i < tagInput.wrapper.childNodes.length ; i++){
                    if(tagInput.wrapper.childNodes[i] == tag)
                        tagInput.deleteTag(tag , i);
                }
            })


            tag.appendChild(closeIcon);
            this.wrapper.insertBefore(tag , this.input);
            this.orignal_input.value = this.arr.join(',');

            return this;
        }

        // Delete Tags
        TagsInput.prototype.deleteTag = function(tag , i){
            tag.remove();
            this.arr.splice( i , 1);
            this.orignal_input.value =  this.arr.join(',');
            return this;
        }

        // Make sure input string have no error with the plugin
        TagsInput.prototype.anyErrors = function(string){
            if( this.options.max != null && this.arr.length >= this.options.max ){
                console.log('max tags limit reached');
                return true;
            }

            if(!this.options.duplicate && this.arr.indexOf(string) != -1 ){
                console.log('duplicate found " '+string+' " ')
                return true;
            }

            return false;
        }

        // Add tags programmatically
        TagsInput.prototype.addData = function(array){
            var plugin = this;

            array.forEach(function(string){
                plugin.addTag(string);
            })
            return this;
        }

        // Get the Input String
        TagsInput.prototype.getInputString = function(){
            return this.arr.join(',');
        }

        // destroy the plugin
        TagsInput.prototype.destroy = function(){
            this.orignal_input.removeAttribute('hidden');

            delete this.orignal_input;
            var self = this;

            Object.keys(this).forEach(function(key){
                if(self[key] instanceof HTMLElement)
                    self[key].remove();

                if(key != 'options')
                    delete self[key];
            });

            this.initialized = false;
        }

        // Private function to initialize the tag input plugin
        function init(tags){
            tags.wrapper.append(tags.input);
            tags.wrapper.classList.add(tags.options.wrapperClass);
            tags.orignal_input.setAttribute('hidden' , 'true');
            tags.orignal_input.parentNode.insertBefore(tags.wrapper , tags.orignal_input);
        }

        // initialize the Events
        function initEvents(tags){
            tags.wrapper.addEventListener('click' ,function(){
                tags.input.focus();
            });


            tags.input.addEventListener('keydown' , function(e){
                var str = tags.input.value.trim();

                if( !!(~[9 , 13 , 188].indexOf( e.keyCode ))  )
                {
                    e.preventDefault();
                    tags.input.value = "";
                    if(str != "")
                        tags.addTag(str);
                }

            });

            tags.input.addEventListener('focusout' , function(e){
                var str = tags.input.value.trim();

                e.preventDefault();
                tags.input.value = "";
                if(str != "")
                    tags.addTag(str);

            });
        }


        // Set All the Default Values
        TagsInput.defaults = {
            selector : '',
            wrapperClass : 'tags-input-wrapper',
            tagClass : 'tag',
            max : null,
            duplicate: false
        }

        window.TagsInput = TagsInput;

        @isset($articles)
            let i = 0, id = 0;
            let mots_cles = [];
            @foreach ($articles as $article)
                index = @json($article->id, JSON_PRETTY_PRINT);
                tagInputsMotsCles.push(
                    new TagsInput({
                        selector: 'mots_cles_update_'+ index,
                        duplicate : false,
                        max : 10,
                    })
                );
                tagInputsAuteurs.push(
                    new TagsInput({
                        selector: 'auteurs_update_'+ index,
                        duplicate : false,
                        max : 10,
                    })
                );
                @if ($article->mots_cles)
                    mots_cles = @json($article->mots_cles, JSON_PRETTY_PRINT).split(',');
                    console.log(mots_cles);
                    tagInputsMotsCles[i].addData(mots_cles);
                @endif
                @if ($article->auteurs)
                    auteurs = @json($article->auteurs, JSON_PRETTY_PRINT).split(',');
                    console.log(auteurs);
                    tagInputsAuteurs[i].addData(auteurs);
                @endif
                i++;
            @endforeach
        @else
            var tagInput1 = new TagsInput({
                selector: 'mots_cles',
                duplicate : false,
                max : 10,
            });

            var tagInput2 = new TagsInput({
                selector: "auteurs",
                duplicate: false,
                max: 10,
            });
        @endisset

        // tagInput1.addData(['PHP' , 'JavaScript' , 'CSS']);
    </script>

    {{-- <script>
        $('.repeater-default-1').repeater({
            initEmpty: false,
            defaultValues: {},
            show: function () {

                $(this).slideDown();

                var repeaterItems = $("div[data-repeater-item] > div.panel");
                $(this).attr('data-index', repeaterItems.length - 1);

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

                console.log(index);

                // console.log($(this).closest('[data-repeater-item]'));

            },
        });

        $('.repeater-default-2').repeater({
            initEmpty: false,
            defaultValues: {},
            show: function () {

                $(this).slideDown();

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

                console.log(index);

                // console.log($(this).closest('[data-repeater-item]'));

            },
        });

        $('.repeater-default-3').repeater({
            initEmpty: false,
            defaultValues: {},
            show: function () {

                $(this).slideDown();

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

                console.log(index);

                // console.log($(this).closest('[data-repeater-item]'));

            },
        });

        $('.repeater-default-4').repeater({
            initEmpty: false,
            defaultValues: {},
            show: function () {

                $(this).slideDown();

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

                console.log(index);

                // console.log($(this).closest('[data-repeater-item]'));

            },
        });

        $('.repeater-default-5').repeater({
            initEmpty: false,
            defaultValues: {},
            show: function () {

                $(this).slideDown();

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

                console.log(index);

                // console.log($(this).closest('[data-repeater-item]'));

            },
        });
    </script> --}}

    <script>
        // Date Picker
        jQuery('.mydatepicker, #datepicker, .input-group.date').datepicker();
        jQuery('#datepicker-autoclose').datepicker({
            currentText: "Now",
            autoclose: true,
            dateFormat: "dd/mm/yyyy",
            todayHighlight: true
        });
        jQuery('#date-range').datepicker({
            toggleActive: true
        });
        jQuery('#datepicker-inline').datepicker({
            todayHighlight: true
        });
    </script>

@endsection