@extends('layouts.central.app')

@section('page_css')
    <style>
        .hidden {
            display: none;
        }

        label {
            color: #666;
        }
    </style>
@endsection

@section('page_hero')
    <!-- Hero Area Start -->
    <div id="hero-area" class="hero-area-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">
                    <div class="contents">
                        <h2 class="head-title">Already Registered?</h2>
                        <p>Please click the button below to be redirected to the logic site. </p>
                        <div class="header-button">
                            <a rel="nofollow" href="{{ route('central.tenants.login') }}" class="btn btn-common">Login Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
                    <div class="intro-img">
                        <img class="img-fluid" src="{{ asset('/central/assets/img/intro-mobile.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->
@endsection

@section('page_content')

    <!-- Services Section Start -->
    <section id="services" class="section-padding bg-gray">
        <div class="container">
            <div class="section-header text-center">
                <h2 class="section-title wow fadeInDown" data-wow-delay="0.3s"> Create a new account</h2>
                <p class="mt-2 text-sm text-center text-gray-600 leading-5 max-w">
                    Or
                    <a href="{{ route('central.tenants.login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                        sign in to your account
                    </a>
                </p>
                <div class="shape wow fadeInDown" data-wow-delay="0.3s"></div>
            </div>
            <div class="row contact-form-area wow fadeInUp" data-wow-delay="0.3s">
                <div class="col-md-12 col-sm-12">
                    <form id="frmRegisterTenant" action="{{ route('central.tenants.register.submit') }}" method="post" novalidate="true">
                        @csrf
                        @honeypot
                        <section id="cta" class="section-padding">
                            <div class="container">

                                @if ($errors->any())
                                    <div class="row hidden">
                                        <div class="col-lg-12">
                                            <div class="alert alert-danger">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="given_names">First Name</label>
                                            <input id="given_names" type="text" class="form-control" name="given_names" value="{{ old('given_names', '') }}" autocomplete="off" require autofocus />
                                            @error('given_names')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="surname">Last Name</label>
                                            <input id="surname" type="text" class="form-control" name="surname" value="{{ old('surname', '') }}" autocomplete="off" require autofocus />
                                            @error('surname')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="email">Email Address</label>
                                            <input id="email" type="email" class="form-control" name="email" value="{{ old('email', '') }}" autocomplete="off" require autofocus />
                                            @error('email')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="company">Company Name</label>
                                            <input id="company" type="text" class="form-control" name="company" value="{{ old('company', '') }}" autocomplete="off" require autofocus />
                                            @error('company')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- Industry -->
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="industry">Industry</label>
                                            <select id="industry" class="form-control" name="industry" require>
                                                <option value="">Select Industry</option>
                                                @foreach (config('env.lead_industry') as $industry)
                                                    <option value="{{ $industry }}" {{ old('industry') == $industry ? 'selected' : '' }}>{{ $industry }}</option>
                                                @endforeach
                                            </select>
                                            @error('industry')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <!-- Company Size -->
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="company_size">Company Size</label>
                                            <select id="company_size" class="form-control" name="company_size" require>
                                                <option value="">Select Company Size</option>
                                                @foreach (config('env.company_size') as $company_size)
                                                    <option value="{{ $company_size }}" {{ old('company_size') == $company_size ? 'selected' : '' }}>{{ $company_size }}</option>
                                                @endforeach
                                            </select>
                                            @error('company_size')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Country, Region, City -->
                                @livewire('central.tenant-registration-country')

                                <div class="row justify-content-md-center">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="domain">Enter Domain</label>
                                            <div class="input-group mb-3">
                                                <input id="domain" type="text"name="domain" autocomplete="off" class="form-control" value="{{ old('domain', '') }}" placeholder="Domain" require />
                                                <div class="input-group-append">
                                                    <span class="input-group-text" id="basic-addon2">.{{ config('tenancy.central_domains')[0] }}</span>
                                                </div>
                                            </div>
                                            @error('domain')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="password">Enter Password</label>
                                            <input id="password" type="password" class="form-control" name="password" value="{{ old('password', '') }}" autocomplete="off" require autofocus />
                                            @error('password')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="password_confirmation">Confirm Password</label>
                                            <input id="password_confirmation" type="password" class="form-control" name="password_confirmation" value="{{ old('password_confirmation', '') }}" autocomplete="off" require autofocus />
                                            @error('password_confirmation')
                                                <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- <div class="row justify-content-md-center">
                                    <div>
                                        <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_KEY') }}"></div>
                                        @error('g-recaptcha-response')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div> --}}

                                <div class="row mt-3">
                                    <div class="col-lg-12 text-center text-dark">
                                        Click on "Register Now" to create your tenant account and be redirected to your newly created tenant account.
                                    </div>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-lg-12 text-center">
                                        <a href="/" class="btn btn-warning mr-2" title="Go Back">Cancel</a>
                                        <button type="submit" class="btn btn-primary" name="btnSubmit">Register Now</button>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection