@extends('layouts.main')

@section('content')
    <style>
        .register-page {
            background: #f8f9fa;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
        }

        .register-card {
            background: #fff;
            width: 100%;
            max-width: 900px;
            padding: 40px;
            border-radius: 15px;
            /* box-shadow: 0 10px 30px rgba(0,0,0,0.05); */
        }

        .register-card h1 {
            font-size: 42px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 5px;
            color: #000;
        }

        .register-card p.subtitle {
            text-align: center;
            color: #888;
            font-size: 18px;
            margin-bottom: 40px;
        }

        .form-control-custom {
            background: #f4f7f9;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 15px 20px;
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .form-control-custom:focus {
            outline: none;
            border-color: #7494ec;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(116, 148, 236, 0.1);
        }

        .form-control-custom::placeholder {
            color: #a0abb8;
        }

        .captcha-box {
            background: #f9f9f9;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            max-width: 300px;
            margin-left: auto;
        }

        .captcha-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .captcha-checkbox {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .captcha-text {
            font-size: 14px;
            color: #555;
        }

        .captcha-right {
            text-align: center;
        }

        .captcha-logo {
            width: 30px;
            display: block;
            margin: 0 auto;
        }

        .captcha-brand {
            font-size: 10px;
            color: #888;
            text-transform: uppercase;
        }

        .login-link-container {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
        }

        .login-link-container a {
            color: #2c3e50;
            font-weight: 600;
            text-decoration: none;
        }

        .submit-container {
            text-align: center;
            margin-top: 30px;
        }

        .btn-submit {
            background: #ff8c00;
            color: #fff;
            border: none;
            padding: 12px 60px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .btn-submit:hover {
            background: #e67e00;
        }

        .error-msg {
            color: #dc3545;
            font-size: 14px;
            margin-top: -15px;
            margin-bottom: 10px;
            display: block;
        }
    </style>

    <div class="register-page">
        <div class="register-card">
            <h1>Register</h1>
            <p class="subtitle">as User</p>

            <form method="POST" action="{{ route('register.store') }}">
                @csrf

                <div class="row">
                    <div class="col-md-6">
                        <input type="text" name="first_name" class="form-control-custom" placeholder="Your First Name"
                            value="{{ old('first_name') }}" required>
                        @error('first_name')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror

                        <input type="text" name="last_name" class="form-control-custom" placeholder="Your Last Name"
                            value="{{ old('last_name') }}" required>
                        @error('last_name')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror

                        <input type="text" name="phone_number" class="form-control-custom"
                            placeholder="Your Phone Number" value="{{ old('phone_number') }}" required>
                        @error('phone_number')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror

                        <input type="text" name="country" class="form-control-custom" placeholder="Your Country"
                            value="{{ old('country') }}" required>
                        @error('country')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <input type="email" name="email" class="form-control-custom" placeholder="Your Email Address"
                            value="{{ old('email') }}" required>
                        @error('email')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror

                        <input type="password" name="password" class="form-control-custom" placeholder="Your Password"
                            required>
                        @error('password')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror

                        <input type="password" name="password_confirmation" class="form-control-custom"
                            placeholder="Your Password Re-Enter" required>

                        <div class="captcha-box">
                            <div class="captcha-left">
                                <input type="checkbox" class="captcha-checkbox" id="robot-check" required>
                                <label for="robot-check" class="captcha-text">I'm not a robot</label>
                            </div>
                            <div class="captcha-right">
                                <img src="https://www.gstatic.com/recaptcha/api2/logo_48.png" alt="reCAPTCHA"
                                    class="captcha-logo">
                                <div class="captcha-brand">reCAPTCHA</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="login-link-container">
                    Already registered ? <a href="{{ route('login') }}">Login</a>
                </div>

                <div class="submit-container">
                    <button type="submit" class="btn-submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
@endsection