<!DOCTYPE html>



<html lang="en" class="dark-style  layout-wide dark  customizer-hide" dir="ltr" data-theme="theme-bordered" data-assets-path="{{ asset('assets') }}/" data-template="vertical-menu-template-bordered" data-style="light">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>卡菲姬APP註冊</title>
    <meta name="description" content="卡菲姬 cafeg 是一個自助咖啡機 " />
    <meta name="keywords" content="smart-cafe-g smart-cafe smart-coffee">
    <!-- laravel CRUD token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Canonical SEO -->
    <!-- Favicon -->

    <link rel="icon" type="image/x-icon" href="../../demo/assets/img/favicon/favicon.ico" />


    <!-- ? PROD Only: Google Tag Manager (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-5J3LMKC');

    </script>
    <!-- End Google Tag Manager -->

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ asset('assets') }}/img/favicon/favicon.ico" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/fonts/remixicon/remixicon.css" />
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/fonts/flag-icons.css" />

    <!-- Menu waves for no-customizer fix -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/node-waves/node-waves.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/rtl/theme-bordered.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="{{ asset('assets') }}/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/typeahead-js/typeahead.css" />
    <!-- Vendor -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/libs/@form-validation/form-validation.css" />

    <!-- Page CSS -->
    <!-- Page -->
    <link rel="stylesheet" href="{{ asset('assets') }}/vendor/css/pages/page-auth.css">

    <!-- Helpers -->
    <script src="{{ asset('assets') }}/vendor/js/helpers.js"></script>
    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    <script src="{{ asset('assets') }}/vendor/js/template-customizer.js"></script>
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="{{ asset('assets') }}/js/config.js"></script>

</head>

<body>


    <!-- ?PROD Only: Google Tag Manager (noscript) (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5J3LMKC" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <!-- 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">

                <!-- Register Card -->
                <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 -->
                    <div class="card-body mt-1">
                        <h4 class="mb-1">由此註冊卡菲姬 APP 🚀</h4>
                        <p class="mb-5">您好 ！客戶 請花幾分鐘註冊</p>

                        <form id="formAuthentication" class="mb-5">
                            @csrf
                            <div class="form-floating form-floating-outline mb-5">
                                <input type="text" class="form-control" id="username" name="name" placeholder="輸入你的稱呼" required>
                                <label for="username">稱 呼</label>
                                <div class="invalid-feedback">請輸入稱呼。</div>
                            </div>
                            <div class="form-floating form-floating-outline mb-5">
                                <input type="email" class="form-control" id="email" name="email" placeholder="輸入你的帳號" required>
                                <label for="email">Email（帳號）</label>
                                <div class="invalid-feedback" id = "checkemail">請輸入有效的 Email 地址。</div>
                            </div>
                            <div class="mb-5 form-password-toggle">
                                <div class="input-group input-group-merge">
                                    <div class="form-floating form-floating-outline">
                                        <input type="password" id="password" class="form-control" name="password" placeholder="輸入密碼" required minlength="6">
                                        <label for="password">密碼</label>
                                        <div class="invalid-feedback">請輸入至少 6 個字符的密碼。</div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-floating form-floating-outline mb-5">
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="輸入您的手機號" required pattern="^[0-9]{10}$">
                                <label for="phone">手機號碼</label>
                                <div class="invalid-feedback" id="checkphone">請輸入有效的 10 位手機號碼。</div>
                            </div>
                            <div class="mb-5">
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" required>
                                    <label class="form-check-label" for="terms-conditions">
                                        我同意
                                        <a href="javascript:void(0);">隱私權政策和條款</a>
                                    </label>
                                    <div class="invalid-feedback">請同意條款。</div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary d-grid w-100">
                                註冊
                            </button>
                        </form>


                        <p class="text-center">
                            <span>已經有帳號?</span>
                            <a href="{{ route('login') }}" class="text-body">
                                <span>由此登入</span>
                            </a>
                        </p>

                        <div class="divider my-5">
                            <div class="divider-text">or</div>
                        </div>

                        <div class="d-flex justify-content-center gap-2">
                            <a href="{{ route('front.login.line') }}" class="btn btn-icon rounded-circle btn-text-facebook">
                                <i class="tf-icons ri-line-fill"></i>
                            </a>


                        </div>
                    </div>
                </div>
                <!-- Register Card -->
                <img alt="mask" src="{{ asset('assets') }}/img/illustrations/auth-basic-register-mask-light.png" class="authentication-image d-none d-lg-block" data-app-light-img="illustrations/auth-basic-register-mask-light.png" data-app-dark-img="illustrations/auth-basic-register-mask-dark.png" />
            </div>
        </div>
    </div>

    <!-- / Content -->

    {{--
  <div class="buy-now">
    <a href="https://1.envato.market/materialize_admin" target="_blank" class="btn btn-danger btn-buy-now">Buy Now</a>
  </div>
   --}}



    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="{{ asset('assets') }}/vendor/libs/jquery/jquery.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/popper/popper.js"></script>
    <script src="{{ asset('assets') }}/vendor/js/bootstrap.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/node-waves/node-waves.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/hammer/hammer.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/i18n/i18n.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/typeahead-js/typeahead.js"></script>
    <script src="{{ asset('assets') }}/vendor/js/menu.js"></script>

    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{{ asset('assets') }}/vendor/libs/@form-validation/popular.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/@form-validation/bootstrap5.js"></script>
    <script src="{{ asset('assets') }}/vendor/libs/@form-validation/auto-focus.js"></script>

    <!-- Main JS -->
    <script src="{{ asset('assets') }}/js/main.js"></script>


    <!-- Page JS -->

</body>

</html>



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

<!-- beautify ignore:end -->


<script>
    $(document).ready(function() {
        // 驗證欄位的函數
        function validateField(field) {
            const id = field.attr('id');
            const value = field.val().trim();
            let isValid = true;
            let errorMsg = '';

            // 根據欄位 ID 驗證
            switch (id) {
                case 'username':
                    if (!value) {
                        isValid = false;
                        errorMsg = '請輸入稱呼。';
                    }
                    break;
                case 'email':
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailPattern.test(value)) {
                        isValid = false;
                        errorMsg = '請輸入有效的 Email 地址。';
                    }
                    break;
                case 'password':
                    if (value.length < 6) {
                        isValid = false;
                        errorMsg = '密碼至少需要 6 個字符。';
                    }
                    break;
                case 'phone':
                    const phonePattern = /^[0-9]{10}$/;
                    if (!phonePattern.test(value)) {
                        isValid = false;
                        errorMsg = '請輸入有效的 10 位手機號碼。';
                    }
                    break;
            }

            // 顯示或隱藏錯誤訊息
            if (isValid) {
                field.removeClass('is-invalid');
                field.next('.invalid-feedback').hide();
            } else {
                field.addClass('is-invalid');
                field.next('.invalid-feedback').text(errorMsg).show();
            }

            return isValid;
        }

        // 手機號碼驗證，包含資料庫檢查
        function validatePhoneField(field) {
            const value = field.val().trim();
            const phonePattern = /^[0-9]{10}$/;

            // 驗證格式
            if (!phonePattern.test(value)) {
                field.addClass('is-invalid');
                $("#checkphone").text('請輸入有效的 10 位手機號碼。').show();
                return Promise.resolve(false);
            }

            // 檢查手機號是否已被註冊
            return new Promise((resolve) => {
                $.ajax({
                    url: "{{ route('member.checkphone') }}",
                    method: 'GET',
                    data: {
                        phone: value
                    },
                    success: function(response) {
                        if (response.status === 'error') {
                            field.addClass('is-invalid');
                            $("#checkphone").text(response.msg).show(); // 顯示伺服器返回的錯誤訊息
                            resolve(false);
                        } else {
                            field.removeClass('is-invalid');
                            $("#checkphone").hide(); // 隱藏錯誤訊息
                            resolve(true);
                        }
                    },
                    error: function() {
                        field.addClass('is-invalid');
                        $("#checkphone").text('檢查手機號時發生錯誤，請稍後再試。').show();
                        resolve(false);
                    }
                });
            });
        }
        function validateEmailField(field) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            const value = field.val().trim();

            // 驗證格式
            if (!emailPattern.test(value)) {
                field.addClass('is-invalid');
                $("#checkphone").text('請輸入有效的 10 位手機號碼。').show();
                return Promise.resolve(false);
            }

            // 檢查手機號是否已被註冊
            return new Promise((resolve) => {
                $.ajax({
                    url: "{{ route('member.checkemail') }}",
                    method: 'GET',
                    data: {
                        email: value
                    },
                    success: function(response) {
                        if (response.status === 'error') {
                            field.addClass('is-invalid');
                            $("#checkemail").text(response.msg).show(); // 顯示伺服器返回的錯誤訊息
                            resolve(false);
                        } else {
                            field.removeClass('is-invalid');
                            $("#checkemail").hide(); // 隱藏錯誤訊息
                            resolve(true);
                        }
                    },
                    error: function() {
                        field.addClass('is-invalid');
                        $("#checkphone").text('檢查手機號時發生錯誤，請稍後再試。').show();
                        resolve(false);
                    }
                });
            });
        }

        // 綁定每個欄位的失焦事件
        $('#formAuthentication input').on('blur', function() {
            if ($(this).attr('id') === 'phone') {
                validatePhoneField($(this));
            } else {
                validateField($(this));
            }
            if ($(this).attr('id') === 'email') {
                validateEmailField($(this));
            } else {
                validateField($(this));
            }
        });

        // 表單提交事件
        $('#formAuthentication').on('submit', async function(event) {
            event.preventDefault(); // 阻止表單默認提交

            let isFormValid = true;

            // 驗證其他欄位（同步驗證）
            $('#formAuthentication input').not('#phone').each(function() {
                if (!validateField($(this))) {
                    isFormValid = false;
                }
            });

            // 驗證手機欄位（非同步驗證）
            const isPhoneValid = await validatePhoneField($('#phone'));

            // 如果所有欄位均有效，執行表單提交
            if (isFormValid && isPhoneValid) {
                $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
                $.ajax({
                    url: "{{ route('member.register.create') }}",
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function(response) {
                        Swal.fire({
                            title: '成功',
                            text: '註冊成功',
                            icon: 'success',
                            confirmButtonText: '確定'
                        }).then(() => {
                            window.location.href = "{{ route('member.index') }}";
                        });
                    },
                    error: function() {
                        Swal.fire({
                            title: '失敗',
                            text: '註冊失敗，請再試一次。',
                            icon: 'error',
                            confirmButtonText: '確定'
                        });
                    }
                });
            }
        });
    });
</script>

