@extends('layout.template')
@section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">IMPRESSION FICHE UE ANNÉE ACADÉMIQUE : 2021-2022 </h5>
@endsection

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

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
    <link href="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.css') }}" rel="stylesheet">
@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" id="submit" method="post" action="{{ route('fiche.ue1') }}"
                        target="_blank">
                        @csrf
                        <div class="mb-3 pb-3 row border-bottom align-items-center">
                            <label for="" class="control-label text-md-end col-md-3">Impression</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2" id="sessionType" name="session">
                                    <option value="0">Session normale</option>
                                    <option value="1">Session de rattrapage</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">Filière</label>
                            <div class="col-md-6">
                                <select class="select2 p-2" style="width: 100%" id="filiere" name="idFiliere">
                                    <option>Selectionner la filière</option>
                                    @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="mb-3 pb-3 row border-bottom align-items-center">
                            <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>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">Choisir une UE</label>
                            <div class="col-md-6">
                                <select class="select2 select2-data-array p-2" style="width: 100%" id="ue"
                                    name="ue">

                                </select>
                                <div class="invalid-feedback">
                                    L'UE 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">Ligne par page</label>
                            <div class="col-md-6">
                                <input type="number" class="form-control" id="linePerPage" name="line"
                                    placeholder="S'adapte au format du document par défaut">
                                <div class="invalid-feedback">
                                    Le nombre de ligne par page est recquis
                                </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">Format du document</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2 border-danger" id="pageForm" name="format">
                                    <option value="a3" selected>A3</option>
                                    <option value="a4">A4</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">Orientation du document</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2 border-danger text-danger" name="orientation"
                                    id="pageOrientation">
                                    <option value="portrait" selected>PORTRAIT</option>
                                    <option value="landscape">PAYSAGE</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">Police du document</label>
                            <div class="col-md-6">
                                <select class="form-select mr-sm-2 p-2 border-danger text-danger" name="police"
                                    id="pagePolice">
                                    <option value="times">Times</option>
                                    <option value="dejavu">Dejavusans</option>
                                    <option value="helvetica">Helvetica</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">Taille de la police</label>
                            <div class="col-md-6">
                                <input type="number" class="form-control" id="policeWidth" value="12"
                                    name="size"'>
                                <div class="invalid-feedback">
                                    La taille de la police est recquise
                                </div>
                            </div>
                        </div>

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

                                        <button type="submit"
                                            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="{{ asset('assets/extra-libs/toastr/dist/build/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/extra-libs/toastr/toastr-init.js') }}"></script>

    <script>
        $(() => {
            let request = async () => {
                if (!(isNaN($("#filiere").val()) || isNaN($("#acadYear").val()) || isNaN($(
                            "#formation").val()) ||
                        isNaN($("#etudeYear").val()))) {
                    $(".select2-data-array").empty().trigger('change');
                    let url = "{{ route('ue') }}";
                    let token = document
                        .querySelector('meta[name="csrf-token"]')
                        .getAttribute("content");

                    let options = {
                        headers: {
                            "Content-Type": "application/json",
                            Accept: "application/json, text-plain, */*",
                            "X-Requested-With": "XMLHttpRequest",
                            "X-CSRF-TOKEN": token,
                        },
                        method: "post",
                        credentials: "same-origin",
                        body: JSON.stringify({
                            idFiliere: $("#filiere").val(),
                            acad_year: $("#acadYear").val(),
                            formation: $("#formation").val(),
                            etude_year: $("#etudeYear").val()
                        }),
                    };
                    await fetch(url, options)
                        .then((response) => response.json())
                        .then((response) => {
                            if (response.success) {
                                let data = response.data;
                                if (data.length) {
                                    let selectData = [];
                                    selectData.push({
                                        id: 0,
                                        text: 'ALL'
                                    });
                                    for (let semestre in data.ues) {
                                        let ues = [];
                                        for (let ue in data.ues[semestre]) {
                                            ues.push({
                                                id: ue,
                                                text: data.ues[semestre][ue]
                                            });
                                        }
                                        selectData.push({
                                            text: '============================== Semestre ' +
                                                semestre +
                                                ' ==============================',
                                            children: ues
                                        });
                                    }
                                    $(".select2-data-array").select2("destroy");
                                    $(".select2-data-array").select2({
                                        placeholder: "Choisir une unité d'enseignement",
                                        pagination: {
                                            "more": true
                                        },
                                        data: selectData
                                    });
                                } else
                                    toaster("warning", "Pas d'UE pour les données saisies.");
                            } else
                                toaster("warning",
                                    "Erreur de connection, veuillez recharger la page.");
                        })
                        .catch((e) => {
                            console.log(e)
                            toaster("error",
                                "Une erreur est survenue, veuillez recharger la page.");
                        });
                }
            };

            $('#filiere').change(request);
            $('#acadYear').change(request);
            $('#formation').change(request);
            $('#etudeYear').change(request);
            $(".select2-data-array").select2({
                placeholder: "Choisir une unité d'enseignement",
                language: {
                    noResults: () => "Traitement tableau de spécification en cours..."
                },
                allowClear: true
            });

            let lineValid = (id) => {
                if (!$(id).val()) {
                    $(id).val(0);
                } else {
                    if ($(id).val() < 0) {
                        $(id).val(0);
                    }
                }
                $(id).addClass('is-valid');
                return true;
            };

            $('#linePerPage')?.change(() => {
                lineValid('#linePerPage');
            });
            $('#policeWidth')?.change(() => {
                lineValid('#linePerPage');
            });

            $('#submit').submit((e) => {
                if (![checkValidation('#sessionType'),
                        checkValidation('#ue'),
                        lineValid('#linePerPage'),
                        checkValidation('#policeWidth'),
                        checkValidation('#filiere'),
                        checkValidation('#acadYear'),
                        checkValidation('#formation'),
                        checkValidation('#etudeYear')
                    ].every(value => value === true)) {
                    e.preventDefault();
                }
                ['#pagePolice', '#pageOrientation', '#pageForm'].forEach(id => {
                    $(id).removeClass('border-danger');
                    $(id).addClass('border-success')
                });
            });
        });
    </script>
@endsection