@extends('frontend.layouts.contentLayoutMaster')

@section('title', '基本資料')
@section('active', 'profile')

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
@endsection

@section('page-styles')
    <style>
        .form-control-position {
            position:static;
            top: 2px;
            right: 0;
            display: block;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            color: rgba(0, 0, 0, 0.4);
        }
    </style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height">
        <div class="col-md-12 col-12">
            <form class="form form-horizontal" action="{{ Route('frontend.profile.update', $user->id) }}" method="POST" id="main_form">
                @csrf
                @method('PATCH')
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label>會員姓名</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="name" name="name" placeholder="會員姓名" type="text" value="{{ old('name', optional($user->profile)->name) }}">
                                        @if ($errors->has('name'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ])
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2 col-12">
                                        <label>手機號碼</label>
                                    </div>
                                    <div class="col-md-6 col-12 form-group">
                                        @if (isset($user->mobile))
                                            {{ $user->mobile }}
                                        @endif

                                        @if ($errors->has('mobile'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('mobile') ])
                                        @endif
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-2">
                                        <label>郵件</label>
                                    </div>
                                    <div class="col-md-6 col-12 mb-1">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="請輸入Email" id="email" name="email" value="{{ old('email', $user->email) }}">
                                            <div class="input-group-append">

                                                <button class="btn btn-outline-danger btn-sm" type="button" id="send_verify_button" onclick="sendVerifyEmail()">驗證</button>
                                                <!-- 計時器 -->
                                                <button class="btn btn-outline-danger btn-sm disabled d-none" disabled type="button" id="loader_timer"></button>
                                                <!-- 已驗證 -->
                                                <div class="form-control-position d-none" id="verified_success">
                                                    <i class='bx bx-check-circle' style="color: #1b9257"></i>
                                                </div>

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

                                <div class="row">
                                    <div class="col-md-2">
                                        <label>性別</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <select class="form-control" id="gender" name="gender">
                                            @foreach ($genders as $key => $value)
                                                <option value="{{ $key }}" {{ $key == old('gender', optional($user->profile)->gender ) ? 'selected' : '' }} >{{ $value }}</option>
                                            @endforeach
                                        </select>

                                        @if ($errors->has('gender'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('gender') ])
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2">
                                        <label>生日</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        @if (isset($user->profile) && $user->profile->birthday)
                                            {{ $user->profile->birthday->format('Y/m/d') }}
                                        @else
                                            <input class="form-control flatpickr2" id="birthday" name="birthday" placeholder="生日" type="text" value="{{  old('birthday', optional($user->profile)->birthday ) }}">
                                        @endif


                                        @if ($errors->has('birthday'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('birthday') ])
                                        @endif
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2">
                                        <label>住址</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div class="city-selector-set d-flex justify-content-start justify-content-xs-between"></div>

                                        @if ($errors->has('county'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('county') ])
                                        @endif
                                        @if ($errors->has('district'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('district') ])
                                        @endif
                                    </div>
                                    <div class="col-md-6 offset-md-2 form-group">
                                        <input class="form-control" id="address" name="address" placeholder="地址" type="text" value="{{ old('address', optional($user->profile)->address ) }}">
                                        @if ($errors->has('address'))
                                            @include('frontend.panels.input-invalid-messages', [ 'messages' => $errors->get('address') ])
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row d-flex justify-content-center">
                                <div class="col-6">
                                    <button class="btn btn-primary" type="button" id="submit_button">更新</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')
<script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
<script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
@endsection

@section('page-scripts')
<script>
    new TwCitySelector({
        el: '.city-selector-set',
        hasZipcode: true,
        hiddenZipcode: true,
        countyValue: '{{ old("county", optional($user->profile)->county ) }}',
        districtValue: '{{ old("district", optional($user->profile)->district ) }}',
        countyFieldName: 'county',
        districtFieldName: 'district',
        zipcodeFieldName: 'zipcode'
    });

    flatpickr("#birthday", {
        enableTime: false,
        dateFormat: "Y/m/d",
        maxDate:'today'
    });

    $('#submit_button').on('click', function(e) {
        let main_form = $('#main_form');

        // 是否有變更生日
        let birthday = $('#birthday');
        if (birthday.length > 0 && birthday.val()) {
            return swal({
                'title':'表單送出後，生日無法再變更',
                'html': `請確認您的生日是否為：${birthday.val()}`,
                'type': 'warning',
                'showCancelButton': true,
                'confirmButtonText': '確認送出',
                'cancelButtonText': '再編輯',
            }).then(function(response) {
                if (response.value === true) {

                    main_form.submit();
                    return false;
                }
            });
        }

        // 表單送出
        main_form.submit();
    });

    const emailVerifyBtn = $('#send_verify_button');
    const loaderTimer = $('#loader_timer');
    const verifiedSuccess = $('#verified_success');

    const isEmptyEmail = '{{ empty($user->email) }}';
    const isEmptyEmailVerifiedAt = '{{ empty($user->email_verified_at) }}';

    // 若 已驗證 直接顯示勾勾
    if (!isEmptyEmail && !isEmptyEmailVerifiedAt) {
        showVerifiedSuccess();
    }

    // 寄送驗證信
    function sendVerifyEmail()
    {
        $.ajax({
            type:"post",
            url: '{{ Route("ajax.frontend.change_email.send_verify_email", $user->id) }}',
            dataType: 'json',
            data:{
                email: $('#email').val(),
            },
            success: function(response) {
                Swal.fire({
                    title: '信件已寄出',
                    html: '請確認郵件',
                    type: 'success',
                });

                // 顯示計時器
                discounterStart();
            },
            error: function (error) {
                alert('err ajax');
                console.log(error);
            }
        });
    }

    function getVerifiedStatus()
    {
        let status = false;
        $.ajax({
            type:"post",
            url: '{{ Route("ajax.frontend.change_email.check_verify_success", $user->id) }}',
            dataType: 'json',
            data:{},
            async: false,
            success: function(response) {
                status = response.status
            },
            error: function (error) {
                alert('取得更新狀態錯誤，重新整理網頁中...');
                console.log(error);
                location.reload();
            }
        });

        return status;
    }

    /**
     * 顯示驗證按鈕
     */
    function showVerifyBtn()
    {
        disableVerifyArea();
        emailVerifyBtn.removeClass('d-none');
    }

    /**
     * 顯示倒數計時
     */
    function showLoader()
    {
        disableVerifyArea();
        loaderTimer.removeClass('d-none');
    }

    /**
     * 顯示成功驗證
     */
    function showVerifiedSuccess()
    {
        disableVerifyArea();
        verifiedSuccess.removeClass('d-none');
    }

    function disableVerifyArea()
    {
        emailVerifyBtn.addClass('d-none');
        loaderTimer.addClass('d-none');
        verifiedSuccess.addClass('d-none');
    }

    function discounterStart()
    {
        // 倒數計時器(s)
        let resendEmailDiscount = 60;

        let timer = setInterval(function() {
            showLoader();

            // 取 email驗證狀態(3 sec/per)
            let verifyStatus = false;
            if (resendEmailDiscount % 5 === 0) {
                verifyStatus = getVerifiedStatus();
                if (verifyStatus) {
                    showVerifiedSuccess();
                    clearInterval(timer);
                    return 0;
                }
            }

            --resendEmailDiscount;

            let timerText = '0:'
            if (resendEmailDiscount < 10) {
                timerText = '0:0'
            }

            loaderTimer.text(timerText + resendEmailDiscount);

            if (resendEmailDiscount < 0) {
                showVerifyBtn();
                clearInterval(timer);
                return 0;
            }
        }, 1000);
    }

</script>
@endsection