@extends('layouts.master_layout')

@section('include_css')
<link href="{{ asset('assets-theme/css/subscription.css') }}" rel="stylesheet">
@endsection

@section('content')

@php
use Carbon\Carbon;
use App\Models\MemberSubscription;
$user = Auth::guard('member')->user();
$voucher = $user ? $user->voucher : null;
$subscription_plan = $user ? $user->subscription_plan : null;
$member_subscriptions_start_date = null;
$user_old = false;
if ($user && $user->created_at->lt(Carbon::parse('2025-12-01'))) {
   $user_old = true;
}



/*
|--------------------------------------------------------------------------
| GIÁ GỐC (THEO YÊU CẦU)
|--------------------------------------------------------------------------
*/
$price_month_original = 99000;
$price_6m_original = 399000;
$price_12m_original = 588000;

/*
|--------------------------------------------------------------------------
| TÍNH GIÁ SAU GIẢM
|--------------------------------------------------------------------------
*/

/* GÓI THÁNG */
if ($user_old) {
    // Thành viên cũ: giảm 30%
    $price_month_final = $price_month_original * 0.7; // 209.300
} else {
    // Thành viên mới: giảm 10%
    $price_month_final = $price_month_original * 0.9; // 269.100
}

/* GÓI 6 THÁNG: GIẢM CHUNG 40% */
$price_6m_final = $price_6m_original * 0.6; // 1.076.400


/* GÓI 12 THÁNG: KHÔNG GIẢM */
$price_12m_final = $price_12m_original; // 3.458.000

@endphp


<main class="main-payment">
    <div class="container">
        <section class="container-fluid">

            <div class="title-payment">
                <h2>Hàng triệu tài nguyên chất lượng cao - Tải về không giới hạn.</h2>

                <div class="payment-feature-list">
                    <span class="icon"><img src="/assets/images/payment/list.png" class="feature-icon"><i> Kho Template</i></span>
                    <span class="icon"><img src="/assets/images/payment/sound-waves.png" class="feature-icon"><i> Kho Âm thanh</i></span>
                    <span class="icon"><img src="/assets/images/payment/control.png" class="feature-icon"><i> Kho Preset</i></span>
                    <span class="icon"><img src="/assets/images/payment/automated-engineering.png" class="feature-icon"><i> Kho phần mềm</i></span>
                    <span class="icon"><img src="/assets/images/payment/paint.png" class="feature-icon"><i> Kho màu sắc</i></span>
                    <span class="icon"><img src="/assets/images/payment/more.png" class="feature-icon"><i> Nhiều thứ nữa...</i></span>
                </div>
            </div>


            <div class="payment-plan-list">

                {{-- ===========================================================
                    GÓI 1 THÁNG
                ============================================================ --}}
                <div class="payment-plan plan-1m @if($subscription_plan && ($subscription_plan->ref=='yearly' || $subscription_plan->ref=='6_months')) plan-disabled @endif">

                    {{-- Tính % badge hiển thị (giá gốc 299k, giá sau giảm tùy user) --}}
                    @php
                        $monthly_discount_percent = round( (1 - $price_month_final / $price_month_original) * 100 );
                    @endphp

                    <div class="plan-badge" style="background:#f87171;">-{{ $monthly_discount_percent }}%</div>

                    <div class="plan-title">1 tháng</div>

                    <div class="plan-price">
                        {{ number_format($price_month_final, 0, ',', '.') }}<sup>đ</sup>
                    </div>

                    <div class="plan-old-price">
                        {{ number_format($price_month_original, 0, ',', '.') }}<sup>đ</sup>
                    </div>

                    <div class="w-full">
                        @if($subscription_plan && $subscription_plan->ref == 'monthly')
                            <button type="submit" class="btn-current-plan" disabled>
                                <span>ĐANG SỬ DỤNG</span>
                                <div style="font-size: 10px;">đến hết {{ \Carbon\Carbon::parse($subscription_plan->end_date)->format('d-m-Y') }}</div>
                            </button>
                        @elseif($subscription_plan)
                            <button class="btn-choose-plan" disabled style="opacity:0.6;cursor:not-allowed;">CHỌN GÓI NÀY</button>
                        @else
                            <form action="{{ route('create_qr.web2m') }}" method="POST" class="form-choose-plan">
                                @csrf
                                <input type="hidden" name="subscription_plan_ref" value="monthly">
                                <button type="submit" class="btn-choose-plan">CHỌN GÓI NÀY</button>
                            </form>
                        @endif
                    </div>

                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Tải xuống không giới hạn</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Cập nhật 1000+ tài nguyên mỗi ngày</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Hỗ trợ kỹ thuật</li>
                    </ul>
                </div>

                {{-- ===========================================================
                    GÓI 6 THÁNG
                ============================================================ --}}
                <div class="payment-plan plan-6m @if($subscription_plan && $subscription_plan->ref == 'yearly') plan-disabled @endif">

                    <div class="plan-badge" style="background:#f87171;">-40%</div>

                    <div class="plan-title">6 tháng</div>

                    <div class="plan-price">{{ number_format($price_6m_final, 0, ',', '.') }}<sup>đ</sup></div>

                    <div class="plan-old-price">{{ number_format($price_6m_original, 0, ',', '.') }}<sup>đ</sup></div>

                    <div class="w-full">
                        @if($subscription_plan && $subscription_plan->ref == '6_months')
                            <button class="btn-current-plan" disabled>
                                <span>ĐANG SỬ DỤNG</span>
                                <div style="font-size: 10px;">đến hết {{ \Carbon\Carbon::parse($subscription_plan->end_date)->format('d-m-Y') }}</div>
                            </button>
                        @elseif($subscription_plan && $subscription_plan->ref=='yearly')
                            <button type="button" class="btn-choose-plan" disabled style="opacity:0.6;cursor:not-allowed;">CHỌN GÓI NÀY</button>
                        @else
                            <form action="{{ route('create_qr.web2m') }}" method="POST" class="form-choose-plan">
                                @csrf
                                <input type="hidden" name="subscription_plan_ref" value="6_months">
                                <button type="submit" class="btn-choose-plan">CHỌN GÓI NÀY</button>
                            </form>
                        @endif
                    </div>

                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Tất cả quyền lợi như gói tháng</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Tải không giới hạn trong 6 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Giảm mạnh hơn trả từng tháng</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Ưu tiên hỗ trợ</li>
                    </ul>
                </div>

                {{-- ===========================================================
                    GÓI 12 THÁNG — KHÔNG GIẢM + TẶNG 12 THÁNG
                ============================================================ --}}
                <div class="payment-plan plan-12m">

                    <div class="plan-badge" style="background:#f87171;">TẶNG 12 THÁNG</div>

                    <div class="plan-title">Gói năm (12 tháng)</div>

                    <div class="plan-price">
                        {{ number_format($price_12m_final, 0, ',', '.') }}<sup>đ</sup>
                    </div>

                    <div class="bonus-text" style="color:#f87171;font-size:13px;margin-top:3px;">
                        Mua 12 tháng → Tặng thêm 12 tháng (Tổng 24 tháng)
                    </div>

                    <div class="plan-old-price">{{ number_format($price_12m_original, 0, ',', '.') }}<sup>đ</sup></div>

                    <div class="w-full">
                        @if($subscription_plan && $subscription_plan->ref == 'yearly')
                            <button class="btn-current-plan" disabled>
                                <span>ĐANG SỬ DỤNG</span>
                                <div style="font-size: 10px;">đến hết {{ \Carbon\Carbon::parse($subscription_plan->end_date)->format('d-m-Y') }}</div>
                            </button>
                        @else
                            <form action="{{ route('create_qr.web2m') }}" method="POST" class="form-choose-plan">
                                @csrf
                                <input type="hidden" name="subscription_plan_ref" value="yearly">
                                <button type="submit" class="btn-choose-plan">CHỌN GÓI NÀY</button>
                            </form>
                        @endif
                    </div>

                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Dùng 24 tháng với giá 12 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Tải không giới hạn</li>
                        <li><img src="/assets/images/payment/approval.png" class="feature-icon">Ưu tiên hỗ trợ nhanh nhất</li>
                    </ul>
                </div>

            </div>
        </section>
    </div>
</main>

<style>
.plan-disabled {
    background: rgba(180, 180, 180, 0.25) !important;
    pointer-events: none;
    filter: grayscale(0.5);
    opacity: 0.85;
}
</style>

<script>
document.querySelectorAll('.form-choose-plan').forEach(form => {
    form.addEventListener('submit', e => {
        e.preventDefault();
        Swal.fire({
            title: 'Bạn muốn đăng kí gói này?',
            html: "<div style='font-size:12px;color:#888;margin-top:8px;'>Gói đang dùng sẽ bị huỷ và thay bằng gói mới.</div>",
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Đồng ý',
            cancelButtonText: 'Huỷ',
        }).then((r)=>{
            if(r.isConfirmed) form.submit();
        });
    });
});
</script>

@endsection