@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="register-pg">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-wrapper">
                            <form method="post" action="{{route('user.doRegister')}}" class="register_form">
                                <div class="heading text-center mb-5">
                                    <h4 class="h4">{{__('main.sign_up_new_account')}}</h4>
                                    <p class="another-register">{{__('main.have_account')}} <a href="{{route('user.login')}}">{{__('main.sign_in')}}</a></p>
                                    <img src="{{asset('assets/web/images/icon.svg')}}" alt="" class="logo">
                                </div>
                                <div class="form-group">
                                    <input name="name" type="text" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.name')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="email" type="email" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.email')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="phone" type="tel" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.phone')}}</label>
                                    <span class="text-danger">Example: 531111111</span>
                                </div>
                                <div class="form-group">
                                    <input name="birth_date" class="datepicker form-control" data-date-format="yyyy-mm-dd" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.birth_date')}}</label>
                                </div>
                                <div class="form-group">
                                    <input name="password" type="password" class="form-control" id="password" autocomplete="off" autofocus required />
                                    <label class="floating-label"> {{__('members.password')}} </label>
                                    <span class="togglePassword"><i class="far fa-eye" id="togglePassword"></i></span>
                                </div>
                                <div class="form-group">
                                    <input name="password_confirmation" type="password" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label"> {{__('members.retype_password')}} </label>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="country_id" class="form-control" autocomplete="off" autofocus required>
                                                <option value="">{{__('members.country_id')}}</option>
                                                @if(count($countries))
                                                    @foreach($countries as $country)
                                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <label class="floating-label"> {{__('members.country_id')}}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="state_id" class="form-control" autocomplete="off" autofocus required></select>
                                            <label class="floating-label"> {{__('members.city')}} </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input name="address" class="form-control" autocomplete="off" autofocus required />
                                    <label class="floating-label">{{__('members.address')}}</label>
                                </div>
                                <button class="submit-btn register_button">{{__('main.sign_up')}}</button>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="{{asset('assets/web/images/register.svg')}}" alt="" class="register-img center-vr">
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/web/js/users.register.js') }}"></script>
    <script>
        let getStateRoute = "{{route('user.getState')}}";
    </script>
    <script>

        $('select[name="country_id"]').change(async function (e) {
            let data = {country_id: $(this).val()},
                url = getStateRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.states){
                let states = $('select[name="state_id"]');
                states.html('');
                for(let i = 0; i < response.states.length; i++){
                    states.append(`<option value="`+response.states[i].id+`">`+response.states[i].name+`</option>`)
                }
            }
        });
    </script>
@endsection
