@extends('frontend.layouts.app')
@section('title', 'Register')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerTwo')
    <!-- ============================ header area end ============================ -->

    <!-- ==================== Breadcrumb Start Here ==================== -->
    <section class="breadcrumb py-120 bg-neutral-900">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div>
                        <h2 class="text-center tw-mb-6 text-white"> Register</h2>
                        <ul class="d-flex align-items-center justify-content-center tw-gap-4">
                            <li><a href="{{ route('home') }}" class="text-white hover--translate-y-1 hover-underline"> <i
                                        class="las la-home"></i> Home</a> </li>
                            <li><i class="ph ph-caret-right text-white"></i></li>
                            <li> <span class="text-white"> Register </span> </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==================== Breadcrumb End Here ==================== -->

    <!-- ==================== Login Section Start ============================= -->
    <section class="loginRegister py-120">
        <div class="container container-two">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="shadow tw-rounded-xl tw-p-6">
                        <form method="POST" action="{{ route('register') }}" class="form-submit">
                            @csrf
                            <h3 class="text-poppins tw-mb-4">Sign Up to CityScape</h3>
                            <p class="tw-mb-8 text-neutral-500">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
                                corrupti.
                            </p>

                            <div class="row gy-lg-4 gy-3">
                                <div class="col-sm-6 col-xs-6">
                                    <label for="FirstName" class="fw-medium text-base text-neutral-800 tw-mb-3">First
                                        Name</label>
                                    <input type="text"
                                        class="form-control tw-py-3 tw-px-5 placeholder-text-neutral-400 @error('name') is-invalid @enderror"
                                        id="FirstName" placeholder="First Name" name="name" value="{{ old('name') }}"
                                        required autocomplete="name" autofocus>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <label for="LastName" class="fw-medium text-base text-neutral-800 tw-mb-3">Last
                                        Name</label>
                                    <input type="text" class="form-control tw-py-3 tw-px-5 placeholder-text-neutral-400"
                                        id="LastName" placeholder="Last Name">
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <label for="username"
                                        class="fw-medium text-base text-neutral-800 tw-mb-3">Username</label>
                                    <input type="text" class="form-control tw-py-3 tw-px-5 placeholder-text-neutral-400"
                                        placeholder="User Name" id="username">
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <label for="Email" class="fw-medium text-base text-neutral-800 tw-mb-3">Email</label>
                                    <input type="email"
                                        class="form-control tw-py-3 tw-px-5 placeholder-text-neutral-400 @error('email') is-invalid @enderror"
                                        placeholder="Email" id="Email" name="email" value="{{ old('email') }}"
                                        required autocomplete="email">
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <label for="password" class="fw-medium text-base text-neutral-800 tw-mb-3">
                                        Password</label>
                                    <div class="position-relative">
                                        <input type="password"
                                            class="form-control tw-py-3 tw-px-5 tw-pe-10 placeholder-text-neutral-400 @error('password') is-invalid @enderror"
                                            id="password" placeholder="Enter Your Password..." name="password" required
                                            autocomplete="new-password">
                                        <span
                                            class="toggle-password position-absolute top-50 tw-end-0 tw-me-4 tw--translate-y-50 ph-bold ph-eye-closed"
                                            id="#password"></span>
                                    </div>
                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <label for="confirmPassword"
                                        class="fw-medium text-base text-neutral-800 tw-mb-3">Confirm Password</label>
                                    <div class="position-relative">
                                        <input type="password"
                                            class="form-control tw-py-3 tw-px-5 tw-pe-10 placeholder-text-neutral-400 @error('confirm-password') is-invalid @enderror"
                                            id="confirmPassword" placeholder="Enter Your Password..."
                                            name="password_confirmation" required autocomplete="new-password">
                                        <span
                                            class="toggle-password position-absolute top-50 tw-end-0 tw-me-4 tw--translate-y-50 ph-bold ph-eye-closed"
                                            id="#confirmPassword"></span>
                                    </div>
                                    @error('confirm-password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-12 py-2">
                                    <div class="common-check d-flex align-items-center tw-gap-2">
                                        <input class="form-check-input" type="checkbox" value="" id="remember">
                                        <div class="form-check-label">
                                            <label class="" for="remember">
                                                I agree with Licences Info,</label>
                                            <a href="#"
                                                class="text-decoration-underline text-main-600 hover--translate-y-1">Terms
                                                of Service</a>
                                            <label class="" for="remember"> , {{ __('privacy policy') }} </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-main w-100 active--translate-y-05">
                                        {{ __('Register') }}
                                        <span class="icon-right">
                                            <i class="ph ph-paper-plane-tilt"></i>
                                        </span>
                                    </button>
                                </div>
                                <div class="col-sm-12 mb-0">
                                    <div class="have-account text-center">
                                        <p class="text">
                                            {{ __('Already have an account?') }}
                                            <a class="link text-main-600 text-decoration-underline font-sm hover--translate-y-1"
                                                href="{{ route('login') }}">{{ __('Login') }}</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==================== Login Section End ============================= -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerTwo')
    <!-- ========================== footer area end ============================ -->
@endsection