@extends('app.main')

@section('title', 'Okis 3.0 | App')

@section('content')

	<div class="row" data-path="app/index" data-app="dashboard_app">
		<h1 class="text-center position-absolute top-50 start-50 translate-middle title-logo not_selectable">
			<span 	class="font-babylon-outline fs-5em gradient-bg first-element">	
				GD
			</span>
			<span 	class="fw-lighter text-okis position-absolute secound-element text-shadow-strong" style="bottom: 10%; left: calc(50% + 60px);">
			</span>
			<span class="cursor text-okis position-absolute" style="bottom: 10%; left: calc(50% + 60px);" id="text-cursor">
				|
			</span>
		</h1>


        <div class="text-center position-absolute top-70 start-50 translate-middle col-lg-6 col-10 hidden shadow" data-form="auth">
                <div class="row flip-container">
                    <div class="input-group flip-element-front input-group-employee-id">
                        @input(['auth_user_id' => [
                            'type'        => 'number',
                            'required'    => true,
                            'placeholder' => 'Mitarbeiter Nr.',
                            'class'       => 'text-center',
                            'maxlength'   => 4,
                        ]])
                        <button class="btn btn-secondary">
                            @icon([ 'name' => 'fa-solid fa-arrow-right', 'type' => 'fa' ])
                        </button>
                    </div>
                    <div class="flip-element-back input-group-employee-pw">
                        <div class="input-group">
                            @input(['auth_user_pw' => [
                                'type'        => 'password',
                                'placeholder' => 'Password',
                                'class'       => 'text-center',
                            ]])
                            <button class="btn btn-secondary">
                                @icon([ 'name' => 'fa-solid fa-arrow-right', 'type' => 'fa' ])
                            </button>
                        </div>
                    </div>
                </div>
        </div>
		{{-- <p class="text-center mb-4">
			<span class="fs-6 font-babylon-outline">GD</span> <span class="fw-bold">Dentaltechnik: Präzision, Innovation, höchste Qualität</span> und <span class="fw-bold">Leidenschaft</span> vereint für <span class="fw-bold text-okis">Ästhetik</span> und Ihr <span class="text-warning">strahlendes</span> <span class="fw-bold text-okis"> Lächeln</span>.
		</p> --}}
	</div>

@endsection


@section('section-js')
	<script>
		$(document).ready(function () {
            var $authButton = $('input[name="auth_user_id"]').siblings('.btn');
            var $authForm   = $('div[data-form="auth"]');

            $authForm.hide();
            setTimeout(function () {
                if (GDApp.KisokModus === true) {
                    $authForm.removeClass('hidden');
                    $authForm.fadeIn(1000);
                }
                else {
                    GDApp.showNavigation();
                }
                
            }, 5500);

            $authButton.on('click', function() {
                const flipContainer = $(this).parents('.flip-container');
                if ($(this).hasClass('valid')) {
                    $.ajax({
                        url: '{{ route('app.check_user') }}',
                        type: 'POST',
                        data: { employee_id: $('input[name="auth_user_id"]').val() },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.valid) {
                                if (response.needsPassword) {
                                    flipContainer.toggleClass('flipped');
                                    setTimeout(function() { // Füge eine Verzögerung hinzu
                                        $('#' + $('input[name="auth_user_pw"]').attr('id') + '_display').focus(); // Setze den Fokus auf das Passwortfeld
                                    }, 500); // Warte 500ms, bevor der Fokus gesetzt wird
                                    
                                    clog.info({
                                        title: "Passwortabfrage nach 2 Stunden Inaktivität",
                                        message: "Falls dein letzter Login auf diesem Gerät mehr als 2 Stunden zurückliegt, gib bitte dein Passwort ein. Andernfalls kannst du ohne Passworteingabe fortfahren."
                                    });

                                    // Entferne vorherige Event Handler, um Mehrfachbindungen zu vermeiden
                                    var $authPwButton = $('input[name="auth_user_pw"]').siblings('.btn').off('click').on('click', function() {
                                        flipContainer.toggleClass('flipped');
                                        $.ajax({
                                            url: '{{ route('app.check_user') }}',
                                            type: 'POST',
                                            data: { employee_id: $('input[name="auth_user_id"]').val(), employee_pw: $('input[name="auth_user_pw"]').val() },
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            success: function(response) {
                                                clog.destroy();

                                                if (response.valid2) {
                                                    GDApp.buildMenu(response.menu);
                                                    $('input[name="auth_user_pw"]').addClass('hidden');
                                                    flipContainer.toggleClass('flipped');
                                                    $authForm.fadeOut(1100);
                                                    GDApp.showNavigation();
                                                    clog.success({title:"Willkommen " + response.name + ",", message: "Dein Login war erfolgreich!"});

                                                    GDApp.mitarbeiterId = response.mitarbeiterId;
                                                    GDApp.userRoles     = response.roles;

                                                    console.log('mitarbeiterId', GDApp.mitarbeiterId);
                                                    console.log('userRoles',     GDApp.userRoles);
                                                    
                                                } else {
                                                    clog.warning({ title: "Ungültiges Passwort", message: "Versuche es noch einmal!" });
                                                    $('#' + $('input[name="auth_user_pw"]').attr('id') + '_display').val('');
                                                    $('input[name="auth_user_pw"]').val('');
                                                }
                                            },
                                        });
                                    });
                                } else {
                                    // Erfolgreiche Anmeldung ohne Passwort
                                }
                            } else {
                                clog.warning({ title: "Ungültige Mitarbeiter-ID" });
                            }
                        }
                    });
                }
            });


		    $('input[name="auth_user_id"]').on('input', function() {
                var inputValue = $(this).val();
                var $button = $(this).siblings('.btn');

                if (inputValue === '1') {
                    $button.addClass('valid');
                } else if (inputValue.length === 4) {
                    if (GDApp.validUserIds.includes(parseInt(inputValue))) {
                        $button.removeClass('btn-secondary').addClass('btn-success valid');
                    } else {
                        $button.addClass('btn-secondary').removeClass('btn-success valid');
                    }
                } else {
                    $button.addClass('btn-secondary').removeClass('btn-success valid');
                }
            });

            async function callAPIInitial() {
                // const responseAPI   = await GDApp.ajaxToOkisApi("getPrinters", {});
                const responseAPI   = await GDApp.ajaxToOkisApi("loadAuftraege", {auid: "", kuid: "12345"});

                // console.log('responseAPI', responseAPI);
            }
            // callAPIInitial();

            
		});
	</script>
@endsection