@extends('app')
@section('title', 'rapport de rentree')
@section('link')
<link rel="stylesheet" type="text/css" href="{{ asset('bower_components/jquery.steps/demo/css/jquery.steps.css') }}">
@endsection
@section('content')
    <div class="main-body">
        <div class="page-wrapper">
            @include('includes._alert')
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-12"> 
                        <div class="card">
                            <div class="card-header mb-0 pb-0">
                                <div class="d-flex justify-content-between">
                                    <h4>Gestion Personnel</h4>
                                    <span>
                                        <a href="{{route('report1.index')}}" class="btn btn-inverse btn-outline-inverse  btn-sm py-1" title="Return Back"><i class="fas fa-reply mx-0"></i></a>
                                    </span> 
                                </div>
                            </div>
                            <hr class="mx-3 mt-0">
                            <div class="card-block">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="wizard1">
                                            <section>
                                                <form class="wizard-form" id="basic-forms" action="{{ route('report1.store') }}" method="post">
                                                    @csrf
                                                    <input type="hidden" name="val" value="1">
                                                    <h3> Etape 1 </h3>
                                                    <fieldset style="overflow-y: auto;">
                                                        <p> 
                                                            <strong class="mb-2">* <u> Directeur des Etudes</u></strong>
                                                                <div class="form-group row">
                                                                <div class="col-sm-6">
                                                                    <label for="NameDirecteur" class="block">Nom et Prenoms :</label>
                                                                    <input type="text" id="NameDirecteur" name="NameDirecteur" class=" form-control" placeholder="M. Educas Scolair">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <label for="NumDirecteur" class="block">Contact  :</label>
                                                                    <input type="text" id="NumDirecteur" name="NumDirecteur" class=" form-control number" placeholder="07 00 00 00 00">
                                                                </div>
                                                            </div>
                                                        </p>

                                                        <p>
                                                            <strong class="mb-2">* <u> Directeur des Etudes Adjoint</u></strong>
                                                                <div class="form-group row">
                                                                <div class="col-sm-6">
                                                                    <label for="NameAdjoint" class="block">Nom et Prenoms :</label>
                                                                    <input type="text" id="NameAdjoint" name="NameAdjoint" class=" form-control" placeholder="M. Educas Scolair">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <label for="NumAdjoint" class="block">Contact  :</label>
                                                                    <input type="text" id="NumAdjoint" name="NumAdjoint" class=" form-control number" placeholder="07 00 00 00 00">
                                                                </div>
                                                            </div>
                                                        </p>

                                                        <p>
                                                            <strong class="mb-2">* <u> Secrétaire</u></strong>
                                                                <div class="form-group row">
                                                                <div class="col-sm-6">
                                                                    <label for="NameSecreteire" class="block">Nom et Prenoms :</label>
                                                                    <input type="text" id="NameSecreteire" name="NameSecreteire" class=" form-control" placeholder="M. Educas Scolair">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <label for="NumSecreteire" class="block">Contact  :</label>
                                                                    <input type="text" id="NumSecreteire" name="NumSecreteire" class=" form-control number" placeholder="07 00 00 00 00">
                                                                </div>
                                                            </div>
                                                        </p>
                                                    </fieldset>
                                                    <h3> Etape 2 </h3>
                                                    <fieldset style="overflow-y: auto;">
                                                        <!-- Correspondant Fichier -->
                                                        <p>
                                                            <strong class="mb-2">* <u> Correspondant Fichier</u></strong>
                                                                <div class="form-group row">
                                                                <div class="col-sm-6">
                                                                    <label for="NameFichier" class="block">Nom et Prenoms :</label>
                                                                    <input type="text" id="NameFichier" name="NameFichier" class=" form-control" placeholder="M. Educas Scolair">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <label for="NumFichier" class="block">Contact  :</label>
                                                                    <input type="text" id="NumFichier" name="NumFichier" class=" form-control number" placeholder="07 00 00 00 00">
                                                                </div>
                                                            </div>
                                                        </p>
                                                        <!-- Comptable -->
                                                        <p>
                                                            <strong class="mb-2">* <u> Comptable</u></strong>
                                                                <div class="form-group row">
                                                                <div class="col-sm-6">
                                                                    <label for="NameComptable" class="block">Nom et Prenoms :</label>
                                                                    <input type="text" id="NameComptable" name="NameComptable" class=" form-control" placeholder="M. Educas Scolair">
                                                                </div>
                                                                <div class="col-sm-6">
                                                                    <label for="NumComptable" class="block">Contact  :</label>
                                                                    <input type="text" id="NumComptable" name="NumComptable" class=" form-control number" placeholder="07 00 00 00 00">
                                                                </div>
                                                            </div>
                                                        </p>

                                                        <!-- Educateur -->
                                                        <p>
                                                            <strong class="mb-2">* <u>Educateur</u> 
                                                                <input type="text" class="text-center number" tile="Nombre de personnes" id="NbreEdtrs" placeholder="---" style="height: 30px; width: 50px">
                                                            </strong>
                                                            <div id="educateur"></div>
                                                        </p>
                                                        <!-- Agent De Securites -->
                                                    </fieldset>
                                                    <h3> Etape 3 </h3>
                                                    <fieldset>
                                                        <p>
                                                            <strong class="mb-2">* <u>Agent de Securité</u> 
                                                                <input type="text" class="text-center number" tile="Nombre de personnes" id="NbreSecurite" placeholder="---" style="height: 30px; width: 50px">
                                                            </strong>
                                                            <div id="addNbrs"></div>
                                                        </p>

                                                        <!-- Agent De Securites -->
                                                        <p>
                                                            <strong class="mb-2">* <u>Agent d'entretien</u> 
                                                                <input type="text" class="text-center number" tile="Nombre de personnes" id="NbreEntretien" placeholder="---" style="height: 30px; width: 50px">
                                                            </strong>
                                                            <div id="addEntretien"></div>
                                                        </p>
                                                    </fieldset>
                                                    <h3> Etape 4</h3>
                                                    <fieldset style="overflow-y: auto;">
                                                         <!-- Autres Agents -->
                                                        <p class="mb-3">
                                                            <strong class="mb-2">* <u>Autres Agents</u> 
                                                                <input type="text" class="text-center number" tile="Nombre de personnes" id="NbreAutre" placeholder="---" style="height: 30px; width: 50px">
                                                            </strong>
                                                            <div id="addAutre"></div>
                                                        </p>
                                                        <div class="form-group row">
                                                            <div class="col-md-4 col-lg-3 text-right">
                                                                <label for="created" class="block">Date Homologation Cycle 1 :</label>
                                                            </div>
                                                            <div class="col-md-8 col-lg-9">
                                                                <input type="date" id="created" name="created" class="form-control" title="Date de création d'établissement">
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <div class="col-md-4 col-lg-3 text-right">
                                                                <label for="opening" class="block">Date Homologation Cycle 2 :</label>
                                                            </div>
                                                            <div class="col-md-8 col-lg-9">
                                                                <input type="date" id="opening" name="opening" class="form-control" title="Date d'ouverture de l'établissement">
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                    <button type="submit" id="formValide" style="display: none">Vilader</button>
                                                </form>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('bower_components/jquery.steps/build/jquery.steps.js') }}"></script>
    <!-- Validation js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <!-- Custom js -->
    <script src="{{ asset('assets/pages/forms-wizard-validation/form-wizard.js') }}"></script>
    <script src="{{ asset('assets/js/pcoded.min.js') }}"></script>
    <script src="{{ asset('assets/js/vartical-layout.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('.number').on('keypress', function(e) {
                var charCode = e.which ? e.which : e.keyCode;
                if (charCode < 48 || charCode > 57) {
                    e.preventDefault(); // Empêche la saisie si ce n'est pas un chiffre
                }
            });

            $('#NbreEdtrs').on('keyup', function() {
                $val = $(this).val();
                $('.addEduc').remove();
                if($val){
                    $i = 1;
                    while($i <= $val){
                        $('#educateur').append(addEducateur($i, 'NameEduca', 'NumEduca', 'addEduc'));
                        $i++;
                    }
                }
            });

            $('#NbreSecurite').on('keyup', function() {
                $val = $(this).val();
                $('.addAgent').remove();
                if($val){
                    $i = 1;
                    while($i <= $val){
                        $('#addNbrs').append(addEducateur($i, 'NameSecurit', 'NumSecurit', 'addAgent'));
                        $i++;
                    }
                }
            });


            $('#NbreEntretien').on('keyup', function() {
                $val = $(this).val();
                $('.entretien').remove();
                if($val){
                    $i = 1;
                    while($i <= $val){
                        $('#addEntretien').append(addEducateur($i, 'NameEntretien', 'NumEntretien', 'entretien'));
                        $i++;
                    }
                }
            });


            $('#NbreAutre').on('keyup', function() {
                $val = $(this).val();
                $('.autre').remove();
                if($val){
                    $i = 1;
                    while($i <= $val){
                        $('#addAutre').append(
                            '<div class="form-group row autre">'+
                            '<div class="col-sm-4">'+
                                '<label for="nameAutre'+$i+'" class="block">Nom et Prenoms '+$i+':</label>'+
                                '<input type="text" id="nameAutre'+$i+'" name="nameAutre[]" class=" form-control" placeholder="M. Educas Scolair">'+
                            '</div>'+
                            '<div class="col-sm-4">'+
                                '<label for="numAutre'+$i+'" class="block">Contact '+$i+':</label>'+
                                '<input type="text" id="numAutre'+$i+'" name="numAutre[]" class=" form-control number" placeholder="07 00 00 00 00">'+
                            '</div>'+
                            '<div class="col-sm-4">'+
                                '<label for="fontAutre'+$i+'" class="block">Fonction '+$i+':</label>'+
                                '<input type="text" id="fontAutre'+$i+'" name="fontAutre[]" class=" form-control" placeholder="Fonction">'+
                            '</div>'+
                        '</div>'
                        );
                        $i++;
                    }
                }
            });


            $('.actions ul li a').on('click', function(e) {
                var lien = $(this).attr('href');
                if( lien == '#finish'){
                    $('#formValide').click(); // Déclenchement clic automatique pour envoie du formulaire
                }
                
            });


            function addEducateur($i, $lib1, $lib2, $lib3){
                return ('<div class="form-group row '+$lib3+'">'+
                    '<div class="col-sm-6">'+
                        '<label for="'+$lib1+$i+'" class="block">Nom et Prenoms '+$i+':</label>'+
                        '<input type="text" id="'+$lib1+$i+'" name="'+$lib1+'[]" class=" form-control" placeholder="M. Educas Scolair">'+
                    '</div>'+
                    '<div class="col-sm-6">'+
                        '<label for="'+$lib2+$i+'" class="block ">Contact '+$i+':</label>'+
                        '<input type="text" id="'+$lib2+$i+'" name="'+$lib2+'[]" class=" form-control number" placeholder="07 00 00 00 00">'+
                    '</div>'+
                '</div>');
            }
        });
    </script>
@endsection