@extends('layouts.home')
@section('body')
    <section id="signup">
        <div class="sign-bg">
            <div class="sign-overlay2"></div>
        </div>

        <div class="sign-split">
            <div class="form_wrapper">
                <div class="form_container">
                    <div class="title_container">
                        <h2>Create an Account</h2>
                        <p>Already have an account?
                            <a style="color: orange" href={{ env('APP_URL') . '/login' }}><b>Log In</b></a>
                        </p>
                    </div>
                    @error('general')
                        <div class="alert alert-danger on-edit-dismiss" role="alert">
                            {{ $message }}
                        </div>
                    @enderror

                    <!-- Individual Form -->
                    <div class="individual-form">
                        <div class="user-type">
                            <input type="radio" name="radioType" id="radioIndividual" value="individual"
                                class="individual" checked>
                            <label for="radioIndividual">
                                <ion-icon name="person-circle"></ion-icon>
                                Individual
                            </label>

                            <p>or</p>
                            <input type="radio" name="radioType" id="radioCompany" value="company" class="company">
                            <label for="radioCompany">
                                <ion-icon name="briefcase"></ion-icon>
                                Company
                            </label>
                        </div>
                        <div class="row clearfix">
                            <div class="">
                                <form action={{ route('register.save') }} method="POST">
                                    @csrf
                                    <div class="row clearfix">
                                        <div class="col_half">
                                            <div class="input_field">
                                                <input type="text" name="finm" id="finm"
                                                    pattern="^([a-zA-Z]{2,} ?)+$" placeholder="First Name" required
                                                    value="{{ old('finm') }}" />
                                                @error('finm')
                                                    <p class="error-message">{{ $message }}</p>
                                                @enderror
                                                <p class="error-message"></p>
                                            </div>
                                        </div>
                                        <div class="col_half">
                                            <div class="input_field">
                                                <input type="text" name="lamn" id="lamn"
                                                    pattern="^([a-zA-Z]{2,} ?)+$" placeholder="Last Name" required
                                                    value="{{ old('lamn') }}" />
                                                @error('lamn')
                                                    <p class="error-message">{{ $message }}</p>
                                                @enderror
                                                <p class="error-message"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input_field">
                                        <input type="text" name="unmn" placeholder="Username" required
                                            value="{{ old('unmn') }}" />
                                        @error('unmn')
                                            <p class="error-message">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="input_field select_option">

                                        <select name="address[cotr]">

                                            <option selected disabled>Select a country</option>
                                            @foreach ($countries->data as $country)
                                                <option value={{ $country['code'] }}
                                                    {{ old('address.cotr') ?? request()->header('cf-ipcountry', '') == $country['code'] ? 'selected' : '' }}>
                                                    {{ $country['name'] }}</option>
                                            @endforeach
                                        </select>
                                        <div class="select_arrow"></div>
                                        @error('address.cotr')
                                            <p class="error-message">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="input_field">
                                        <input type="email" name="email" id="email" placeholder="Email" required
                                            value="{{ old('email') }}" />
                                        <p class="error-message"></p>
                                        @error('email')
                                            <p class="error-message">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="row clearfix">
                                        <div class="col_half">
                                            <div class="input_field">
                                                <input type="password" name="password" id="password" placeholder="Password"
                                                    required />
                                                @error('password')
                                                    <p class="error-message">{{ $message }}</p>
                                                @enderror
                                                <p class="error-message"></p>
                                            </div>
                                        </div>
                                        <div class="col_half">
                                            <div class="input_field">
                                                <input type="password" name="password_confirmation" id="confirm-password"
                                                    placeholder="Re-type Password" required />
                                                <p class="error-message"></p>
                                                @error('password_confirmation')
                                                    <p class="error-message">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="fieldTab">
                                        <div class="input_field">
                                            <input type="text" name="orgn" id="orgn"
                                                placeholder="Organization" />
                                            @error('orgn')
                                                <p class="error-message">{{ $message }}</p>
                                            @enderror
                                            <p class="error-message"></p>
                                        </div>

                                        <div class="input_field">
                                            <input type="text" name="address[adds]" id="addr"
                                                placeholder="Address" />
                                            @error('address.adds')
                                                <p class="error-message">{{ $message }}</p>
                                            @enderror
                                            <p class="error-message"></p>
                                        </div>

                                        <div class="row clearfix">
                                            <div class="col_half">
                                                <div class="input_field">
                                                    <input type="text" name="address[city]" id="city"
                                                        placeholder="City" />
                                                    @error('address.city')
                                                        <p class="error-message">{{ $message }}</p>
                                                    @enderror
                                                    <p class="error-message"></p>
                                                </div>
                                            </div>
                                            <div class="col_half">
                                                <div class="input_field">
                                                    <input type="text" name="address[poco]" id="postalcode"
                                                        placeholder="Postal Code" />
                                                    @error('address.poco')
                                                        <p class="error-message">{{ $message }}</p>
                                                    @enderror
                                                    <p class="error-message"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input_field select_option">
                                        <select name="zone">
                                            <option>Preferred Standard of Descriptions</option>
                                            @foreach ($zones as $zone)
                                                <option value={{ $zone->id }}
                                                    {{ old('zone') == $zone->id ? 'selected' : '' }}>{{ $zone->cotn }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="select_arrow"></div>
                                        @error('zone')
                                            <p class="error-message">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="input_field checkbox_option">
                                        <input type="checkbox" id="cb2" name="terms">
                                        <label for="cb2">By creating an account, you agree with Rapisurv's <a
                                                href="https://app.termly.io/document/terms-of-use-for-saas/d329432c-568c-4a88-80b2-e2ab2db0de73"
                                                class="terms-of-service">Terms of Service</a></label>

                                        @error('terms')
                                            <p class="error-message">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <button type="submit">Create Account</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection