@extends('layouts.base')

@section('title', 'GestStudent')

@section('css')
    {{-- include page's specific styles here  --}}
@endsection

@section('content')
    <div class="row">
        <div class="card" style="width: 95%;margin: auto; margin-top:2%;margin-bottom:10%;">
            <div class="card-header bg-info p-4 text-center" style="color: white;">Veuiller sélectionner les données s'il vous
                plait</div>
            <div class="card-body">
                <form action="" method="post" id="fmanuelle">
                    <div class="annee form-group">
                        <div style="width:30%; margin-right:12px; display: inline-block;text-align:right;">
                            <label for="academique" style="font-weight: bold;">Année académique</label>
                        </div>
                        <div style="margin-right:2px; display: inline-block;vertical-align: center;width:50%;">
                            <select name="academique" id="academique" class=" form-control form-select second"
                                style="width: 100%" id="inlineFormCustomSelect" onchange="requestForm();">
                                <option value=""></option>
                                @foreach ($data['academique'] as $academique)
                                    <option value="{{ $academique->annee_acad }}">{{ $academique->periode }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="filiere form-group" style="border-top: solid 1px rgba(0,0,0,0.1); padding-top:25px;">
                        <div style="width:30%; margin-right:12px; display: inline-block;text-align:right;">
                            <label for="nom_prenom" style="font-weight: bold;">Nom & Prénom</label>
                        </div>
                        <div style="margin-right:2px; display: inline-block;vertical-align: center;width:50%;">
                            <select class="select2-data-array form-control custom-select nom_prenom" id="nom_prenom"
                                name="nom_prenom" style="width: 100%; height:5px;"
                                data-placeholder="Rechercher un étudiant...">
                            </select>
                        </div>
                    </div>

                    <div class="formation form-group" style="border-top: solid 1px rgba(0,0,0,0.1); padding-top:25px; ">
                        <div
                            style="width:30%; margin-right:12px; display: inline-block;vertical-align: top;text-align:right">
                            <label for="group-ref" style="font-weight: bold;">Référence opération</label>
                        </div>
                        <div style="margin-right:2px; display: inline-block;vertical-align: top;width:50%">
                            <form>
                                <div class="input-group">
                                    <a href="" style="display: none;" id="impress">lien</a>
                                    <input type="text" class="form-control" name="refFacture" id="refFacture" readonly>
                                    <button class="btn btn-danger" type="button" id="ref"><i
                                            class="fa fa-check-circle"></i>Générer référence</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div style="border-top: solid 1px rgba(0,0,0,0.1); padding-top:15px; ">
                        <div class="butt" style="width: 100%;margin: auto;">
                            <button type="submit" class="btn btn-success" onclick="manuel()"><i class="fa fa-check"></i>
                                Submit</button>
                            <button type="reset" class="btn" id="cancel" onclick="reset()"
                                style="background: #e4e7ea; border:#e4e7ea;height:36px">Cancel</button>
                            <button class="btn btn-danger" type="button" id="scan"><i
                                    class="fa fa-check-circle"></i>Scanner</button>
                        </div>
                    </div>

                </form>
            </div>


            <div class="form-group first-div" style="gap:10px" id="scanresult">
                <div class="col-md-6" style="display: flex;flex-direction:column; gap:25px">
                    <div class="panel panel-info" style="margin: 20px 0; display: flex; flex-direction: column;gap: 25px">
                        <div class="panel-heading" style="background: #2CABE3;padding:10px">
                            <h3 class="panel-title">Veuillez scanner le reçu avec les références de la BANK SVP! (IMPORTANT)
                                <font color="red">En cours de dévéloppement!!!</font>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <form action="" method="post" target="_blank"
                                style="display: flex;flex-direction:column;gap:30px">
                                <div class="form-group">
                                    <label for="sample-field-1">INFO:</label>
                                    Avec ce formulaire, vous avez la possibilité de scanner en image au format JPG ou PNG le
                                    reçu de la banque apporté par l'étudiant.
                                    Mais avant de l'utiliser veuillez d'abord installer ce composant <a
                                        href="https://www.neodynamic.com/downloads/jspm/" target="_blank">téléchargeable
                                        ici</a>.
                                    Puis scanner le reçu en cliquant tout simplement sur le bouton bleu "Scan".
                                </div>
                                <label>Scanner:</label>
                                <select id="scannerName"></select>
                                <div style="width: 100%;">
                                    <div class="res">
                                        <label>Resolution (DPI):</label>
                                        <input type="text" id="resolution" value="200" />
                                    </div>
                                    <div class="pix">
                                        <label>Pixel Mode:</label>
                                        <select id="pixelMode">
                                            <option>Grayscale</option>
                                            <option selected>Color</option>
                                        </select>
                                    </div>
                                    <div class="format">
                                        <label>Image Format:</label>
                                        <select id="imageFormat">
                                            <option selected>JPG</option>
                                            <option>PNG</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sample-field-1">Référence opération:</label>
                                    <div>
                                        <input name="refFacture2" id="refFacture2" type="text"
                                            style="background-color: #eee; opacity:1" value="" readonly=""
                                            class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Documents (à numériser) <a href="javascript:clearScans();"
                                            onclick="clearScan();"><span style="font-weight: normal;">Clear
                                                scans</span></a></label>

                                    <div>
                                        <button type="button" class="btn btn-xs btn-info" onclick="doScanning();">Scan
                                            as JPG or PNG</button>
                                        <button type="button" id="fermer" class="btn btn-xs btn-danger"> <i
                                                class="fa fa-check-circle"></i> Fermer</button>
                                        <input type="button" class="btn btn-xs btn-primary" value="Save image"
                                            onclick="submitForm1();" style="float: right;">
                                    </div>
                                </div>
                                <div id="images" style="margin-left: 0px; margin-top: 10px;"></div>
                            </form>
                        </div>
                    </div>

                </div>

                <div id="info" class="well"
                    style="width:100%; display:block;background-color: #fff; height: 500px; margin-top: 35px; padding: 12px; overflow: scroll !important; border:1px solid black;display:flex;justify-content:center">
                    {{-- <p><i>Information window</i></p>
                        <p class="warn">Currently, only Windows is supported.</p> --}}
                    <img id="scanOutput" alt="image">
                </div>

            </div>
        </div>
    @endsection

    @section('script')
        {{-- include page's specific scripts here --}}
        <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="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            let btn = document.querySelector('#ref');

            btn.addEventListener('click', () => {
                generate();
            });

            function generate() {
                //var x=document.getElementById("refFacture");
                //x.innerHTML = mt_rand();
                var ref = mt_rand();
                document.getElementById("refFacture").value = ref;
                document.getElementById("refFacture2").value = ref;
            }

            let scan_btn = document.querySelector('#scan');


            scan_btn.addEventListener('click', () => {
                appear();
            });

            const appear = () => {
                document.querySelector('#scanresult').style.display = "block";
                document.querySelector('#scanresult').style.display = "flex";
            }


            let close = document.querySelector('#fermer');

            close.addEventListener('click', () => {
                removed();
            });

            const removed = () => {
                document.querySelector('#scanresult').style.display = "none";
            }

            function mt_rand(min, max) {
                // http://kevin.vanzonneveld.net
                // +   original by: Onno Marsman
                // *     example 1: mt_rand(1, 1);
                // *     returns 1: 1
                var argc = arguments.length;
                if (argc === 0) {
                    min = 0;
                    max = 2147483647;
                } else if (argc === 1) {
                    throw new Error('Warning: mt_rand() expects exactly 2 parameters, 1 given');
                }
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            $(".select2-data-array").select2({
                placeholder: "Sélectionner un étudiant",
                language: {
                    noResults: () => "Traitement tableau de spécification en cours..."
                },
                allowClear: true
            });
            var reset = function() {
                document.querySelector('#cancel').addEventListener('click', () => {
                    document.querySelector('#academique').value = '';
                    document.querySelector('#nom_prenom').innerHTML = '';
                    document.querySelector('#refFacture').value = '';
                });
            }

            var requestForm = async () => {
                $(".nom_prenom").empty();
                let url = "{{ route('student.name') }}";
                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({
                        academique: $('#academique').val()
                    }),
                };


                await fetch(url, options)
                    .then((response) => response.json())
                    .then((response) => {
                        if (response.success) {
                            let data = response.data;

                            let selectData = [];
                            let child = [];
                            selectData.push({
                                id: '',
                                text: ''
                            })
                            for (let i in data.inscrit) {
                                console.log(data.inscrit[i]);
                                selectData.push({
                                    id: data.inscrit[i],
                                    text: i
                                })
                            }
                            $(".select2-data-array").select2({
                                placeholder: "Sélectionner un étudiant",
                                data: selectData
                            });


                        } else {
                            console.log(response);
                            toastr.error('Aucun etudiant correspondant à cette année académique !',
                                'With Close Button', {
                                    "closeButton": true,
                                    timeOut: 4000
                                })
                        }
                    })
                    .catch((e) => {
                        console.log(e);
                        toastr.error('Une erreur s\'est produite', 'With Close Button', {
                            "closeButton": true,
                            timeOut: 5000
                        })

                    });
            }

            let request = async (data) => {
                let url = "{{ route('set_dossier') }}";
                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({
                        form: data
                    }),
                };

                console.log(data[0]['value']);
                await fetch(url, options)
                    .then((response) => response.json())
                    .then((response) => {
                        if (response.success) {
                            Swal.fire({
                                title: "",
                                text: "Dossier enregistré avec succès!!!",
                                type: "info",
                                closeOnConfirm: false,
                                confirmButtonClass: "btn-danger",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62",
                                showCancelButton: true
                            })
                            $.unblockUI()
                            console.log(response);
                        } else {
                            Swal.fire({
                                title: "<font color = red size=5><i>Erreur dans le traitement de votre requête.</i></font>",
                                text: response.message,
                                type: "error",
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                                confirmButtonClass: "btn-danger",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            })
                            $.unblockUI()
                        }
                    })
                    .catch((e) => {
                        $.unblockUI()
                        console.log(e);
                        Swal.fire({
                            html: '<font color = red size=5><i>Erreur dans le traitement de votre requête.</i></font>',
                            title: "",
                            text: e,
                            type: "error",
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true,
                            confirmButtonClass: "btn-danger",
                            confirmButtonText: "OK",
                            confirmButtonColor: "#ec6c62"
                        })
                    });
            }
            var manuel = function() {
                $(document).ready(function() {
                    data = $("#fmanuelle").serializeArray();
                    if ($('#nom_prenom').val() == '' || $('#refFacture').val() == '') {
                        Swal.fire({
                            title: "",
                            text: "Veuillez controler les champs!!!",
                            icon: 'error',
                            closeOnConfirm: false,
                            confirmButtonText: "OK",
                            confirmButtonColor: "#d33"
                        });
                    } else {
                        Swal.fire({
                            title: '<font color = red size=5><i>Bien vouloir confirmer cette opération.</i></font>',
                            html: "<b>Scan dossier!!!</b>",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            cancelButtonText: 'Annuler',
                            confirmButtonText: 'Confirmer!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.blockUI({
                                    overlayCSS: {
                                        backgroundColor: 'rgba(255,0,0,0.7)'
                                    },
                                    centerY: 0,
                                    css: {
                                        top: '10px',
                                        left: '',
                                        right: '10px',
                                        border: '3px solid #a00'
                                    }
                                });
                                request(data);

                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Cancelled',
                                    text: 'Opération annulée... :)',
                                    footer: ''
                                })
                            }
                        })
                    }
                })

            }
        </script>
    @endsection