@extends('layouts.index')

@section('content')

    <div class="  mt-3">
        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.myAccount') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.personalDetails') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)

        <div class="container mb-5 ">
            <div class="row delivery-information">
                <div class="col-lg-3 col-12">
                    @include('auth.account-menu',['activePage'=>'profile','route'=>'profile'])
                </div>
                <div class="col-lg-9  col-12">
                    @include('includes.errors')

                    <div class="card px-3   border-raduis-btm-0">
                        <div class="card-body ">
                            <div class="py-2">
                                <h5 class="card-title text_1 font-20 fb-700 mb-2">{{ __('lang.editYourProfile') }}</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card px-3 client-auth-card  border-raduis-top-0">
                        <div class="card-body ">
                            @if(session()->get('customer')->email_verified == '0')
                            <div class="alert alert-info">

                                <p>{{ __('lang.emailNoVerified') }}</p>
                                <form class="" action="{{route('customerUpdate')}}" method="POST" autocomplete="off">
                                    @csrf
                                    <input type="hidden" name="accountId" value="{{env('accountId')}}" >
                                    <input type="hidden" name="accounts_country_code"  value="{{session()->get('customer')->customers_country_code ? session()->get('customer')->customers_country_code :  $account->accounts_country_code}}" >
                                    <input type="hidden" name="customers_name"  value="{{session()->get('customer')->customers_name ? session()->get('customer')->customers_name :  ''}}" >
                                    <input type="hidden" name="customers_email"  value="{{session()->get('customer')->customers_email ? session()->get('customer')->customers_email :  ''}}" >
                                    <input type="hidden" name="customers_phone"  value="{{session()->get('customer')->customers_phone ? session()->get('customer')->customers_phone :  ''}}" >
                                    <input type="hidden" name="send_verification_code"  value="1" >
                                    <input type="hidden" name="accounts_country_mobile_digits_count" value="{{$account->accounts_country_mobile_digits_count ? $account->accounts_country_mobile_digits_count  : 10}}" >
                                    <button type="submit"  class="btn text_2 background_3">{{__('lang.send_verification_code')}}</button>
                                </form>

                            </div>
                            @endif
                            <form class="" action="{{route('customerUpdate')}}" method="POST" autocomplete="off" id="profileForm">
                                @csrf
                                <input type="hidden" name="accountId" value="{{env('accountId')}}" >
                                <input type="hidden" name="accounts_country_mobile_digits_count" value="{{$account->accounts_country_mobile_digits_count ? $account->accounts_country_mobile_digits_count  : 10}}" >
                                <input type="hidden" name="accounts_country_code"  value="{{session()->get('customer')->customers_country_code ? session()->get('customer')->customers_country_code :  $account->accounts_country_code}}" >
                                <div class="row align-items-end  ">

                                    <div class="col-md-6 mb-4">
                                        <label for="customers_name" class="form-label text_1 fb-700 font-18">{{__('lang.name')}}</label>
                                        {{-- @if (isset($errors) && $errors->first('customers_name'))
                                        <div class="invalid-feedback d-inline">{{ $errors->first('customers_name') }}</div>
                                        @endif --}}
                                        <input type="text" class="form-control " value="{{old('customers_name',session()->get('customer')->customers_name)}}" id="customers_name" name="customers_name"  placeholder="{{__('lang.name')}}">

                                    </div>

                                    <div class="col-md-6 mb-4">
                                        <label for="customers_email" class="form-label text_1 fb-700 font-18">{{__('lang.email')}}</label>
                                        {{-- @if (isset($errors) && $errors->first('customers_email'))
                                        <div class="invalid-feedback d-inline">{{ $errors->first('customers_email') }}</div>
                                        @endif --}}
                                        @if( $account->accounts_auth_type == 'email')
                                            <div class="input-group  " dir="ltr" id="mobile-dev">
                                                <input type="email" class="form-control" value="{{old('customers_email',session()->get('customer')->customers_email)}}" name="customers_email" id="customers_email"  placeholder="{{__('lang.email')}}" autocomplete="off"  dir="ltr" disabled>
                                                <input type="hidden" name="customers_email" value="{{old('customers_email', session()->get('customer')->customers_email  )}}">
                                                <div class="input-group-prepend ltr">
                                                    <div class="input-group-text ltr br-r main-btn background_3 text_2">
                                                        <a aria-label="" class="text_2" href="{{ route('changeEmail') }}">{{ __('lang.changeEmail') }}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <input type="email" class="form-control" value="{{old('customers_email',session()->get('customer')->customers_email)}}" name="customers_email" id="customers_email"  placeholder="{{__('lang.email')}}" autocomplete="off"  dir="ltr">
                                        @endif

                                    </div>

                                    <div class="col-md-6 mb-4">
                                        <label for="customers_phone" class="form-label text_1 fb-700 font-18">{{__('lang.phone')}}</label>
                                        {{-- @if (isset($errors) && $errors->first('customers_phone'))
                                        <div class="invalid-feedback d-inline">{{ $errors->first('customers_phone') }}</div>
                                        @endif --}}
                                        <div class="input-group  " dir="ltr" id="mobile-dev">
                                            <div class="input-group-prepend ltr">
                                                <div class="input-group-text ltr br-l">
                                                    <i class="fas fa-phone-alt"></i>
                                                    {{session()->get('customer')->customers_country_code ? session()->get('customer')->customers_country_code :  $account->accounts_country_code}}
                                                </div>
                                            </div>
                                            <!-- <input type="text" class="form-control ltrInput" value="{{old('customers_phone',str_replace($account->accounts_country_code, '',session()->get('customer')->customers_phone) )}}" name="customers_phone"  id="customers_phone"  placeholder="{{__('lang.phone')}}"> -->

                                            @if( $account->accounts_auth_type == 'phone')
                                                <input type="text" class="form-control ltrInput" value="{{old('customers_phone', session()->get('customer')->customers_phone  )}}" name="customers_phone"  id="customers_phone"  placeholder="{{__('lang.phone')}}" disabled>
                                                <input type="hidden" name="customers_phone" value="{{old('customers_phone', session()->get('customer')->customers_phone  )}}">
                                                <div class="input-group-prepend ltr">
                                                    <div class="input-group-text br-l ltr main-btn background_3 text_2">
                                                    <a aria-label="" class="text_2" href="{{ route('changePhone') }}">{{ __('lang.changePhone') }}</a>
                                                    </div>
                                                </div>
                                            @else
                                                <input type="text" class="form-control ltrInput" value="{{old('customers_phone', session()->get('customer')->customers_phone  )}}" name="customers_phone"  id="customers_phone"  placeholder="{{__('lang.phone')}}" >
                                            @endif

                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-4">
                                        <label for="customers_birthday" class="form-label text_1 fb-700 font-18">{{__('lang.birthday')}}</label>
                                        {{-- @if (isset($errors) && $errors->first('customers_birthday'))
                                        <div class="invalid-feedback d-inline">{{ $errors->first('customers_birthday') }}</div>
                                        @endif --}}
                                        <input type="date" class="form-control " value="{{old('customers_birthday',session()->get('customer')->customers_birthday)}}" name="customers_birthday"  id="customers_birthday"  placeholder="{{__('lang.birthday')}}">

                                    </div>

                                    <div class="col-md-6 mb-4">
                                        <label for="customers_gender" class="form-label text_1 fb-700 font-18">{{__('lang.gender')}}</label>
                                        <select name="customers_gender" id="customers_gender" class="form-control" placeholder="{{ __('lang.gender') }}" >
                                            <option> {{__('lang.gender')}}</option>
                                            <option value="male" {{session()->get('customer')->customers_gender == 'male' ? 'selected' :''}}> {{__('lang.male')}}</option>
                                            <option value="female" {{session()->get('customer')->customers_gender == 'female' ? 'selected' :''}}> {{__('lang.female')}}</option>
                                        </select>
                                    </div>

                                    <div class="col-md-6    mb-4">
                                        <div class="form-check font-16 ">
                                            {{-- <input class="form-check-input" type="checkbox" value="1" id="receive_promotional_emails" name="receive_promotional_emails"  >
                                            <label class="form-check-label" for="receive_promotional_emails">
                                               <span class="text_3">{{ __('lang.receive_promotional_emails') }}</span>
                                            </label> --}}
                                        </div>
                                    </div>
                                    <div class="col-md-6  mb-4">
                                        <a aria-label="" href="{{ route('updatePassword') }}"  class="font-18 text_1 under-line">{{ __('lang.changePassword') }}</a>
                                    </div>
                                    <div class="col-md-6  text-end mb-4">
                                        {{-- <button type="submit"  class="btn text_2 background_3"> <span class=" mx-4 my">{{__('lang.save')}}</span> </button> --}}
                                        <a aria-label="" class="btn text_2 background_3 " href="javascript:void(0)" onClick="submitProfileForm()"><span class=" mx-4 py-2">{{__('lang.save')}}</span></a>

                                        <div class="modal fade" id="saveProfile" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                                            <div class="modal-dialog modal-dialog-centered">
                                              <div class="modal-content">
                                                <div class="modal-body p-5">
                                                    <div class="row text-center align-items-center justify-content-center">
                                                        <div class="col-12 text-center align-items-center justify-content-center">
                                                            <h3>{{ __('lang.saveChanges?') }}</h3>
                                                        </div>
                                                        <div class="col-12 mt-5 text-center align-items-center justify-content-center">
                                                            <a class="btn background_2 text_1 mx-3 fb-700   " data-bs-dismiss="modal" aria-label="Close"> {{ __('lang.cancel') }}</a>
                                                            <button type="submit"  class="btn text-end main-btn px-5 py-3 mx-3" > {{__('lang.save')}}</button>
                                                        </div>
                                                    </div>

                                                </div>
                                              </div>
                                            </div>
                                        </div>

                                    </div>

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

                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script src="{{ asset('vendors/jquery/dist/jquery.min.js') }}"  crossorigin="anonymous"></script>
<script>


    function validateProfileForm(){
        phone = $('#customers_phone').val() ;
        if(!phoneIsValid(phone)){
            alert("{{ __('lang.enterValidPhone') }}")
            return false;
        }
        var form = document.getElementById('profileForm');
        for(var i=0; i < form.elements.length; i++){
            if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
                alert("{{ __('lang.someRequiredFields') }}");
                return false;
            }
        }
        return true;

    }

    function submitProfileForm(){
        if(validateProfileForm()){
            $('#saveProfile').modal('show')
        }
    }
    function phoneIsValid(phone) {
        digits_count = parseInt("{{$account->accounts_country_mobile_digits_count ? $account->accounts_country_mobile_digits_count -1 : 9}}")
        @if($account->accounts_multiple_countries)
        var mob = "^[1-9]{1}[0-9]{"+digits_count+",}$" ;
        @else
        var mob = "^[1-9]{1}[0-9]{"+digits_count+"}$" ;
        @endif
        phoneRe = new RegExp(mob);
        var digits = phone.replace(/\D/g, "");
        return phoneRe.test(digits);
    }

</script>
@endpush