@extends('theme.master')
@section('title', '會員中心')

@section('custom-head')
<style>
.font-size-20{
    font-size:20px;
}
.used-color{
    color:var(--being-green);
}
</style>
@endsection

@section('content')

@include('admin.message')

@include('front.user_profile.profileHeader')

<section id="profile-item" class="profile-item-block">
	<div class="container">
        <div class="row">
            @include('front.user_profile.profileSidebar')
            <div class="col-xl-9 col-lg-8">
                <div class="row mb-4 mt-4 mt-lg-0">
                    <div class="col-12 col-md-5 mb-4">
                        <div class="w-100 d-flex justify-content-center align-items-center dashboard-items py-5 gap-14">
                            <svg xmlns="http://www.w3.org/2000/svg" width="78" height="50" viewBox="0 0 32.768 21.3">
                                <path id="add_link_FILL0_wght400_GRAD0_opsz48" d="M95.155,392.384H88.192a8.192,8.192,0,1,1,0-16.384h6.963v2.458H88.192a5.734,5.734,0,1,0,0,11.469h6.963Zm-5.161-6.963v-2.458h12.7v2.458Zm22.774-1.229h-2.458a5.722,5.722,0,0,0-5.734-5.734H97.613V376h6.963a8.181,8.181,0,0,1,8.192,8.192ZM105.355,397.3v-4.915h-4.915v-2.458h4.915v-4.915h2.458v4.915h4.915v2.458h-4.915V397.3Z" transform="translate(-80 -376)" fill="var(--being-green)"/>
                            </svg>
                        </div>
                    </div>
                    <div class="col-12 col-md-7 mb-4">
                        <p class="text-white font-size-20">
                        {!! $gsetting->aff_setting['illustrate'] !!}
                        </p>
                    </div>
                    <div class="col-12 col-md-5">
                        <button class="w-100 d-flex align-items-center justify-content-between dashboard-items p-3 product-btn" data-toggle="modal" data-target="#copy-share">
                            <div class="d-flex flex-column align-items-start">
                                <h4 class="m-0 copy-text" value="{{ Auth::user()->aff_code }}">{{ Auth::user()->aff_code }}</h4>
                                <span class="text-white">點擊複製優惠代碼</span>
                            </div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="28.5" height="33" viewBox="0 0 28.5 33">
                                <path id="Icon_material-content-copy" data-name="Icon material-content-copy" d="M24,1.5H6a3.009,3.009,0,0,0-3,3v21H6V4.5H24Zm4.5,6H12a3.009,3.009,0,0,0-3,3v21a3.009,3.009,0,0,0,3,3H28.5a3.009,3.009,0,0,0,3-3v-21A3.009,3.009,0,0,0,28.5,7.5Zm0,24H12v-21H28.5Z" transform="translate(-3 -1.5)" fill="#fff"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h3>分享紀錄</h3>
                    </div>
                    <div class="col-12 col-lg-6">
                        @foreach( $userRefferal as $refferalUser )
                        @php
                            $UserAvailableSubscriptionOrder = $refferalUser->user ? $refferalUser->user->getUserAvailableSubscriptionOrder() : null;
                        @endphp
                        <div class="w-100 d-flex gap-lg-22 gap-14">
                            <img class="share-img" src="{{ gc_asset('image/user_img/'. $refferalUser->user->user_img) }}" alt="user-img">
                            <div class="user-info">
                                <h4 class="mb-2">用戶暱稱</h4>
                                <h5 class="mb-2 opacity-50">加入時間：{{ date('Y m/d H:m', strtotime($refferalUser->created_at)) }}</h5>
                                @if($UserAvailableSubscriptionOrder)
                                <h5 class="mb-0 opacity-50">訂閱時間：{{ $UserAvailableSubscriptionOrder->enroll_start }}</h5>
                                @endif
                            </div>
                            <!-- <p class="align-self-end mb-1 used-color">已領取</p> -->
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="copy-share" tabindex="-1" aria-labelledby="copy-shareLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">已複製</div>
        </div>
    </div>
</div>

@endsection

@include( 'auth.firebase_otp' )

@section('custom-script')
<script>
    const copyBtn = document.querySelector('.product-btn')
    copyBtn.addEventListener('click', function() {
        const codeElement = document.querySelector('.copy-text');
        const code = codeElement.getAttribute('value');
        navigator.clipboard.writeText(code);
    })
</script>
@endsection