@extends('shop::customers.account.index')

@section('page_title')
    {{ __('shop::app.customer.account.profile.index.title') }}
@endsection

@section('page-detail-wrapper')
    <customer-profile-edit-compoment></customer-profile-edit-compoment>
@endsection

@push('scripts')
    <script type="text/x-template" id="customer-profile-edit-compoment-template">
        <div>
            <div class="col-12 d-inline-block">
                <span class="lead font-weight-normal">
                    {{ __('shop::app.customer.account.profile.index.title') }}
                </span>
                <button
                    @click="onSubmit(form)"
                    type="submit"
                    class="btn btn-outline-primary pull-right">
                    {{ __('velocity::app.shop.general.update') }}
                </button>
            </div>

            <div class="col-12 mt-2 mb-2 border border-top-0 border-basic"></div>

            <div class="col-12">
                <form
                    id="ctm-edit-profile-form"
                    method="POST"
                    action="{{ route('customer.profile.edit') }}">

                    @csrf
                    <div class="form-row">
                        <div :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'name') ? 'has-error' : ''}`">
                            <label>
                                {{ __('shop::app.customer.account.profile.name') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.name"
                                v-on:input="isValid(form, 'name')"
                                @change="isValid(form, 'name')"
                                name="name"
                                type="text"/>
                            <span class="text-danger"
                                  v-if="hasError(form, 'name')">@{{ getErrorMessage(form, 'name') }}</span>
                        </div>
                        <div
                            :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'phone') ? 'has-error' : ''}`">
                            <label>
                                {{ __('shop::app.customer.account.profile.phone') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.phone"
                                v-on:input="isValid(form, 'phone')"
                                @change="isValid(form, 'phone')"
                                name="phone"
                                type="text"/>
                            <span class="text-danger" v-if="hasError(form, 'phone')">@{{ getErrorMessage(form, 'phone') }}</span>
                        </div>
                    </div>
                    <div class="form-row">
                        <div
                            :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'email') ? 'has-error' : ''}`">
                            <label>
                                {{ __('shop::app.customer.account.profile.email') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.email"
                                v-on:input="isValid(form, 'email')"
                                @change="isValid(form, 'email')"
                                name="email"
                                type="text"/>
                            <span class="text-danger" v-if="hasError(form, 'email')">@{{ getErrorMessage(form,'email') }}</span>
                        </div>
                    </div>

                    <h6 class="mt-4">
                        Change Password
                        <info-popover-component
                            body="Change password is optional (leave blank all the fields unless you don't want to change password)"
                        ></info-popover-component>
                    </h6>
                    <div class="col-12 mt-2 mb-2 border border-top-0 border-basic"></div>

                    <div class="form-row">
                        <div :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'oldpassword') ? 'has-error' : ''}`">
                            <label>
                                {{ __('velocity::app.shop.general.enter-current-password') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.oldpassword"
                                v-on:input="isValid(form, 'oldpassword')"
                                @change="isValid(form, 'oldpassword')"
                                name="oldpassword" type="password" />
                            <span class="text-danger" v-if="hasError(form, 'oldpassword')">@{{ getErrorMessage(form,'oldpassword') }}</span>
                        </div>
                        <div :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'password') ? 'has-error' : ''}`">
                            <label>
                                {{ __('velocity::app.shop.general.new-password') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.password"
                                v-on:input="isValid(form, 'password')"
                                @change="isValid(form, 'password')"
                                name="password"
                                type="password"/>

                            <span class="text-danger" v-if="hasError(form, 'password')">@{{ getErrorMessage(form,'password') }}</span>
                        </div>
                    </div>
                    <div class="form-row">
                        <div :class="`col-xs-12 col-sm-12 col-md-6 col-lg-6 ${hasError(form, 'password_confirmation') ? 'has-error' : ''}`">
                            <label>
                                {{ __('velocity::app.shop.general.confirm-new-password') }}<span class="text-danger">*</span>
                            </label>
                            <input
                                class="form-control"
                                v-model="form.password_confirmation"
                                v-on:input="isValid(form, 'password_confirmation')"
                                @change="isValid(form, 'password_confirmation')"
                                name="password_confirmation"
                                type="password"/>
                            <span class="text-danger" v-if="hasError(form, 'password_confirmation')">@{{ getErrorMessage(form,'password_confirmation') }}</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </script>

    <script type="text/javascript">
        (() => {
            Vue.component('customer-profile-edit-compoment', {
                template: '#customer-profile-edit-compoment-template',
                data: function () {
                    return {
                        isMobileDevice: this.$root.isMobile(),
                        form: {
                            name: '{{$customer->name}}',
                            phone: '{{$customer->phone}}',
                            email: '{{$customer->email}}',
                            oldpassword: null,
                            password: null,
                            password_confirmation: null,
                            rules: {
                                name: {
                                    required: {
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                }, phone: {
                                    required: {
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                    pattern: {
                                        is_invalid: false,
                                        message: 'Enter 10 digit mobile number, without prefixing 0 or +91',
                                        regex: '^[0-9]{10}$'
                                    }
                                }, email: {
                                    required: {
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                    pattern: {
                                        is_invalid: false,
                                        message: 'Invalid Input (Eg.: abc@abc.com)',
                                        regex: this.$root.regex.email
                                    }
                                },oldpassword: {
                                    requiredIf: {
                                        field: 'password',
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                },password: {
                                    requiredIf: {
                                        field: 'oldpassword',
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                },password_confirmation: {
                                    requiredIf: {
                                        field: 'password',
                                        is_invalid: false,
                                        message: 'This field is required'
                                    },
                                    shouldMatch: {
                                        field: 'password',
                                        is_invalid: false,
                                        message: 'Password does not match',
                                    }
                                },
                            }
                        },
                    }
                },
                created: function () {
                },
                methods: {
                    onSubmit: function (obj) {
                        for (const [key, value] of Object.entries(obj)) {
                            if (key !== 'rules') {
                                this.$root.isValid(obj, key);
                            }
                        }
                        this.$root.doValidateForm(obj).then(res => {
                            if (res.status) {
                                $('#ctm-edit-profile-form').submit();
                            }
                        });
                    },
                }
            });
        })()
    </script>
@endpush