@extends('layouts.login.master')
@section('title')
    {{$title}}
@endsection
@section('content')

    @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
        @if($properties['native'] != LaravelLocalization::getCurrentLocaleNative() )
            <a style="position: absolute;padding: 10px;" rel="alternate" hreflang="{{ $localeCode }}" href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
                {{ $properties['native'] }}
            </a>
        @endif
    @endforeach
    <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-2 m-2">
        <div class="col mx-auto">
            <div class="my-4 text-center">
                <img src="{{asset(websiteInfo_hlp('logo'))}}" width="180"  alt="" />
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="border p-4 rounded">
                        <div class="text-center">
                            <h3 class="my-3">{{trans($namespaceName.'/'.$modelName.'.'.'vip-visitor-registration')}}</h3>
                                <p>{{trans($namespaceName.'/'.$modelName.'.'.'already_have_an_account')}} <a href="{{ route('login-to-company-invitation-link',['short_link'=>$short_link , 'visitor_type'=>'vip']) }}">{{trans($namespaceName.'/'.$modelName.'.'.'sign_in_here')}}</a>
                            </p>
                        </div>
                        <div class="login-separater text-center mb-4"> <span>{{trans($namespaceName.'/'.$modelName.'.'.'OR SIGN UP WITH EMAIL')}}</span>
                            <hr/>
                        </div>

                        <form action="{{ route('join-company-invitation-link') }}" method="post" autocomplete="off"
                              enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="short_link" value="{{$short_link}}">
                            <input type="hidden" name="action" value="register">
                            <input type="hidden" name="visitor_type" value="vip">
                            <div class="mb-3">
                                <label class="mb-2 form-labe">{{trans($namespaceName.'/'.$modelName.'.'.'name')}}</label>
                                <input type="text" name="name" class="form-control  @error('name') is-invalid @enderror" required value="{{old('name')}}">
                                @error('name')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-labe mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'email')}}</label>
                                <input type="text" name="email" class="form-control  @error('email') is-invalid @enderror" required value="{{old('email')}}">
                                @error('email')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="mb-2 form-labe">{{trans($namespaceName.'/'.$modelName.'.'.'phone')}}</label>
                                <input type="number" name="phone" class="form-control  @error('phone') is-invalid @enderror" required value="{{old('phone')}}">
                                @error('phone')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-labe mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'password')}}</label>
                                <div class="input-group" id="show_hide_password1">
                                    <input type="password"  name="password" class="form-control @error('password') is-invalid @enderror" id="inputChoosePassword" value="{{old('password')}}" required> <a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                                </div>
                                @error('password')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-labe mb-2">{{trans($namespaceName.'/'.$modelName.'.password_confirmation')}}</label>

                                <div class="input-group" id="show_hide_password">
                                    <input type="password" name="password_confirmation" class="form-control  @error('password_confirmation') is-invalid @enderror" required value="{{old('password_confirmation')}}"><a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                                </div>
                                @error('password_confirmation')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="my-2 col-md-6">
                                <div class="mb-3">
                                    <label class="mb-2">{{trans('guest/auth.language')}}</label>
                                    <select class="form-control" name="language" >
                                        @foreach(getLookupData('Language', ['key','display_value']) as $language)
                                            <option value="{{ $language->key }}" >{{$language->display_value}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="mb-3">
                                <label class="form-labe mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'photo')}}</label>
                                <input id="image-uploadify" class="form-control" name="image" type="file" accept="image/*">
                                @error('image')
                                <div class="alert alert-danger">{{$message}}</div>
                                @enderror
                            </div> --}}

                            <div class="row mt-5">
                                    <button class="btn btn-primary">{{trans('labels.sign_up')}} <i class='bx bx-user' ></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

                <!--end row-->
    <!--end wrapper-->
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $("#show_hide_password a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass("bx-hide");
                    $('#show_hide_password i').removeClass("bx-show");
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass("bx-hide");
                    $('#show_hide_password i').addClass("bx-show");
                }
            });
            $("#show_hide_password1 a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password1 input').attr("type") == "text") {
                    $('#show_hide_password1 input').attr('type', 'password');
                    $('#show_hide_password1 i').addClass("bx-hide");
                    $('#show_hide_password1 i').removeClass("bx-show");
                } else if ($('#show_hide_password1 input').attr("type") == "password") {
                    $('#show_hide_password1 input').attr('type', 'text');
                    $('#show_hide_password1 i').removeClass("bx-hide");
                    $('#show_hide_password1 i').addClass("bx-show");
                }
            });
        });
    </script>
@endpush