@extends('layouts.app')

@section('content')

<!-- Content -->
<div class="position-relative">
    <div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
        <div class="authentication-inner py-6">

            <!-- Login -->
            <div class="card p-md-7 p-1">
                <!-- Logo -->
                <div class="app-brand justify-content-center mt-5">
                    <a href="#" class="app-brand-link gap-2">
                        <span class="app-brand-logo demo"><span>
                                <img src="{{asset('assets/img/logo/cafeg-logo.png')}}" width="50px" height="50px" alt="{{asset('img/logo/cafeg-logo.png')}}"> </img>

                            </span>
                        </span>
                        <span class="app-brand-text demo text-heading fw-semibold">
                            &nbsp; &nbsp; <img src="{{asset('assets/img/logo/cafeg-logo-h.png')}}" width="120px" height="50px" alt="{{asset('img/logo/cafeg-logo.png')}}"> </img>

                        </span>
                    </a>
                </div>
                <!-- /Logo -->
                @php
                if(empty($data)){
                $data = Auth::guard('member')->user();
                unset($data['password']);
                }
                @endphp
                <div class="card-body mt-1">
                    <h4 class="mb-1">卡菲姬個人資料</h4>
                    <p class="mb-5">Hi, <span class="text-ifno"> {{$data->name }} 用戶 </span> 歡迎你 ! ,請花幾分鐘完善資料</p>

                    <div class="card" id="editUser">
                        <div class="content">
                            <div class="body p-0">
                                <div class="text-center mb-6">
                                    <h4 class="mb-2">編輯您的資訊</h4>
                                    <p class="mb-6">更新用戶詳細資訊</p>
                                </div>
                                <form id="editUserForm" class="row g-5">
                                    <!-- 暱稱 -->
                                    <div class="col-12">
                                        <div class="form-floating form-floating-outline">
                                            <input readonly type="text" id="modalEditUserFirstName" name="modalEditUserFirstName" class="form-control" value="{{$data->name}}" placeholder="暱稱" aria-label="暱稱" />
                                            <label for="modalEditUserFirstName">暱稱</label>
                                        </div>
                                    </div>

                                    <!-- Email -->
                                    <div class="col-12">
                                        <div class="form-floating form-floating-outline">
                                            <input type="email" id="formValidationEmail" class="form-control" placeholder="john.doe@example.com" aria-label="Email" required value="{{$data->email ?? ''}}" />
                                            <label for="formValidationEmail">Email</label>
                                            <div class="invalid-feedback">請輸入有效的 Email</div>
                                        </div>
                                    </div>

                                    <!-- 密碼 -->
                                    <div class="col-12">
                                        <div class="form-password-toggle">
                                            <div class="input-group input-group-merge">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="password" id="basic-default-password" class="form-control" placeholder="密碼" aria-label="密碼" value="{{$data->password ?? ''}}" />
                                                    <label for="basic-default-password">密碼</label>
                                                    <div class="invalid-feedback">請輸入有效密碼</div>

                                                </div>
                                                <span class="input-group-text cursor-pointer" id="basic-default-password3">
                                                    <i class="ri-eye-off-line"></i>
                                                </span>
                                            </div>
                                        </div>

                                    </div>

                                    <!-- 確認密碼 -->
                                    <div class="col-12">
                                        <div class="form-password-toggle">
                                            <div class="input-group input-group-merge">
                                                <div class="form-floating form-floating-outline">
                                                    <input type="password" id="formValidationConfirmPass" name="formValidationConfirmPass" class="form-control" placeholder="確認密碼" aria-label="確認密碼" value="{{$data->password ?? ''}}" />
                                                    <label for="formValidationConfirmPass">確認密碼</label>
                                                    <div class="invalid-feedback">密碼與確認密碼不相符</div>

                                                </div>
                                                <span class="input-group-text cursor-pointer" id="multicol-confirm-password2">
                                                    <i class="ri-eye-off-line"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 電話 -->
                                    <div class="col-12">
                                        <div class="input-group input-group-merge">

                                            <div class="form-floating form-floating-outline">
                                                <input type="text" id="modalEditUserPhone" name="modalEditUserPhone" class="form-control phone-number-mask" value="{{$data->phone ?? ''}}" placeholder="0920111222" aria-label="電話" />
                                                <label for="modalEditUserPhone">電話</label>
                                                <div class="invalid-feedback">請輸入有效電話</div>

                                            </div>
                                        </div>

                                    </div>

                                    <!-- 按鈕 -->
                                    <div class="col-12 text-center d-flex flex-wrap justify-content-center gap-4 row-gap-4">
                                        <button type="submit" class="btn btn-primary">送出</button>
                                        <button id='cancel' type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">
                                            取消
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--/ Content -->

<!--/ Layout Content -->


{{-- <div class="buy-now">
    <a href="#" target="" class="btn btn-danger btn-buy-now">Buy Now</a>
  </div> --}}


<!-- Include Scripts -->
<!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
<!-- BEGIN: Vendor JS-->
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/jquery/jquery.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/popper/popper.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/bootstrap.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/node-waves/node-waves.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/hammer/hammer.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/menu.js" />
<script type="module" src="{{asset('assets')}}/vendor/libs/jquery/jquery.js"></script>
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/@form-validation/popular.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/@form-validation/bootstrap5.js" />
{{-- <link rel="modulepreload" href="{{asset('assets')}}/index.js" /> --}}
{{-- <link rel="modulepreload" href="{{asset('assets')}}/auto.js" /> --}}
<script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/popular.js">
</script>
<script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/bootstrap5.js"></script>
<script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/auto-focus.js"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<link rel="modulepreload" href="{{asset('assets')}}/js/main.js" />
<script type="module" src="{{asset('assets')}}/js/main.js"></script>
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
<link rel="modulepreload" href="{{asset('assets')}}/js/pages-auth.js" />
<script type="module" src="{{asset('assets')}}/js/pages-auth.js"></script>
<!-- END: Page JS-->
<script src="{{asset('assets')}}/js/form-validation.js"></script>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {

        $("#formValidationEmail").on('blur', function() {
            var email = $(this).val(); // 獲取電子郵件輸入框的值

            // 簡單的電子郵件格式驗證（可選）
            if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
                Swal.fire({
                    icon: 'error'
                    , title: '格式錯誤'
                    , text: '請輸入有效的電子郵件地址！'
                });
                return;
            }

            // 發送 AJAX 請求到伺服器進行進一步驗證
            $.ajax({
                url: "{{route('member.validemail')}}", // 替換成你的 API 路徑
                type: 'get', // 或 'GET'，根據你的需求
                data: {
                    email: email
                }
                , headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 如果使用 Laravel CSRF 保護
                }
                , success: function(response) {
                    // 如果電子郵件已被註冊
                    if (!response.valid) {
                        Swal.fire({
                            icon: 'warning'
                            , title: '電子郵件已被註冊'
                            , text: '該電子郵件已存在，請選擇下一步操作。'
                            , showCancelButton: true
                            , confirmButtonText: '驗證電子郵件'
                            , cancelButtonText: '我知道了，換一個'
                            , reverseButtons: true // 按鈕排列反向
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // 使用者選擇驗證電子郵件
                                Swal.fire({
                                    icon: 'info'
                                    , title: '驗證發送中'
                                    , text: '已向該電子郵件發送驗證信，請檢查郵箱。'
                                });
                                // 可在此處調用發送驗證郵件的函式
                                sendVerificationEmail(email);
                            } else if (result.dismiss === Swal.DismissReason.cancel) {
                                // 使用者選擇換一個電子郵件
                                $('#formValidationEmail').val(''); // 清空輸入框
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'success'
                            , title: '電子郵件可用'
                            , text: '您可以繼續使用此電子郵件。'
                        });
                    }
                }
                , error: function(xhr) {
                    // 錯誤處理
                    Swal.fire({
                        icon: 'error'
                        , title: '伺服器錯誤'
                        , text: '驗證失敗，請稍後再試！'
                    });
                }
            });
        });
        // 發送驗證郵件的函式
        function sendVerificationEmail(email) {
            console.log('email:', email);
            $.ajax({
                url: "{{route('member.sendemail')}}", // 替換為發送驗證郵件的 API
                type: 'POST'
                , data: {
                    email: email
                }
                , headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
                , success: function(Response) {
                    console.log('Response:', Response);

                    if (Response.status == 'success') {
                        Swal.fire({
                            icon: 'success'
                            , title: '驗證信已發送'
                            , text: '請檢查您的電子郵件以完成驗證。'
                        });
                    }

                }
                , error: function() {
                    Swal.fire({
                        icon: 'error'
                        , title: '驗證信發送失敗'
                        , text: '請稍後再試！'
                    });
                }
            });
        }


        $('#editUserForm').on('submit', function(e) {
            e.preventDefault(); // 防止表單提交

            let valid = true;

            // Email 驗證
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            const emailInput = $('#formValidationEmail');
            if (!emailRegex.test(emailInput.val())) {
                valid = false;
                emailInput.addClass('is-invalid');
            } else {
                emailInput.removeClass('is-invalid');
            }

            // 密碼長度驗證
            const passwordInput = $('#basic-default-password');
            //if (passwordInput.val().length < 6) {
            //  valid = false;
            //passwordInput.addClass('is-invalid');
            //} else {
            //  passwordInput.removeClass('is-invalid');
            //}

            // 確認密碼驗證
            const confirmPasswordInput = $('#formValidationConfirmPass');
            if (passwordInput.val() !== confirmPasswordInput.val()) {
                valid = false;
                confirmPasswordInput.addClass('is-invalid');
            } else {
                confirmPasswordInput.removeClass('is-invalid');
            }

            // 手機號碼驗證
            const phoneRegex = /^09\d{8}$/;
            const phoneInput = $('#modalEditUserPhone');
            if (!phoneRegex.test(phoneInput.val())) {
                valid = false;
                phoneInput.addClass('is-invalid');
            } else {
                phoneInput.removeClass('is-invalid');
            }

            // 若通過所有驗證，發送 AJAX 請求
            if (valid) {
                const formData = {
                    email: emailInput.val()
                    , password: passwordInput.val()
                    , phone: phoneInput.val()
                , };

                $.ajax({
                    url: "{{ route('member.profile.update') }}"
                    , type: 'put'
                    , data: formData
                    , headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                    , success: function(response) {
                        Swal.fire({
                            title: '成功'
                            , text: "{{ session('success') }}"
                            , icon: 'success'
                            , confirmButtonText: '确定'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // 跳轉到 member.index 路由
                                window.location.href = "{{ route('member.index') }}";
                            }
                        });


                    }
                    , error: function(error) {
                        Swal.fire({
                            title: '失敗'
                            , text: "更新失敗"
                            , icon: 'error'
                            , confirmButtonText: '确定'
                        });
                    }
                , });
            }
        });
    });

    $("#cancel").on('click', function() {
        let valid = true;

        // Email 驗證
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const emailInput = $('#formValidationEmail');
        if (!emailRegex.test(emailInput.val())) {
            valid = false;
            emailInput.addClass('is-invalid');
        } else {
            emailInput.removeClass('is-invalid');
        }
        if (valid == true) {
            window.location.href = "{{ route('member.index') }}";
        }

    });

</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


@endsection