@extends('auth.layout.base')
@section('title', 'Login Form')

@section('info')
    <a href="" class="-intro-x flex items-center pt-5">
        <img alt="Midone Tailwind HTML Admin Template" class="w-6" src="{{ asset('dist/images/logo.svg') }}">
        <span class="text-white text-lg ml-3"> Mid<span class="font-medium">One</span> </span>
    </a>
    <div class="my-auto">
        <img alt="Midone Tailwind HTML Admin Template" class="-intro-x w-1/2 -mt-16" src="{{ asset('dist/images/illustration.svg') }}">
        <div class="-intro-x text-white font-medium text-4xl leading-tight mt-10">
            A few more clicks to
            <br>
            sign in to your account.
        </div>
        <div class="-intro-x mt-5 text-lg text-white">Manage all your e-commerce accounts in one place</div>
    </div>
@endsection

@section('form')
    <div class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto">
        <h2 class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left">
            Sign In
        </h2>
        <form method="post" action="{{ route('login') }}">
            @csrf
            <div class="intro-x mt-2 text-gray-500 xl:hidden text-center">
                A few more clicks to sign in to your account. Manage all your e-commerce accounts in one place
            </div>

            <!-- نمایش ارورهای عمومی (مثلاً برای احراز هویت ناموفق) -->
            @if ($errors->any())
                <div class="intro-x mt-4 bg-red-50 text-red-600 p-2 rounded">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- filed username and Error -->
            <div class="intro-x mt-8">
                <input
                    type="text"
                    name="username"
                    class="intro-x login__input input input--lg border border-gray-300 block @error('username') border-red-500 @enderror"
                    placeholder="username"
                    value="{{ old('username') }}"
                >
                @error('username')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror
            </div>

            <!-- filed Password and Error -->
            <div class="intro-x mt-4">
                <input
                    type="password"
                    name="password"
                    class="intro-x login__input input input--lg border border-gray-300 block @error('password') border-red-500 @enderror"
                    placeholder="Password"
                >
                @error('password')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror
            </div>

            <!-- "Remember Me" -->
            <div class="intro-x flex text-gray-700 text-xs sm:text-sm mt-4">
                <div class="flex items-center mr-auto">
                    <input name="remember" type="checkbox" class="input border mr-2" id="remember-me">
                    <label class="cursor-pointer select-none" for="remember-me">Remember me</label>
                </div>
                <a href="{{ route('password.request') }}">Forgot Password?</a>
            </div>

            <!-- btn sing up and login -->
            <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
                <button class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3">Login</button>
                <a href="{{ route('register') }}" class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0">Sign up</a>
            </div>
        </form>
    </div>
@endsection
