@extends('layouts.app')

@section('content')
    <style>
        .table th,
        .table td {
            white-space: nowrap;
            /* 禁止文字換行 */
            text-align: center;
            /* 內容置中 */
            overflow: hidden;
            /* 隱藏超出內容 */
            text-overflow: ellipsis;
            /* 超出用省略號顯示 */
        }

        .table th {
            width: auto;
            /* 可根據內容自適應，但不要超出 */
        }

        .table {
            width: 100%;
            /* 撐滿父容器 */
        }

        /* 默认样式（适用于电脑版） */
        .nav-align-top .nav {
            justify-content: flex-start;
            /* 或者其他你想要的样式 */
        }

        /* 当屏幕宽度小于 768px 时（手机版） */
        @media (max-width: 767.98px) {
            .nav-align-top .nav {
                justify-content: space-between;
            }
        }
    </style>

    <!-- / Navbar -->

    <!-- Content wrapper -->
    <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">

            <!-- Header -->
            <div class="row">
                <div class="col-12">
                    <div class="card mb-6">
                        <div class="user-profile-header-banner">
                            <img src="https://cafeg.ukyo.idv.tw/assets/img/pages/profile-banner.png"
                                style="width:100%; height:200px;" alt="Banner image" class="rounded-top">
                        </div>
                        <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-5">
                            <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
                                @if (Auth::guard('member')->user()->avatar)
                                    <img src="{{ Auth::guard('member')->user()->avatar }}" style="width:100px;hieght:100px;"
                                        alt="user image" class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">
                                @else
                                    <img src="../../assets/img/avatars/1.png" style="width:100px;hieght:100px;"
                                        alt="user image" class="d-block h-auto ms-0 ms-sm-5 rounded-4 user-profile-img">
                                @endif
                            </div>
                            <div class="flex-grow-1 mt-4 mt-sm-12">
                                <div
                                    class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-6">
                                    <div class="user-profile-info">
                                        <h4 class="mb-2">{{ Auth::guard('member')->user()->name }}</h4>
                                        <ul
                                            class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4">
                                            <li class="list-inline-item">
                                                <i class='ri-User-line me-2 ri-24px'></i><span
                                                    class="fw-medium">{{ Auth::guard('member')->user()->Level_Name }}</span>
                                            </li>
                                            <li class="list-inline-item">
                                                <i class='ri-home-heart-fill me-2 ri-24px'></i><span class="fw-medium">客戶編號
                                                    : {{ Auth::guard('member')->user()->id }}</span>
                                            </li>
                                            <li class="list-inline-item">
                                                <i class="ri-calendar-line me-2 ri-24px"></i>
                                                <span class="fw-medium">
                                                    加 入 :
                                                    {{ \Carbon\Carbon::parse(Auth::guard('member')->user()->created_at)->format('Y 年 m 月') }}
                                                </span>
                                            </li>
                                        </ul>
                                    </div>
                                    @if (Auth::guard('member')->user()->level == 9)
                                        <a href="javascript:void(0)" class="btn btn-danger" id="submit-btn">
                                            <i class="ri-qr-code-fill ri-16px me-2"></i>顯示飲品兌換碼
                                        </a>
                                    @endif
                                </div>
                                <div class="col-xl-12">
                                    {{-- <h6 class="text-muted">顯示兌換編碼</h6> --}}
                                    <div class="card text-center mb-4" id="promocode">
                                        <div class="card-header">
                                            <div class="nav-align-top">
                                                <ul class="nav nav-pills " role="tablist">
                                                    <li class="nav-item">
                                                        <button type="button"
                                                            class="nav-link d-flex flex-column gap-1 active" role="tab"
                                                            data-bs-toggle="tab"
                                                            data-bs-target="#navs-pills-within-card-active"
                                                            aria-controls="navs-pills-within-card-active"
                                                            aria-selected="true"><i class="tf-icons ri-home-smile-line"></i>
                                                            國王&皇后</button>
                                                    </li>
                                                    <li class="nav-item">
                                                        <button type="button" class="nav-link d-flex flex-column gap-1"
                                                            role="tab" data-bs-toggle="tab"
                                                            data-bs-target="#navs-pills-within-card-link"
                                                            aria-controls="navs-pills-within-card-link"
                                                            aria-selected="false"><i class="tf-icons ri-links-line"></i>
                                                            茶飲大師</button>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="tab-content p-0">
                                                <div class="tab-pane fade show active" id="navs-pills-within-card-active"
                                                    role="tabpanel">
                                                    <h4 class="card-title">咖啡國王／咖啡皇后 <p id="last-give-to">飲品兌換卷</p>
                                                    </h4>
                                                    <div class="form-floating form-floating-outline">
                                                        @if (Auth::guard('member')->user()->level != 9)
                                                            <input type="text" class="form-control text-danger"
                                                                style="font-size:24px; font-weight: bold;"
                                                                id="floatingInput" aria-describedby="floatingInputHelp">
                                                            <label for="floatingInput">兌換碼</label>
                                                            {{-- <div id="floatingInputHelp" class="form-text">We'll never share your details with anyone else.</div> --}}
                                                        @else
                                                            {{-- 顯示給予誰 --}}
                                                            <div class="input-group" id ="give-to">
                                                                <input type="text" class="form-control text-info"
                                                                    style="font-size:24px; font-weight: bold;"
                                                                    id="floatingInput3" aria-describedby="button-addon3"
                                                                    placeholder="給予誰" required=true>
                                                                <button class="btn btn-outline-primary" type="button"
                                                                    id="button-addon3">獲取兌換碼</button>
                                                            </div>

                                                            {{-- 顯示兌換碼 --}}
                                                            <div class="input-group" id="promocode-show">
                                                                <input type="text" class="form-control text-danger"
                                                                    style="font-size:24px; font-weight: bold;"
                                                                    id="floatingInput2" aria-describedby="button-addon2">
                                                                <button class="btn btn-outline-primary" type="button"
                                                                    id="button-addon2">重新獲取</button>
                                                            </div>
                                                        @endif

                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
                                                    <h4 class="card-title">茶飲大師手搖機 飲品兌換卷</h4>
                                                    <p class="card-text">施工中 ....</p>
                                                    {{-- <a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-4 col-lg-5 col-md-5">
                            <!-- About User -->
                            <div class="card mb-6">
                                <div class="card-body" style="padding-top: 3%">
                                    <small class="card-text text-uppercase text-muted small">QRCode</small>
                                    <div class="d-flex justify-content-center" id="qrcode" style="padding-top: 3%">
                                    </div>
                                    <!-- Flexbox居中 -->
                                </div>
                            </div>
                            <!--/ About User -->
                        </div>
                        <div class="col-xl-8 col-lg-7 col-md-7">
                            <!-- Activity Timeline -->
                            <div class="card card-action mb-6">
                                <div class="card-header align-items-center">
                                    <h5 class="card-action-title mb-0"><i
                                            class='ri-bar-chart-2-line ri-24px text-body me-4'></i>消費紀錄</h5>
                                </div>
                                <div class="card-body pt-5">
                                    <!-- Order List Table -->
                                    <div class="card">
                                        <div class="card-datatable table-responsive">
                                            <table class="datatables-order table">
                                                <thead>
                                                    <tr>

                                                        <th>訂單號</th>
                                                        <th>日期</th>
                                                        <th>品項</th>
                                                        <th>金額</th>
                                                        <th>狀態</th>

                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <!-- #region -->
                                                        <td colspan="5"> 目前暫無資料</td>

                                                    </tr>

                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Activity Timeline -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- / Header -->

            <!-- Navbar pills -->

            <!--/ User Profile Content -->

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

    </div>
    <!-- beautify ignore:end -->

    <!-- Include necessary scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    {{-- 一開始 Loading 使用script 判斷 --}}



    <script>
        $(document).ready(function() {
            var id = "{{ Auth::guard('member')->user()->id }}";
            $("#promocode").hide();
            // $("#promocode-show").hide();
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: id, // 要顯示的內容
                width: 250, // QR code 的寬度
                height: 250 // QR code 的高度
            });
        });
        $("#submit-btn").on('click', function() {
            var id = "{{ Auth::guard('member')->user()->id }}";
            $("#promocode").show();
            var give_to = "{{ $code->give_to }}";
            var code  ="{{ $code->code }}";

            console.log('code:',code);
            if (code) {
                $("#give-to").hide();
                $("#floatingInput2").val(code);
                $("#last-give-to").html("最後給予 : " + give_to);
            } else {
                $("#give-to").show();

            }

            console.log('id:', id);


        });
        $("#button-addon2").on('click', function() {
            var id = "{{ Auth::guard('member')->user()->id }}";
            $("#promocode").show();
            $("#give-to").show();
            $("#promocode-show").hide();
            console.log('id:', id);

        });

        $("#button-addon3").on('click', function(event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            var id = "{{ Auth::guard('member')->user()->id }}";
            var give_to = $("#floatingInput3").val();

            // 检查输入框的值是否为空
            if (!give_to) {
                alert("請輸入給予誰的資訊");
                return;
            }

            // 發送 AJAX 請求
            $.ajax({
                url: "{{ route('member.getpromocode') }}", // 設定你的路由 URL
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token
                    id: id,
                    give_to: give_to
                },
                success: function(response) {
                    $("#promocode-show").show();
                    $("#give-to").hide();
                    $("#floatingInput").val(response.promocode);
                    $("#floatingInput2").val(response.promocode);
                    console.log(response); // 顯示後端回應資料
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText); // 顯示錯誤資訊
                }
            });
        });
    </script>
@endsection