@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <!-- Start section -->
        <section class="register_pg section pt-4">
            <div class="container">
                <div class="inner mt-5">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="box">
                                <div class="zi-5">
                                    <img src="{{asset($page->image)}}" class="logo mb-4" alt=""/>
                                    <p class="p mb-4 text-white">
                                        {!! $page->description !!}
                                    </p>
                                    <p class="text-white">
                                        {{__('web.have_acc') }} <a href="{{$login_action}}" class="fw-bold text-white ms-2">{{__('web.login') }}</a>
                                    </p>
                                </div>
                                <img src="{{url('')}}/assets/web/images/header_bg_1.svg" class="bg" alt=""/>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <form method="POST" action="{{$action}}" onsubmit="formAction(this)" class="p-4">
                                @CSRF
                                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                                    {{__('web.regist') }}
                                    <img src="{{url('') }}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                                </h2>
                                <div class="form_inner">
                                    <div class="profile-avatar mt-3 mb-4" id="imagePreview" style="background-image: url('{{url('') }}/assets/web/images/avatar-4.png');">
                                        <input type="file" name="photo" class="custom-file-input" id="imageUpload" >
                                        <button><i class="far fa-edit"></i></button>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.name') }} </label>
                                                <input type="text" name="name" class="form-control" placeholder="{{__('web.name') }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.email') }} </label>
                                                <input type="email" name="email" class="form-control" placeholder="test@mail.com" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.phone') }} </label>
                                                <input type="number" name="phone" class="form-control" placeholder="+966-000-000-000" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold">{{__('web.date_of_birth') }}</label>
                                                <input type="date" max="{{date('Y-m-d',strtotime('-18 years'))}}" name="date_of_birth" class="form-control" placeholder="" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold">{{__('web.gender') }}</label>
                                                <select name="gender" class="form-control form-select">
                                                    <option value="male">{{__('web.male') }}</option>
                                                    <option value="female">{{__('web.female') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold">{{__('web.country_id') }}</label>
                                                <select name="country_id" target-id="city_id" onchange="fetchCities(this)" class="form-control form-select">
                                                    <option value="">{{__('web.select') }}</option>
                                                    @foreach($countries as $row)
                                                        <option value="{{$row->id}}">{{$row->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold">{{__('web.city_id') }}</label>
                                                <select name="city_id" id="city_id" class="form-control form-select">
                                                    <option value="">{{__('web.select') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group show_hide_password mb-4">
                                                <label class="label fw-bold"> {{__('web.password') }} </label>
                                                <input type="password" name="password" class="form-control shadow_input" placeholder="****** ">
                                                <i class="show_pass far fa-eye-slash"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group show_hide_password mb-4">
                                                <label class="label fw-bold"> {{__('web.password_confirmation') }} </label>
                                                <input type="password" name="password_confirmation" class="form-control shadow_input" placeholder="****** ">
                                                <i class="show_pass far fa-eye-slash"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" name="condition" required type="checkbox" value="" id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    {{__('web.agree_to') }} <a target="_blank" href="{{route('conditions') }}" class="color-gray2">{{__('web.terms_condition') }}  </a> {{__('web.and') }} <a target="_blank" href="{{route('privacy') }}" class="color-gray2">{{__('web.privacy') }}  </a>
                                                </label>
                                            </div>
                                        </div>
                                    </div>


                                    <button type="submit" class="butn primary_butn mt-5 fs-6">{{__('web.submit') }} </button>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <!-- Start section -->
        @include('web.layouts.newsletter')

    </main>


@section('inject_js')

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                $('#imagePreview').hide();
                $('#imagePreview').fadeIn(650);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageUpload").change(function() {
        readURL(this);
    });
</script>

@endsection

@endsection
