@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "AJOUTER UN UTILISATEUR",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Ajouter utilisateur" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/steps.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
    <link href="{{asset('assets/libs/dropify/dist/css/dropify.min.css')}}" rel="stylesheet">

    <style>
        .form-select{
			background-image:url({{asset('assets/images/custom-select.png')}});
		}
    </style>
@endsection

@section('title', "Ajouter un utilisateur| GestStudent Admin")

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h3 class="box-title m-b-0">Utilisateurs</h3>
                    <p class="text-muted m-b-30 font-13"> Ce formulaire permet de renseigner la table des utilisateurs.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{route('users.create')}}" class="validation-wizard wizard-circle mt-5" enctype="multipart/form-data">
                        <!-- Step 1 -->
                        <h6>Première étape</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <label> Matricule : </label>
                                    <div class="mb-3">
                                        <input type="number" class="form-control" name="matricule" value="{{$matricule}}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label> Nom : * </label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="nom" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label> Prénom : *</label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="prenom" required>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 2 -->
                        <h6>Deuxième étape</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Lieu de naissance: *</label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="birth_location" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label>Date de naissance: * </label>
                                    <div class="mb-3">
                                        <input type="date" class="form-control" name="birth" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label> Nationalité : *</label>
                                    <div class="mb-3">
                                        <select class="form-control" name="nation" required>
                                            <option value="">Choisir une nationalité</option>
                                            <option value="Béninoise">Béninoise(BJ)</option>
                                            <option value="Burkinabè">Burkinabè(FA)</option>
                                            <option value="Ivoirienne">Ivoirienne(CI)</option>
                                            <option value="Malienne">Malienne(M)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 3 -->
                        <h6>Troisième étape</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Sexe: *</label>
                                    <div class="mb-3">
                                        <select class="form-control" name="sexe" required>
                                            <option value="">Choisir le sexe</option>
                                            <option value="M">Masculin</option>
                                            <option value="F">Féminin</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label>E-mail: * </label>
                                    <div class="mb-3">
                                        <input type="email" name="email" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label> Code pays: *</label>
                                    <div class="mb-3">
                                        <select class="form-control" name="code_pays" required>
                                            @foreach ($codePays as $code)
                                                <option value="{{$code->country_code}}">{{$code->intitulePays}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label> Téléphone: *</label>
                                    <div class="mb-3">
                                        <input type="number" class="form-control" name="num" required>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 4 -->
                        <h6>Quatrième étape</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Etablissement: *</label>
                                    <div class="mb-3">
                                        <select class="form-control" name="etablissement"
                                            onchange="findFilieres(this)" data-url= {{route("etas.filieres",":p1")}}
                                            id="etablissement" required
                                        >
                                            <option value="">Choisir un établissement</option>
                                            @foreach ($etablissements as $eta)
                                                <option value="{{$eta->idEtablissement}}">{{$eta->descreta.'('.$eta->sigle.')'}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label>Filières: * </label>
                                    <div class="mb-3">
                                        <select class="form-control" multiple="multiple" name="field[]"
                                            id="select2-data-array" style="width: 100%;height: 36px;"
                                            disabled required=""
                                        >
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label> Activer la création de compte: *</label>
                                    <div class="mb-3">
                                        <select class="form-control" name="compte" required>
                                            <option value="YES" >YES</option>
                                            <option value="NO" >NO</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label> Choisir une image: *</label>
                                    <div class="mb-3">
                                        <input type="file" name="user_photo"  class="form-control dropify" data-max-file-size="1M">
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{asset('assets/libs/dropify/dist/js/dropify.min.js')}}"></script>

    <script>

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });

        // Validation wizard
        var form = $(".validation-wizard").show();

        $(".validation-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit"
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error").remove(), form.find(".body:eq(" + newIndex + ") .error").removeClass("error")), form.validate().settings.ignore = ":disabled,:hidden", form.valid())
            },
            onFinishing: function(event, currentIndex) {
                return form.validate().settings.ignore = ":disabled", form.valid()
            },
            onFinished: function(event, currentIndex) {

                // url et data qu'on doit envoyer
                let url = $(this)[0].attributes.action.value;
                let formData = new FormData($(this)[0]);

                Swal.fire({
                    title: "<strong>Confirmer l'opération!</strong>",
                    icon: 'info',
                    html:
                        'Cette opération ajoutera les informations du validateur dans la base.',
                    showCancelButton: true,
                    focusConfirm: false,
                    confirmButtonText:
                        'Oui, je confirme !',
                    cancelButtonText:
                        'Annuler',
                    showLoaderOnConfirm: true,
                    preConfirm: () => {

                        // Requete AJAX
                        return fetch(url, {
                            method: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            body: formData
                        })
                        .then(response => response.json())
                        .then(response => {
                            if(response.success == true){
                                return response;
                            }else{
                                Swal.showValidationMessage(
                                    response.message
                                )
                            }
                        })
                    },
                    allowOutsideClick: () => !Swal.isLoading()

                }).then((result) => {
                    if (result.isConfirmed) {
                        swalWithBootstrapButtons.fire(
                            'Opération enregistrée!',
                            result.value.message,
                            'success'
                        ).then((result2) => {
                            if (result2.isConfirmed) {
                                location.reload();
                            }
                        })
                    }
                })
            }
        }),
        $(".validation-wizard").validate({
            ignore: "input[type=hidden]",
            errorClass: "text-danger",
            successClass: "text-success",
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element)
            },
            rules: {
                email: {
                    email: !0
                }
            },
            messages: {
                nom:"Ce champ est requis",
                prenom:"Ce champ est requis",
                birth_location:"Ce champ est requis",
                birth:"Ce champ est requis",
                nation:"Ce champ est requis",
                sexe:"Ce champ est requis",
                email:"Ce champ est requis",
                code_pays:"Ce champ est requis",
                num:"Ce champ est requis",
                etablissement:"Ce champ est requis",
                field:"Ce champ est requis",
            }
        })

        // Select 2
        $("#select2-data-array").select2({
            placeholder: "Sélectionner la filière",
            // allowClear: true
        });

        function findFilieres(e)
        {
            const toGo = e.attributes['data-url'].value;
            let url = toGo.replace(':p1', e.value);

            if ($("#etablissement").val().length == 0) {
                $("#select2-data-array").empty();
                $("#select2-data-array").attr("disabled", true);
                return false;
            }

            // Requete AJAX
            return fetch(url,{
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            })
            .then(response => response.json())
            .then(response => {
                if(response.success == true){
                    $("#select2-data-array").empty();
                    $("#select2-data-array").select2({
                        placeholder: "Sélectionner la filière",
                        data: response.data
                    });
                    $("#select2-data-array").attr("disabled", false);
                }else{
                    swalWithBootstrapButtons.fire(
                        'Impossible de charger les données!',
                        'Veuillez sélectionner à nouveau un établissement.',
                        'error'
                    )
                }
            })
        }

        // Dropify
        $('.dropify').dropify();

    </script>

@endsection