@extends('web.layouts.container')

@section('content')
    <section class="register-pg">
        <div class="container">
            <div class="inner">
                <div class="row">
                    <div class="col-md-6">
                        <div class="logo-box">
                            <img src="{{asset('assets/web/images/logo.svg')}}" alt="" class="logo"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-box">
                            <div class="links-top mb-5">
                                <a href="{{route('user.login')}}" class="link ">{{__('members.login')}}</a>
                                <a href="{{route('user.register')}}" class="link active">{{__('members.register')}}</a>
                            </div>
                            <p class="p text-center mt-4 mb-4">{{__('members.register_hint')}} </p>
                            <form method="post" action="{{route('user.doCompleteRegister')}}" class="complete_register_form">
                                <div class="form-group">
                                    <input name="name" class="form-control" type="text" placeholder="{{__('members.name')}}"/>
                                </div>
                                <div class="form-group">
                                    <input name="email" class="form-control" type="text" placeholder="{{__('members.email')}}"/>
                                </div>
                                <div class="form-group">
                                    <select name="city_id" class="form-select form-control" aria-label="Default select example">
                                        <option selected value="">{{__('members.city_id')}}</option>
                                        @if(count($cities))
                                            @foreach($cities as $city)
                                                <option value="{{$city->id}}">{{$city->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select name="gender" class="form-select form-control" aria-label="Default select example">
                                        <option selected value="">{{__('members.gender')}}</option>
                                        <option value="male">{{__('members.male')}}</option>
                                        <option value="female">{{__('members.female')}}</option>
                                    </select>
                                </div>
                                <div class="form-group form-check mt-4">
                                    <input name="agreement" class="form-check-input" type="checkbox" value="1" id="flexCheckDefault">
                                    <label class="form-check-label" for="flexCheckDefault">
                                        {{__('members.agree_to')}} <a target="_blank" href="{{route('termsConditions')}}">{{__('members.term_conditions')}}</a>
                                    </label>
                                </div>
                                <div class="mt-5">
                                    <button class="butn m-auto d-block complete_register_button"><span><b>{{__('members.register')}}</b></span></button>
                                </div>
                                <p class="another_opt text-center mt-4"> {{__('members.already_have_account')}} <a href="{{route('user.login')}}">{{__('members.login')}}</a></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>

        $('.complete_register_button').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', true);
            let form = $('.complete_register_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

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

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.url) {
                window.location.href = response.url;
            }
        });


    </script>

@endsection