@extends('layout.template')

@section('title', 'GestStudent')


@section('title2')
    MIGRATION DES FRAIS DE SCOLARITE
@endsection

@section('subtitle')
    Migration
@endsection

@section('main')

    <div class="page-content container-fluid">
        <div class="card" style="width: 70%;margin: auto; margin-top:5%;">
            <div class="card-header bg-info p-4 text-center" ><p style="color: {{ session('couleurText2') }}">Veuillez sélectionner les données svp</p>
            </div>
            <div class="card-body">
                <form action="" method="" onsubmit='return migrer();'>
                    <div style="text-align: center">
                        <div class="migration_scolarite" style="  margin-bottom: 1.5rem;">
                            <div
                                style="width:25%; margin-right:12px; display: inline-block;vertical-align: middle;margin-left:-45px">
                                <label for="annee" style="font-weight: bold;">Année académique en cours</label>
                            </div>
                            <div style="width:40%; margin-right:2px; display: inline-block;vertical-align: middle;">
                                <select name="annee" id="annee"
                                    class="form-select second @error('annee') is-invalid @enderror">
                                    <option value="{{ $annee->periode }}">{{ $annee->periode }}</option>
                                </select>
                            </div>
                        </div>
                        <div
                            style="display:flex; justify-content: center; align-items: center; padding-top:1.5rem; border-top: solid 1px rgba(0,0,0,0.1);">
                            <div style="width: 40%;margin: auto;text-align:center">
                                <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i>
                                    Submit</button>
                                <button type="reset" class="btn btn-secondary">Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>

    <div style="display:none">
        <template id="my-template">
            <swal-title>
                Migration effectuée avec succès!
            </swal-title>
            <swal-icon type="success"></swal-icon>
            <swal-button type="confirm" color="rgb(48, 133, 214)">
                OK
            </swal-button>
            <swal-param name="allowEscapeKey" value="false" />
            <swal-param name="customClass" value='{ "popup": "my-popup" }' />
        </template>
    </div>


    <div style="display:none">
        <template id="info">
            <swal-title>
                Confirmer la migration?
            </swal-title>
            <swal-icon type="warning"></swal-icon>
            <swal-button type="cancel" color="rgb(48, 133, 214)">
                Annuler
            </swal-button>
            <swal-button type="confirm" color="rgb(48, 133, 214)">
                Confirmer
            </swal-button>
            <swal-param name="allowEscapeKey" value="false" />
            <swal-param name="customClass" value='{ "popup": "my-popup" }' />
        </template>
    </div>

    <div style="display:none">
        <template id="my-temp">
            <swal-title>
                Oups!La migration n'a pas été effectuée
            </swal-title>
            <swal-icon type="error"></swal-icon>
            <swal-button type="confirm" color="rgba(255,0,0,0.7)">
                Close
            </swal-button>
            <swal-param name="allowEscapeKey" value="false" />
            <swal-param name="customClass" value='{ "popup": "my-popup" }' />
        </template>
    </div>
@endsection

@section('script')
    <script src="{{ asset('dist/js/jquery.blockUI.js') }}"></script>
    <script type="text/javascript">
        let request = async () => {
            let url = "{{ route('migration') }}";
            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({
                    periode: $("#annee").val()
                }),
            };


            await fetch(url, options)
                .then((response) => response.json())
                .then((response) => {
                    if (response.success) {
                        const {
                            value: formValues
                        } = Swal.fire({
                            template: '#my-template'
                        })
                        $.unblockUI()
                        $(() => {

                        })
                        console.log(response);

                    } else {
                        $.unblockUI()
                        $(() => {

                        })
                        console.log(response);
                        const {
                            value: formValues
                        } = Swal.fire({
                            template: '#my-temp'
                        })
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        }

        var migrer = function() {
            $("select").addClass("is-valid")
            const {
                value: formValues
            } = Swal.fire({
                template: '#info'
            }).then((result) => {
                if (result.isConfirmed) {
                    request();
                    $(() => {
                        $.blockUI({
                            overlayCSS: {
                                backgroundColor: 'rgba(255,0,0,0.7)'
                            },
                            centerY: 0,
                            css: {
                                top: '10px',
                                left: '',
                                right: '10px'
                            }
                        });
                    })
                }
            })
            return false;
        };
    </script>
@endsection