@extends('layouts.fullLayoutMaster')

@section('title', 'تسجيل الدخول')

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/authentication.css')) }}">
    <link id="splashStylesheet" rel="stylesheet" type="text/css" href="{{ asset('css/custom/splash.css') }}"/>
@endsection

@section('content')
    <div class="page">
        <div class="wrapper splash-wrapper splashPage">
            <div class="logo-text">
                <div class="logo">
                    <img src="{{ asset('assets/logo.png') }}" alt=""/>
                </div>
                <h1 class="text">ابنائي</h1>
            </div>
            <div class="progress-bar-container">
                <div class="progress-bar-wrapper">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="login-way">
{{--                <div class="header">--}}
{{--                    @if(!app()->isProduction())--}}
{{--                    <a class="logo-alert-text pop-outin alert" href="{{ route('newPages') }}">الصفحات المصصمة حديثا</a>--}}
{{--                    @endif--}}
{{--                    <h2 class="login-text">التسجيل ك..؟؟</h2>--}}
{{--                </div>--}}
                <div class="cards-wraper">
                    <div id="parentCard" class="card-fram">
                        <a class="my-card" href="{{ route('showLoginPage') }}">
                            <div class="my-card-body">
                                <h3 class="my-card-title">ولي الامر</h3>
                            </div>
                            <div class="my-card-img">
                                <img
                                    src="{{ asset('assets/parent.png') }}"
                                    alt="employee"
                                />
                            </div>
                        </a>
                    </div>
                    <div id="employeeCard" class="card-fram">
                        <a class="my-card">
                            <div class="my-card-body">
                                <h3 class="my-card-title">موظف</h3>
                            </div>
                            <div class="my-card-img">
                                <img
                                    src="{{ asset('assets/employee.png') }}"
                                    alt="employee"
                                />
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper login-wrapper loginPage">
            <div class="interact">
                @if (session()->has('userRegistrationSuccessMessage'))
                    <div class="alert-frame">
                        <div class="sessionMessage alert-msg-frame alert alert-success rounded-0" role="alert">
                            <div class="alert-body">
                                {{ session()->get('userRegistrationSuccessMessage') }}
                            </div>
                        </div>
                    </div>
                @endif

                    @if (session('status'))
                        <div class="alert-frame">
                            <div class="sessionMessage alert-msg-frame alert alert-success rounded-0" role="alert">
                                <div class="alert-body">
                                    {{ session('status')}}
                                </div>
                            </div>
                        </div>
                    @endif
                <div class="alert-frame">
                    <div class="errorMessage alert-msg-frame alert alert-danger rounded-0" role="alert"
                         style="display: none">
                        <div class="alert-body">
                            <span class="errorMessageBody"></span>
                            <span class="errorBody"></span>
                        </div>
                    </div>
                </div>
                <div class="alert-frame">
                    <div class="OTPStatus centered alert-msg-frame alert rounded-0" role="alert" style="display: none">

                    </div>
                </div>
                <!-- LOGIN-interact -->
                <div id="loginInteract" class="loginInteract interact-frame login-interact">
                    <div class="header-group-wrapper">
                        <div class="header-frame">
                            <div class="logo">
                                <img src="{{ asset('assets/logo.png') }}" alt=""/>
                            </div>
                            <h2 class="header-text main-header centered">تسجيل الدخول موظف </h2>
                        </div>
                        <div class="group-frame">
                            <div class="grid-wrapper">
                                <div class="group-header-frame">
                                    <h4 class="card-title mb-1">👋 اهلا بك في ابنائي!</h4>
                                </div>
                                <div class="group-form-body">
                                    <form class="auth-login-form mt-2" method="POST" action="{{ route('login') }}">
                                        @csrf
                                        <div class="mb-3 phone-input-wrapper employee">
                                            <x-inputs.text.Input oninput="isValidPhone(this)" class="phone-input"
                                            label="الجوال/ البريد الأليكتروني" name="username" placeholder="رقم الجوال او البريد الألكيتروني"
                                                                 required/>
                                            <span class="hint-text">*برجاء كتابة ”966” في حالة استخدام رقم الجوال</span>
                                        </div>

                                        <div class="mb-1">
                                            <x-inputs.password oninput="isValidPassword(this)" required enableForgotPassword=true name="password" label="كلمة المرور" />

                                        </div>
                                        <div class="mb-1">
                                            <x-inputs.checkbox name="remember">
                                                <span class="remember-text"> تذكرني</span>
                                            </x-inputs.checkbox>
                                        </div>

                                        <x-inputs.submit id="submit" class="open btn btn-primary w-100 btn-submit disabled">
                                            <span class="btn-text secoundery-header centered">تسجيل الدخول</span>
                                        </x-inputs.submit>

                                    </form>
                                </div>

                                <div class="interact-footer">
                                    <div class="link-frame">
                                        <a href="#" onclick="refresh()">
                                            <h3 class="link-text">الرجوع لحساب ولي امر</h3>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="baner">
                <div class="logo-baner">
                    <img src="{{ asset('assets/logo-baner.png') }}" alt="logo-baner-img"/>
                </div>
                <div class="brand-frame centered">
                    <div class="logo">
                        <img src="{{ asset('assets/logo.png') }}" alt=""/>
                    </div>
                    <h1 class="text">ابنائي</h1>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <!-- Page js files -->
    <script>
        const toggleStyle = (href) => {
            console.log('href changed to ', href)
            var splashStylesheet = document.getElementById("splashStylesheet");
            splashStylesheet.href = href;
        };

        const refresh = () => {
            window.location.reload();
        };

        let isValidPhoneLength = false;
        let isValidPasswordLength = false;
        let isValidPhone = function isValidPhone(ele) {
            isValidPhoneLength = ele.value.trim().length > 0;
            canEnableBtn();
        }
        let isValidPassword = function isValidPassword(ele) {
            isValidPasswordLength = ele.value.trim().length > 0;
            canEnableBtn();
        }
        let canEnableBtn = function canEnableBtn() {
            if (isValidPasswordLength && isValidPhoneLength) {
                $('.btn-submit').removeClass("disabled");
            } else {
                if (!$(".btn-submit").hasClass("disabled")) {
                    $('.btn-submit').addClass("disabled");
                }
            }
        }

        $("document").ready(function () {
            $(".loginPage").css("display", "none");
            toggleStyle("{{ asset('css/custom/splash.css') }}");

            $("#employeeCard").on('click', function () {
                $(".splashPage").css("display", "none");
                $(".loginPage").css("display", "grid");
                toggleStyle("{{ asset('css/custom/login.css') }}");
            });

            setTimeout(() => {
                $(".wrapper").addClass("progress-loaded");
                $(".logo-text").addClass("progress-loaded");
                $(".progress-bar-container").addClass("progress-loaded");
                $(".login-way").addClass("progress-loaded");
            }, 3000)
        });

        $("document").ready(function () {
            $("#parentCard").mouseenter(function () {
                $(this).find("img").attr('src', '{{ asset("assets/parent-h.png") }}');
            });
            $("#parentCard").mouseleave(function () {
                $(this).find("img").attr('src', '{{ asset("assets/parent.png") }}');
            });
            $("#employeeCard").mouseenter(function () {
                $(this).find("img").attr('src', '{{ asset("assets/employee-h.png") }}');
            });
            $("#employeeCard").mouseleave(function () {
                $(this).find("img").attr('src', '{{ asset("assets/employee.png") }}');
            });
        });
    </script>
@endsection