@extends('layouts.tenant.auth')

@section('content')
    <div class="pt-5 text-center login100-pic js-tilt" data-tilt=""
        style="transform: perspective(300px) rotateX(0deg) rotateY(0deg);">
        <img src="{{ dynamic_url('') }}/assets/logo/pinnacle-tenant.png" alt="IMG">

    </div>

    @if (session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: '{{ session('error') }}',
            });
        </script>
    @endif

    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}',
            });
        </script>
    @endif

    @if ($errors->any())
        <script>
            let errorMessage = '';
            @foreach ($errors->all() as $error)
                errorMessage += `<p>{{ $error }}</p>`;
            @endforeach
            Swal.fire({
                icon: 'error',
                title: 'Validation Errors',
                html: errorMessage,
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    <form class="login100-form validate-form" method="POST" action="{{ route('tenant_register_post') }}">
        @csrf
        <span class="login100-form-title">
            Registration Form
        </span>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="row">

            <div class="col-lg-12">
                {{-- Role Selection Dropdown --}}
                <div class="wrap-input100">
                    {{-- <label for="role" class="form-label" data-toggle="tooltip" title="Select your role">
                        Role
                    </label> --}}
                    <select class="input100" name="role" id="role">
                        <option value="">--- Select Role ---</option>
                        @foreach (\Spatie\Permission\Models\Role::whereNotIn('name', ['admin', 'customer'])->get() as $role)
                            <option value="{{ $role->id }}">{{ ucfirst($role->name) }}</option>
                        @endforeach
                    </select>
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                        {{-- <i class="fa fa-users" aria-hidden="true"></i> --}}
                    </span>
                </div>

                {{-- Username Field --}}

                <div class="wrap-input100">
                    {{-- <label for="username" class="form-label" data-toggle="tooltip" title="Enter your unique username">
                        Username
                    </label> --}}
                    <input class="input100" type="text" name="username" id="username" placeholder="Username">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                        {{-- <i class="fa fa-info" aria-hidden="true"></i> --}}
                    </span>
                </div>

                {{-- Full Name Field --}}
                {{-- <div>
                    <div class="wrap-input100">
                        <input class="input100" type="text" name="full_name" id="full_name" placeholder="Full Name">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                        </span>
                    </div>
                </div> --}}

                <div class="wrap-input100 validate-input">
                    <input class="input100" type="text" name="first_name" id="first_name" placeholder="FirstName">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                    </span>
                </div>

                <div class="wrap-input100 validate-input">
                    <input class="input100" type="text" name="last_name" id="last_name" placeholder="LastName">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                    </span>
                </div>
                {{-- Email Field --}}
                <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                    {{-- <label for="email" class="form-label" data-toggle="tooltip" title="Enter a valid email address">
                        Email
                    </label> --}}
                    <input class="input100" type="text" name="email" id="email" placeholder="Email">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                    </span>
                </div>
            </div>
            <div class="col-lg-12">

                
                {{-- State Dropdown --}}
                <div class="wrap-input100 validate-input">
                    <select class="input100" name="state_id" id="state_id">
                        <option value="">--- Select State ---</option>
                        @foreach ($states as $state)
                            <option data-country-id="{{ $state->country_id }}" value="{{ $state->id }}">
                                {{ ucfirst($state->name) }}
                            </option>
                        @endforeach
                    </select>
                    <span class="focus-input100"></span>
                </div>

                {{-- City Dropdown --}}
                <div class="wrap-input100">
                    <input class="input100" type="text" name="city_id" id="city_id" placeholder="City" required>
                    {{-- <select class="input100" name="city_id" id="city_id">
                        <option value="">--- Select City ---</option>
                        @foreach ($cities as $city)
                            <option data-state-id="{{ $city->state_id }}" value="{{ $city->id }}">
                                {{ ucfirst($city->name) }}
                            </option>
                        @endforeach
                    </select> --}}
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                    <input class="input100" type="text" name="zip_code" id="zip_code" placeholder="Enter Zip Code.">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                    </span>
                </div>

                {{-- Country Dropdown --}}
                <div class="wrap-input100 validate-input">
                    <input class="input100" type="text" name="country_id" id="country_id" placeholder="Country" required>
                    {{-- <select class="input100" name="country_id" id="country_id">
                        <option value="">--- Select Country ---</option>
                        @foreach ($countries as $country)
                            <option value="{{ $country->id }}">{{ ucfirst($country->name) }}</option>
                        @endforeach
                    </select> --}}
                    <span class="focus-input100"></span>
                </div>


                <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                    <input class="input100" type="text" name="phone" id="phone" placeholder="Enter Phone Number.">
                    <span class="focus-input100"></span>
                    <span class="symbol-input100">
                    </span>
                </div>

                {{-- Password Field --}}
                <div class="wrap-input100 validate-input">
                    <input class="input100" type="password" name="password" placeholder="Password" required>
                    <span class="focus-input100"></span>
                </div>

                {{-- Confirm Password Field --}}
                <div class="wrap-input100 validate-input">
                    <input class="input100" type="password" name="password_confirmation" placeholder="Confirm Password"
                        required>
                    <span class="focus-input100"></span>
                </div>


                <!-- reCAPTCHA -->
                <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>


                <div>
                    <input type="checkbox" name="checkbox" value="check" required id="agree" size="30">
                    <span style="font-size: 14px;"> I have read and agree to the <a href="javascript::void(0);"
                            style="color: #337ab7;" id="termsLink"> Terms and Conditions </a>and Privacy Policy </span>
                </div>
            </div>
        </div>

        {{-- <span class="txt2">
            By clicking register you agree to our Terms and Conditions.
        </span> --}}
        {{-- Login Button --}}
        <div class="container-login100-form-btn">
            <button class="login100-form-btn">
                Register
            </button>
        </div>
        {{-- Forgot Password --}}
        <div class="text-center p-t-12">
            <span class="txt1">
                Already Have an account!
            </span>
            <a class="txt2" href="{{ route('tenant_login') }}">
                Login?
            </a>
        </div>
    </form>
    
    {!! NoCaptcha::renderJs() !!}

    {{-- Enable Bootstrap Tooltip --}}
    {{-- <script>
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();

        });
    </script> --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const countrySelect = document.getElementById('country_id');
            const stateSelect = document.getElementById('state_id');
            const citySelect = document.getElementById('city_id');

            // Save original options for states and cities
            const allStates = Array.from(stateSelect.options).slice(); // copy all options
            const allCities = Array.from(citySelect.options).slice();

            countrySelect.addEventListener('change', function() {
                const selectedCountryId = this.value;

                // Filter and populate states
                stateSelect.innerHTML = '<option value="">--- Select State ---</option>';
                allStates.forEach(option => {
                    if (option.getAttribute('data-country-id') === selectedCountryId) {
                        stateSelect.appendChild(option.cloneNode(true));
                    }
                });

                // Reset city dropdown
                citySelect.innerHTML = '<option value="">--- Select City ---</option>';
            });

            stateSelect.addEventListener('change', function() {
                const selectedStateId = this.value;

                // Filter and populate cities
                citySelect.innerHTML = '<option value="">--- Select City ---</option>';
                allCities.forEach(option => {
                    if (option.getAttribute('data-state-id') === selectedStateId) {
                        citySelect.appendChild(option.cloneNode(true));
                    }
                });
            });
        });
    </script>
    <script>
        var termsConditions = @json($teams_conditions);
        document.getElementById('termsLink').addEventListener('click', function(e) {
            e.preventDefault(); // Prevent the default anchor behavior
            Swal.fire({
                title: 'Terms and Conditions',
                html: termsConditions, // Display the terms content from the database
                icon: 'info',
                confirmButtonText: 'Got it!',
                didOpen: () => {
                    // Get the container and change text alignment to left
                    const popupContent = document.querySelector('.swal2-html-container');
                    popupContent.style.textAlign = 'left'; // Align text to the left
                    popupContent.style.overflow = 'hidden'; // Remove scrollbar
                }
            });
        });
    </script>
@endsection