@section('title', 'Login')
@extends('layouts.app')
@section('content')
    <div class="flex flex-col items-center justify-center p-5 mx-auto lg:py-0">
{{--        <img src="{{ config('logos_and_icons.logo_full') }}" alt="Metariom" class="w-56 mb-2">--}}
        <style>
            .logo-icon{
                width: 14rem;
                background-image: url("https://s8.uupload.ir/files/metariom_k1n.png");
                background-size: contain;
                background-repeat: no-repeat;
                height: 12rem;
            }
        </style>
        <div class="logo-icon"></div>
        <h1 class="flex items-center mb-6 text-xl font-semibold brand-gradient">
            {{ config('logos_and_icons.name') }}
        </h1>
        <div
            class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <!-- Add this error display section -->
                @if($errors->any())
                    <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800">
                        <ul class="list-disc pl-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                    Login to your account
                </h1>
                <hr class="my-5 border-gray-300 dark:border-gray-700">
                <form class="space-y-4 md:space-y-6" action="{{ route('login') }}" method="post">
                    @csrf
                    <div>
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Email
                        </label>
                        <input type="email" name="email" id="email"
                               class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                               placeholder="name@company.com" required="">
                    </div>
                    <div>
                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                            Password
                        </label>
                        <input type="password" name="password" id="password" placeholder="••••••••"
                               class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                               required="">
                    </div>
                    <!-- <div class="flex items-center justify-between">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="remember" type="checkbox"
                                       class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
                                       aria-describedby="remember">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label>
                            </div>
                        </div>
                        <a href="#" class="text-sm font-medium hover:underline hover:text-blue-500">
                            Forgot password ?
                        </a>
                    </div> -->
                    <button type="submit"
                            class="w-full text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                        Sign in
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection
<script>
    const locale = localStorage.getItem('locale');
    const lang = '{{ app()->getLocale() }}';
    // console.log(locale, lang);

    if(locale !== null && locale !== lang) {
        // window.location.href = "{{ route('locale.set') }}?locale=" . locale;
        window.addEventListener('load', () => {
            $(document).ready(function () {
                SetLoading(false);
                $.ajax({
                    url: "{{ route('locale.set') }}",
                    type: 'POST',
                    data: {
                        locale: locale,
                    },
                }).done(function (data) {
                    if(data.status === 'ok') {
                        // window.location.reload();
                    }
                }).fail(function (jqXHR, textStatus) {
                    window.swal.fire({
                        title: 'Error!',
                        text: 'Please contact support',
                        icon: 'error',
                        confirmButtonText: 'Ok'
                    });
                    console.log(textStatus);
                }).always(function () {
                    SetLoading(false);
                });
            });
        });
    }
</script>