@extends('index')

@section('content')
    <section>
        <div class="container">
            <ul class="d-flex my-5 color_808080">
                <li>{{__('custom.會員資料')}}</li>
                <li class="px-4">|</li>
                <li>{{__('custom.我的優惠券')}}</li>
            </ul>
            <div class="ProductMenuBox">
                <ul class="d-flex">
                    <li><a href="/member/member_info">{{__('custom.會員資料設定')}}</a></li>
                    <li><a href="/member/member_cart">{{__('custom.消費紀錄')}}</a></li>
                    <li><a class="active" href="/member/member_coupon">{{__('custom.我的優惠券')}}</a></li>
                </ul>
            </div>
            <div class="MemberSettingsBox">
                <h1 class="Title mb-5">{{__('custom.我的優惠券')}}</h1>
                <div class="MemberSettingsContent">
                    @foreach($usableCoupons as $usableCoupon)
                        <div class="d-flex flex-column flex-lg-row CouponsBox">
                            <div>
                                <h2 class="CouponCode">{{$usableCoupon->coupon_code}}</h2>
                                <p class="mt-lg-4">{{$usableCoupon->coupon_title}}</p>
                            </div>
                            <div class="ms-lg-auto d-flex flex-column mt-3 mt-lg-0">
                                <p class="DataTime text-lg-end order-1 order-lg-0 mt-4 mt-lg-0">{{$usableCoupon->coupon_start_time}} ~ {{$usableCoupon->coupon_end_time ?? '無期限'}}</p>
                                <div class="ms-lg-auto mt-lg-2"><a class="btn_black CopyCouponCodeBtn order-0 order-lg-1" href="#">{{__('custom.複製優惠碼')}}</a></div>
                            </div>
                        </div>
                    @endforeach

                    <div class="color_77832A SerifFonts fz_20 DiscountRecordTitle">{{__('custom.折抵紀錄')}}</div>
                    <div class="DiscountRecordBox">
                        <div class="d-none d-lg-block">
                            <div class="textTab">
                                <div class="TadTitle th_1 ">{{__('custom.名稱')}}</div>
                                <div class="TadTitle th_2">{{__('custom.優惠序號')}}</div>
                                <div class="TadTitle th_3">{{__('custom.使用時間')}}</div>
                            </div>
                        </div>
                        @foreach($memberCouponUserData as $couponInfo)
                            <div class="textTab">
                                <div class="TabContent td_1">{{$couponInfo['coupon']['coupon_title']}}</div>
                                <div class="TabContent td_2">{{$couponInfo['coupon']['coupon_code']}}</div>
                                <div class="TabContent td_3">{{$couponInfo['created_at']}}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        $(document).on('click', '.CopyCouponCodeBtn', function(e) {
            e.preventDefault();
            // 找到同一個 .CouponsBox 內的 .CouponCode 文字
            var code = $(this).closest('.CouponsBox').find('.CouponCode').text().trim();
            // 複製到剪貼簿
            if (navigator.clipboard) {
                navigator.clipboard.writeText(code).then(function() {
                    alert('已複製優惠碼：' + code);
                }, function() {
                    alert('複製失敗，請手動複製');
                });
            } else {
                // 舊瀏覽器備案
                var tempInput = $('<input>');
                $('body').append(tempInput);
                tempInput.val(code).select();
                document.execCommand("copy");
                tempInput.remove();
                alert('已複製優惠碼：' + code);
            }
        });
    </script>
@endsection