@extends('auth.layout.base')

@section('title', 'Register 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 up 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 Up
        </h2>
        <form method="post" action="{{ route('register') }}">
            @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>
            <div class="intro-x mt-8">
                <input type="text" name="first_name"
                       class="intro-x login__input input input--lg border border-gray-300 block"
                       placeholder="First Name">
                <input type="text" name="last_name"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Last Name">
                <input type="text" name="username"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Username">
                <input type="text" name="email"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Email">
                <input type="text" name="password"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Password">
                <a href="" class="intro-x text-gray-600 block mt-2 text-xs sm:text-sm">What is a secure password?</a>
                <input type="text" name="password_confirmation"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Password Confirmation">
            </div>
            <div class="intro-x flex items-center text-gray-700 mt-4 text-xs sm:text-sm">
                <input type="checkbox" class="input border mr-2" id="remember-me">
                <label class="cursor-pointer select-none" for="remember-me">I agree to the Envato</label>
                <a class="text-theme-1 ml-1" href="">Privacy Policy</a>.
            </div>
            <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">Register</button>
                <button class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0">Sign
                    in
                </button>
            </div>
        </form>
    </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 Up
        </h2>

        <!-- نمایش خطاهای عمومی -->
        @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

        <form method="post" action="{{ route('register') }}">
            @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>

            <div class="intro-x mt-8">
                <!-- فیلد نام -->
                <input type="text" name="first_name"
                       class="intro-x login__input input input--lg border border-gray-300 block @error('first_name') border-red-500 @enderror"
                       placeholder="First Name"
                       value="{{ old('first_name') }}">
                @error('first_name')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror

                <!-- فیلد نام خانوادگی -->
                <input type="text" name="last_name"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4 @error('last_name') border-red-500 @enderror"
                       placeholder="Last Name"
                       value="{{ old('last_name') }}">
                @error('last_name')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror

                <!-- فیلد نام کاربری -->
                <input type="text" name="username"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4 @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

                <!-- فیلد ایمیل -->
                <input type="text" name="email"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4 @error('email') border-red-500 @enderror"
                       placeholder="Email"
                       value="{{ old('email') }}">
                @error('email')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror

                <!-- فیلد رمز عبور -->
                <input type="password" name="password"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4 @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
                <a href="" class="intro-x text-gray-600 block mt-2 text-xs sm:text-sm">What is a secure password?</a>

                <!-- فیلد تکرار رمز عبور -->
                <input type="password" name="password_confirmation"
                       class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                       placeholder="Password Confirmation">
            </div>

            <!-- چک‌باکس حریم خصوصی -->
            <div class="intro-x flex items-center text-gray-700 mt-4 text-xs sm:text-sm">
                <input type="checkbox" class="input border mr-2" id="agree-terms" name="agree_terms" required>
                <label class="cursor-pointer select-none" for="agree-terms">I agree to the Envato</label>
                <a class="text-theme-1 ml-1" href="">Privacy Policy</a>.
                @error('agree_terms')
                <span class="intro-x text-red-500 text-xs mt-1 block">{{ $message }}</span>
                @enderror
            </div>

            <!-- دکمه‌های ثبت‌نام و ورود -->
            <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
                <button type="submit" class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3">Register</button>
                <a href="{{ route('login') }}" class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 inline-flex items-center justify-center">Sign in</a>
            </div>
        </form>
    </div>
@endsection
