@extends('auth.auth_layout')

@section('content')
@include('auth.page_title', ['pageTitleMessage' => 'Register'])

<!-- Flash Messages -->
@if (session()->has('flash_notification'))
    @foreach (session('flash_notification') as $flash)
        <div class="alert alert-{{ $flash['level'] }} alert-dismissible fade show" role="alert">
            <i class="fas {{ $flash['level'] === 'success' ? 'fa-check-circle' : ($flash['level'] === 'error' ? 'fa-times-circle' : 'fa-info-circle') }} fa-sm text-muted"></i>
            {!! $flash['message'] !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endforeach
@endif

<div class="card">
    <div class="col-12">
        <a href="{{ route('login') }}"
           class="btn btn-link text-muted text-decoration-none"
           style="font-size: 0.875rem;">
            <i class="fas fa-arrow-left fa-sm text-muted me-2"></i> Back to Login
        </a>
    </div>

    @if(!isset($user))
    {{-- <a href="{{ route('google.redirect') }}" class="m-5 btn btn-light border d-flex align-items-center justify-content-center mb-3">
        <img src="https://www.google.com/favicon.ico" alt="Google" class="me-2" style="width: 20px; height: 20px;">
        Sign in with Google
    </a> --}}
    @endif

    <div class="card-body register-card-body">
        <p class="login-box-msg text-center text-muted text-sm">
            <i class="fas fa-pencil-alt fa-sm text-muted"></i>
            @if(!isset($user))
                Fill the form below to register
            @else
                Complete your profile information below
            @endif
            <br/> (All fields are compulsory)
        </p>

        @if(!isset($user))
        <form id="registerForm" method="POST" action="{{ route('register') }}" >
        @else
        <form id="registerForm" method="POST" action="{{ route('createRegisterUpdate') }}" >
        @endif
            @csrf

            @if(!isset($user))
                @php
                    if (!request()->has('_captcha_generated')) {
                        $captchaA = rand(1, 9);
                        $captchaB = rand(1, 9);
                        session(['captcha_answer' => $captchaA + $captchaB, 'captcha_question' => "{$captchaA} + {$captchaB}"]);
                        request()->merge(['_captcha_generated' => true]);
                    }
                    $captchaQuestion = session('captcha_question', '3 + 4');
                @endphp
            @endif

            <!-- Email -->
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-envelope fa-sm text-muted"></i></span>
                <input type="email" name="email" value="{{ old('email') }}"
                       class="form-control @error('email') is-invalid @enderror"
                       placeholder="Email"
                       @if(isset($user)) disabled @endif>

                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            @if(isset($google_id ))
                <input type="hidden" value="{{ $google_id }}" name="google_id"/>
            @endif

            @if(!isset($user))
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="fas fa-question fa-sm text-muted"></i></span>
                    <input type="number" name="captcha" value="{{ old('captcha') }}"
                           class="form-control @error('captcha') is-invalid @enderror"
                           placeholder="What is {{ $captchaQuestion }}?" required>
                    @error('captcha')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

            @endif

            <!-- Password -->
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-lock fa-sm text-muted"></i></span>
                <input type="password" name="password" id="password" required
                       class="form-control @error('password') is-invalid @enderror" placeholder="Password">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-secondary toggle-password" data-target="password">
                        <i class="fas fa-eye fa-sm text-muted"></i>
                    </button>
                </div>
                @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-lock fa-sm text-muted"></i></span>
                <input type="password" name="password_confirmation" id="password_confirmation" required
                       class="form-control" placeholder="Retype password">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-secondary toggle-password" data-target="password_confirmation">
                        <i class="fas fa-eye fa-sm text-muted"></i>
                    </button>
                </div>
            </div>

            <div id="password-error" class="text-red-500 text-danger text-sm mt-1 hidden">Passwords do not match.</div>

            <label for="country_id" class="form-label">Select Country</label>
            <select name="country_id" id="country_id" required class="form-control mb-3 @error('country_id') is-invalid @enderror">
                <!-- Default empty option -->
                <option value="" disabled selected>Select a country</option>

                <!-- Nigeria as the first option -->
                <option value="129">🇳🇬 +234 (Nigeria)</option>

                <!-- Loop through the remaining countries -->
                @foreach($countries as $country)
                    <option value="{{ $country->id }}"
                        data-exchange-rate="{{ $country->usd_exchange_rate }}"
                        data-currency-symbol="{{ $country->currency_symbol }}"
                        >
                        {{ $country->emoji ?? '' }} {{ $country->phone_extension }} ({{ $country->country_name }})
                    </option>
                @endforeach
            </select>

          <!-- States (Nigeria only) -->
          <div class="input-group mb-3" id="nigeria-states-field" style="display: none;">
            <span class="input-group-text">
                <i class="fas fa-map-marker-alt fa-sm text-muted"></i></span>
            <select name="state_id" id="state_id" class="form-control @error('state_id') is-invalid @enderror">
                <option value="" disabled selected>Select State (Nigeria)</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                @endforeach
            </select>
            @error('state_id')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>



            <!-- Phone -->
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-phone fa-sm text-muted"></i></span>
                <input type="number" name="phone" id="phone" required
                class="form-control @error('phone') is-invalid @enderror"
                placeholder="Phone number"
                minlength="10" maxlength="11">
                @error('phone')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <!-- Age Range -->
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-user-clock fa-sm text-muted"></i></span>
                <select name="age_range" id="age_range" required class="form-control @error('age_range') is-invalid @enderror">
                    <option value="" disabled selected>Select Age Range</option>
                    <option value="18-25">18-25</option>
                    <option value="26-35">26-35</option>
                    <option value="36-45">36-45</option>
                    <option value="46-60">46-60</option>
                    <option value="60+">60+</option>
                </select>
                @error('age_range')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <!-- Gender -->
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-venus-mars fa-sm text-muted"></i></span>
                <select name="gender" id="gender" required class="form-control @error('gender') is-invalid @enderror">
                    <option value="" disabled selected>Select Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="other">Other</option>
                </select>
                @error('gender')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>


            <div class="row">
                <div class="col-12 text-sm">
                    <div class="icheck-primary">
                        <input type="checkbox" id="agreeTerms" required name="terms" value="agree">
                        <label for="agreeTerms">
                            Agree to our
                            <a href="{{ route('terms.conditions') }}"
                            class="text-decoration-none">
                                Terms
                            </a> and
                            <a href="{{ route('privacy.policy') }}" class="text-decoration-none">
                                 Policy
                            </a>

                        </label>
                    </div>
                </div>


                <div class="col-12 m-4">
                    <button id="registerButton" type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-user-plus fa-sm"></i> Register
                    </button>
                </div>

                <div class="mt-5">
                     <p class="text-muted mt-3">
                        <a href="{{ route('login') }}"
                        class="text-decoration-none  p-2 text-muted">
                       <i class="fas fa-user-plus"></i> Login</a>
                    </p>
                </div>
            </div>

            <!-- HTTP Referrer -->
            <input type="hidden" name="http_referrer" id="http_referrer" value="">
        </form>
    </div>
</div>

<script>
// Toggle Password Visibility
document.addEventListener("DOMContentLoaded", function () {
    const togglePasswordButtons = document.querySelectorAll(".toggle-password");
    togglePasswordButtons.forEach(button => {
        button.addEventListener("click", function () {
            const targetId = this.getAttribute("data-target");
            const targetInput = document.getElementById(targetId);
            if (targetInput.type === "password") {
                targetInput.type = "text";
                this.textContent = "Hide";
            } else {
                targetInput.type = "password";
                this.textContent = "Show";
            }
        });
    });
});

// Password Validation
document.addEventListener("DOMContentLoaded", function () {
    const passwordField = document.getElementById("password");
    const confirmPasswordField = document.getElementById("password_confirmation");
    const passwordError = document.getElementById("password-error");
    const registerButton = document.getElementById("registerButton");

    function validatePasswords() {
        const password = passwordField.value;
        const confirmPassword = confirmPasswordField.value;

        if (password === confirmPassword && password !== "") {
            passwordError.classList.add("hidden");
            registerButton.disabled = false;
            passwordError.textContent = "";
        } else {
            passwordError.classList.remove("hidden");
            passwordError.textContent = "Passwords do not match.";
            passwordError.style.color = "red";
            registerButton.disabled = true;
        }
    }

    passwordField.addEventListener("input", validatePasswords);
    confirmPasswordField.addEventListener("input", validatePasswords);
});



// Set http_referrer from Cookies
document.addEventListener("DOMContentLoaded", function () {
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
        return '';
    }

    const httpReferrer = getCookie('http_referrer');
    const httpReferrerField = document.getElementById('http_referrer');
    httpReferrerField.value = httpReferrer || '';
});

// Form Validation Check
document.addEventListener("DOMContentLoaded", function () {
    const registerForm = document.getElementById("registerForm");

    registerForm.addEventListener("submit", function (event) {
        if (!registerForm.checkValidity()) {
            event.preventDefault();
            console.log("Form is invalid.");
        } else {
            console.log("Form is valid and ready for submission.");
        }
    });
});
</script>
@endsection