@extends('layout.template')


@section('title', 'GestStudent')


@section('title2')
    ETABLISSEMENT
@endsection

@section('subtitle')
    Etablissement
@endsection

@section('main')

    <div class="page-content container-fluid">

        <div class="white-box" style="margin-top:2%; margin-bottom:7%">
            <div>
                <h3 class="box-title m-b-0" style="color:#313131; font-weight:bold">Data Export</h3>
                <p class="text-muted m-b-30" style="font-size:14px; color:#8E9EA7">Export data to Copy, CSV, Excel, PDF
                    &amp; Print
                </p>
            </div>
            <div class="table-responsive">
                <div id="examtable_wrapper" class="dataTables_wrapper">
                    <div style="margin-top:15px;width:100%">
                        <table class="table table-striped table-bordered" id="file_export" role="grid"
                            aria-describedby="examtable_info" data-order="[[ 2, &quot;asc&quot; ]]" cellspacing="0"
                            width="100%" role="grid" aria-describedby="examtable_info"
                            style="width: 115%; margin-top:15px; color: {{ session('couleurText2') }}">
                            <thead>
                                <tr role="row">
                                    <th style="width: 63px;text-align:center">
                                        ID ETABLISSEMENT
                                    </th>
                                    <th style="width: 63px;text-align:center">
                                        NOM UNIVERSITE
                                    </th>
                                    <th style="text-align:center" id="other">
                                        NOM ETABLISSEMENT
                                    </th>
                                    <th style="width: 86px;text-align:center">
                                        SIGLE ETABLISSEMENT
                                    </th>
                                    <th style="width: 88px;text-align:center">
                                        E-MECeF
                                    </th>
                                    <th style="width: 88px;text-align:center">
                                        MODIFIER
                                    </th>
                                </tr>
                            </thead>
                            {{-- <tfoot>
                                <tr>
                                    <th rowspan="1" colspan="1" style="text-align: center">ID ETABLISSEMENT</th>
                                    <th rowspan="1" colspan="1" style="text-align: center">NOM UNIVERSITE</th>
                                    <th rowspan="1" colspan="1" style="text-align: center">NOM ETABLISSEMENT</th>
                                    <th rowspan="1" colspan="1" style="text-align: center">SIGLE ETABLISSEMENT</th>
                                    <th rowspan="1" colspan="1" style="text-align: center">E-MECeF</th>
                                    <th rowspan="1" colspan="1" style="text-align: center">MODIFIER</th>
                                </tr>
                            </tfoot> --}}
                            <tbody>
                                <tr role="row" class="odd">
                                    <td style="text-align: center;">{{ $etab->idEtablissement }}</td>
                                    <td style="text-align: center;">{{ $univ }}</td>
                                    <td style="width:3%;overflow:auto;text-align: center;" contenteditable=""
                                        class="update sorting_1" data-id="5" data-column="scolarite">
                                        {{ $etab->descreta }}</td>
                                    <td style="text-align: center;">{{ $etab->sigle }}</td>
                                    <td style="text-align: center;" id="res">{{ $etab->emecef }}</td>
                                    <td style="text-align: center;">
                                        <button type="button" id="button"
                                            onclick="modal()" class="btn btn-outline-info btn-circle btn-lg m-r-5 editer"
                                            data-toggle="modal" data-target="#add-contact"><i
                                                class="ti-pencil-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div style="display:none">
        <template id="info-temp">
            <swal-title>
                Confirmer la modification
            </swal-title>
            <swal-html>
                <form class="form-material" style="display: block; overflow-x: hidden;">
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="">
                            IdEtablissement:</label>
                        <div class="col-sm-5">
                            <input type="text"style="font-size:15px !important"
                                class="form-control form-control-line fs-5" value="{{ $etab->idEtablissement }}" readonly
                                disabled>
                        </div>
                    </div>

                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="">Etablissement:</label>
                        <div class="col-sm-5">
                            <input type="text"style="font-size:15px !important"
                                class="form-control form-control-line fs-5" value="{{ $etab->sigle }}" readonly
                                disabled>

                        </div>
                    </div>
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="emecef">emecef:</label>
                        <div class="col-sm-5">
                            <select id="emecef" name="emecef" class="form-select"
                                style="width: 100%;max-width:100%;font-size:15px !important;border-right:none;border-left:none;">
                                <option value="YES" @if ($etab->emecef == 'YES') selected @endif>YES</option>
                                <option value="NO" @if ($etab->emecef == 'NO') selected @endif>NO</option>
                            </select>
                        </div>

                    </div>
                </form>
            </swal-html>
            <swal-button type="confirm" color="#4ff067">
                Modifier
            </swal-button>
            <swal-button type="cancel">
                Annuler
            </swal-button>
            <swal-param name="allowEscapeKey" value="true" />
            <swal-param name="customClass" value='{ "popup": "my-popup" }' />
        </template>
    </div>
    <div style="display:none">
        <template id="my-template">
            <swal-title>
                Modification enrégistrée avec succès!
            </swal-title>
            <swal-icon type="success"></swal-icon>
            <swal-button type="confirm" color="rgb(48, 133, 214)">
                Close
            </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 modification 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>
        let request = async () => {
            let url = "{{ route('modif.emecef') }}";
            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({
                    emecef: $("#emecef").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 {
                        const {
                            value: formValues
                        } = Swal.fire({
                            template: '#my-temp'
                        })
                        $.unblockUI()
                        $(() => {

                        })
                        console.log(response);
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        }
        var modal = function() {
            const {
                value: formValues
            } = Swal.fire({
                template: '#info-temp'
            }).then((result) => {
                if (result.isConfirmed) {
                    request();
                    $(() => {
                        var val = document.querySelector('#emecef').value;
                        document.querySelector('#res').innerHTML = val;
                        $.blockUI({
                            overlayCSS: {
                                backgroundColor: 'rgba(255,0,0,0.6)'
                            },
                            centerY: 0,
                            css: {
                                top: '10px',
                                left: '',
                                right: '10px'
                            }
                        });
                    })


                }
            })
        };
    </script>
@endsection