@extends('layout.template')

@section('title', 'GestStudent')


@section('title2')
    DASHBOARD / IITECH SARL CALAVI
@endsection

@section('subtitle')
    Dashboard 4
@endsection

@section('main')

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

        <div class="row p-3">
            <input type="text" value="30" id="notif" style="display: none">
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="card-title" style="font-size: 15px">ANNÉE-ACADÉMIQUE EN COURS </h3>
                        <div class="list-inline two-part">
                            <li style="list-style-type:none; display:inline-block; width: 48%;">
                                <i class="icon-calculator text-info" style="font-size:50px"></i>
                            </li>

                            <li style="text-align:right; list-style-type:none;display:inline-block; width: 48%;">
                                <span style="font-size: 25px; font-family:Rubik,sans-serif;"
                                    id="2021">{{ explode('-', Session::get('periode'))[0] }}</span>
                                <span>-</span>
                                <span style="font-size: 25px; font-family:Rubik,sans-serif;"
                                    id="2022">{{ explode('-', Session::get('periode'))[1] }}</span>
                            </li>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">EFFECTIF TOTAL</h5>
                        <div class="list-inline two-part">
                            <li style="list-style-type:none;display:inline-block; width: 48%;">
                                <i class="icon-people text-purple" style="font-size: 50px;"></i>
                            </li>

                            <li style="text-align:right; list-style-type:none;display:inline-block; width: 48%;">
                                <span id="total_number" style="font-size:25px;">{{ $effectif[1] + $effectif[2] }}</span>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">FILLES</h5>
                        <div class="list-inline two-part">
                            <li style="list-style-type:none;display:inline-block; width: 48%;">
                                <i class="icon-user-female text-danger" style="font-size: 50px"></i>
                            </li>

                            <li style="text-align:right; list-style-type:none;display:inline-block; width: 48%;">
                                <span id="number_girls" style="font-size:25px;">{{ $effectif[2] }}</span>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">GARÇONS</h5>
                        <div class="list-inline two-part">
                            <li style="list-style-type:none;display:inline-block; width: 48%;">
                                <i class="icon-user text-success" style="font-size: 50px"></i>
                            </li>

                            <li style="text-align:right; list-style-type:none;display:inline-block; width: 48%;">
                                <span id="number_boys" style="font-size:25px;">{{ $effectif[1] }}</span>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 white-box" style>
                <div class="card w-100">
                    <div class="card-body">
                        <h3 class=" card-title">OPTION AUTOMATIQUE DE FACTURATION</h3>
                        <div id="option_auto" align="center"><a href="{{ route('form.auto') }}" target="_blank"
                                style="text-decoration: none;">
                                <img src="/assets/images/qr_code.png"
                                    style="width: 98%;height:98%; max-width:500px; max-height:500px; vertical-align: middle;"
                                    alt="qr-code"
                                    title="Scanner la zone QR de la fiche de préinscription de l'étudiant. Suivez les étapes puis valider le payement des frais de scolarité."></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 white-box">
                <div class="card w-100">
                    <div class="card-body">
                        <h3 class="card-title">OPTION MANUELLE DE FACTURATION</h3>
                        <div id="option_man" align="center">
                            <a href="{{ route('form.man') }}" target="_blank"
                                style="text-decoration: none;padding:10px;">
                                <img src="/assets/images/po2.png" style="width: 100%;height:98%;" alt="qr-code"
                                    title="Scanner la zone QR de la fiche de préinscription de l'étudiant. Suivez les étapes puis valider le payement des frais de scolarité."></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-left:6.5px; margin-bottom:3rem;">
                <div class="col-sm-12">
                    <div class="panel card w-100">

                        <div class="panel-heading">METTRE A JOUR VOTRE COMPTE</div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="zero_config" role="grid"
                                aria-describedby="examtable_info" style="color: {{ session('couleurText2') }}">
                                <thead>
                                    <tr role="row">
                                        <th>#</th>
                                        <th>PHOTO</th>
                                        <th>Matricule</th>
                                        <th>NOM & PRENOM</th>
                                        <th>USERNAME</th>
                                        <th>EMAIL</th>
                                        <th>TELEPHONE</th>
                                        <th>CATEGORIE</th>
                                        <th>MANAGE</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center">1</td>
                                        <td class="text-center"><img
                                                src="{{ Session::get('photo') }}" height="60"
                                                width="60">
                                        </td>
                                        <td class="text-center">{{ Session::get('matricule') }}</td>
                                        <td class="text-center"><span class="font-medium">{{ Session::get('nom') }}
                                                {{ Session::get('prenom') }}</span></td>
                                        <td class="text-center">{{ Session::get('COMPTABLE_USERNAME') }}</td>
                                        <td class="text-center" id="email">{{ Session::get('email') }} </td>
                                        <td class="text-center" id="phone">{{ Session::get('phone') }}</td>
                                        <td class="text-center"><select class="form-select second">
                                                <option value="6" selected="">
                                                    {{ App\Http\Helpers\UserHelpers::userRole(Session::get('type_user')) }}
                                                </option>
                                            </select></td>
                                        <td class="text-center">
                                            <button type="button" onclick="changed()"
                                                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>
    </div>

    <div style="display:none">
        <template id="info-template">
            <swal-title>
                Changer d'établissement
            </swal-title>
            <swal-html>
                <form class="form-material" style="display: block; overflow-x: hidden;" id="userForm" method="POST"
                    action="{{ route('store.user') }}">
                    @csrf
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="matricule">
                            Matricule:</label>
                        <div class="col-sm-5">
                            <input required type="text" style="font-size:15px !important"
                                class="form-control form-control-line fs-5" value="{{ Session::get('matricule') }}"
                                readonly id="matricule" name="matricule" disabled>
                        </div>
                    </div>
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="name">Nom:</label>
                        <div class="col-sm-5">
                            <input required type="text" style="font-size:15px !important"
                                class="form-control form-control-line fs-5" value="{{ Session::get('nom') }}" readonly
                                id="name" name="name" disabled>
                        </div>
                    </div>
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="prenom">Prénom:</label>
                        <div class="col-sm-5">
                            <input required type="text" style="font-size:15px !important"
                                class="form-control form-control-line fs-5" value="{{ Session::get('prenom') }}" readonly
                                id="prenom" name="prenom" disabled>
                        </div>
                    </div>
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="Mail">Mail:</label>
                        <div class="col-sm-5">
                            <input required type="email" style="font-size:15px !important" id="mail"
                                name="mail" class="form-control fs-5" placeholder="" value="">
                        </div>
                    </div>

                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" style="" for="phone">Phone:</label>
                        <div class="col-sm-5">
                            <input required type="text" style="font-size:15px !important" class="form-control fs-5"
                                placeholder="" id="number" name="phone" value="">
                        </div>
                    </div>

                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5 col-form-label fw-bold" for="DValidation">Catégorie:</label>
                        <div class="col-lg-6 col-12  input-modal">
                            <select name="Comptable" id="categorie" class="form-select"
                                style="width: 100%;max-width:82%;font-size:15px !important;border-left:none;border-right:none">
                                <option value="{{ App\Http\Helpers\UserHelpers::userRole(Session::get('type_user')) }}"
                                    selected>{{ App\Http\Helpers\UserHelpers::userRole(Session::get('type_user')) }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-right:-60px;text-align:end">
                        <label class="col-sm-5 mt-2 fs-5" for="Nationalité"
                            class=" col-form-label fw-bold">Etablissement:</label>
                        <div class="col-lg-6 col-12 input-modal">
                            @php
                                $etablissements = App\Http\Helpers\UserHelpers::getUserEta();
                            @endphp

                            @if (count($etablissements))
                                <select name="etablissement" class="form-select" id="etablissement"
                                    style="width: 100%;max-width:82%;font-size:15px !important;border-left:none;border-right:none">
                                    @foreach ($etablissements as $eta)
                                        <option value="{{ $eta['idEtablissement'] }}"
                                            {{ Session::get('idEta') == $eta['idEtablissement'] ? 'selected' : '' }}>
                                            {{ $eta['sigle'] }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <select name="etablissement" class="form-select" id="etablissement"
                                    style="width: 100%;max-width:82%;font-size:15px !important;border-left:none;border-right:none">
                                    <option value="{{ Session::get('idEta') }}" selected>
                                        {{ Session::get('etablissement') }}</option>
                                </select>
                            @endif
                        </div>
                    </div>
                </form>
            </swal-html>
            <swal-button type="confirm" color="#4ff067">
                Sauvegarder
            </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>
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.blockUI.js') }}"></script>
    <script type="text/javascript">
        toastr["info"]("La plateforme révolutionnaire de gestion des universités publiques et privée.",
            "Bienvenue dans GestStudent", {
                "progressBar": true,
                timeOut: 2000
            })

        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }


        let request = async (phone, mail) => {
            let url = "{{ route('store.user.phone') }}";
            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({
                    mail: mail,
                    phone: phone
                })
            };


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

                        console.log(response);
                        $('#email').text(mail)
                        $('#phone').text(phone)
                        // $.unblockUI()
                        Swal.fire(
                            'Modification enregistrée!',
                            "Vos modifications ont été enregistrées avec succès {{ Session::get('phone') }}",
                            'success'
                        )

                    } else {
                        $.unblockUI()
                        Swal.fire({
                            icon: 'error',
                            title: 'Une erreure s\'est produite !!!...',
                            text: response.message,
                            footer: ''
                        })
                    }
                })
                .catch((e) => {
                    $.unblockUI()
                    Swal.fire({
                        icon: 'error',
                        title: 'Une erreure s\'est produite !!!...',
                        text: e,
                        footer: ''
                    })
                    console.log(e);
                });
        }

        let changed = function() {
            $(() => {
                $('#mail').val($('#email').html())
                $('#number').val($('#phone').html())
            })
            const {
                value: formValues
            } = Swal.fire({
                template: '#info-template'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#userForm').submit();
                }
            })
        }
    </script>
    @if (Session::has('error'))
        <script type="text/javascript">
            Swal.fire({
                icon: 'error',
                title: 'Une erreure s\'est produite !',
                text: "{{ Session::get('error') }}",
                footer: ''
            })
        </script>
        {{-- @php
            Session::forget::('error');
        @endphp --}}
    @endif
    <script src="{{ asset('/dist/js/home.js ') }}"></script>
@endsection