@php
    $memberKnowOptions = [
        '親朋好友' => '◆親朋好友',
        '網路資訊' => '◆網路資訊',
        '報章雜誌' => '◆報章雜誌',
        '看板立牌' => '◆看板立牌',
        '電視媒體' => '◆電視媒體',
        '回客購買' => '◆回客購買',
    ];
@endphp

@extends('index')

@section('content')
    <section>
        <div class="container">
            <ul class="d-flex my-5 color_808080">
                <li>{{__('custom.會員資料')}}</li>
                <li class="px-4">|</li>
                <li>{{__('custom.會員資料設定')}}</li>
            </ul>
            <div class="ProductMenuBox">
                <ul class="d-flex">
                    <li><a class="active" href="/member/member_info">{{__('custom.會員資料設定')}}</a></li>
                    <li><a href="/member/member_cart">{{__('custom.消費紀錄')}}</a></li>
                    <li><a href="/member/member_coupon">{{__('custom.我的優惠券')}}</a></li>
                </ul>
            </div>
            <div class="MemberSettingsBox">
                <h1 class="Title">{{__('custom.會員資料設定')}}</h1>
                <div class="MemberSettingsContent">
                    <div class="AccountMumber">{{__('custom.您的帳號')}} <span class="ms-3 color_77832A">{{Auth::user()->member_account}}</span></div>
                    <div class="Remind">*{{__('custom.為必填項目，請確實填寫資料，謝謝')}}</div>
                    <form class="mt-5" action="/member/member_info/update" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="mb-3">
                                    <label for="name" class="form-label"><span class="color_E10000">*</span> {{__('custom.姓名')}}</label>
                                    <input value="{{$memberData->member_name}}" name="member_name" type="text" class="form-control inputH" id="name" placeholder="{{__('custom.請輸入您的姓名')}}">
                                    @if ($errors->has('member_name'))
                                        <div class="text-danger mt-1">{{ $errors->first('member_name') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="d-flex ms-lg-4 h-100">
                                    <div class="form-check mt-auto ms-auto ms-lg-0 mb-3">
                                        <input class="form-check-input" name="member_sex" value="2" type="radio" id="gender1" {{$memberData->member_sex == 2 ? 'checked' : ''}}>
                                        @if ($errors->has('member_sex'))
                                            <div class="text-danger mt-1">{{ $errors->first('member_sex') }}</div>
                                        @endif
                                        <label class="form-check-label" for="gender1">
                                            {{__('custom.先生')}}
                                        </label>
                                    </div>
                                    <div class="form-check mt-auto mb-3 ms-3">
                                        <input class="form-check-input" name="member_sex" value="1" type="radio" id="gender2" {{$memberData->member_sex == 1 ? 'checked' : ''}}>
                                        @if ($errors->has('member_sex'))
                                            <div class="text-danger mt-1">{{ $errors->first('member_sex') }}</div>
                                        @endif
                                        <label class="form-check-label" for="gender2">
                                            {{__('custom.小姐')}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="mb-3 ms-lg-4">
                                    <label for="Birthday" class="form-label"><span class="color_E10000">*</span> {{__('custom.生日')}}</label>
                                    <input value="{{$memberData->member_birthday}}" name="member_birthday" type="text" class="form-control inputH" id="Birthday" placeholder="yyyy / mm / dd">
                                    @if ($errors->has('member_birthday'))
                                        <div class="text-danger mt-1">{{ $errors->first('member_birthday') }}</div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <div class="mb-3 EmailBox">
                                    <label for="Email" class="form-label"><span class="color_E10000">*</span> {{__('custom.請輸入您的Email')}}</label>
                                    <input value="{{$memberData->member_email}}" name="member_email" type="text" class="form-control inputH" id="Email" placeholder="{{__('custom.如')}}：demo@gmail.com">
{{--                                    <a class="btn_black ms-auto" href="/send_verify_email">{{__('custom.發送驗證信')}}</a>--}}
                                </div>
                            </div>
                            @if ($errors->has('member_email'))
                                <div class="text-danger mt-1">{{ $errors->first('member_email') }}</div>
                            @endif
                            <div class="col-12 mt-4">
                                <div class="mb-3 phoneBox">
                                    <label for="phone" class="form-label"><span class="color_E10000">*</span> {{__('custom.行動電話')}}</label>
                                    <input value="{{$memberData->member_phone}}" name="member_phone" type="text" class="form-control inputH" id="phone" placeholder="{{__('custom.請輸入您的行動電話')}}">
{{--                                    <button id="PhoneCheckBtn" type="button" class="btn_black ms-auto mb-4 mb-lg-0">{{__('custom.發送驗證碼')}}</button>--}}
{{--                                    <input type="text" class="form-control inputH" id="phone_verify_code" placeholder="{{__('custom.請輸入手機驗證碼')}}">--}}
{{--                                    <button id="PhoneSentCAPTCHABtn" type="button" class="btn_black ms-auto">{{__('custom.驗證')}}</button>--}}
                                </div>
                            </div>
                            @if ($errors->has('member_phone'))
                                <div class="text-danger mt-1">{{ $errors->first('member_phone') }}</div>
                            @endif
                            <div class="col-12 mt-4">
                                <div class="row mb-3">
                                    <label for="address" class="form-label"><span class="color_E10000">*</span> {{__('custom.請輸入您的地址')}}</label>
                                    <div id="twzipcode" class="memberAddress"></div>
                                    <!-- <div class="member-address_xs col">
                                    </div> -->
                                    <div class="col-12 mt-3">
                                        <input value="{{$memberData->member_address}}" name="member_address" id="address" type="text" class="form-control inputH" placeholder="{{__('custom.請輸入您的地址')}}">
                                        @if ($errors->has('member_address') || $errors->has('county'))
                                            <div class="text-danger mt-1">{{ $errors->first('member_address') }}</div>
                                        @endif
                                        @if ($errors->has('county'))
                                            <div class="text-danger mt-1">{{ $errors->first('county') }}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <div class="mb-3">
                                    <label for="TeaStruck" class="form-label">{{__('custom.您是如何得知 Tea Struck ?')}}</label>
                                        <select id="TeaStruck" class="form-select inputH" name="member_know">
                                            <option selected>{{__('custom.請選擇')}}</option>
                                            @foreach($memberKnowOptions as $columnValue => $columnTitle)
                                                @if ($memberData->member_know == $columnValue)
                                                    <option value="{{ $columnValue }}" selected>{{ $columnTitle }}</option>
                                                @else
                                                    <option value="{{ $columnValue }}">{{ $columnTitle }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                </div>
                            </div>
                            <div class="col-12 mt-4">
                                <button type="submit" class="btn_black w-100">{{__('custom.更新會員資料')}}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        const isOverseas = '{{ $memberData->member_city ?? '' }}' === '海外地區';

        $('#twzipcode').twzipcode({
            @if(!empty($memberData->member_city))
                @if($memberData->member_city !== '海外地區')
            zipcodeSel: '{{ $memberData->member_postal_code }}',
            countySel: '{{ $memberData->member_city }}',
            districtSel: '{{ $memberData->member_county }}',
            @else
            countySel: '{{ $memberData->member_city }}',
            @endif
                @endif
            onCountySelect: function () {
                const selectedCounty = $("select[name='county']").val();
                const isForeign = selectedCounty === '海外地區';
                $("select[name='county']");
                $("select[name='district']").toggle(!isForeign);
                $("input[name='zipcode']").toggle(!isForeign).attr('disabled', isForeign ? false : true);
            }
        });

        // 初始時隱藏
        if (isOverseas) {
            $("select[name='district']").hide();
            $("input[name='zipcode']").hide();
        }

        @if(session('update_success'))
            Swal.fire({
                icon: 'success',
                html: `會員資料更新成功！`,
                confirmButtonText: '確定',
                allowOutsideClick: false
            });
        @endif

        {{--const phoneCheckButton = document.getElementById('PhoneCheckBtn');--}}
        {{--const phoneSentCAPTCHAButton = document.getElementById('PhoneSentCAPTCHABtn');--}}
        {{--const phoneInput = document.getElementById('phone')--}}
        {{--const phoneVerifyCode = document.getElementById('phone_verify_code');--}}
        {{--let memberPhoneVerify = '{{ Auth::user()->member_phone_verify }}';--}}
        {{--let timeLeft = 0;--}}
        {{--let attemptsRemaining = 3 ; // 驗證碼輸入次數--}}
        {{--let countdown;--}}

        {{--let StatusRetryPhone = function () {--}}
        {{--    phoneInput.setAttribute('readonly', 'readonly');--}}
        {{--    phoneCheckButton.hidden = true;--}}
        {{--    phoneSentCAPTCHAButton.hidden = true;--}}
        {{--    phoneVerifyCode.hidden = true;--}}
        {{--}--}}

        {{--let StatusSentValidateShow = function () {--}}
        {{--    phoneCheckButton.hidden = false;--}}
        {{--    phoneSentCAPTCHAButton.hidden = false;--}}
        {{--    phoneInput.removeAttribute('readonly');--}}
        {{--}--}}

        {{--if (memberPhoneVerify === '1') {--}}
        {{--    StatusRetryPhone();// 如果電話輸入框有值，輸入框disable--}}
        {{--} else {--}}
        {{--    StatusSentValidateShow();// 如果電話輸入框為空值，並顯示「發送驗證碼」按鈕--}}
        {{--}--}}

        {{--let InitTime = function () {--}}
        {{--    nowTime = new Date(); // 現在時間--}}
        {{--    endTime = new Date(); // 結束時間--}}
        {{--    endTime.setMinutes(endTime.getMinutes() + 5); // 加上五分鐘--}}
        {{--    timeLeft = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); // 相差的秒數--}}
        {{--}--}}

        {{--let UpdateCountdown = function () {--}}
        {{--    if (timeLeft <= 0) {--}}
        {{--        clearInterval(countdown);--}}
        {{--        StatusSentValidateShow();--}}
        {{--    } else {--}}
        {{--        let minutes = Math.floor(timeLeft / 60);--}}
        {{--        let seconds = timeLeft % 60;--}}
        {{--        seconds = seconds < 10 ? '0' + seconds : seconds;--}}
        {{--        phoneCheckButton.innerText = `${minutes}:${seconds} 發送驗證碼`;--}}
        {{--    }--}}
        {{--    timeLeft -= 1;--}}
        {{--    localStorage.setItem('timeLeft', timeLeft);// 更新 localStorage 中的剩餘時間--}}
        {{--}--}}

        {{--// 未倒數完畢才繼續倒數--}}
        {{--if (timeLeft > 0) {--}}
        {{--    UpdateCountdown();--}}
        {{--    countdown = setInterval(UpdateCountdown, 1000); // 開始倒數計時--}}
        {{--}--}}

        {{--// 清除剩餘秒數--}}
        {{--let ClearSeconds = () => {--}}
        {{--    clearInterval(countdown);--}}
        {{--    localStorage.removeItem('timeLeft', timeLeft);--}}
        {{--    localStorage.removeItem('endTime');--}}
        {{--}--}}

        {{--// Step1 填寫手機號碼後，post給後端，無使用過此手機號碼，後端發送一組驗證碼至該手機，按鈕換成「發送驗證碼」--}}
        {{--phoneCheckButton.addEventListener('click', function(event) {--}}
        {{--    let formData = new FormData();--}}
        {{--    formData.append('_token', '{!! csrf_token() !!}');--}}
        {{--    formData.append('phone', phoneInput.value); // 添加手機號碼到表單數據--}}
        {{--    event.preventDefault();--}}

        {{--    // 使用 fetch 函數發送 POST 請求--}}
        {{--    fetch('send_verify_phone_message',--}}
        {{--        {--}}
        {{--            method: 'POST',--}}
        {{--            body: formData--}}
        {{--        })--}}
        {{--        .then(response => {--}}
        {{--            if (!response.ok) {--}}
        {{--                // 失敗後執行--}}
        {{--                Swal.fire({--}}
        {{--                    type: "error",--}}
        {{--                    title: "系統發生錯誤",--}}
        {{--                    text: "請重新整理後再試一次，再次出現錯誤請聯繫客服人員協助您解決！",--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}
        {{--            }--}}
        {{--            // 將 JSON 響應解析為 JavaScript 對象--}}
        {{--            return response.json();--}}
        {{--        })--}}
        {{--        .then(data => {--}}
        {{--            // 成功跳窗訊息--}}
        {{--            if(data.send_verify_phone_bool) {--}}
        {{--                Swal.fire({--}}
        {{--                    title: data.title,--}}
        {{--                    type: "success",--}}
        {{--                    html: '<p>' + data.content + '</p>',--}}
        {{--                    confirmButtonText: '確定',--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}
        {{--                // 開始倒數計時--}}
        {{--                InitTime();--}}
        {{--                clearInterval(countdown);--}}
        {{--                localStorage.setItem('timeLeft', timeLeft);--}}
        {{--                localStorage.setItem('endTime', endTime);--}}
        {{--                UpdateCountdown();--}}
        {{--                countdown = setInterval(UpdateCountdown, 1000);--}}
        {{--            } else {--}}
        {{--                Swal.fire({--}}
        {{--                    title: data.title,--}}
        {{--                    type: "error",--}}
        {{--                    html: '<p>' + data.content + '</p>',--}}
        {{--                    confirmButtonText: '確定',--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}
        {{--            }--}}
        {{--        })--}}
        {{--        .catch(error => {--}}
        {{--            console.error('Error:', error);--}}
        {{--        });--}}
        {{--});--}}

        {{--// Step 2 填寫驗證碼後，送出--}}
        {{--phoneSentCAPTCHAButton.addEventListener('click', function(event) {--}}
        {{--    let phoneSentCAPTCHAValue = phoneVerifyCode.value.trim();--}}

        {{--    // 驗證碼不能為空值--}}
        {{--    if (phoneSentCAPTCHAValue === "") {--}}
        {{--        alert('請輸入驗證碼');--}}

        {{--        return;--}}
        {{--    }--}}

        {{--    // 成功後執行--}}
        {{--    let formData = new FormData();--}}
        {{--    formData.append('_token', '{!! csrf_token() !!}');--}}
        {{--    formData.append('phone', phoneInput.value); // 手機號碼--}}
        {{--    formData.append('verifyCode', phoneVerifyCode.value);--}}

        {{--    // 回歸初始狀態--}}
        {{--    const Step2Success = () => {--}}
        {{--        StatusSentValidateShow();--}}
        {{--        ClearSeconds(); // 清除剩餘秒數--}}
        {{--        timeLeft = 0;--}}
        {{--        attemptsRemaining = 3; // 驗證碼初始化--}}
        {{--    }--}}
        {{--    event.preventDefault(); // 避免默認提交--}}
        {{--    fetch('phone_message_verify', {--}}
        {{--        method: 'POST',--}}
        {{--        body: formData--}}
        {{--    })--}}
        {{--        .then(response => {--}}
        {{--            // 檢查響應狀態碼，如果不是 200 OK，拋出一個錯誤--}}
        {{--            if (!response.ok) {--}}
        {{--                // 錯誤跳窗訊息--}}
        {{--                Swal.fire({--}}
        {{--                    type: "error",--}}
        {{--                    title: "錯誤",--}}
        {{--                    text: "請再重新認證！",--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}
        {{--            }--}}
        {{--            return response.json();--}}
        {{--        })--}}
        {{--        .then(data => {--}}
        {{--            // 成功--}}
        {{--            if (data.verify_phone_message_bool) {--}}
        {{--                Swal.fire({--}}
        {{--                    title: data.title,--}}
        {{--                    type: "success",--}}
        {{--                    html: data.html,--}}
        {{--                    confirmButtonText: '確定',--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}

        {{--                StatusRetryPhone();--}}
        {{--            } else {--}}
        {{--                if (data.content == "連結逾期，請前往會員中心進行重新發送驗證信") {--}}
        {{--                    Step2Success();--}}

        {{--                    Swal.fire({--}}
        {{--                        title: data.title,--}}
        {{--                        type: "error",--}}
        {{--                        html: '<p>' + data.content + '</p>',--}}
        {{--                        confirmButtonText: '確定',--}}
        {{--                        allowOutsideClick: false--}}
        {{--                    });--}}

        {{--                    return--}}
        {{--                }--}}

        {{--                // 驗證失敗減掉一次輸入機會--}}
        {{--                attemptsRemaining--; // 每次點擊按鈕，驗證碼剩餘次數減一--}}

        {{--                if (attemptsRemaining <= 0) { // 如果剩餘次數小於等於零--}}
        {{--                    StatusRetryPhone();--}}
        {{--                    var error_message = '您已超過輸入次數限制';--}}
        {{--                } else {--}}
        {{--                    var error_message = `您還可以輸入 ${attemptsRemaining} 次驗證碼`;--}}
        {{--                }--}}

        {{--                Swal.fire({--}}
        {{--                    title: data.title,--}}
        {{--                    type: "error",--}}
        {{--                    html: '<p>' + data.content + '</p>' + '<br><p>' + error_message + '</p>',--}}
        {{--                    confirmButtonText: '確定',--}}
        {{--                    allowOutsideClick: false--}}
        {{--                });--}}
        {{--            }--}}
        {{--        })--}}
        {{--        .catch(error => {--}}
        {{--            console.error('Error:', error);--}}
        {{--        });--}}
        // })
    </script>
@endsection