@extends('v2.layouts.auth')

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

@section('content')

<section class="relative flex flex-col justify-center h-full">
    <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto">
        <div class="flex items-center h-full wow animate__animated animate__fadeIn animated" data-wow-delay=".1s">
            <img class="lg:max-w-lg mx-auto" src="{{ asset('storage/imgs/illustrations/space.svg')}}" alt="" />
        </div>
    </div>
    <div class="container">
        <div class="flex max-w-md flex-col text-center">
            <div class="mt-24 mb-8 p-8 bg-white rounded shadow">
                <a class="text-3xl font-semibold leading-none" href="{{ route('home') }}">
                    <img class="h-24 scale-2 mx-auto" src="{{asset('storage/logo.png')}}" alt="Columbus17 logo" style="z-index:1" title="Go back to home page"/>
                </a>
                <h4 class="mb-6 text-3xl mt-4">Create an Account</h4>
                <form action="{{ route('register.store') }}" method="POST">
                    @csrf
                    <div class="flex mb-4 px-4 bg-blueGray-50 rounded border border-gray-200">
                        <input 
                            class="@error('name') border-2 border-red-500 @enderror w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
                            type="text"
                            placeholder="Full Name"
                            name="name" 
                            id="name"
                            value="{{ old('name') }}" />
                        <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                        </svg>
                    </div>
                    @if ($errors->has('name'))
                        <span class="text-red-500">{{ $errors->first('name') }}</span>
                    @endif
                    <div class="flex mb-4 px-4 bg-blueGray-50 rounded border border-gray-200">
                        <input 
                            class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
                            type="email"
                            placeholder="Email"
                            name="email"
                            id="email"
                            value="{{ old('email') }}" />
                        <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                        </svg>
                    </div>
                    @if ($errors->has('email'))
                        <span class="text-red-500">{{ $errors->first('email') }}</span>
                    @endif
                    <div class="flex mb-4 px-4 bg-blueGray-50 rounded border border-gray-200">
                        <input 
                            class="@error('password') text-danger @enderror w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" 
                            type="password" 
                            placeholder="Enter your password"
                            name="password" 
                            id="password" />
                        <button class="ml-4" type="button" id="togglePassword">
                            <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </button>
                    </div>
                    @if ($errors->has('password'))
                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                    @endif
                    <div class="flex mb-4 px-4 bg-blueGray-50 rounded border border-gray-200">
                        <input 
                            class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
                            type="password"
                            placeholder="Confirm password"
                            name="password_confirmation"
                            id="confirm_password" />
                        <button class="ml-4" type="button" id="togglePasswordConfirmation">
                            <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </button>
                    </div>
                    @if ($errors->has('password'))
                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                    @endif

                    <div class="float-left mb-8 wow animate__animated animate__fadeIn animated" data-wow-delay=".1s">
                        <label class="inline-flex text-xs">
                            <input type="checkbox" class="form-checkbox" checked />
                            <span class="ml-2">I agree to <a class="underline hover:text-blueGray-500 cursor-pointer" onclick="openModal(event)">terms and conditions</a></span>
                        </label>
                    </div>

                    <div class="float-left mb-8 wow animate__animated animate__fadeIn animated" data-wow-delay=".1s">
                        {!! NoCaptcha::display() !!}
                        @if ($errors->has('g-recaptcha-response'))
                            <span class="text-red-500">{{ $errors->first('g-recaptcha-response') }}</span>
                        @endif
                    </div>

                    <button class="transition duration-300 ease-in-out transform hover:-translate-y-1 block w-full p-4 text-center text-xs text-white font-semibold leading-none bg-blue-500 hover:bg-blue-700 rounded">Sign Up Now</button>
                    
                    <div class="w-full mt-12 mx-auto text-center">
                        <p class="text-sm">Already have an account? <a class="inline-block text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none wow animate__animated animate__fadeIn animated" data-wow-delay=".1s" href="{{ route('login') }}">Sign in now</a></p>
                    </div>
                </form>
                {{-- Load reCAPTCHA script --}}
                {!! NoCaptcha::renderJs() !!}
            </div>
        </div>
    </div>
</section>
 <!-- Modal -->
<div id="termsModal" class="fixed inset-0 hidden items-center justify-center bg-black/50" style="z-index:2">
  <div class="bg-white rounded-lg shadow-lg p-6 w-96 relative" style="height:100vh;overflow:auto">
    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700" style="float:right">✕</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-blue-500 hover:bg-blue-700 text-white rounded-md hover:bg-green-700 cursor-pointer">Close</label>
      </div>
    </p>
  </div>
</div>
<script>
    const togglePassword = document.querySelector('#togglePassword');
    const togglePasswordConfirmation = document.querySelector('#togglePasswordConfirmation');
    const confirm_password = document.querySelector('#confirm_password');
    const passwordInput = document.querySelector('#password');

    togglePassword.addEventListener('click', () => {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
    });

    togglePasswordConfirmation.addEventListener('click', () => {
        const type = confirm_password.getAttribute('type') === 'password' ? 'text' : 'password';
        confirm_password.setAttribute('type', type);
    });
</script>
@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>