@extends($activeTemplate . 'layouts.auth')
@section('content')
    <section class="login-section position-relative d-flex justify-content-center align-items-center">

        <div class="bg--thumb-one position-absolute">
            <img src="{{ asset($activeTemplateTrue . 'images/shape/element-10.png') }}" alt="image">
        </div>

        <div class="bg--thumb-two position-absolute">
            <img src="{{ asset($activeTemplateTrue . 'images/shape/element-9.png') }}" alt="image">
        </div>

        <div class="row justify-content-center w--100">
            <div class="col-xxl-5 col-xl-7 col-lg-6 col-md-8">
                <div class="login-box w--100">
                    <div class="login-user--tab position-absolute d-flex justify-content-center mb-4 w--100">
                        <div class="btn--wrap user active position-relative">
                            <a href="{{ route('user.register') }}"
                                class="user btn btn--base btn--lg pills active w-100"><i class="fas fa-plane"></i> @lang('Traveller')</a>
                        </div>
                    </div>

                    <div class="logo--wrap d-flex justify-content-center align-items-center">
                        <a href="{{ route('home') }}" style="text-decoration: none;">
                            <img src="{{ getImage(getFilePath('logoIcon') . '/logo.png') }}" alt="{{ gs()->site_name ?? 'Sri Lanka Tours Paradise' }}" style="max-width: 250px; height: 80px; width: auto; object-fit: contain;">
                        </a>
                    </div>

                    <div class="content mb-4 pb-3">
                        <h4 class="title mb-2">@lang('Create Your Account')</h4>
                        <p class="text-center">@lang('Join Sri Lanka Tours today!')</p>
                    </div>

                    <div class="form--wrap">
                        <form action="{{ route('user.register') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('Username')</label>
                                        <input class="form--control pills" name="username" id="username"
                                            value="{{ old('username') }}" placeholder="@lang('Username')" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('E-Mail Address')</label>
                                        <input class="form--control pills" name="email" id="email"
                                            value="{{ old('email') }}" placeholder="@lang('Email')" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('Mobile')</label>
                                        <input type="text" class="form--control pills" name="mobile"
                                            value="{{ old('mobile') }}" placeholder="@lang('Mobile Number')" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('Country')</label>
                                        <input type="text" class="form--control pills" name="country"
                                            value="Sri Lanka" placeholder="@lang('Country')" required>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('Password')</label>
                                        <input type="password" class="form--control pills" name="password"
                                            id="password" placeholder="@lang('Password')" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-4 form-group">
                                        <label class="mb-2 form--label">@lang('Confirm Password')</label>
                                        <input type="password" class="form--control pills" name="password_confirmation"
                                            id="confirm-password" placeholder="@lang('Confirm Password')" required>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn--base btn--lg w-100 pills">@lang('Sign Up')</button>
                        </form>
                    </div>

                    <div class="text-center">
                        <p>
                            @lang('Already have an account?') <a href="{{ route('user.login') }}"
                                class="text--underline text--base-two">@lang('Sign In')</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection