@extends('frontend::layouts.master')

@section('content')
    <div class="pt-6 lg:pt-10">
        <x-frontend::utility.sectiontitle title="Register"></x-frontend>
    </div>
    <div class="container relative">
        <div class="tab-wrapper" x-data="{ activeTab: 0 }">
            <div class="mx-auto max-w-xl p-4 sm:py-8 xl:p-8 rounded-lg bg-glass mt-8 xl:mt-10">
                <div class="mx-auto max-w-md flex items-center justify-around text-center gap-4 mb-4">
                    <label @click="activeTab = 0" class="tab-control w-1/2 border-b pb-2 cursor-pointer border-transparent hover:border-white hover:border-opacity-60" :class="{ 'active border-white cursor-default hover:border-opacity-100': activeTab === 0 }">Register As <span class="uppercase font-semibold text-18">Buyer</span></label>
                    <label @click="activeTab = 1" class="tab-control w-1/2 border-b pb-2 cursor-pointer border-transparent hover:border-white hover:border-opacity-60" :class="{ 'active border-white cursor-default hover:border-opacity-100': activeTab === 1 }">Register As <span class="uppercase font-semibold text-18">Seller</span></label>
                </div>
                <div class="tab-panel" :class="{ 'active': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0">
                    <form action="register-verify" class="mx-auto max-w-md transparent-label">
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='email' id='email' title='Email' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Invalid email format. Please try again.</p>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='password' id='password' title='Password' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='password' id='repassword' title='Re-Password' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Minimum 8 characters, must contain at least one lowercase letter (a-z), one uppercase letter (A-Z) and one digit (0-9).</p>
                            </div>
                            <div class="w-full xl:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='fname' title='First Name' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full xl:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='lname' title='Last Name' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='phone' title='Phone No.' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='bday' title='Date of Birth' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='idcardno' title='ID Card No. / Passsport No.' class="line-style"></x-frontend>
                            </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full py-2 px-4 py-2">
                                Residence Registration Address
                            </div>

                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='address' title='Address' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="province">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="province">
                                        Province
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="District">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="District">
                                        District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="subDistrict">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="subDistrict">
                                        Sub-District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='zip' title='Postal Code' class="line-style"></x-frontend>
                            </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full py-2 px-4 py-2">
                                <p class="mb-2">
                                    Current Address
                                </p>
                                <x-frontend::form.checkbox id='same' name='same' title='Same as Residence Registration Address' class=''></x-frontend>
                            </div>

                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='address2' title='Address' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="province2">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="province2">
                                        Province
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="District2">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="District2">
                                        District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="subDistrict2">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="subDistrict2">
                                        Sub-District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='zip2' title='Postal Code' class="line-style"></x-frontend>
                            </div>
                        </div>
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full px-4">
                                <x-frontend::form.input type='file' id='file1' title='Face with ID Card / Passport Verification Photo' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>

                            <div class="w-full px-4">
                                <x-frontend::form.input type='file' id='file2' title='ID Card / Passport' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>

                            <div class="w-full p-4 form-style basic-check-radio">
                                <label class="static space-x-1 leading-6 " for="policy">
                                    I acknowledge that I have read and agree
                                    <a href="#pdf"><u>Privacy Policy</u></a>
                                </label>
                                <input id="policy" type="checkbox" class="bg-transparent mt-[6px]">
                            </div>
                            <div class="w-full p-4 ">
                                <img src="{{ Module::asset('frontend:img/captcha.jpg') }}">
                            </div>
                            <div class="w-full px-4 pt-4 text-right">
                                <button type="submit" class="button-secondary w-full text-white">
                                    Register
                                </button>
                            </div>

                            <div class="w-full px-4 pt-4 text-center text-14">
                                <p>Already have an account ?
                                    <a href="login" class="font-medium ml-1">Login</a>
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-panel" :class="{ 'active': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1">
                    <form action="register-verify-line" class="mx-auto max-w-md transparent-label">
                        <div class="flex flex-wrap -mx-4">
    
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='email' id='email' title='Email' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Invalid email format. Please try again.</p>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='password' id='password' title='Password' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='password' id='repassword' title='Re-Password' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Minimum 8 characters, must contain at least one lowercase letter (a-z), one uppercase letter (A-Z) and one digit (0-9).</p>
                            </div>
    
                            <div class="w-full py-2 px-4">
                                Register As
                            </div>
                            <div class="w-1/2 px-4 py-2">
                                <div class="form-style basic-check-radio">
                                    <label for="usertype1">
                                        Individual
                                    </label>
                                    <input type="radio" name="usertype" id="usertype1" checked>
                                </div>
                            </div>
                            <div class="w-1/2 px-4 py-2">
                                <div class="form-style basic-check-radio ">
                                    <label for="usertype2">
                                        Corporation
                                    </label>
                                    <input type="radio" name="usertype" id="usertype2" >
                                </div>
                            </div>
                            <div class="w-full xl:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='fname' title='First Name' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full xl:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='lname' title='Last Name' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='phone' title='Phone No.' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='idcardno' title='ID Card No. / Passsport No.' class="line-style"></x-frontend>
                            </div>
    
                            {{-- Individual --}}
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='bday' title='Date of Birth' class="line-style"></x-frontend>
                            </div>
    
                            {{-- Corporation --}}
                            <div x-cloak class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='sname' title='Store Name' class="line-style"></x-frontend>
                            </div>
                            <div x-cloak class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='cname' title='Company Name' class="line-style"></x-frontend>
                            </div>
                            <div x-cloak class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='fname' title='Facebook Page Name' class="line-style"></x-frontend>
                            </div>
                            <div x-cloak class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='jsnum' title='Juristic Person Registration Number' class="line-style"></x-frontend>
                            </div>
    
                        </div>
                        <div class="flex flex-wrap -mx-4">
                            <div class="w-full px-4 py-2">
                                <x-frontend::form.input type='text' id='address' title='Address' class="line-style"></x-frontend>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="province">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="province">
                                        Province
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="District">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="District">
                                        District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <div class="com-form-basic float form-style line-style">
                                    <select name="select-name" id="subDistrict">
                                        <option value="0">Option Value 1</option>
                                        <option value="1">Option Value 2</option>
                                        <option value="2">Option Value 3</option>
                                    </select>
                                    <label for="subDistrict">
                                        Sub-District
                                    </label>
                                </div>
                            </div>
                            <div class="w-full sm:w-1/2 px-4 py-2">
                                <x-frontend::form.input type='text' id='zip' title='Postal Code' class="line-style"></x-frontend>
                            </div>
                        </div>
    
                        <div class="flex flex-wrap -mx-4">
    
                            {{-- Individual --}}
                            <div class="w-full px-4">
                                <x-frontend::form.input type='file' id='file1' title='Face with ID Card / Passport Verification Photo' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>
    
                            {{-- Corporation --}}
                            <div x-cloak class="w-full px-4">
                                <x-frontend::form.input type='file' id='file4' title='Business Registration Certificate' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>
                            <div x-cloak class="w-full px-4">
                                <x-frontend::form.input type='file' id='file5' title='Company Certificate of Registration' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>
    
                            <div class="w-full px-4">
                                <x-frontend::form.input type='file' id='file2' title='ID Card / Passport' class="line-style"></x-frontend>
                                    <p class="form-invalid-message">Support PDF, JPG, PNG Files maximum at 2MB</p>
                            </div>
    
                            <div class="w-full p-4 form-style basic-check-radio">
                                <label class="static space-x-1 leading-6 " for="policy">
                                    I acknowledge that I have read and agree
                                    <a href="#pdf"><u>Privacy Policy</u></a>
                                </label>
                                <input id="policy" type="checkbox" class="bg-transparent mt-[6px]">
                            </div>
                            <div class="w-full p-4 ">
                                <img src="{{ Module::asset('frontend:img/captcha.jpg') }}">
                            </div>
                            <div class="w-full px-4 pt-4 text-right">
                                <button type="submit" class="button-secondary w-full text-white">
                                    Register
                                </button>
                            </div>
    
                            <div class="w-full px-4 pt-4 text-center text-14">
                                <p>Already have an account ?
                                    <a href="login" class="font-medium ml-1">Login</a>
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection