@extends('site.layouts.app', ['auth_page' => true])

@section('content')
    <div class="login-page">
        @include('site.inc.auth_navbar')
        <!-- login box -->


        <div class="login-section">


            <div class="container-fluid">
                <div class="row justify-content-center position-relative">
                    <div class="col-lg-6 col-md-8 col-12">
                        <div class="login-box rounded-xl def-bg p-46">
                            <form class="main-form white" action="{{ route('saudi.register') }}" method="POST">
                                @csrf
                                <div class="d-flex align-items-center mb-46">
                                    <a href="{{ $type == 'supplier' ? route('register_step_two', ['type' => $type, 'account_type' => $account_type]) : route('register') }}"
                                        class="back-btn d-flex align-items-center justify-content-center"><i
                                            class="icon-arrow-right"></i></a>
                                    <h3 class="dark-color fw-600 text-center mb-0 flex-fill">{{ __('site.Auth.Welcome_1') }}
                                    </h3>
                                </div>
                                {{-- @dd($type,$account_type) --}}
                                <input type="text" hidden name="type" value="{{ $type }}" />
                                <input type="text" hidden name="account_type" value="{{ $account_type }}" />
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('site.Auth.Company_1') }}</label>
                                            <input type="text" name="name"
                                                class="form-control @error('name') is-invalid @enderror"
                                                value="{{ old('name') }}" placeholder="{{ __('site.Auth.Company_2') }}">
                                            @error('name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages.Email') }}</label>
                                            <input type="email" name="email"
                                                class="form-control @error('email') is-invalid @enderror"
                                                value="{{ old('email') }}"
                                                dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}"
                                                placeholder="{{ __('site.Auth.Company_3') }}">
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages.Mobile') }}</label>
                                            <input id="phone" name="mobile" type="tel"
                                                class="form-control text-start @error('mobile') is-invalid
                                                @enderror "
                                                value="{{ old('mobile') }}" />
                                            <input type="hidden" id="country_code"
                                                value="{{ old('mobile_country_code') }}" name="mobile_country_code" />
                                            @error('mobile')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>

                                    </div>
                                    <div class="col-12"></div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages_301.Country') }}</label>
                                            <select id="select_country_id" name="country_id"
                                                class="form-select select_country_id @error('country_id') is-invalid
                                                @enderror">
                                                <option value="">-----</option>
                                                @foreach ($countries as $country)
                                                    <option value="{{ $country->id }}" @selected(old('country_id') == $country->id)>
                                                        {{ $country->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('country_id')
                                                <span class="invalid-feedback" role="alert">

                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages_301.City') }}</label>
                                            <select id="select_city_id" name="city_id"
                                                class="form-select select_city_id @error('city_id') is-invalid

                                            @enderror">
                                                <option value="">-----</option>

                                            </select>
                                            @error('city_id')
                                                <span class="invalid-feedback" role="alert">

                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages.Password') }}</label>
                                            <input type="password" name="password"
                                                class="form-control @error('password') is-invalid

                                            @enderror"
                                                placeholder="{{ __('site.Auth.Company_4') }}">
                                            @error('password')
                                                <span class="invalid-feedback" role="alert">

                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-45">
                                            <label
                                                class="form-label dark-color mb-3 fw-600">{{ __('messages.Confirm Password') }}</label>
                                            <input type="password" name="password_confirmation"
                                                class="form-control @error('password_confirmation') is-invalid

                                            @enderror"
                                                placeholder="{{ __('site.Auth.Company_5') }}">
                                            @error('password_confirmation')
                                                <span class="invalid-feedback" role="alert">

                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <button class="main-btn w-100 my-3">{{ __('site.Auth.Register_2') }}</button>
                                <p class="mb-3 small-text text-center"><span
                                        class="opacity-70">{{ __('site.Auth.Register_5') }}</span> <a href="#"
                                        class="primary-color">{{ __('site.Auth.Register_4') }}</a></p>
                                <p class="mb-0 small-text text-center"><span
                                        class="opacity-70">{{ __('site.Auth.Register_3') }}</span> <a
                                        href="{{ route('login') }}"
                                        class="primary-color">{{ __('site.Auth.Login') }}</a></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @include('main-site.supplier.company.account.get_city_script')

    <script>
        $(function() {

            const input = $("#phone")[0];
            const iti = window.intlTelInput(input, {
                initialCountry: "{{ strtolower(App\Http\Helpers\HelperApp::get_alpha_2_by_country_code(old('mobile_country_code', '+966'))['alpha_2']) }}", // Default country
                dialCode: "{{ old('mobile_country_code', '+966') }}",
                separateDialCode: true,
            });

            // Set the initial country code
            $("#country_code").val("+" + iti.getSelectedCountryData().dialCode);

            // Update the hidden input whenever the selected country changes
            $(input).on("countrychange", function() {
                $("#country_code").val("+" + iti.getSelectedCountryData().dialCode);
            });

            const form = document.querySelector('form');
            form.addEventListener('submit', function(event) {
                if (iti.isValidNumber()) {
                    const phoneNumber = iti.getNumber();
                    input.value = phoneNumber;
                } else {
                    event.preventDefault();
                    alert('Please enter a valid phone number.');
                }
            });
        })
    </script>
@endsection