@extends('layout.template')


@section('intitule')
    <h4 class="text-uppercase mb-0"> GESTSTUDENT SMS / IITECH SARL CALAVI </h4>
@endsection
{{-- @section('intitule')

@endsection

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

@section('styles')
@endsection --}}

@section('main')
    <div class="d-flex justify-content-center">
        <div class=" col-md-12 col-sm-12 col-lg-6 p-4 bg-white mb-4 " style="border: 4px solid blue ">
            <div class="panel panel-info white-box">
                <div class="mb-3 d-flex align-item-center" style="height: 70px; width:100%; background-color:#2cabe3;">
                    <p class="text-center mt-4 ms-4 text-white fw-bold fs-4" style="height: fit-content">Veuillez sélectionner
                        les données s'il vous plait.</p>
                </div>
                <div class="panel-wrapper collapse in" aria-expanded="true">
                    <div class="panel-body">
                        <form enctype="multipart/form-data" method="POST" id="submit" action="{{ route('envoiMsg') }}">
                            @csrf
                            <div class="form-body">
                                <div class="form-group has-feedback mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Filière</label>
                                    <div class="col-md-8">
                                        <select name="idFiliere" id="idFiliere" class="form-select"
                                            data-fv-field="idFiliere">
                                            <option value="0">Sélectionner la filière</option>
                                            @foreach ($data['filieres'] as $filiere)
                                                <option value="{{ $filiere->idFiliere }}">
                                                    {{ $filiere->intituleFilieres }}({{ $filiere->sigleFilieres }})</option>
                                            @endforeach
                                        </select>

                                        <div id="info">
                                            <font color="red">Ce champ peut être vide !!! </font>
                                        </div>
                                        <small class="help-block" data-fv-validator="notEmpty" data-fv-for="idFiliere"
                                            data-fv-result="NOT_VALIDATED" style="display: none;">Please enter a
                                            value</small>
                                    </div>
                                </div>
                                <div class="form-group mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Année d'Etude</label>
                                    <div class="col-md-8">
                                        <select name="annee" id="annee" class="form-select required">
                                            <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>
                                </div>
                                <div class="form-group has-feedback mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Année Académique</label>
                                    <div class="col-md-8">
                                        <select required name="academique" id="academique" class="form-select"
                                            data-fv-field="academique">
                                            <option value="{{ Session::get('DATA')['YEAR']->annee_acad }}">
                                                {{ Session::get('DATA')['YEAR']->periode }}
                                            </option>
                                        </select>
                                        <small class="help-block" data-fv-validator="notEmpty" data-fv-for="academique"
                                            data-fv-result="NOT_VALIDATED" style="display: none;">L'année académique est
                                            requise</small>
                                    </div>
                                </div>
                                <div class="form-group has-feedback mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Message</label>
                                    <div class="col-md-8">
                                        <textarea required class="form-control" name="message" id="message" rows="5" data-fv-field="message"></textarea><i class="form-control-feedback"
                                            data-fv-icon-for="message" style="display: none;"></i>
                                        {{-- <div id="textarea_feedback">0  </div> --}}
                                        <div id="textarea_feedback"><span>0</span> caractères saisis.<font color="red">
                                                (Attention : Eviter les caractères spéciaux. La facturation est autre.)
                                            </font>
                                        </div>
                                        <small class="help-block" data-fv-validator="notEmpty" data-fv-for="message"
                                            data-fv-result="NOT_VALIDATED" style="display: none;">Le message est
                                            requis</small>
                                    </div>

                                </div>

                                <div class="form-group has-feedback mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Identifiant du message</label>
                                    <div class="col-md-8">
                                        <input required class="form-control" name="ident" id="ident" maxlength="11"
                                            data-fv-field="ident"><i class="form-control-feedback" data-fv-icon-for="ident"
                                            style="display: none;"></i>
                                        <small class="help-block" data-fv-validator="stringLength" data-fv-for="ident"
                                            data-fv-result="NOT_VALIDATED" style="display: none;">Please enter a value with
                                            valid length</small>
                                    </div>
                                </div>

                                <div class="form-group mb-3 pb-3 row border-bottom align-items-center">
                                    <label class="control-label text-md-end col-md-3">Max personnes</label>
                                    <div class="col-md-8">
                                        <input type="number" class="form-control" name="nombre" id="nombre">
                                    </div>
                                </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-2 me-3 btn btn-success">
                                                <i class="fa fa-check"></i>Envoyer</button>
                                            <button type="reset" class="col-4 col-md-2 col-sm-3 col-lg-2 me-3 btn "
                                                style="background-color: #e4e7ea">Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script src="{{ asset('assets/libs/block-ui/jquery.blockUI.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.29/dist/sweetalert2.all.min.js"></script>

    <script>
        $(document).ready(function() {


            let request = async () => {
                $.blockUI({
                    centerY: 0,
                    css: {
                        top: '10px',
                        left: '',
                        right: '10px',
                        border: '3px solid #a00'
                    },
                    overlayCSS: {
                        backgroundColor: 'red',

                    },

                });
                let url = "{{ route('envoiMsg') }}";
                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: $('#idFiliere').val(),
                        annee: $('#annee').val(),
                        academique: $('#academique').val(),
                        message: $('#message').val(),
                        ident: $('#ident').val(),
                        nombre: $('#nombre').val()
                    })
                };
                await fetch(url, options)
                    .then((response) => response.json())
                    .then((response) => {
                        if (response.success) {
                            $.unblockUI()
                            new swal({
                                title: "",
                                text: "Message envoyé avec succès!!!",
                                icon: "info",

                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            })
                        }



                    })
                    .catch((e) => {
                        console.log(e)
                        new swal({
                            html: true,
                            title: "<font color = red size=5><i>Erreur dans le traitement de votre requête.</i></font>",
                            // text: e->getMessage(),
                            icon: "error",

                            confirmButtonText: "OK",
                            confirmButtonColor: "#ec6c62"
                        });
                    });
            };

            var limitnum = 700; // set your int limit for max number of characters
            var myForm = document.getElementById('submit');



            function limiting(obj, limit) {
                var cnt = $("#textarea_feedback > span");
                var txt = $(obj).val();
                var len = txt.length;

                // check if the current length is over the limit
                if (len > limit) {
                    $(obj).val(txt.substr(0, limit));
                    $(cnt).html(len - 1);
                } else {
                    $(cnt).html(len);
                }

                // check if user has less than 20 chars left
                if (limit - len <= 20) {
                    $(cnt).addClass("warning");
                }
            }

            $('textarea').keyup(function() {
                limiting($(this), limitnum);
            });

            $('#swal').click((e) => {
                if (![
                        checkValidation('#message'),
                        checkValidation('#ident'),
                        // checkValidation('#nombre'),
                        checkValidation2('#annee'),


                    ].every(value => value === true)) {
                    e.preventDefault();
                } else {
                    var textarea = $('#message').val();

                    Swal.fire({
                        title: 'Bien vouloir confirmer cette opération.',
                        text: "Message à envoyer : " + textarea,

                        icon: 'warning',
                        showCancelButton: true,
                        cancelButtonColor: '#595959',
                        confirmButtonColor: '#2cd07e',
                        reverseButtons: true,
                        confirmButtonText: 'Confirmer'
                    }).then((result) => {
                        if (result.isConfirmed) {

                            request();
                        }
                        // setTimeout($.unblockUI, 4000);
                        else {
                            Swal.fire({
                                title: 'Cancelled',
                                text: 'Operation annulée...',

                                icon: 'error',

                            })
                        }
                    });

                }
            });
        });
    </script>
    <script></script>
@endsection