<x-guest-layout>
<link rel="stylesheet" type="text/css" href="{{ url('/') }}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{ url('/') }}/app-assets/css{{Auth::user() && Auth::user()->rtl ? '-rtl':''}}/bootstrap.css">
<style>
    .lastname{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
</style>
    <x-auth-card>
        <x-slot name="logo">
        <img src="{{ Helper::setting('logoUrl') }}" alt="app-logo"  class="h-20">
            <!-- <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a> -->
        </x-slot>

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

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

            <!-- Name -->
            <!-- <div> -->
                <x-label for="name" :value="__('Name')" />

                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
            <!-- </div> -->

            <!-- LastName -->
            <div>
                <x-label class="lastname" for="lastname" :value="__('Last Name')" />
                <x-input id="lastname" class="lastname" type="text" name="lastname" autocomplete="off" />
            </div>

            <!-- Email Address -->
            <!-- <div class="mt-4"> -->
                <x-label for="email" :value="__('Email')" />

                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
            <!-- </div> -->

            <!-- Phone -->
            <!-- <div class="mt-4"> -->
                <x-label for="phone" :value="__('Phone with country code')" />

                <x-input id="phone" class="block mt-1 w-full" type="tel" name="phone" :value="old('phone')" required />
            <!-- </div> -->

            <!-- Password -->
            <!-- <div class="mt-4"> -->
                <x-label for="password" :value="__('Password')" />

                <x-input id="password" class="block mt-1 w-full"
                                type="password"
                                name="password"
                                required autocomplete="new-password" />
            <!-- </div> -->

            <!-- Confirm Password -->
            <!-- <div class="mt-4"> -->
                <x-label for="password_confirmation" :value="__('Confirm Password')" />

                <x-input id="password_confirmation" class="block mt-1 w-full"
                                type="password"
                                name="password_confirmation" required />
            <!-- </div> -->
            <br>
            <div class="mb-3">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" required>
                <label class="form-check-label" for="terms-conditions">
                    {{ __('I agree to') }}
                    <a href="javascript:void(0);" data-bs-target="#show-terms-conditions" data-bs-toggle="modal">{{ __('Terms of Use') }} & {{ __('Privacy Policy') }}</a>
                </label>
                </div>
            </div>

            <div class="flex items-center justify-end mt-4">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('Already registered?') }}
                </a>

                <x-button class="ml-4">
                    {{ __('Register') }}
                </x-button>
            </div>
        </form>
    </x-auth-card>
    <div class="modal fade" id="show-terms-conditions" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-transparent">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body pb-5 px-sm-5 pt-50">
                            <div class="text-center mb-1">
                                <h3 class="mb-1">{{ __('Terms of Use') }} & {{ __('Privacy Policy') }}</h3>
                            </div>
                            <div class="nav-align-top mb-4">
                                <ul class="nav nav-pills mb-3 nav-fill" role="tablist">
                                    <li class="nav-item">
                                    <button
                                        type="button"
                                        class="nav-link active"
                                        role="tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#navs-pills-justified-termsofuse"
                                        aria-controls="navs-pills-justified-termsofuse"
                                        aria-selected="true"
                                    >{{ __('Terms of Use') }}
                                    </button>
                                    </li>
                                    <li class="nav-item">
                                    <button
                                        type="button"
                                        class="nav-link"
                                        role="tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#navs-pills-justified-privacypolicy"
                                        aria-controls="navs-pills-justified-privacypolicy"
                                        aria-selected="false"
                                    >{{ __('Privacy Policy') }}
                                    </button>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="navs-pills-justified-termsofuse" role="tabpanel">
                                        <textarea class="form-label" id="termsofuse" rows="30" style="width: 100%; height: 100%;" readonly>{{ file_exists(public_path('app-assets/data/termsofuse.txt')) ? file_get_contents(public_path('app-assets/data/termsofuse.txt')) : 'Rename /public/app-assets/data/termsofuse-example.txt to /public/app-assets/data/termsofuse.txt' }}</textarea>
                                    </div>
                                    <div class="tab-pane fade" id="navs-pills-justified-privacypolicy" role="tabpanel">
                                        <textarea class="form-label" id="privacypolicy" rows="30" style="width: 100%; height: 100%;" readonly>{{ file_exists(public_path('app-assets/data/termsofuse.txt')) ? file_get_contents(public_path('app-assets/data/privacypolicy.txt')) : 'Rename /public/app-assets/data/privacypolicy-example.txt to /public/app-assets/data/privacypolicy.txt' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    <!-- BEGIN: Vendor JS-->
    <script src="{{ url('/') }}/app-assets/vendors/js/vendors.min.js"></script>
    <!-- BEGIN Vendor JS-->
</x-guest-layout>
