@extends('layouts.lookatme')

@section('title', trans('message.my_profile'))
@section('content')
    <div class="tw-mt-6 tw-px-8 md:tw-px-12 lg:tw-px-20 tw-flex tw-flex-col md:tw-flex-row">
        <aside class="tw-flex tw-flex-col tw-items-center tw-w-full md:tw-w-1/3 tw-mr-4">
            @include('templates.lookatme.my_account._sidebar-nav')
        </aside>
        <section class="tw-w-full tw-mt-8 md:tw-mt-0">
            <div class="tw-flex tw-items-center tw-justify-between">
                <h2 class="tw-border-0 tw-border-l-4 tw-border-solid tw-pl-4 tw-font-bold">
                    {{ trans('message.my_profile') }}
                </h2>
            </div>
            <hr>
            @include('templates.lookatme.components.alert')

            @if($errors->any())
                @foreach($errors->all() as $error)
                    <div class="alert alert-danger">
                        {{ $error }}
                    </div>
                @endforeach
            @endif

            <div class="tw-flex tw-items-center tw-justify-between tw-mt-12 tw-flex-col">
                <div class="tw-w-3/4 tw-mx-auto">
                    <form action="{{ route('update-profile') }}" method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}


                        <div class="tw-grid tw-items-center tw-grid-cols-12 tw-gap-6">

                            <div class="tw-col-span-8 tw-col-start-4">
                                <div class="tw-relative tw-w-[125px] tw-h-[125px] tw-overflow-hidden">
                                    <div class="tw-w-full tw-h-full tw-bg-no-repeat tw-bg-cover tw-bg-center tw-rounded-full"
                                         style="background-image: url('{{ auth()->user()->picture_url }}')">
                                    </div>
                                    <input type="file" name="image"
                                           class="tw-w-full tw-h-full tw-z-30
                                                  tw-rounded-full tw-cursor-pointer tw-opacity-0
                                                  tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0"
                                           id="image">
                                    <div class="tw-rounded-b-full tw-bg-gray-300 tw-opacity-50
                                                tw-flex tw-justify-center tw-items-center
                                                tw-w-[125px] tw-z-10
                                                tw-absolute tw-top-1/2 tw-right-0 tw-bottom-0 tw-left-0">
                                        <i class="icon-camera tw-text-dark"></i>
                                    </div>
                                </div>
                            </div>

                            @include('templates.lookatme.components.input', [
                                'label' => 'Name',
                                'type' => 'text',
                                'name' => 'name',
                                'value' => $customer_info->name,
                                'text' => trans('message.name'),
                                'icon' => 'fa fa-user',
                                'classLabel' => 'tw-col-span-3',
                                'class'=>'tw-col-span-9'
                            ])

                            <label class="tw-col-span-3" for="date_of_birth">{{ trans('message.birth_date') }}</label>

                            <div class="tw-col-span-9">
                                <div class="tw-relative ">
                                    <input class="tw-rounded-r-full tw-rounded-l-full
                                                  tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80
                                                  tw-placeholder-dark-250
                                                  tw-py-3 tw-px-12
                                                  focus:tw-outline-dark
                                                  tw-bg-transparent tw-w-full datepicker"
                                           type="text"
                                           name="date_of_birth"
                                           value="{{ \Carbon\Carbon::parse($customer_info->date_of_birth)->format('d/m/Y') }}"
                                           @if(!is_null($customer_info->date_of_birth))
                                           disabled
                                           @endif
                                           id="date_of_birth"
                                           placeholder="{{ trans('message.birth_date') }}">
                                    <i class="fa fa-calendar tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                </div>

                            </div>

                            <label class="tw-col-span-3" for="gender">
                                Gender
                            </label>

                            <div class="tw-relative tw-col-span-9">
                                <select name="gender"
                                        class="select2"
                                        data-icon="icon-users2"
                                        id="gender">
                                    <option @if($customer_info->gender == 'M')
                                            selected="selected"
                                            @endif value="M">M
                                    </option>
                                    <option @if($customer_info->gender == 'F')
                                            selected="selected"
                                            @endif
                                            value="F">F
                                    </option>
                                </select>
                            </div>


                            @include('templates.lookatme.components.input', [
                                'label' => 'Email',
                                'type' => 'email',
                                'name' => 'email',
                                'value' => $customer_info->email,
                                'id' => 'email',
                                'text' =>trans('message.email_address'),
                                'icon' => 'fa fa-thin fa-envelope',
                                'classLabel' => 'tw-col-span-3',
                                'class'=>'tw-col-span-9'
                            ])

                            @include('templates.lookatme.components.button', [
                               'type' => 'submit',
                               'text' => 'Update',
                               'class'=>'tw-w-full tw-py-3 btn-dark tw-col-span-9 tw-col-start-4 tw-mt-4'
                           ])
                        </div>
                    </form>
                </div>

                <div class="tw-w-3/4 tw-mx-auto tw-mt-12">
                    <h3>{{ trans('message.change_phone_number') }}</h3>
                    <div id="change-phone-number">
                        <div v-if="step === 1" class="tw-mt-4">
                            <div class="tw-grid tw-grid-cols-12 tw-items-center tw-mb-8">
                                <label class="tw-col-span-3" for="phone">{{ trans('message.phone_number') }}</label>
                                <div class="tw-col-span-9">
                                    <div class="tw-relative">
                                        <input class="tw-rounded-x-full
                                                tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80
                                                tw-placeholder-dark-250
                                                tw-py-3 tw-px-12
                                                focus:tw-outline-dark
                                                tw-bg-transparent tw-w-full"
                                               type="text"
                                               name="phone"
                                               v-model="phone"
                                               id="phone"
                                               placeholder="Phone number">
                                        <i class="icon-phone1 tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                    </div>
                                    <span v-if="errors.phone !== ''" v-text="errors.phone" class="text-danger"></span>
                                </div>

                                <div id="recaptcha-container-forgot"></div>
                                <div class="text-center tw-mt-6 tw-col-span-9 tw-col-start-4">
                                    <button type="button"
                                            @click="sentOTP()"
                                            :disabled="isLoading"
                                            class="btn tw-bg-dark tw-w-full tw-text-white tw-rounded-x-full tw-py-3">
                                        {{ trans('message.next') }}
                                        <i v-if="isLoading" class="spinner-border spinner-border-sm tw-ml-2"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div v-if="step === 2" class="tw-mt-4">
                            <div class="tw-mb-4 tw-grid tw-grid-cols-12 tw-items-center">
                                <label class="tw-col-span-3" for="verify_code">{{trans('message.verify_code')}}</label>
                                <div class="tw-relative tw-col-span-9">
                                    <input class="tw-rounded-x-full
                                                tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80
                                                tw-placeholder-dark-250
                                                tw-py-3 tw-px-12
                                                focus:tw-outline-dark
                                                tw-bg-transparent tw-w-full"
                                           type="text"
                                           name="verify_code"
                                           v-model="verify_code"
                                           value=""
                                           id="verify_code"
                                           placeholder="Verify Code">
                                    <i class="icon-phone1 tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                </div>
                                <div class="tw-mt-4 text-center tw-col-span-9 tw-col-start-4">
                                    <span class="tw-text-lg">@{{ showTime }}</span>
                                </div>
                            </div>
                            <div class="tw-grid tw-grid-cols-12 tw-items-center">
                                <div class="text-center tw-col-span-9 tw-col-start-4">
                                    <button type="button"
                                            @click="verifyCode()"
                                            :disabled="isLoading"
                                            class="btn tw-bg-dark tw-w-full tw-text-white tw-rounded-x-full tw-py-3">
                                        {{ trans('message.verify_code') }}
                                        <i v-if="isLoading" class="spinner-border spinner-border-sm tw-ml-4"></i>
                                    </button>
                                </div>
                                <div class="tw-mt-4 tw-col-span-9 tw-col-start-4" v-if="countTime === 0">
                                    <button type="button"
                                            @click="resendOTP()"
                                            :disabled="isLoading"
                                            class="btn tw-bg-dark tw-w-full tw-text-white tw-rounded-x-full tw-py-3">
                                        {{ trans('message.resend_otp') }}
                                        <i v-if="isLoading" class="spinner-border spinner-border-sm tw-ml-4"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div v-if="step === 3" class="tw-mt-4">
                            <div class="tw-mb-b">
                                <div class="">
                                    <label for="">New Phone</label>
                                    <div class="tw-relative">
                                        <input class="tw-rounded-x-full
                                                    tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80
                                                    tw-placeholder-dark-250
                                                    tw-py-3 tw-px-12
                                                    focus:tw-outline-dark
                                                    tw-bg-transparent tw-w-full"
                                               type="password"
                                               name="password"
                                               v-model="password"
                                               id="password"
                                               placeholder="New Password">
                                        <i class="icon-phone1 tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                    </div>
                                    <span v-if="errors.password" v-text="errors.password" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="text-center tw-mt-6">
                                <button type="button"
                                        @click="changePhoneNumber()"
                                        :disabled="isLoading"
                                        class="btn tw-bg-dark tw-w-full tw-text-white tw-rounded-x-full tw-py-3">
                                    {{ trans('message.save') }}
                                    <i v-if="isLoading" class="spinner-border spinner-border-sm"></i>
                                </button>
                            </div>
                        </div>

                        <div id="forgot-password-recap"></div>
                    </div>
                </div>

                <div class="tw-w-3/4 tw-mx-auto tw-mt-12">
                    <h3>{{ trans('message.change_password') }}</h3>

                    <form action="{{ route('change-password') }}" method="POST">
                        {{ csrf_field() }}
                        <div class="tw-grid tw-items-center tw-grid-cols-12 tw-gap-6 tw-mt-8">
                            @include('templates.lookatme.components.input', [
                                'label' => trans('message.current_password'),
                                'type' => 'password',
                                'name' => 'current_password',
                                'text' => trans('message.current_password'),
                                'icon' => 'icon-lock3',
                                'classLabel' => 'tw-col-span-3',
                                'class'=>'tw-col-span-9'
                            ])

                            @include('templates.lookatme.components.input', [
                               'label' => trans('message.new_password'),
                               'type' => 'password',
                               'name' => 'password',
                               'text' => trans('message.new_password'),
                               'icon' => 'icon-lock3',
                               'classLabel' => 'tw-col-span-3',
                               'class'=>'tw-col-span-9'
                           ])

                            @include('templates.lookatme.components.input', [
                               'label' => trans('message.confirm_password'),
                               'type' => 'password',
                               'name' => 'password_confirmation',
                               'text' => trans('message.confirm_password'),
                               'icon' => 'icon-lock3',
                               'classLabel' => 'tw-col-span-3',
                               'class'=>'tw-col-span-9'
                           ])

                            @include('templates.lookatme.components.button', [
                                'type' => 'submit',
                                'text' => 'Change',
                                'class'=>'tw-w-full tw-col-span-9 tw-py-3 btn-dark tw-col-start-4'
                            ])
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
    <script>
        $("#date_of_birth").datepicker('setEndDate', dayjs().format('DD/MM/YYYY'));

        $(".select2").select({
            selectionClass: 'tw-px-12 tw-py-2',
            selectContainer: 'tw-z-[1]'
        });
        const firebaseConfig = {
            apiKey: "AIzaSyB1vm-8SRB3KTN309LdmvgOvCQKbqLvS9g",
            projectId: "look-at-me-2ff06",
            storageBucket: "look-at-me-2ff06.appspot.com",
            messagingSenderId: "146739072185",
            appId: "1:146739072185:android:1b8a156651b59d5ed6df68",
        };
        firebase.initializeApp(firebaseConfig);
        const appChangePhone = Vue.createApp({
            name: 'appChangePhoneNumber',
            data() {
                return {
                    phone: '',
                    step: 1,
                    verify_code: '',
                    isLoading: false,
                    countTime: 120,
                    errors: {
                        phone: '',
                    },
                    firebase: {
                        recaptchaVerifier: '',
                        confirmationResult: null,
                        firebase_token: '',
                        recapId: ''
                    }
                }
            },
            computed: {
                showTime() {
                    return dayjs(new Date(0, 0, 0, 0, 0, this.countTime)).format('mm:ss');
                }
            },
            mounted() {
                this.phone = '{{ $customer_info->phone }}'.replace('+855', '0');
            },
            methods: {
                checkCustomerExist() {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            method: "GET",
                            url: '{{ route('check.customer.exist') }}',
                            data: {
                                phone: this.phone
                            },
                            success: (res) => {
                                resolve(res);
                            },
                            error: (error) => {
                                reject(error);
                            }
                        });
                    })
                },
                countTimeout() {
                    const timeout = setInterval(() => {
                        this.countTime--;
                        if (this.countTime <= 0) {
                            this.countTime = 0;
                            clearInterval(timeout);
                        }
                    }, 1000);
                },
                sentOTP() {
                    if (this.phone === '') {
                        this.errors.phone = 'Phone is required';
                        return;
                    }
                    this.isLoading = true;
                    this.checkCustomerExist().then(
                        res => {
                            if (!res.success) {
                                this.firebase.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('forgot-password-recap', {
                                    'size': 'invisible',
                                    'callback': () => {
                                    }
                                });
                                this.firebase.recaptchaVerifier.render().then((widgetId) => {
                                    this.firebase.recapId = widgetId;
                                });
                                this.fireBaseSignIn()
                                    .then(
                                        res => {
                                            this.isLoading = false;
                                            this.step = 2;
                                            this.countTimeout();
                                        }
                                    )
                                    .catch(
                                        (error) => {
                                            this.isLoading = false;
                                            this.alertMessage(error.message);
                                        }
                                    );
                            } else {
                                this.alertMessage('{{ trans('message.customer_is_already_existed') }}');
                                this.isLoading = false;
                            }
                        }
                    ).catch(
                        error => {
                            this.isLoading = false;
                            this.alertMessage(error.message);
                        }
                    )
                },
                resendOTP() {
                    this.countTime = 120;
                    this.fireBaseSignIn()
                        .then(
                            res => {
                                this.isLoading = false;
                                this.countTimeout();
                            }
                        )
                        .catch(
                            (error) => {
                                this.isLoading = false;
                                this.alertMessage(error.message);
                            }
                        );
                },
                fireBaseSignIn() {
                    return new Promise((resolve, reject) => {
                        const phone = this.phone.replace(/^0/g, '+855');
                        firebase.auth().signInWithPhoneNumber(phone, this.firebase.recaptchaVerifier)
                                .then(
                                    (confirmationResult) => {
                                        this.firebase.confirmationResult = confirmationResult;
                                        resolve(confirmationResult);
                                    }
                                )
                                .catch(
                                    error => {
                                        this.alertMessage(error.message);
                                        reject(error);
                                    }
                                );
                    });
                },
                verifyCode() {
                    this.isLoading = true;
                    if (this.verify_code === '') {
                        this.alertMessage('Please enter verify code.');
                        this.isLoading = false;
                    }
                    this.firebase.confirmationResult
                        .confirm(this.verify_code)
                        .then(
                            (result) => {
                                firebase.auth().currentUser.getIdToken(true)
                                        .then(
                                            (idToken) => {
                                                this.firebase.firebase_token = idToken;
                                                this.isLoading = false;

                                                $.ajax({
                                                    method: "POST",
                                                    url: '{{ route('change-phone-number') }}',
                                                    data: {
                                                        phone: this.phone,
                                                    },
                                                    success: (res) => {
                                                        if (res.success) {
                                                            this.alertMessage("Phone Change Successfully.");
                                                        } else {
                                                            this.alertMessage(res.message);
                                                        }
                                                        this.step = 1;
                                                        this.countTime = 120;
                                                        this.verify_code = '';
                                                    },
                                                    error: (error) => {
                                                        this.alertMessage(error.message);
                                                    }
                                                })
                                            }
                                        )
                                        .catch((error) => {
                                            this.alertMessage(error.message);
                                            this.isLoading = false;
                                        });
                            })
                        .catch((error) => {
                            if (error.code === 'auth/invalid-verification-code') {
                                this.alertMessage('Invalid verify code');
                            } else if (error.code === 'auth/code-expired') {
                                this.alertMessage(error.message).then(
                                    () => {
                                        this.countTime = 0;
                                    }
                                )
                            } else
                                this.alertMessage(error.message);
                            this.isLoading = false;
                        });
                },
                alertMessage(text) {
                    return SweetAlert({
                        text: text,
                        position: 'center',
                        type: 'none',
                        confirmButtonText: 'Ok',
                        customClass: {
                            htmlContainer: 'tw-flex tw-justify-start',
                            confirmButton: 'btn-dark focus:tw-shadow-none',
                            cancelButton: 'tw-border-2',
                            popup: 'tw-w-[22em]',
                            actions: 'tw-w-full tw-justify-end tw-px-4',
                        },
                    });
                }
            }
        }).mount('#change-phone-number');
    </script>

@endsection