@extends('layout')
@section('content')
    <nav class="hk-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-light bg-transparent">
            <li class="breadcrumb-item"><a href="#">Table de Bord</a></li>
            <li class="breadcrumb-item active" aria-current="page">Ajouter candidat</li>
        </ol>
    </nav>
    <!-- /Breadcrumb -->

    <!-- Container -->
    <div class="container">
        <!-- Title -->
        <div class="hk-pg-header">
            <h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><i data-feather="external-link"></i></span></span>Ajouter candidat</h4>
        </div>
        <!-- /Title -->

        <!-- Row -->
        <div class="row">
            <div class="col-xl-12">
                <section class="hk-sec-wrapper">
                        <div class="col-sm">
                            <form class="needs-validation" method="POST" action="{{ url('candidat') }}" enctype="multipart/form-data" novalidate>
                                {{ csrf_field() }}
                                <div class="form-row containerForm">
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Nom </label>
                                        <input type="text" class="form-control" id="validationCustom01" name="nom" placeholder="Nom"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Prenom </label>
                                        <input type="text" class="form-control" id="validationCustom01" name="prenom" placeholder="Nom"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Téléphone </label>
                                        <input type="text" class="form-control" id="validationCustom01" name="telephone" placeholder="Téléphone"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Email </label>
                                        <input type="email" class="form-control" id="validationCustom01" name="email" placeholder="Email"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Adresse </label>
                                        <input type="text" class="form-control" id="validationCustom01" name="adresse" placeholder="Adresse"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Age </label>
                                        <input type="text" class="form-control" id="validationCustom01" name="age" placeholder="Âge"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Genre </label>
                                        <select class="form-control select2 classe" name="genre" required>
                                            <option value="">Sélectionner</option>
                                                <option value="homme">Homme</option>
                                            <option value="femme">Femme</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Diplôme </label>
                                        <select class="form-control select2 classe" name="diplome" required>
                                            <option value="">Sélectionner</option>
                                            <option value="Bac+1">Bac+1</option>
                                            <option value="Bac+2">Bac+2</option>
                                            <option value="Bac+3">Bac+3</option>
                                            <option value="Bac+4">Bac+4</option>
                                            <option value="Bac+5">Bac+5</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Type Demande </label>
                                        <select class="form-control select2 classe" name="type_demande" required>
                                            <option value="">Sélectionner</option>
                                            <option value="Emploi">Emploi</option>
                                            <option value="Stage">Stage</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Situation Matrimoniale </label>
                                        <select class="form-control select2 classe" name="matrimoniale" required>
                                            <option value="">Sélectionner</option>
                                            <option value="celibataire">Célibataire</option>
                                            <option value="marie">marié</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Nombre d'enfant </label>
                                        <input type="number" class="form-control" id="validationCustom01" name="nb_enfant" placeholder="Nombre d'enfant"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Nombre d'année d'experience </label>
                                        <input type="number" class="form-control" id="validationCustom01" name="experience" placeholder="Nombre d'année d'experience"  required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Poste</label>
                                        <select class="form-control select2 classe" name="poste_id" required>
                                            <option value="">Sélectionner</option>
                                            @foreach($postes as $poste)
                                                <option value="{{  $poste->id }}">{{ $poste->intitule }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-tooltip"> Champs obligatoire </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Votre CV </label>
                                        <input class="form-control" type="file" name="fichier" accept="file/*" required>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-10">
                                        <label for="validationCustom01">Formation</label>
                                        <select class="form-control select2 classe" name="formation" required>
                                            <option value="">Sélectionner</option>
                                            <option value="Achats">Achats</option>
                                            <option value="Commercial, vente">Commercial, vente</option>
                                            <option value="Gestion, comptabilité, finance">Gestion, comptabilité, finance</option>
                                            <option value="Informatique, nouvelles technologies">Informatique, nouvelles technologies</option>
                                            <option value="Juridique">Juridique</option>
                                            <option value="Management, direction générale">Management, direction générale</option>
                                            <option value="Marketing, communication">Marketing, communication</option>
                                            <option value="Métiers de la santé et du social">Métiers de la santé et du social</option>
                                            <option value="Métiers des services">Métiers des services</option>
                                            <option value="Métiers du BTP">Métiers du BTP</option>
                                            <option value="Production, maintenance, qualité">Production, maintenance, qualité</option>
                                            <option value="gestion de projets<">gestion de projets</option>
                                            <option value="RH, formation">RH, formation</option>
                                            <option value="Secretariat, assistanat">Secretariat, assistanat</option>
                                            <option value="Tourisme, hôtellerie, restauration">Tourisme, hôtellerie, restauration</option>
                                            <option value="Transport, logistique">Transport, logistique</option>
                                            <option value="Autres">Autres</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            Champ obligatoire
                                        </div>
                                    </div>
                                 </div>
                                <div>
                                <button type="button"  class="btn btn-success addRow">AJOUTER Document</button></div>
                                <br>
                                <input class="btn btn-primary" type="submit" value="Enregistrer">
                            </form>
                        </div>

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

    </div>
@endsection
@section('script')
    <script src="{{asset('dist/js/validation-data.js')}}"></script>

    <script>
        $(document).ready(function () {
            $(".addRow").click(function() {
                //find content of different elements inside a row.
                $(".containerForm").append("<div class='form-row'>  <div class='col-md-4 mb-10'>"+
                "<label for='validationCustom01'>Nom document</label><input type='text'  class='form-control' name='typedoc[]' required>"+
                " <div class='invalid-feedback'>Champ obligatoire </div> </div>"+
                "<div class='col-md-4 mb-10'><label for='validationCustom01'>Nom document</label><input type='file'  class='form-control' name='doc[]' required>"+
                " <div class='invalid-feedback'>Champ obligatoire </div> </div>"+
                "<div class='col-md-4 mb-10'>"+
                "<label for='validationCustom01'> &nbsp;</label><br><button type='button' class='btn btn-danger remove-tr'>Supprimer</button></div></div>");
                //alert(nameTxt);
            });
        });
        $(document).on('click', '.remove-tr', function(){
            $(this).parent('div').parent('div').remove();
        });
    </script>
@endsection