@extends('layouts.frontend.' . session('layout'))

@section('content')
    @if(config('app.new_auth_style'))
        <div class="app-login-box">
            {{--<div class="app-logo"></div>--}}
            <h2 class="mb-0 mt-4 fw-bold">
                {{ __('Register') }}
            </h2>
            <div class="divider row"></div>
            <form method="POST" class="mt-4" action="{{ route('register') }}">
                @csrf
                <div class="row">
                    <div class="form-group">
                        <label for="username" class="col-form-label">{{ __('Username') }}</label>

                        <input id="username"
                               type="text"
                               class="form-control @error('username') is-invalid @enderror"
                               name="username"
                               value="{{ old('username') }}"
                               autocomplete="username">

                        @error('username')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="first_name" class="col-form-label">{{ __('First Name') }}</label>

                        <input id="first_name"
                               type="text"
                               class="form-control @error('first_name') is-invalid @enderror"
                               name="first_name"
                               value="{{ old('first_name') }}" autocomplete="off">

                        @error('first_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="last_name" class="col-form-label">{{ __('Last Name') }}</label>

                        <input id="last_name"
                               type="text"
                               class="form-control @error('last_name') is-invalid @enderror"
                               name="last_name"
                               value="{{ old('last_name') }}" autocomplete="off">

                        @error('last_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="email" class="col-form-label">{{ __('E-Mail Address') }}</label>

                        <input id="email"
                               type="email"
                               class="form-control @error('email') is-invalid @enderror"
                               name="email"
                               value="{{ old('email') }}" autocomplete="off">

                        @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror

                    </div>

                    <div class="form-group">
                        <label for="password" class="col-form-label">{{ __('Password') }}</label>

                        <input id="password"
                               type="password"
                               class="form-control @error('password') is-invalid @enderror"
                               name="password" autocomplete="off">

                        @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror

                    </div>

                    <div class="form-group">
                        <label for="password-confirm" class="col-form-label">{{ __('Confirm Password') }}</label>
                        <input id="password-confirm"
                               type="password"
                               class="form-control"
                               name="password_confirmation" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <label for="business_name" class="col-form-label">{{ __('Business Name') }}*</label>

                        <input id="business_name"
                               type="text"
                               class="form-control @error('company.name') is-invalid @enderror"
                               name="company[name]"
                               value="{{ old('company.name') }}" autocomplete="off">

                        @error('company.name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_phone" class="col-form-label">{{ __('Phone Number') }}*</label>

                        <input id="business_phone"
                               type="text"
                               class="form-control @error('company.phone') is-invalid @enderror"
                               name="company[phone]"
                               value="{{ old('company.phone') }}" autocomplete="off">

                        @error('company.phone')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_address" class="col-form-label full-field">{{ __('Address') }}*</label>
                        <input id="business_address"
                               type="text"
                               class="form-control @error('company.address1') is-invalid @enderror"
                               name="company[address1]" autocomplete="off"
                               value="{{ old('company.address1') }}">

                        @error('company.address1')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_address2" class="col-form-label">{{ __('Address 2') }}</label>
                        <input id="business_address2"
                               name="company[address2]"
                               type="text"
                               class="form-control @error('company.address2') is-invalid @enderror"
                               value="{{ old('company.address2') }}">
                        @error('company.address2')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_city" class="col-form-label">{{ __('City') }}*</label>
                        <input id="business_city"
                               name="company[city]"
                               type="text"
                               value="{{ old('company.city') }}"
                               class="form-control @error('company.city') is-invalid @enderror" >
                        @error('company.city')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_state" class="col-form-label">{{ __('State/Province') }}</label>
                        <input id="business_state"
                               name="company[state]"
                               type="text"
                               class="form-control @error('company.state') is-invalid @enderror"
                               value="{{ old('company.state') }}" >
                        @error('company.city')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_postcode" class="col-form-label">{{ __('Postal Code') }}*</label>
                        <input id="business_postcode"
                               name="company[postcode]"
                               type="text"
                               class="form-control @error('company.postcode') is-invalid @enderror"
                               value="{{ old('company.postcode') }}" >
                        @error('company.postcode')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="business_country" class="col-form-label">{{ __('Country/Region') }}*</label>
                        <input id="business_country"
                               name="company[country]"
                               type="text"
                               class="form-control @error('company.country') is-invalid @enderror"
                               value="{{ old('company.country') }}">
                        @error('company.country')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <input id="business_locality" name="company[locality]" type="hidden" value="{{ old('company.locality') }}"/>
                    <div class="form-group mb-0">
                        <button type="submit" class="btn btn-info py-2 px-5 fs-100 fw-bold mb-3">
                            {{ __('Register') }}
                        </button>
                    </div>

                    <div class="form-group mb-0">
                        <h6>Has an account? <a href="{{ route('login') }}" class="text-primary">Sign in now</a></h6>
                    </div>
                </div>
            </form>

            <div class="mt-5">
                <a class="text-info fw-bold pe-2" href="{{ trim(str_replace('ohsms2', '', config('app.url')), '/') }}/terms.php">Terms of Service</a>
                <a class="text-info fw-bold ps-2" href="{{ trim(str_replace('ohsms2', '', config('app.url')), '/') }}/index.php#contact">Terms of Service</a>
                <p class="mt-1">Copyright &copy; {{ now()->format('Y') }} OSHMATE. All Rights Reserved</p>
            </div>
        </div>
    @else
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Register') }}</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf

                            <div class="form-group row">
                                <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                                <div class="col-md-6">
                                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        {{ __('Register') }}
                                    </button>
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <h6 class="mt-3">Has an account? <a href="{{ route('login') }}" class="text-primary">Sign in now</a></h6>
                                </div>
                            </div>
                        </form>

                        {{--<div class="text-center mt-2">
                            <p>
                                <strong>Or Sign Up with</strong>
                            </p>
                            <a href="{{ route('login.provider','facebook') }}" class="btn btn-outline-primary">Facebook</a>
                            <a href="{{ route('login.provider','google') }}" class="btn btn-outline-danger">Google</a>
                            <a href="{{ route('login.provider','github') }}" class="btn btn-outline-secondary">Github</a>
                        </div>--}}
                    </div>


                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCy4vcFfsw0xXmyUFGS2ZVsm8pQVC2Appo&callback=initAutocomplete&libraries=places&v=weekly&signed_in=true" async></script>
    <script>
        let autocomplete;
        let address1Field;
        let address2Field;
        let postalField;
        function initAutocomplete() {
            address1Field = document.querySelector("#business_address");
            address2Field = document.querySelector("#business_address2");
            postalField = document.querySelector("#business_postcode");
            // Create the autocomplete object, restricting the search predictions to
            // addresses in the US and Canada.
            // Uncomment below to enable GOOGLE PLACE AUTOCOMPLETION
            /*autocomplete = new google.maps.places.Autocomplete(address1Field, {
                componentRestrictions: { country: ["nz", "au"] },
                fields: ["address_components", "geometry"],
                types: ["address"],
            });*/
            address1Field.focus();
            // When the user selects an address from the drop-down, populate the
            // address fields in the form.
            autocomplete.addListener("place_changed", fillInAddress);
        }

        function fillInAddress() {
            // Get the place details from the autocomplete object.
            const place = autocomplete.getPlace();
            let address1 = "";
            let postcode = "";

            // Get each component of the address from the place details,
            // and then fill-in the corresponding field on the form.
            // place.address_components are google.maps.GeocoderAddressComponent objects
            // which are documented at http://goo.gle/3l5i5Mr
            for (const component of place.address_components) {
                const componentType = component.types[0];

                switch (componentType) {
                    case "street_number": {
                        address1 = `${component.long_name} ${address1}`;
                        break;
                    }
                    case "route": {
                        address1 += component.short_name;
                        break;
                    }
                    case "postal_code": {
                        postcode = `${component.long_name}${postcode}`;
                        break;
                    }
                    case "postal_code_suffix": {
                        postcode = `${postcode}-${component.long_name}`;
                        break;
                    }
                    case "locality": {
                        document.querySelector("#business_locality").value = component.long_name;
                        break;
                    }
                    case "administrative_area_level_1": {
                        document.querySelector("#business_state").value = component.short_name;
                        break;
                    }
                    case "country": {
                        document.querySelector("#business_country").value = component.long_name;
                        break;
                    }
                }
            }

            address1Field.value = address1;
            postalField.value = postcode;
            // After filling the form with address components from the Autocomplete
            // prediction, set cursor focus on the second address line to encourage
            // entry of subpremise information such as apartment, unit, or floor number.
            address2Field.focus();
        }

    </script>
@endpush