@extends('user::layouts.guest')

@section('breadcrumb_title', 'Author Login')

@section('content')
    <div class="min-h-screen sm:p-6 grid lg:grid-cols-2 gap-6 overflow-y-auto">
        <!-- Left sidebar with purple background -->
        <div class="hidden lg:flex bg-headline flex-col justify-between rounded-2xl overflow-hidden">
            <div class="h-full">
                <!-- Logo -->
                <div class="w-[180px] m-6">
                    <a href="{{ route('home') }}">
                        <img src="{{ whiteLogo() }}" alt="{{ siteName() }}" />
                    </a>
                </div>

                <div class="w-full h-full flex flex-col justify-center items-center">
                    <div class="w-full max-w-[468px] mb-[72px]">
                        <h1 class="text-[36px] leading-[120%] text-white font-semibold text-center mb-5">
                            {{ $login_title }}
                        </h1>
                        <p class="text-opacity text-center">
                            {{ $login_subtitle }}
                        </p>
                    </div>

                    @if ($author_login_register_image)
                        <div class="w-full max-w-[626px]">
                            <img src="{{ asset($author_login_register_image) }}" />
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right side login form -->
        <div class="w-full flex items-center justify-center sm:p-6">
            <div class="w-full max-w-[592px] h-fit bg-white p-5 sm:p-10 rounded-2xl">
                <div class="mb-8">
                    <h1 class="mb-6 text-28">{{ __('backend::translate.Login to your account') }}</h1>
                </div>

                <!-- Display Errors -->
                @if ($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-5">
                        <ul class="mb-0 list-none">
                            @foreach ($errors->all() as $error)
                                <li class="mb-1.5">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Login form -->

                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <div class="space-y-4">
                        <!-- Email -->
                        <div class="input-with-label col-span-full sm:col-span-2 mb-4">
                            <label class="!text-16" for="email">{{ __('backend::translate.Email') }}</label>
                            <div class="flex relative items-center">
                                <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="1.6665" y="2.5" width="16.6667" height="15" rx="4" stroke="#667085"
                                        stroke-width="1.5" />
                                    <path
                                        d="M1.6665 5.83301L7.50106 10.5007C8.96193 11.6693 11.0377 11.6694 12.4986 10.5007L18.3332 5.83301"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>

                                <input name="email" id="email" type="text" class="!pl-12"
                                    placeholder="{{ __('backend::translate.Enter your email') }}"
                                    value="{{ old('email') }}" />
                            </div>
                        </div>
                        <div class="input-with-label col-span-full sm:col-span-2 mb-4">
                            <label class="!text-16" for="password">{{ __('backend::translate.Password') }}</label>
                            <div class="flex relative items-center">
                                <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_231_3867)">
                                        <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4"
                                            stroke="#667085" stroke-width="1.5" />
                                        <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667"
                                            stroke="#667085" stroke-width="1.5" />
                                        <path
                                            d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                            stroke="#667085" stroke-width="1.5" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_231_3867">
                                            <rect width="20" height="20" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>

                                <input type="password" name="password" id="password"
                                    placeholder="{{ __('backend::translate.Enter your password') }}" class="!pl-12" />
                                <button type="button" class="absolute active right-4 text-headline text-14"
                                    onclick="togglePassword()">
                                    <svg class="pointer-events-none active:block hidden" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                            stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                            stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    <svg class="pointer-events-none active:hidden" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                            stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                            stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="check-input !item-start gap-3">
                                <input id="remember" type="checkbox" class="hidden peer cursor-pointer" />
                                <label for="remember"
                                    class="size-5 rounded border border-border flex justify-center items-center peer-checked:!text-main !text-white cursor-pointer">
                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.1098 6.99848L5.88758 9.77626L11.4431 4.2207" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </label>
                                <label for="remember" class="!text-headline max-w-[320px] cursor-pointer">
                                    {{ __('backend::translate.Remember me') }}
                                </label>
                            </div>
                            @if (Route::has('password.request'))
                                <div class="mt-3">
                                    <a href="{{ route('password.request') }}" class="text-main hover:underline">
                                        Forgot password?
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    <!-- Sign in button -->
                    <button type="submit" class="btn-primary w-full mt-6">{{ __('backend::translate.Login') }}</button>

                    @if (config('app.app_mode') == 'DEMO')
                        <div class="text-center mt-4">
                            <p class="text-red-400 mb-0 ttn">Email: author@gmail.com</p>
                            <p class="text-red-400 mb-0 ttn">Password: password</p>
                        </div>
                    @endif

                </form>

                <p class="pt-4 pb-6 text-center text-16 text-headline">
                    {{ __('backend::translate.Don’t have an account yet?') }}
                    <a href="{{ route('author.register') }}"
                        class="text-main font-medium">{{ __('backend::translate.Sign up') }}</a>
                </p>

                @if ($google_visible_status == 1 || $facebook_visible_status == 1)
                    <!-- Or sign in with -->
                    <div class="flex items-center justify-center gap-2 mb-6">
                        <div class="h-px bg-border flex-1"></div>
                        <span class="text-paragraph text-sm">Or</span>
                        <div class="h-px bg-border flex-1"></div>
                    </div>
                @endif

                <!-- Social login options -->
                <div class="grid grid-cols-2 gap-4">

                    @if ($google_visible_status == 1)
                        <a class="btn-border py-2.5" href="{{ route('auth.google') }}">
                            <div class="flex w-full items-center justify-center gap-2">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M18.1712 8.36791H17.5V8.33333H10V11.6667H14.6954C14.0338 13.6071 12.1713 15 10 15C7.23875 15 5 12.7613 5 10C5 7.23875 7.23875 5 10 5C11.2746 5 12.4342 5.48875 13.3154 6.28625L15.6729 3.92875C14.1858 2.52375 12.195 1.66667 10 1.66667C5.3975 1.66667 1.66667 5.3975 1.66667 10C1.66667 14.6025 5.3975 18.3333 10 18.3333C14.6025 18.3333 18.3333 14.6025 18.3333 10C18.3333 9.44125 18.2758 8.89583 18.1712 8.36791Z"
                                        fill="#FFC107" />
                                    <path
                                        d="M2.62793 6.12125L5.36543 8.12917C6.10626 6.29542 7.90209 5 10.0004 5C11.275 5 12.4346 5.48875 13.3158 6.28625L15.6733 3.92875C14.1863 2.52375 12.1954 1.66667 10.0004 1.66667C6.87834 1.66667 4.18376 3.48375 2.62793 6.12125Z"
                                        fill="#FF3D00" />
                                    <path
                                        d="M10.0004 18.3333C12.1525 18.3333 14.1079 17.5096 15.5871 16.1458L13.0079 13.9875C12.1429 14.6452 11.0862 15.0009 10.0004 15C7.83959 15 5.98334 13.6179 5.31626 11.6892L2.58334 13.7829C4.12376 16.4817 6.84876 18.3333 10.0004 18.3333Z"
                                        fill="#4CAF50" />
                                    <path
                                        d="M18.1712 8.36793H17.5V8.33334H10V11.6667H14.6954C14.3796 12.5902 13.8113 13.3972 13.0067 13.9879L13.0079 13.9871L15.5871 16.1454C15.4046 16.3104 18.3333 14.1667 18.3333 10C18.3333 9.44126 18.2758 8.89584 18.1712 8.36793Z"
                                        fill="#1976D2" />
                                </svg>
                                <span class="text-paragraph">Google</span>
                            </div>
                        </a>
                    @endif

                    @if ($facebook_visible_status == 1)
                        <a href="{{ route('auth.facebook') }}" class="btn-border py-2.5">
                            <div class="flex w-full items-center justify-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20"
                                    height="20">
                                    <path fill="#039be5" d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z" />
                                    <path fill="#fff"
                                        d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z" />
                                </svg>

                                <span class="text-paragraph">Sign With Facebook</span>
                            </div>
                        </a>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function togglePassword() {
            const passwordInput = event.target.previousElementSibling;
            const button = event.target;
            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                button.classList.add("active");
            } else {
                passwordInput.type = "password";
                button.classList.remove("active");
            }
        }
    </script>
@endpush