@extends('layouts.auth')

@section('title', 'Columbus 17 | Register')

@section('content')
    <div class="content w-96 m-auto mt-24">
        <div class="flex flex-col">
            <div class="flex flex-col items-center space-y-4 mb-12">
                <p class="text-6xl">COLUMBUS17</p>
                <p class="text-3xl">Sign Up to Columbus 17</p>
            </div>
            <form action="{{ route('register.store') }}" method="POST">
                @csrf
                <div class="grid gap-6 md:grid-cols-2">
                    <div>
                        <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
                        <input 
                            type="text" 
                            name="name" 
                            id="name" 
                            class="@error('name') border-2 border-red-500 @enderror bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                            value="{{ old('name') }}" 
                            placeholder="First and last name"/>
                            @if ($errors->has('name'))
                                <span class="text-red-500">{{ $errors->first('name') }}</span>
                            @endif
                    </div>
                    <div class="mb-6">
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>
                        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="{{ old('email') }}" placeholder="Email address"/>
                        @if ($errors->has('email'))
                            <span class="text-red-500">{{ $errors->first('email') }}</span>
                        @endif
                    </div>
                </div> 
                <div class="mb-6">
                    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                    <input type="password" name="password" id="password" class="@error('password') text-danger @enderror bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
                    @if ($errors->has('password'))
                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                    @endif
                </div> 
                <div class="mb-6">
                    <label for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label>
                    <input type="password" name="password_confirmation" id="confirm_password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
                    @if ($errors->has('password'))
                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                    @endif
                </div> 
                <div class="flex items-start mb-6">
                    <div class="flex items-center h-5">
                    <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required />
                    </div>
                    <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    I agree with the 
                    <a href="#" 
                        onclick="openModal(event)" 
                        class="text-blue-600 hover:underline dark:text-blue-500">
                        terms and conditions
                    </a>.
                    </label>
                    <!-- Modal -->
                    <div id="termsModal" class="fixed inset-0 hidden items-center justify-center bg-black/50">
                        <div class="bg-white rounded-lg shadow-lg p-6 w-96 relative">
                            <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">✕</button>
                            <h2 class="text-xl font-bold mb-4">Terms and Conditions</h2>
                            <p class="text-gray-600">
                            <div class="p-6 max-h-[70vh] overflow-y-auto text-slate-800">

                                <h3 class="text-base font-semibold mt-2">Welcome to Columbus17</h3>
                                <p class="mt-2 text-sm leading-relaxed">By accessing or using this platform, you agree to these Terms & Conditions. If you do not agree, please do not use the service.</p>

                                <h4 class="mt-4 font-medium">1. Use of Service</h4>
                                <p class="mt-2 text-sm leading-relaxed">You may use Columbus17 only for lawful purposes and in accordance with these Terms. You agree not to misuse the platform, attempt unauthorized access, or disrupt the service in any way.</p>

                                <h4 class="mt-4 font-medium">2. Intellectual Property</h4>
                                <p class="mt-2 text-sm leading-relaxed">All content, features, and design of Columbus17 are owned by <strong>Columbus17</strong>. You may not copy, distribute, or modify any part of the platform without prior written permission.</p>

                                <h4 class="mt-4 font-medium">3. Third-Party Services</h4>
                                <p class="mt-2 text-sm leading-relaxed">Columbus17 uses data and tools provided by third parties (including Amazon and Google Trends). We do not control or guarantee the accuracy or availability of such third-party data.</p>

                                <h4 class="mt-4 font-medium">4. Disclaimer</h4>
                                <p class="mt-2 text-sm leading-relaxed">Columbus17 is provided “as is” without warranties of any kind. The platform offers research tools and insights but does not guarantee specific results or business outcomes.</p>

                                <h4 class="mt-4 font-medium">5. Termination</h4>
                                <p class="mt-2 text-sm leading-relaxed">We may suspend or terminate access to Columbus17 at any time if you violate these Terms or misuse the service.</p>

                                <h4 class="mt-4 font-medium">6. Changes to Terms</h4>
                                <p class="mt-2 text-sm leading-relaxed">We may update these Terms from time to time. Continued use of Columbus17 after changes indicates your acceptance.</p>

                                <div class="mt-6 border-t pt-4 text-sm text-slate-500">
                                <p>If you have questions about these Terms, contact us at <a href="mailto:support@columbus17.com" class="text-indigo-600 hover:underline">support@columbus17.com</a>.</p>
                                </div>
                            </div>
                            <!-- Footer -->
                            <div class="p-4 sm:p-6 border-t bg-slate-50 flex items-center justify-end gap-3">
                                <label onclick="closeModal()" for="modal-toggle" class="px-4 py-2 bg-sky-700 text-white rounded-md hover:bg-green-700 cursor-pointer">Close</label>
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="my-2">
                    {!! NoCaptcha::display() !!}
                    @if ($errors->has('g-recaptcha-response'))
                        <span class="text-red-500">{{ $errors->first('g-recaptcha-response') }}</span>
                    @endif
                </div>
                <div class="mb-6 w-full">
                    <input type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="SIGN UP">
                </div>
                <div class="mb-6 text-center">
                    <p>Already have an account? <a class="text-blue-500" href="{{ route('login') }}">Log In</a></p>
                </div>
            </form>
            {{-- Load reCAPTCHA script --}}
            {!! NoCaptcha::renderJs() !!}
        </div>
    </div>
@endsection
<script>
document.addEventListener("DOMContentLoaded", () => {
  const modal = document.getElementById("termsModal");

  window.openModal = function(event) {
    event.preventDefault();
    modal.classList.remove("hidden");
    modal.classList.add("flex");
  }

  window.closeModal = function() {
    modal.classList.remove("flex");
    modal.classList.add("hidden");
  }
});
</script>