@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"
                                                            id="cafeg-tab"
                                                            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 id= "tea-tab" 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>
                                                    <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="floatingInput4" 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 ="tea-give-to">
                                                                <input type="text" class="form-control text-info"
                                                                    style="font-size:24px; font-weight: bold;"
                                                                    id="floatingInput5" aria-describedby="button-addon3"
                                                                    placeholder="給予誰" required=true>
                                                                <button class="btn btn-outline-primary" type="button"
                                                                    id="button-addon4">獲取兌換碼</button>
                                                            </div>

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


                                                    </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() {
    console.log("Document is ready");
    var id = "{{ Auth::guard('member')->user()->id }}";
    $("#promocode-show").hide();
    $("#promocode-show-teamaster").hide();
    $("#tea-give-to").hide();
    // 建立 QR Code
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: id,
        width: 250,
        height: 250
    });

    // 顯示資料按鈕
    $("#submit-btn").on('click', function() {
        $("#promocode").show();
        console.log('submit button clicked');
        var give_to = "{{ $code->give_to ?? '' }}";
        var code = "{{ $code->code ?? '' }}";
        var t_give_to = "{{ $teacode->give_to ?? '' }}";
        var t_code = "{{ $teacode->code ?? '' }}";

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

        if (t_code) {
            $("#tea-give-to").hide();
            $("#floatingInput6").val(t_code);
            $("#last-give-to").html("最後給予 : " + give_to);

        } else {
            $("#tea-give-to").show();
        }
    });
    //tab 切換
    $("#cafeg-tab").on('click', function() {
        $("#promocode-show").show();


    });
    $("#tea-tab").on('click', function() {
        $("#promocode-show-teamaster").show();
        $("#promocode-show").hide();
        $("#tea-give-to").hide();
    });


    // cafeg 請求
    $("#button-addon3").on('click', function(event) {
        event.preventDefault();

        var give_to = $("#floatingInput3").val();
        if (!give_to) return alert("請輸入給予誰的資訊");

        $.ajax({
            url: "{{ route('member.getpromocode') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                give_to: give_to,
                from: 'cafeg',
            },
            success: function(res) {
                $("#promocode-show").show();
                $("#give-to").hide();
                $("#floatingInput2").val(res.promocode);
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    });

    // teamaster 請求
    $("#button-addon4").on('click', function(event) {
        event.preventDefault();

        var give_to = $("#floatingInput5").val();
        if (!give_to) return alert("請輸入給予誰的資訊");

        $.ajax({
            url: "{{ route('member.getpromocode') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                give_to: give_to,
                from: 'teamaster',
            },
            success: function(res) {
                $("#promocode-show-teamaster").show();
                $("#tea-give-to").hide();
                $("#floatingInput6").val(res.promocode);
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    });
});
        //給予誰
        $("#button-addon2").on('click', function() {
            var id = "{{ Auth::guard('member')->user()->id }}";
            $("#promocode").show();
            $("#give-to").show();
            $("#floatingInput3").val("");
            $("#promocode-show").hide();
            console.log('id:', id);

        });
        //給予誰
        $("#button-addon7").on('click', function() {
            var id = "{{ Auth::guard('member')->user()->id }}";
            $("#promocode").show();
            $("#tea-give-to").show();
            $("#floatingInput5").val("");
            $("#promocode-show-teamaster").hide();
        });

</script>

    @endsection