@extends('layout.template')
@section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">STATISTIQUES DE VALIDATION DES UES</h5>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Statistiques</li>
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
@endsection

@section('main')
    <div class="row justify-content-center mt-4" style="min-height: calc(85vh - 60px)">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header p-4"
                    style="background-color: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_ETAB1'] }}; color: {{ Session::get('RESULTAT_DATA')['RESULTAT_COULEUR_TEXT1'] }};">
                    <h4 class="mb-0 text-white">Veuillez sélectionner les données s'il vous plait.</h4>
                </div>
                <div class="card-body">
                    <form class="form-horizontal" method="POST" id="submit"
                        action="{{ route('statistique.excelEffectifValidation') }}">
                        @csrf
                        <div class="mb-3 pb-3 row border-bottom align-items-center">
                            <label for="" class="control-label text-md-end col-md-3">Type statistique</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="statType" name="statType">
                                    <option>Selectionner le type</option>
                                    <option value="1">Semestriel</option>
                                    <option value="2">Annuel</option>
                                </select>
                                <div class="invalid-feedback">
                                    Le type de statistique est requis
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 pb-3 row border-bottom align-items-center hide" id="divSemestre">
                            <label for="" class="control-label text-md-end col-md-3">Semestre</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="semestre" name="semestre">
                                    <option value="">Sélectionner le semestre</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                </select>
                                <div class="invalid-feedback">

                                </div>
                            </div>
                        </div>
                        <div class="mb-3 pb-3 row border-bottom align-items-center hide" id="divEtudeYear">
                            <label for="" class="control-label text-md-end col-md-3">Année d'Etude</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="etudeYear" name="etudeYear">
                                    <option value="">Sélectionner l'année d'étude</option>
                                    @foreach ($data['etudes'] as $etude)
                                        <option value="{{ $etude->id }}">{{ $etude->annee_etude }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    L'année d'étude est requise
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 pb-3 row border-bottom align-items-center">
                            <label for="" class="control-label text-md-end col-md-3">Filières</label>
                            <div class="col-md-6">
                                <select class="select2 p-2 sel2multiple" multiple="multiple" id="mutipleFiliere"
                                    name="idFiliere[]" style="width: 100%">
                                    @foreach ($data['filieres'] as $filiere)
                                        <option value="{{ $filiere->idFiliere }}">
                                            {{ $filiere->intituleFilieres }}({{ $filiere->sigleFilieres }})</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    La filière est requise
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 pb-3 row border-bottom align-items-center">
                            <label for="" class="control-label text-md-end col-md-3">Année Académique</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="acadYear" name="acadYear">
                                    <option value="{{ Session::get('RESULTAT_DATA')['RESULTAT_YEAR']->annee_acad }}">
                                        {{ Session::get('RESULTAT_DATA')['RESULTAT_YEAR']->periode }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3 pb-3 row border-bottom align-items-center">
                            <label for="" class="control-label text-md-end col-md-3">Niveau formation</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="formation" name="formation">
                                    @foreach ($data['formations'] as $formation)
                                        <option value="{{ $formation->id }}">{{ $formation->niveauFormation }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row justify-content-center">

                                        <button type="button" id="swal"
                                            class="col-4 col-md-2 col-sm-3 col-lg-1 me-3 btn btn-success"> <i
                                                class="fa fa-check"></i> Submit</button>
                                        <button type="reset" class="col-4 col-md-2 col-sm-3 col-lg-1 me-3 btn "
                                            style="background-color: #e4e7ea">Cancel</button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <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('dist/js/pages/forms/select2/select2.init.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.29/dist/sweetalert2.all.min.js"></script>
    <script>
        $('#statType').change(() => {
            if ($('#statType').val() == 1) {
                $('#divSemestre').removeClass('hide');
                $('#divEtudeYear').addClass('hide');
            } else {
                $('#divSemestre').addClass('hide');
                $('#divEtudeYear').removeClass('hide');
            }
        });



        $('#statType').change(() => {
            if ($('#statType').val() == 1) {
                $('#swal').click((e) => {
                    if (![checkValidation('#statType'),
                            checkValidation('#acadYear'),
                            checkValidation('#semestre'),
                            // checkValidation('#etudeYear'),
                            checkValidation('#formation')

                        ].every(value => value === true)) {
                        e.preventDefault();
                    } else {
                        Swal.fire({
                            title: '',
                            text: "Voulez vous générer le fichier excel ?",
                            icon: 'question',
                            showCancelButton: true,
                            cancelButtonColor: '#595959',
                            confirmButtonColor: '#2cd07e',
                            confirmButtonText: 'Oui, générer le fichier excel!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                Swal.fire(
                                    'Message',
                                    'Fichier généré!',
                                    'success'
                                );
                                $('#submit').submit();
                            }
                        })
                    }
                });

            } else if ($('#statType').val() == 2) {
                $('#swal').click((e) => {
                    if (![checkValidation('#statType'),
                            checkValidation('#acadYear'),
                            // checkValidation('#semestre'),
                            checkValidation('#etudeYear'),
                            checkValidation('#formation')

                        ].every(value => value === true)) {
                        e.preventDefault();
                    } else {
                        Swal.fire({
                            title: '',
                            text: "Voulez vous générer le fichier excel ?",
                            icon: 'question',
                            showCancelButton: true,
                            cancelButtonColor: '#595959',
                            confirmButtonColor: '#2cd07e',
                            confirmButtonText: 'Oui, générer le fichier excel!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                Swal.fire({
                                    title: 'Downloading...',
                                    timer: 5000,
                                    timerProgressBar: true,
                                    text: 'La liste est en cours de génération. Vérifiez votre dossier de téléchargement!',
                                    icon: 'info',
                                    showConfirmButton: false,
                                    //confirmButtonColor: '#8cd4f5',
                                    backdrop: `rgba(0,0,100,0.4)`
                                });
                                $('#submit').submit();
                            }
                        })
                    }
                });

            }
        });


        // $(() => {
        //     $(".sel2multiple").select2({
        //         placeholder: "Sélectionner les filières",
        //         allowClear: true
        //     });

        // });


        $(() => {
            $('.sel2multiple').select2({
                placeholder: "Sélectionner les filières",
                allowClear: true
            })
        });

        // $('#swal').click((e) => {
        //     if (![checkValidation('#statType'),
        //             // checkValidation('#multipleFiliere'),
        //             checkValidation('#acadYear'),
        //             checkValidation('#semestre'),
        //             checkValidation('#etudeYear'),
        //             checkValidation('#formation')

        //         ].every(value => value === true)) {
        //         e.preventDefault();
        //     } else {
        //         Swal.fire({
        //             title: '',
        //             text: "Voulez vous générer le PDF ?",
        //             icon: 'question',
        //             showCancelButton: true,
        //             cancelButtonColor: '#e4e7ea',
        //             confirmButtonColor: '#2cd07e',
        //             confirmButtonText: 'Oui, générer le PDF!'
        //         }).then((result) => {
        //             if (result.isConfirmed) {
        //                 Swal.fire(
        //                     'Message',
        //                     'PDF générer!',
        //                     'success'
        //                 );
        //                 $('#swal').submit();
        //             }
        //         })
        //     }
        // });


        //le swall a affiché en cas d'erreur
        // Swal.fire({
        //                     icon: 'error',
        //                     title: 'Oops...',
        //                     text: 'Le PDF n\'as pas pu etre téléchargé!',
        //                     footer: 'Veuillez réessayer'
        //                     })
    </script>
@endsection