@extends('shop::layouts.master')
@push('css')
    <link rel="stylesheet" href="{{bagisto_asset('styles/profile.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/categories-tv.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/cart.css')}}">
    <link rel="stylesheet" href="{{bagisto_asset('styles/delivery.css')}}">
@endpush
@section('page_title')
    {{ __('shop::app.customer.account.profile.edit-profile.page-title') }}
@endsection

@section('content-wrapper')
<!-- BREADCRUMB ======================================================================== -->
<section class="breadcrumb">
        <div class="container">

            <div class="breadcrumb-container">
                <ul class="breadcrumb">
                    <li><a href="#">{{__('shop::app.home.page-title')}}</a></li>
                    <!-- <li><a href="#">{{__('shop::app.layouts.my-account')}}</a></li> -->
                    <li><a href="#" class="current">{{__('shop::app.layouts.profile')}}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- BREADCRUMB end ==================================================================== -->
    <section class="profile-content">
        <div class="container">
            <div class="profile-content-inner">
                <div class="delivery-content-inner-title">
                    <h2 class="delivery-content-inner-title-text">{{__('shop::app.layouts.profile')}}</h2>
                    <div class="horizontal"></div>
                </div>


                <form class="profile-content-inner-wrapper" method="post" action="{{ route('customer.profile.store') }}" @submit.prevent="onSubmit">

                    @csrf


                    <div class="profile-content-inner-mid">
                        <div class="profile-content-inner-mid-title">
                            <h3 class="delivery-content-bottom-title">{{__('shop::app.layouts.my-account')}}</h3>
                        </div>
                        <div class="profile-content-inner-mid-block-wrapper">

                            <div class="profile-content-block">
                                <div class="profile-content-block-inner" :class="[errors.has('first_name') ? 'has-error' : '']">
                                    <span>{{ __('shop::app.customer.account.profile.fname') }}</span>
                                    <input type="text" name="first_name" value="{{ old('first_name') ?? $customer->first_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.fname') }}&quot;">
                                    <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
                                </div>
                            </div>


                            <div class="profile-content-block">
                                <div class="profile-content-block-inner" :class="[errors.has('last_name') ? 'has-error' : '']">
                                    <span>{{ __('shop::app.customer.account.profile.lname') }}</span>
                                    <input type="text"  name="last_name" value="{{ old('last_name') ?? $customer->last_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.lname') }}&quot;">
                                    <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
                                </div>
                            </div>

                            <div class="profile-content-block">
                                <div class="profile-content-block-inner" :class="[errors.has('phone') ? 'has-error' : '']">
                                    <span>{{ __('shop::app.customer.account.profile.phone') }} </span>
                                    <input type="text"  name="phone" value="{{ old('phone') ?? $customer->phone }}" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.phone') }}&quot;">
                                    <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="profile-content-inner-mid">
                        <div class="profile-content-inner-mid-block-wrapper">

                            <div class="profile-content-block gender">

                              <select name="gender" id="gender-hidden">
                                <option value="Male" @if ($customer->gender == "Male") selected @endif></option>
                                <option value="Female" @if ($customer->gender == "Female") selected @endif></option>
                              </select>

                              <label for="gender">{{ __('shop::app.customer.account.profile.gender') }}</label>
                              <input type="text" readonly id="gender" value='@if ($customer->gender == "Male") erkek  @else zenan @endif'>
                              <ul class="gender-dropdown">
                                <li data-value="Male" >{{ __('shop::app.customer.account.profile.male') }}</li>
                                <li data-value="Female">{{ __('shop::app.customer.account.profile.female') }}</li>
                              </ul>

                            </div>

                            <div class="profile-content-block">
                                <div class="profile-content-block-inner" :class="[errors.has('date_of_birth') ? 'has-error' : '']">
                                    <span>{{ __('shop::app.customer.account.profile.dob') }}</span>
                                    <input type="date"  class="hidden-shown" name="date_of_birth" value="{{ old('date_of_birth') ?? $customer->date_of_birth }}"
                                           v-validate="" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.dob') }}&quot;">

                                    <span class="control-error" v-if="errors.has('date_of_birth')">@{{ errors.first('date_of_birth') }}</span>
                                </div>
                            </div>

                            <div class="profile-content-block">
                                <div class="profile-content-block-inner" :class="[errors.has('email') ? 'has-error' : '']">
                                    <span>{{ __('shop::app.customer.account.profile.email') }}</span>
                                    <input type="email" class="control" name="email" value="{{ old('email') ?? $customer->email }}"
                                           v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.email') }}&quot;">
                                    <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="profile-content-inner-mid">
                        <div class="profile-content-inner-mid-block-wrapper">
                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.profile.opassword') }}</span>
                                    <input type="password" maxlength="50" class="hidden-shown" name="oldpassword"  ref="oldpassword" v-validate=" this.password ? 'required' : '' ">
                                    <button type="button" class="password-show">
                                        <img src="{{bagisto_asset('icons/view.svg')}}" alt="view">
                                    </button>
                                    <span class="control-error" v-if="errors.has('oldpassword')">@{{ errors.first('oldpassword') }}</span>

                                </div>
                            </div>

                            <div class="profile-content-block">
                                <div class="profile-content-block-inner">
                                    <span>{{ __('shop::app.customer.account.profile.password') }}</span>
                                    <input type="password" maxlength="50" class="hidden-shown" name="password" ref="password" v-validate=" this.oldpassword ? 'required' : '' ">
                                    <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>

                                </div>
                            </div>

                        </div>

                    </div>


                    <div class="profile-content-inner-bottom-second" style="padding-bottom: 10rem;">
                        <div>
                            <input class="checkout-button save-button" type="submit" value="{{ __('shop::app.customer.account.profile.submit') }}">
                        </div>

                    </div>
                </form>



            </div>
        </div>
    </section>
@endsection

@push("scripts")
<script>
    $(document).ready(function(){
            const genInput = document.querySelector('#gender');
            const genDrop = document.querySelector('.gender-dropdown');


            genInput.addEventListener('click', () => {
                genDrop.classList.toggle('active');
            });

            genDrop.addEventListener('click', (e) => {
                if (!e.target.contains(genInput)) {
                    genDrop.classList.remove('active');
                }
            });

            // genDrop.childNodes.forEach((el) => {
            //     el.addEventListener('click', (e) => {
            //         genInput.value = e.target.getAttribute('value');
            //         // genInput.value = e.target.getAttribute('value');
            //         // console.log(e.target.getAttribute('value'));
            //     });
            // });

            const genSelect = document.querySelector('#gender-hidden');
            genDrop.childNodes.forEach((el) => {
                el.addEventListener('click', (e) => {
                    genInput.value = e.target.innerText;
                    genSelect.value = e.target.getAttribute('data-value');
                });
            });



    });


</script>
@endpush