@php $pageName = 'Registration' @endphp
@extends('layouts.auth_app')

@section('content')
<style>
    body.register-page {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
    }

    .register-box {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        padding: 30px;
        transition: 0.3s ease-in-out;
    }

    .register-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }

    .register-box-body h3 {
        color: #008000;
        /* Green heading */
        font-weight: bold;
    }

    .register-box-body p {
        color: #555;
        margin-bottom: 20px;
    }

    .form-control {
        border: 1px solid #ced4da;
        border-radius: 8px;
        padding: 10px 12px;
        transition: border-color 0.2s;
    }

    .form-control:focus {
        border-color: #008000;
        box-shadow: 0 0 5px rgba(0, 128, 0, 0.2);
    }
</style>

<div class="container h-p100">
    <div class="row align-items-center justify-content-md-center h-p100">
        <div class="col-lg-8 col-md-8 col-12">
            <div class="register-box">
                <div class="register-box-body">
                    <h3 class="text-center">Get Started with Us</h3>
                    <p class="text-center login-box-msg">Register a new membership</p>

                    <form method="POST" action="{{ route('register') }}" class="row">
                        @csrf
                        {{-- Honeypot field --}}
                        <input type="text" name="website" style="display:none">
                        {{-- <div class="form-group col-lg-6">
                            <x-input-label for="username" :value="__('Username *')" />
                            <x-text-input id="username" class="form-control" type="text" name="username"
                                placeholder="Username" :value="old('username')" required autofocus
                                autocomplete="username" />
                            <x-input-error :messages="$errors->get('username')" class="mt-2 text-danger" />
                        </div> --}}
                        <div class="form-group col-lg-12">
                            <x-input-label for="name" :value="__('Full Name *')" />
                            <x-text-input id="name" class="form-control" type="text" name="name" placeholder="Full Name"
                                :value="old('name')" required autocomplete="name" />
                            <x-input-error :messages="$errors->get('name')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="email" :value="__('Email *')" />
                            <x-text-input id="email" class="form-control" type="email" placeholder="Email" name="email"
                                :value="old('email')" required autocomplete="username" />
                            <x-input-error :messages="$errors->get('email')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="phone" :value="__('Phone Number *')" />
                            <x-text-input id="phone" class="form-control" type="tel" placeholder="Phone Number"
                                name="phone" :value="old('phone')" required />
                            <x-input-error :messages="$errors->get('phone')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="password" :value="__('Password')" />
                            <x-text-input id="password" class="form-control" type="password" placeholder="Password"
                                name="password" required autocomplete="new-password" />
                            <x-input-error :messages="$errors->get('password')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
                            <x-text-input id="password_confirmation" class="form-control" type="password"
                                placeholder="Confirm password" name="password_confirmation" required
                                autocomplete="new-password" />
                            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="country" :value="__('Country *')" />
                            <select name="country" id="country" class="form-control" required>
                                <option value="">Choose Country</option>
                                @forelse ($countries as $item)
                                <option value="{{ $item->name }}">{{ $item->name }}</option>
                                @empty
                                <option value="">No Country Found</option>
                                @endforelse
                            </select>
                            <x-input-error :messages="$errors->get('country')" class="mt-2 text-danger" />
                        </div>
                        <div class="form-group col-lg-6">
                            <x-input-label for="referral_id" :value="__('Referral ID')" />
                            @if (isset($_GET['ref']))
                            <x-text-input id="referral_id" class="form-control" type="text" value="{{ $_GET['ref'] }}"
                                name="referral_id" :value="old('referral_id')" />
                            @else
                            <x-text-input id="referral_id" class="form-control" type="text" placeholder="Referral ID"
                                name="referral_id" :value="old('referral_id')" />
                            @endif
                            <x-input-error :messages="$errors->get('referral_id')" class="mt-2 text-danger" />
                        </div>

                        {{-- Google reCAPTCHA --}}
                        <div class="mt-3 col-12">
                            {!! NoCaptcha::display() !!}
                            <x-input-error :messages="$errors->get('g-recaptcha-response')" class="mt-2 text-danger" />
                        </div>

                        <div class="mt-3 row">
                            <div class="text-center col-12">
                                <p>Already have an account?
                                    <a href="{{ route('login') }}" class="text-info m-l-5">Sign In</a>
                                </p>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block margin-top-10">
                                SIGN UP
                            </button>
                        </div>
                    </form>
                    {{-- Include reCAPTCHA script --}}
                    {!! NoCaptcha::renderJs() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection