@extends('site.layouts.admin_site')
@section('header')
  <style>
       .image-preview {
           width: 150px;
           min-height: 150px;
           border: 2px  solid #dddddd;
            text-align: center;
            padding: 2px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #cccccc;
       }
       .image-preview__image {
           display: none;
           width: 100%;
       }
  </style>
@endsection
@section('content')
        <!-- Main content -->
        <section class="content">
            <!-- Content Header (Page header) -->
            {{-- <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1><b>INSTITUT DE TECHNOLOGIES D'OWENDO</b></h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="/login" class="btn btn-primary">Connexion</a></li>
                            </ol>
                        </div>
                    </div>
                </div><!-- /.container-fluid -->
            </section> --}}
            <br>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-primary card-outline shadow-lg">
                                <div class="card-header">
                                <center>
                                    <h3>Fiche d'inscription</h3>
                                </center>
                                </div>
                                <div class="card-body table-responsive">
                                    <div class="bs-stepper">
                                        <div class="bs-stepper-header" role="tablist">
                                            <!-- your steps here -->
                                            <div class="step" data-target="#logins-part">
                                                <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
                                                    <span class="bs-stepper-circle">1</span>
                                                    <span class="bs-stepper-label">Etat Civil du Candidat</span>
                                                </button>
                                            </div>
                                            <div class="line"></div>
                                            <div class="step" data-target="#information-part">
                                                <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
                                                <span class="bs-stepper-circle">2</span>
                                                <span class="bs-stepper-label">Informations sur les parents</span>
                                                </button>
                                            </div>
                                            <div class="line"></div>
                                            <div class="step" data-target="#piece">
                                                <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
                                                <span class="bs-stepper-circle">3</span>
                                                <span class="bs-stepper-label">Pièces à fournir</span>
                                                </button>
                                            </div>
                                            <div class="line"></div>
                                            <div class="step" data-target="#personne">
                                                <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
                                                <span class="bs-stepper-circle">4</span>
                                                <span class="bs-stepper-label">Choix de la filière</span>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="bs-stepper-content">

                                            <form action="{{ route('ajouter.preinscription') }}" method="POST" enctype="multipart/form-data">
                                                @csrf
                                                <div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger">
                                                    <div class="row">
                                                        <div class="col col-md-12">
                                                            <center>
                                                                <div class="image-preview" id="imagePreview" type="button"
                                                                    title="CLIQUER POUR CHOISIR LA PHOTO DE PROFIL">
                                                                    <img src="" alt="Profil élève" class="image-preview__image">
                                                                    <span class="image-preview__default-texe"> cliquer pour choisir votre photo de Profil</span>
                                                                </div>
                                                            </center>
                                                            <hr>
                                                        </div>
                                                        <input type="file" name="photo" id="inpFile" style="display: none" accept=".png, .jpg, .jpeg">

                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Nom(s)</label>
                                                                <input type="text" name = "nom" placeholder="Votre nom" class="form-control" required />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Prénom(s)</label>
                                                                <input type="text" name = "prenom" required placeholder="Votre prénom" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Date de Naissance</label>
                                                                <input type="date" name = "date_naiss" required class="form-control"/>
                                                            </div>
                                                        </div>
                                                        <!-- /.col -->
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Lieu de Naissance</label>
                                                                <input type="text" name = "lieu_naiss" required placeholder="Votre lieu de naissance" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <div class="form-group">
                                                                    <label>Nationalité</label>
                                                                    <select id = "NatEtud" name = "nationalite_id" class="form-control select2" style="width: 100%;">
                                                                        <option value="1" selected>AUCUNE</option>
                                                                        @forelse  ($nationalites as $key => $v)
                                                                                <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                        @empty
                                                                        @endforelse
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Genre</label>
                                                                <select id = "GenteEtud" name = "genre_id" class="form-control select2" style="width: 100%;">
                                                                    <option value="1" selected>AUCUN</option>
                                                                    @forelse ($genres as $key => $v)
                                                                        <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                    @empty
                                                                        <option value="1" >AUCUN</option>
                                                                    @endforelse
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Quartier</label>
                                                                <select id = "selectProfilUser" name = "zquartier_id" class="form-control select2" style="width: 100%;">
                                                                    <option value="1" selected>AUCUN</option>
                                                                    @forelse ($quartiers as $key => $v)
                                                                        <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                    @empty
                                                                        <option value="1" >AUCUN</option>
                                                                    @endforelse
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>N° de Téléphone 1</label>
                                                                <input type="number"  name = "phone1" required placeholder="Votre premier numéro de téléphone" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>N° de Téléphone 2</label>
                                                                <input type="number"  name = "phone2" placeholder="Votre deuxième numéro de téléphone" class="form-control" />
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Adresse Email</label>
                                                                <input type="mail"  name = "email" required placeholder="Votre adresse email" required class="form-control" />
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <hr>
                                                    <button class="btn btn-primary" onclick="stepper.next()">Suivant &nbsp;&nbsp;  <i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></button>

                                                </div>
                                                <div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">

                                                    <div class="row">
                                                        <div class="col col-md-6">
                                                            <div class=" card-primary card-outline">
                                                                <div class="card-header">
                                                                    <center>
                                                                        <h3>Informations du père</h3>
                                                                    </center>
                                                                </div>
                                                                <div class="card-body">
                                                                    <div class="row">
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Nom(s)</label>
                                                                                <input type="text" name = "nom_pere" id = "champ15" placeholder="Nom(s) du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Prénom(s)</label>
                                                                                <input type="text" name = "prenom_pere" id = "champ16" placeholder="Prénom(s) du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Nationalité</label>
                                                                                <select id = "NatPere" name = "nationalite_pere_id" class="form-control select2" style="width: 100%;">
                                                                                    <option value="1" selected>AUCUNE</option>
                                                                                    @forelse  ($nationalites as $key => $v)
                                                                                            <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                                    @empty
                                                                                    @endforelse
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Profession</label>
                                                                                <input type="text" name = "prefession_pere" id = "champ20" placeholder="Profession du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Employeur</label>
                                                                                <input type="text" name = "employeur_pere" id = "champ21" placeholder="Employeur du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Adresse domicile</label>
                                                                                <input type="text" name = "adresse_pere" id = "champ22" placeholder="Adresse du domicile du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Téléphone 1</label>
                                                                                <input type="text" name = "tel1_pere" id = "champ23" placeholder="Téléphone du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Téléphone 2</label>
                                                                                <input type="text" name = "tel2_pere" id = "champ23" placeholder="Téléphone du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Email</label>
                                                                                <input type="text" name = "email_pere" id = "champ24" placeholder="Email du père" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Quartier</label>
                                                                                <select id = "QuartierPere" name = "quartier_pere_id" class="form-control select2" style="width: 100%;">
                                                                                    <option value="1" selected>AUCUN</option>
                                                                                    @forelse ($quartiers as $key => $v)
                                                                                        <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                                    @empty
                                                                                        <option value="1" >AUCUN</option>
                                                                                    @endforelse
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col col-md-6">
                                                            <div class=" card-primary card-outline">
                                                                <div class="card-header">
                                                                    <center>
                                                                        <h3>Informations de la mère</h3>
                                                                    </center>
                                                                </div>
                                                                <div class="card-body">

                                                                    <div class="row">
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Nom(s)</label>
                                                                                <input type="text" name = "nom_mere" id = "champ15" placeholder="Nom(s) de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Prénom(s)</label>
                                                                                <input type="text" name = "prenom_mere" id = "champ16" placeholder="Prénom(s) de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Nationalité</label>
                                                                                <select id = "selectPParams" name = "nationalite_mere_id" class="form-control select2" style="width: 100%;">
                                                                                    <option value="1" selected>AUCUNE</option>
                                                                                    @forelse  ($nationalites as $key => $v)
                                                                                            <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                                    @empty
                                                                                    @endforelse
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Profession</label>
                                                                                <input type="text" name = "prefession_mere" id = "champ20" placeholder="Profession de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Employeur</label>
                                                                                <input type="text" name = "employeur_mere" id = "champ21" placeholder="Employeur de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Adresse domicile</label>
                                                                                <input type="text" name = "adresse_mere" id = "champ22" placeholder="Adresse du domicile de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Téléphone 1</label>
                                                                                <input type="text" name = "tel1_mere" id = "champ23" placeholder="Téléphone de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Téléphone 2</label>
                                                                                <input type="text" name = "tel2_mere" id = "champ23" placeholder="Téléphone de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Email</label>
                                                                                <input type="text" name = "email_mere" id = "champ24" placeholder="Email de la mère" class="form-control" value="" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-6">
                                                                            <!-- text input -->
                                                                            <div class="form-group">
                                                                                <label>Quartier</label>
                                                                                <select id = "QuartierMere" name = "quartier_mere_id" class="form-control select2" style="width: 100%;">
                                                                                    <option value="1" selected>AUCUN</option>
                                                                                    @forelse ($quartiers as $key => $v)
                                                                                        <option value=" {{ $v->id }} "> {{ $v->nom_params }}</option>
                                                                                    @empty
                                                                                        <option value="1" >AUCUN</option>
                                                                                    @endforelse
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <button class="btn btn-primary" onclick="stepper.previous()"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i> &nbsp;&nbsp; Précédent</button>
                                                    <button class="btn btn-primary" onclick="stepper.next()">Suivant &nbsp;&nbsp;  <i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></button>

                                                </div>

                                                <div id="piece" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="card card-primary card-outline shadow-lg">
                                                                <div class="card-header">
                                                                    <center>

                                                                        <h3 class="card-title">
                                                                        <i class="fas fas-info"></i> Rappel des pièces à fournir
                                                                        </h3>
                                                                    </center>
                                                                </div>
                                                                <div class="card-body">
                                                                    <ul class="nav flex-column">
                                                                        <li class="nav-item">
                                                                          <a href="#" class="nav-link">
                                                                            Copie légalisée de l'attestation de réussite au Bac <span class="float-right badge bg-primary">1</span>
                                                                          </a>
                                                                        </li>
                                                                        <li class="nav-item">
                                                                          <a href="#" class="nav-link">
                                                                            Copie légalisée de l'act de naissance <span class="float-right badge bg-primary">1</span>
                                                                          </a>
                                                                        </li>
                                                                        <li class="nav-item">
                                                                            <a href="#" class="nav-link">
                                                                              Photo d'identité en couleur <span class="float-right badge bg-primary">1</span>
                                                                            </a>
                                                                          </li>
                                                                      </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-8">
                                                            <div class="card card-primary card-outline shadow-lg">
                                                                <div class="card-header">
                                                                    <center>
                                                                        <h3 class="card-title">
                                                                            Téléverser vos documents
                                                                        </h3>
                                                                    </center>
                                                                </div>
                                                                <div class="card-body">
                                                                    <div id="actions" class="row">
                                                                    <div class="col-lg-6">
                                                                        <div class="btn-group w-100">
                                                                        <span class="btn btn-success btn-xs col fileinput-button">
                                                                            <i class="fas fa-plus"></i>
                                                                            <span>Ajouter un fichier</span>
                                                                        </span>
                                                                        <button type="submit" class="btn btn-primary btn-xs col start">
                                                                            <i class="fas fa-upload"></i>
                                                                            <span>Commencer</span>
                                                                        </button>
                                                                        <button type="reset" class="btn btn-warning btn-xs col cancel">
                                                                            <i class="fas fa-times-circle"></i>
                                                                            <span>Annuler</span>
                                                                        </button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6 d-flex align-items-center">
                                                                        <div class="fileupload-process w-100">
                                                                        <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                                            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                                        </div>
                                                                        </div>
                                                                    </div>
                                                                    </div>
                                                                    <div class="table table-striped files" id="previews">
                                                                    <div id="template" class="row mt-2">
                                                                        <div class="col-auto">
                                                                            <span class="preview"><img src="data:," alt="" data-dz-thumbnail /></span>
                                                                        </div>
                                                                        <div class="col d-flex align-items-center">
                                                                            <p class="mb-0">
                                                                            <span class="lead" data-dz-name></span>
                                                                            (<span data-dz-size></span>)
                                                                            </p>
                                                                            <strong class="error text-danger" data-dz-errormessage></strong>
                                                                        </div>
                                                                        <div class="col-4 d-flex align-items-center">
                                                                            <div class="progress progress-striped active w-100" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                                            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-auto d-flex align-items-center">
                                                                        <div class="btn-group">
                                                                            <button class="btn btn-primary btn-xs start">
                                                                            <i class="fas fa-upload"></i>
                                                                            <span>Téléverser</span>
                                                                            </button>
                                                                            <button data-dz-remove class="btn btn-warning btn-xs cancel">
                                                                            <i class="fas fa-times-circle"></i>
                                                                            <span>Retirer</span>
                                                                            </button>
                                                                            <button data-dz-remove class="btn btn-danger btn-xs delete">
                                                                            <i class="fas fa-trash"></i>
                                                                            <span>Supprimer</span>
                                                                            </button>
                                                                        </div>
                                                                        </div>
                                                                    </div>
                                                                    </div>
                                                                </div>
                                                                <!-- /.card-body -->
                                                                <div class="card-footer">
                                                                    <div class="alert alert-danger">
                                                                        <i>Vos documents doivent obligatoirement être au format image (.jpg, .png, .jpeg)</i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- /.card -->
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <button class="btn btn-primary" onclick="stepper.previous()"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i> &nbsp;&nbsp;  Précédent</button>
                                                    <button class="btn btn-primary" onclick="stepper.next()">Suivant &nbsp;&nbsp;  <i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></button>

                                                </div>
                                                <div id="personne" class="content" role="tabpanel" aria-labelledby="information-part-trigger">

                                                    <div class="row">

                                                        <div class="col-sm-2">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Série du BAC</label>
                                                                <select id = "SerieBac" required name = "bac_id" class="form-control select2" style="width: 100%;">
                                                                    <option value="1" selected>AUCUNE</option>
                                                                    @forelse  ($lesbacs as $key => $v)
                                                                            <option value="{{ $v->id }}"> {{ $v->nom_params }}</option>
                                                                    @empty
                                                                    @endforelse
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-3">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Mention Obtenue au BAC</label>
                                                                <select id = "mention_id" required name = "mention_id" class="form-control select2" style="width: 100%;">
                                                                    <option value="1" selected>AUCUNE</option>
                                                                    @forelse  ($mentions as $key => $v)
                                                                            <option value="{{ $v->id }}"> {{ $v->nom_params }}</option>
                                                                    @empty
                                                                    @endforelse
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-4">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Dernier Etablissement fréquenté</label>
                                                                <input type="text" name = "lieu_bac" placeholder="Nom de l'établissement" class="form-control" />
                                                            </div>
                                                        </div>

                                                        <div class="col-sm-3">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Année Académique</label>
                                                                <input type="text" required name = "session_bac" placeholder="Année académique du BAC" class="form-control" />
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Secteur</label>
                                                                <select id = "SecteurForm" required name = "secteur_id" onchange="populate('SecteurForm', 'FiliereForm')" class="form-control select2" style="width: 100%;">
                                                                    <option value="1" selected>AUCUNE</option>
                                                                    @forelse  ($secteurs as $key => $v)
                                                                            <option value="{{ $v->id }}"> {{ $v->nom_params }}</option>
                                                                    @empty
                                                                    @endforelse
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <!-- text input -->
                                                            <div class="form-group">
                                                                <label>Filière</label>
                                                                <select id = "FiliereForm" required name = "secteur_id" class="form-control select2" style="width: 100%;">
                                                                    <option disabled>-- Choisissez d'abord le secteur</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    <button class="btn btn-primary" onclick="stepper.previous()"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i> &nbsp;&nbsp; Précédent</button>
                                                    <button type="submit" class="btn btn-success float-right"><i class="fas fa-check"></i>&nbsp;&nbsp;  Valider l'inscription</button>

                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

@endsection

@section('footer')

<script>
    $('#imagePreview').click(function(){
        $('#inpFile').trigger('click');
    });

</script>
<script>
    const inpFile = document.getElementById("inpFile");
    const previewContainer = document.getElementById("imagePreview");
    const previewImage = previewContainer.querySelector(".image-preview__image");
    const previewDefaultText = previewContainer.querySelector(".image-preview__default-texe");

    inpFile.addEventListener("change", function(){
        const file = this.files[0];
        if(file){
            const reader = new FileReader();

            previewDefaultText.style.display = "none";
            previewImage.style.display = "block";

            reader.addEventListener("load", function(){
                console.log(this  );
                previewImage.setAttribute("src",this.result);
            });

            reader.readAsDataURL(file);
        }else{

            previewDefaultText.style.display = null;
            previewImage.style.display = null;
            previewImage.setAttribute("src","");
        }
    });
</script>


<script type="text/javascript">
    function populate(s1,s2){
        var s1 = document.getElementById(s1);
        var s2 = document.getElementById(s2);
        s2.innerHTML = "";
        @php foreach($secteurs as $secteur): @endphp
          if(s1.value == "{{ $secteur->id}}"){
              var optionArray = [@forelse ($secteur->filliers_secteur as $filiere)"{{$filiere->id}}|{{$filiere->libelle}}",@empty @endforelse];
          }
        @php endforeach; @endphp

        for(var option in optionArray){
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
    }

</script>

@endsection