@extends('layouts')

@section('contenu')
<form id="js-file-validation">
    <div id="wizard" class="wizard-demo">
        <h3>Bienvenue</h3>
        <div>
            <p class="mb-4">Conformément au <b>Décret N°003/PR/MESRTSTTENFC du 11 Janvier 2021 en son article 3</b> qui porte sur le réorganisation des l'Agence Nationale des Bourses du Gabon (ANBG), consacre l'examen de demande de bourse d'études des élèves, étudiants et sportifs de haut niveau mais aussi, la conclusion de tout partenariat avec toute personne physique ou morale de droit privé ou public, en rapport avec ses missions.</p>

            <p class="mb-4">Fort de cela et au regard des faits observés par les étudiants lors des choix des établissements, L'ANBG à mis en place un processus d'accréditation des Universités et Grandes Écoles à travers le monde avec pour but essentiel, de <b>maitriser l'environnement académique et social dans lequel évolue nos étudiants boursiers aussi bien au Gabon qu'à l'international</b>.</p>

            <p>
                <b>Le processus d’accréditation se déroule en 5 étapes à savoir</b> :
                <ol>
                    <li><b>Convenance Administrative</b></li>
                    <li><b>Politique de Formation</b></li>
                    <li><b>Personnel Administratif et Enseignants</b></li>
                    <li><b>Gouvernance de l’institution</b></li>
                    <li><b>Vie à l’Université / Ecole / Institut</b></li>
                </ol>
            </p>

            <div class="row g-5 pt-4">
                <div class="col-md-4">
                    <h4>Convenance Administratif</h4>
                    <div>
                        <p>Cette étape consiste à fournir l'ensemble des documents relatifs à l'établissement. Il s'agit de présenter des documents constitutifs du dossier de la structure.</p>
                        <ul>
                            <li>La Fiche circuit</li>
                            <li>l’Habilitation à fonder</li>
                            <li>l’Autorisation d'ouverture</li>
                            <li>le Statut juridique</li>
                            <li>l’Attestation de non faillite</li>
                        </ul>

                        <p>
                            Pour les structures gabonaise uniquement :
                            <ul>
                                <li>l’Attestation CNAMGS</li>
                                <li>l’Attestation CNSS</li>
                                <li>l’Attestation d'imposition</li>
                            </ul>
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <h4>Politique de Formation</h4>
                    <div>
                        <p>Les documents à fournir pour cette étapes sont les suivant :</p>
                        <ul>
                            <li>Document spécifiant les missions</li>
                            <li>Rapport d'études sur la satisfaction des étudiants</li>
                            <li>Document spécifiant les domaines de formation</li>
                            <li>Politique d'accueil des étudiants</li>
                            <li>Convention de partenariat relative à l'offre de formation</li>
                            <li>Guide de l'étudiant</li>
                            <li>Catalogue des programmes de formation</li>
                            <li>Liste des enseignants-chercheurs avec leur statut et leur volume horaires</li>
                            <li>Convention de stage signés</li>
                            <li>Structuration de l'établissement</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <h4>Personnel Administratif et Enseignants</h4>
                    <div>
                        <p>Il s’agira de fournir les documents administratif du gérant, notamment :</p>
                        <ul>
                            <li>Nom du gérant</li>
                            <li>Photo du gérant</li>
                            <li>Curriculum vitae du gérant</li>
                            <li>Diplôme du gérant</li>
                            <li>Pièce d'identité en cours de validité (Passeport / Carte Nationale d'Identité)</li>
                        </ul>
                    </div>
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-4">
                    <h4>Gouvernance de l'Institution</h4>
                    <div>
                        <p>Pour cette étape, les documents demandés sont :</p>
                        <ul>
                            <li>Procédure formalisée pour l'accueil des étudiants</li>
                            <li>Procédure formalisée de diffusion des informations à l'endroit des étudiants</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <h4>Vie à l'Université / École / Institut</h4>
                    <div>
                        <p>La dernière étape consiste à mettre à disposition :</p>
                        <ul>
                            <li>Règlement intérieur</li>
                            <li>Organigramme fonctionnel (avec mission de chaque organe)</li>
                            <li>Rapport annuel d'activités relatifs au conventions</li>
                            <li>Convention et partenariats Publique-Privé-Société civil</li>
                            <li>Rapport annuel d'activités sur la gestion des heures complémentaires</li>
                            <li>Procédure relative à la gestion des locaux et espaces</li>
                        </ul>
                    </div>
                </div>
            </div>{{-- row --}}
        </div>

        <h3>Convenance Administrative</h3>
        <div>
            <p class="mb-4">Regroupe l'ensemble des documents relatifs à l'établissement. Il s'agit de présenter des documents constitutifs du dossier de la structure.</p>

            <div class="row g-5">
                <div class="col-md-6">
                    <label for="ficheCircuit" class="form-label">Fiche circuit <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="ficheCircuit" name="ficheCircuit" required="" data-parsley-max-file-size="2048" data-parsley-fileextension="pdf">
                </div>
                <div class="col-md-6">
                    <label for="habilitationFonder" class="form-label">Habilitation à fonder <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="habilitationFonder" name="habilitationFonder" required="" data-parsley-max-file-size="2048">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="autorisationOuverture" class="form-label">Autorisation d'ouverture <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="autorisationOuverture" name="autorisationOuverture">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="attestationCNAMGS" class="form-label">Attestation CNAMGS </label>
                    <input class="form-control" type="file" id="attestationCNAMGS" name="attestationCNAMGS">
                </div>
                <div class="col-md-6">
                    <label for="attestationNCSS" class="form-label">Attestation CNSS </label>
                    <input class="form-control" type="file" id="attestationNCSS" name="attestationNCSS">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="attestationNonFaillite" class="form-label">Attestation de non faillite <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="attestationNonFaillite" name="attestationNonFaillite">
                </div>
                <div class="col-md-6">
                    <label for="attestationImposition" class="form-label">Attestation d'imposition <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="attestationImposition" name="attestationImposition">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="statutJuridique" class="form-label">Statut juridique <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="statutJuridique" name="statutJuridique">
                </div>
            </div>{{-- row --}}
        </div>

        <h3>Politique de Formation</h3>
        <div>
            <p>Ensemble documentaire qui résume la mise en place du système d'apprentissage, d'enseignement et de formation générale ou professionnelle de la structure.</p>
            <div class="row g-5">
                <div class="col-md-6">
                    <label for="missions" class="form-label">Document spécifiant les missions <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="missions" name="missions">
                </div>
                <div class="col-md-6">
                    <label for="rapportSatisfaction" class="form-label">Rapport d'études sur la satisfaction des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="rapportSatisfaction" name="rapportSatisfaction">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="domaineFormation" class="form-label">Document spécifiant les domaines de formation <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="domaineFormation" name="domaineFormation">
                </div>
                <div class="col-md-6">
                    <label for="politiqueAccueil" class="form-label">Politique d'accueil des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="politiqueAccueil" name="politiqueAccueil">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="conventionPartenariat" class="form-label">Convention de partenariat relative à l'offre de formation <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="conventionPartenariat" name="conventionPartenariat">
                </div>
                <div class="col-md-6">
                    <label for="guideEtudiant" class="form-label">Guide de l'étudiant <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="guideEtudiant" name="guideEtudiant">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="guideEtudiant" class="form-label">Catalogue des programmes de formation <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="catalogueFormation" name="catalogueFormation">
                </div>
                <div class="col-md-6">
                    <label for="enseignantsChercheurs" class="form-label">Liste des enseignants-chercheurs avec leur statut et leur volume horaires <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="enseignantsChercheurs" name="enseignantsChercheurs">
                </div>
            </div>{{-- row --}}
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="conventionStage" class="form-label">Convention de stage signés <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="conventionStage" name="conventionStage">
                </div>
                <div class="col-md-6">
                    <label for="struturationEtablissement" class="form-label">Structuration de l'établissement <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="struturationEtablissement" name="struturationEtablissement">
                </div>
            </div>{{-- row --}}
        </div>

        <h3>Personnel Administratif et Enseignants</h3>
        <div>
            <p>{{--The next and previous buttons help you to navigate through your content.--}}</p>

            <div class="row g-5">
                <div class="col-md-3">
                    <label for="prenomGerant" class="form-label">Nom du gérant <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" id="prenomGerant" name="prenomGerant" placeholder="Prénom">
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <input class="form-control" type="text" id="nomGerant" name="nomGerant" placeholder="Nom">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input class="form-control" type="email" id="email" name="email" placeholder="Email">
                </div>{{-- col --}}
            </div>
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="photoGerant" class="form-label">Photo du gérant <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="photoGerant" name="photoGerant">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="cvGerant" class="form-label">Curriculum vitae du gérant <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="cvGerant" name="cvGerant">
                </div>{{-- col --}}
            </div>
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="diplomeGerant" class="form-label">Diplôme du gérant <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="diplomeGerant" name="diplomeGerant">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="pieceIdentite" class="form-label">Pièce d'identité en cours de validité (Passeport / Carte Nationale d'Identité) <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="pieceIdentite" name="pieceIdentite">
                </div>{{-- col --}}
            </div>
        </div>

        <h3>Gouvernance de l'Institution au Service de ses Missions</h3>
        <div>
            <p>Ensemble des décisions et règles visant à assurer le fonctionnement de l'établissement, ainsi que les organes structurels chargés de formuler ces décisions.</p>

            <div class="row g-5">
                <div class="col-md-6">
                    <label for="procedureAccueil" class="form-label">Procédure formalisée pour l'accueil des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="procedureAccueil" name="procedureAccueil">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="procedureInformation" class="form-label">Procédure formalisée de diffusion des informations à l'endroit des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="procedureInformation" name="procedureInformation">
                </div>{{-- col --}}
            </div>
            {{--<div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="procedureAccueil" class="form-label">Procédure formalisée pour l'accueil des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="procedureAccueil" name="procedureAccueil">
                </div><!--col -->
                <div class="col-md-6">
                    <label for="procedureInformation" class="form-label">Procédure formalisée de diffusion des informations à l'endroit des étudiants <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="procedureInformation" name="procedureInformation">
                </div><!-- col -->
            </div>--}}
        </div>

        <h3>Vie à l'Université / Ecole / Institut</h3>
        <div>
            <p>{{--The next and previous buttons help you to navigate through your content.--}}</p>

            <div class="row g-5">
                <div class="col-md-6">
                    <label for="reglementInterieur" class="form-label">Règlement intérieur <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="reglementInterieur" name="reglementInterieur">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="organigramme" class="form-label">Organigramme fonctionnel (avec mission de chaque organe) <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="organigramme" name="organigramme">
                </div>{{-- col --}}
            </div>
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="rapacConvention" class="form-label">Rapport annuel d'activités relatifs au conventions <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="rapacConvention" name="rapacConvention">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="conventionPPP" class="form-label">Convention et partenariats Publique-Privé-Société civil <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="conventionPPP" name="conventionPPP">
                </div>{{-- col --}}
            </div>
            <div class="row g-5 pt-4">
                <div class="col-md-6">
                    <label for="rapacHeure" class="form-label">Rapport annuel d'activités sur la gestion des heures complémentaires <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="rapacHeure" name="rapacHeure">
                </div>{{-- col --}}
                <div class="col-md-6">
                    <label for="procedureGestion" class="form-label">Procédure relative à la gestion des locaux et espaces <span class="text-danger">*</span></label>
                    <input class="form-control" type="file" id="procedureGestion" name="procedureGestion">
                </div>{{-- col --}}
            </div>
        </div>
    </div>{{-- #wizard2 --}}
</form>
@endsection
@push('scripts')
<script>
    window.Parsley.addValidator('maxFileSize', {
        validateString: function(_value, maxSize, parsleyInstance) {
            if (!window.FormData) {
                alert('You are making all developpers in the world cringe. Upgrade your browser!');
                return true;
            }
            var files = parsleyInstance.$element[0].files;
            return files.length != 1  || files[0].size <= maxSize * 1024;
        },
        requirementType: 'integer',
        messages: {
            en: 'This file should not be larger than %s Kb',
            fr: 'Ce fichier est plus grand que %s Kb.'
        }
    });

    window.Parsley.addValidator('filemimetypes', {
        validateString: function (value, requirement, parsleyInstance) {
            if (!window.FormData) {
                alert('You are making all developpers in the world cringe. Upgrade your browser!');
                return true;
            }

            var file = parsleyInstance.$element[0].files;
            if (file.length == 0) {
                return true;
            }

            var allowedMimeTypes = requirement.replace(/\s/g, "").split(',');
            return allowedMimeTypes.indexOf(file[0].type) !== -1;

        },
        requirementType: 'string',
        messages: {
            en: 'File mime type not allowed',
            fr: 'Ce type de fichier n\'est pas accepté'
        }
    });

    $(document).ready(function () {
        //'use strict'

        $('#wizard').steps({
            headerTag: 'h3',
            bodyTag: 'div',
            autoFocus: true,
            titleTemplate: '<span class="number">#index#</span> <span class="title">#title#</span>',
            labels: {
                current: "current step:",
                pagination: "Pagination",
                finish: "Terminer",
                next: "Suivant",
                previous: "Précédent",
                loading: "Loading ..."
            },
            onStepChanging: function (event, currentIndex, newIndex) {
                if(currentIndex < newIndex) {

                    switch (currentIndex){
                        case 0:
                            return true;
                            break;

                        case 1:
                            var fname = $('#ficheCircuit').parsley();
                            var lname = $('#habilitationFonder').parsley();

                            if(fname.isValid() && lname.isValid()) {
                                return true;
                            } else {
                                fname.validate();
                                lname.validate();
                            }
                            return false;
                            break;

                        case 2:
                            var email = $('#missions').parsley();
                            if(email.isValid()) {
                                return true;
                            } else {
                                email.validate();
                            }
                            break;

                        case 3:
                            var email = $('#missions').parsley();
                            if(email.isValid()) {
                                return true;
                            } else {
                                email.validate();
                            }
                            break;
                        case 4:
                            var email = $('#missions').parsley();
                            if(email.isValid()) {
                                return true;
                            } else {
                                email.validate();
                            }
                            break;
                    }
/*
                    // Step 1 form validation
                    if(currentIndex === 0) {
                        var fname = $('#ficheCircuit').parsley();
                        var lname = $('#habilitationFonder').parsley();

                        if(fname.isValid() && lname.isValid()) {
                            return true;
                        } else {
                            fname.validate();
                            lname.validate();
                        }
                    }

                    // Step 2 form validation
                    if(currentIndex === 1) {
                        var email = $('#missions').parsley();
                        if(email.isValid()) {
                            return true;
                        } else {
                            email.validate();
                        }
                    }

                    // Step 3 form validation
                    if(currentIndex === 2) {
                        var email = $('#missions').parsley();
                        if(email.isValid()) {
                            return true;
                        } else {
                            email.validate();
                        }
                    }

                    // Step 4 form validation
                    if(currentIndex === 3) {
                        var email = $('#missions').parsley();
                        if(email.isValid()) {
                            return true;
                        } else {
                            email.validate();
                        }
                    }
*/
                // Always allow step back to the previous step even if the current step is not valid.
                } else {
                    return true;
                }
            }
        });

/*
        var app = app || {};

        // Utils
        (function ($, app) {
            'use strict';

            app.utils = {};

            app.utils.formDataSuppoerted = (function () {
                return !!('FormData' in window);
            }());

        }(jQuery, app));

        // Parsley validators
        (function ($, app) {
            'use strict';

            window.Parsley
                .addValidator('filemaxmegabytes', {
                    requirementType: 'string',
                    validateString: function (value, requirement, parsleyInstance) {

                        if (!app.utils.formDataSuppoerted) {
                            return true;
                        }

                        var file = parsleyInstance.$element[0].files;
                        var maxBytes = requirement * 1048576;

                        if (file.length == 0) {
                            return true;
                        }

                        return file.length === 1 && file[0].size <= maxBytes;

                    },
                    messages: {
                        en: 'File is to big'
                    }
                })
                .addValidator('filemimetypes', {
                    requirementType: 'string',
                    validateString: function (value, requirement, parsleyInstance) {

                        if (!app.utils.formDataSuppoerted) {
                            return true;
                        }

                        var file = parsleyInstance.$element[0].files;

                        if (file.length == 0) {
                            return true;
                        }

                        var allowedMimeTypes = requirement.replace(/\s/g, "").split(',');
                        return allowedMimeTypes.indexOf(file[0].type) !== -1;

                    },
                    messages: {
                        en: 'File mime type not allowed'
                    }
                });

        }(jQuery, app));


        // Parsley Init
        (function ($, app) {
            'use strict';

            $('#js-file-validation').parsley();

        }(jQuery, app));
*/

    });
</script>
@endpush