@extends('layouts.master_layout')
@section('include_css')
<link href="{{ asset('assets-theme/css/subscription.css') }}" rel="stylesheet">
@endsection
@section('content')
@php
$user = Auth::guard('member')->user();
$voucher = $user ? $user->voucher : null;
$subscription_plan = $user ? $user->subscription_plan : null;
@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>
                <a href="{{ route('paypal.pricing') }}" class="paypal-page-link"><span>Pay</span><strong>Pal</strong> International Payment</a>
                <div class="payment-feature-list">
                    <span class="icon"><img src="/assets/images/payment/list.png" alt="Kho Template" class="feature-icon"><i> Kho Template</i></span>
                    <span class="icon"><img src="/assets/images/payment/sound-waves.png" alt="Kho Âm thanh" class="feature-icon"><i> Kho Âm thanh</i></span>
                    <span class="icon"><img src="/assets/images/payment/control.png" alt="Kho Preset" class="feature-icon"><i> Kho Preset</i></span>
                    <span class="icon"><img src="/assets/images/payment/automated-engineering.png" alt="Kho phần mềm" class="feature-icon"><i> Kho phần mềm</i></span>
                    <span class="icon"><img src="/assets/images/payment/paint.png" alt="Kho màu sắc" class="feature-icon"><i> Kho màu sắc</i></span>
                    <span class="icon"><img src="/assets/images/payment/more.png" alt="Nhiều thứ nữa" class="feature-icon"><i> Nhiều thứ nữa...</i></span>
                </div>
            </div>
            <div class="payment-plan-list">
                <div class="payment-plan plan-1m @if($subscription_plan && $subscription_plan->ref == 'yearly' || ($subscription_plan && $subscription_plan->ref == '6_months')) plan-disabled @endif">
                    <div class="plan-badge" style="background:#f87171;">-66.89%</div>
                    <div class="plan-title">1 tháng</div>
                    <div class="plan-price">99.000<sup>đ</sup></div>
                    <div class="plan-old-price">299.000<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 {{ $subscription_plan->end_date ? \Carbon\Carbon::parse($subscription_plan->end_date)->format('d-m-Y') : '' }}</div>
                        </button>
                        @elseif($subscription_plan && ($subscription_plan->ref == 'yearly' || $subscription_plan->ref == '6_months'))
                        <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="monthly">
                            <button type="submit" class="btn-choose-plan">CHỌN GÓI NÀY</button>
                        </form>
                        @endif
                    </div>
                    @if((!$subscription_plan || $subscription_plan->ref != 'monthly') && $voucher && $voucher->applicable_plan_id == 1)
                    <div class="plan-discount plan-discount-timer">
                        <div class="discount-main">
                            Bạn đang có mã giảm giá <b style="color: #f87171;">{{ (int) $voucher->discount_value }}@if($voucher->discount_type == 'percentage')% @else đ@endif
                            </b>
                            ({{ $voucher->code }})
                        </div>
                        <div class="discount-bottom">
                            hết hạn vào <span class="discount-time" id="discount-timer">00:00:00</span>:
                            <a href="#" class="discount-link">Hãy dùng ngay</a>
                        </div>
                    </div>
                    @endif
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Truy cập kho <strong>&nbsp;hàng triệu tài nguyên&nbsp;</strong> dành cho Editor &amp; Filmmaker</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Tải tài nguyên không giới hạn trong thời hạn gói</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Cập nhật 200–1.000 tài nguyên mới mỗi ngày</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Hỗ trợ hướng dẫn tải và sử dụng tài nguyên</li>
                    </ul>
                </div>
                <div class="payment-plan plan-6m @if($subscription_plan && $subscription_plan->ref == 'yearly') plan-disabled @endif">
                    <div class="plan-badge" style="background:#f87171;">-77.77%</div>
                    <div class="plan-title">6 tháng</div>
                    <div class="plan-price">399.000<sup>đ</sup></div>
                    <div class="plan-old-price">1.794.000<sup>đ</sup></div>
                    <div class="w-full">
                        @if($subscription_plan && $subscription_plan->ref == '6_months')
                        <button type="submit" class="btn-current-plan" disabled>
                            <span>ĐANG SỬ DỤNG</span>
                            <div style="font-size: 10px;">đến hết {{ $subscription_plan->end_date ? \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>
                    {{-- Gói 6 tháng --}}
                    @if((!$subscription_plan || $subscription_plan->ref != '6_months') && $voucher && $voucher->applicable_plan_id == 2)
                    <div class="plan-discount plan-discount-timer">
                        <div class="plan-discount plan-discount-timer">
                            <div class="discount-main">
                                Bạn đang có mã giảm giá <b style="color: #f87171;">{{ (int) $voucher->discount_value }}@if($voucher->discount_type == 'percentage')% @else đ@endif
                                </b>
                                ({{ $voucher->code }})
                            </div>
                            <div class="discount-bottom">
                                hết hạn vào <span class="discount-time" id="discount-timer">00:00:00</span>:
                                <a href="#" class="discount-link">Hãy dùng ngay</a>
                            </div>
                        </div>
                    </div>
                    @endif
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Bao gồm toàn bộ quyền lợi của gói 1 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Tải tài nguyên không giới hạn trong 6 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Tiết kiệm hơn 1.395.000đ so với giá gốc</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Cập nhật 200–1.000 tài nguyên mới mỗi ngày</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Được ưu tiên hỗ trợ khi cần</li>
                    </ul>
                </div>
                <div class="payment-plan plan-12m">
                    <div class="plan-badge" style="background:#f87171;">-83.31%</div>
                    <div class="plan-title">Gói năm (12 tháng)</div>
                    <div>
                        <span class="plan-price">599.000<sup>đ</sup></span>
                    </div>
                    <div>
                        <span class="plan-old-price">3.588.000<sup>đ</sup></span>
                    </div>
                    <div class="w-full">
                        @if($subscription_plan && $subscription_plan->ref == 'yearly')
                        <button type="submit" class="btn-current-plan" disabled>
                            <span>ĐANG SỬ DỤNG</span>
                            <div style="font-size: 10px;">đến hết {{ $subscription_plan->end_date ? \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>
                    {{-- Gói 1 năm --}}
                    @if((!$subscription_plan || $subscription_plan->ref != 'yearly') && $voucher && $voucher->applicable_plan_id == 3)
                    <div class="plan-discount plan-discount-timer">
                        <div class="plan-discount plan-discount-timer">
                            <div class="discount-main">
                                Bạn đang có mã giảm giá <b style="color: #f87171;">{{ (int) $voucher->discount_value }}@if($voucher->discount_type == 'percentage')% @else đ@endif
                                </b>
                                ({{ $voucher->code }})
                            </div>
                            <div class="discount-bottom">
                                hết hạn vào <span class="discount-time" id="discount-timer">00:00:00</span>:
                                <a href="#" class="discount-link">Hãy dùng ngay</a>
                            </div>
                        </div>
                    </div>
                    @endif
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Bao gồm toàn bộ quyền lợi của gói 1 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Tải tài nguyên không giới hạn trong 12 tháng</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Tiết kiệm gần 3.000.000đ so với giá gốc</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Cập nhật 200–1.000 tài nguyên mới mỗi ngày</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" class="feature-icon">Hỗ trợ cài đặt Plugin, Preset, LUT và các tài nguyên liên quan</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Quyền lợi" 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;
    }
    .paypal-page-link {
        display: inline-block;
        background: #ffc439;
        color: #111827;
        font-weight: 700;
        border-radius: 10px;
        padding: 12px 24px;
        margin: 8px 0 24px;
        text-decoration: none;
    }
    .paypal-page-link:hover { background: #f4bb2f; color: #111827; }
    .paypal-page-link span { color: #003087; }
    .paypal-page-link strong { color: #0070ba; }
</style>
<script>
    // Popup confirm khi chọn gói sử dụng SweetAlert2
    document.querySelectorAll('.form-choose-plan').forEach(function(form) {
        form.addEventListener('submit', function(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;'>Nếu đăng kí gói này thì gói bạn đang sử dụng sẽ bị huỷ và gói mới đăng kí sẽ được áp dụng</div>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Đồng ý',
                cancelButtonText: 'Huỷ',
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });
    // Đếm ngược đến thời gian hết hạn voucher (valid_to)
    const validTo = "{{ $voucher && $voucher->valid_to ? \Carbon\Carbon::parse($voucher->valid_to)->format('Y-m-d H:i:s') : '' }}";

    function updateDiscountTimer() {
        const now = new Date();
        if (!validTo) {
            document.getElementById('discount-timer').textContent = '00:00:00';
            return;
        }
        const end = new Date(validTo.replace(/-/g, '/'));
        let diff = end - now;
        if (diff < 0) diff = 0;
        const hours = Math.floor(diff / 1000 / 60 / 60);
        const minutes = Math.floor((diff / 1000 / 60) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        let h = hours < 10 ? '0' + hours : hours;
        let m = minutes < 10 ? '0' + minutes : minutes;
        let s = seconds < 10 ? '0' + seconds : seconds;
        document.getElementById('discount-timer').textContent = `${h}:${m}:${s}`;
    }
    updateDiscountTimer();
    setInterval(updateDiscountTimer, 1000);
</script>
@endsection