@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%;
            /* 撐滿父容器 */
        }
    </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>
                                    <a href="javascript:void(0)" class="btn btn-primary" id="submit-btn">
                                        <i class="ri-qr-code-fill ri-16px me-2"></i>顯示兌換編碼
                                    </a>
                                </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>飲品兌換卷</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">
                                                                <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">
                                    <small class="card-text text-uppercase text-muted small">QRCode</small>
                                    <div class="d-flex justify-content-center" id="qrcode"></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>
                                                        <td>000001</td>
                                                        <td>2025/01/01</td>
                                                        <td>大杯 冰拿鐵</td>
                                                        <td class="text-danger">60</td>
                                                        <td class="text-success">成功</td>
                                                    </tr>
                                                    <tr>
                                                        <td>000002</td>
                                                        <td>2025/01/01</td>
                                                        <td>大杯 冰拿鐵</td>
                                                        <td class="text-danger">60</td>
                                                        <td class="text-success">成功</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>

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

            console.log('id:', id);
            // 發送 AJAX 請求
            $.ajax({
                url: "{{ route('member.getpromocode') }}", // 設定你的路由 URL
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token
                    id: id
                },
                success: function(response) {

                    $("#floatingInput").val(response.promocode);
                    $("#floatingInput2").val(response.promocode);


                    console.log(response); // 顯示後端回應資料
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText); // 顯示錯誤資訊
                }
            });

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

            console.log('id:', id);
            // 發送 AJAX 請求
            $.ajax({
                url: "{{ route('member.morepromocode') }}", // 設定你的路由 URL
                type: 'PATCH',
                data: {
                    _token: '{{ csrf_token() }}', // CSRF token
                    id: id
                },
                success: function(response) {

                    $("#floatingInput").val(response.promocode);
                    $("#floatingInput2").val(response.promocode);


                    console.log(response); // 顯示後端回應資料
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText); // 顯示錯誤資訊
                }
            });

        });
    </script>
@endsection