@extends('layouts.master_layout')

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

@section('content')
@php
    $member = Auth::guard('member')->user();
    $currentPlan = $member?->subscription_plan;
@endphp
<main class="main-payment">
    <div class="container">
        <section class="container-fluid">
            <div class="title-payment">
                <h2>Unlimited access to millions of high-quality resources.</h2>
                <a href="{{ route('goi-thanh-vien') }}" class="payment-page-link">Vietnamese Bank Transfer</a>
                <div class="payment-feature-list">
                    <span class="icon"><img src="/assets/images/payment/list.png" alt="Templates" class="feature-icon"><i>Templates</i></span>
                    <span class="icon"><img src="/assets/images/payment/sound-waves.png" alt="Audio" class="feature-icon"><i>Audio</i></span>
                    <span class="icon"><img src="/assets/images/payment/control.png" alt="Presets" class="feature-icon"><i>Presets</i></span>
                    <span class="icon"><img src="/assets/images/payment/automated-engineering.png" alt="Software" class="feature-icon"><i>Software</i></span>
                    <span class="icon"><img src="/assets/images/payment/paint.png" alt="Colors" class="feature-icon"><i>Colors</i></span>
                    <span class="icon"><img src="/assets/images/payment/more.png" alt="More" class="feature-icon"><i>And more...</i></span>
                </div>
            </div>

            <div class="payment-plan-list">
                <article class="payment-plan plan-1m @if($currentPlan && ($currentPlan->ref == 'yearly' || $currentPlan->ref == '6_months')) plan-disabled @endif">
                    <div class="plan-badge" style="background:#f87171;">-66.67%</div>
                    <div class="plan-title">1 Month</div>
                    <div class="plan-price"><sup>$</sup>8 <small>USD</small></div>
                    <div class="plan-old-price">$24</div>
                    <div class="w-full">
                        @include('member._paypal_button', ['planRef' => 'monthly', 'price' => '8', 'currentPlan' => $currentPlan])
                    </div>
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Unlimited downloads from millions of resources</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon"><strong>200–1,000 new resources added daily</strong></li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Plugin, Preset &amp; LUT installation support</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Resource usage guidance</li>
                    </ul>
                </article>

                <article class="payment-plan plan-6m @if($currentPlan && $currentPlan->ref == 'yearly') plan-disabled @endif">
                    <div class="plan-badge" style="background:#f87171;">-77.78%</div>
                    <div class="plan-title">6 Months</div>
                    <div class="plan-price"><sup>$</sup>32 <small>USD</small></div>
                    <div class="plan-old-price">$144</div>
                    <div class="w-full">
                        @include('member._paypal_button', ['planRef' => '6_months', 'price' => '32', 'currentPlan' => $currentPlan])
                    </div>
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">All benefits included in the 1-Month plan</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Unlimited downloads for 6 months</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon"><strong>Save $112</strong>&nbsp;compared to the original price</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon"><strong>200–1,000 new resources added daily</strong></li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Priority customer support</li>
                    </ul>
                </article>

                <article class="payment-plan plan-12m">
                    <div class="plan-badge" style="background:#f87171;">-83.33%</div>
                    <div class="plan-title">12 Months</div>
                    <div class="plan-price"><sup>$</sup>48 <small>USD</small></div>
                    <div class="plan-old-price">$288</div>
                    <div class="w-full">
                        @include('member._paypal_button', ['planRef' => 'yearly', 'price' => '48', 'currentPlan' => $currentPlan])
                    </div>
                    <ul class="plan-benefit">
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">All benefits included in the 1-Month plan</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Unlimited downloads for 12 months</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon"><strong>Save $240</strong>&nbsp;compared to the original price</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon"><strong>200–1,000 new resources added daily</strong></li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Plugin, Preset &amp; LUT installation support</li>
                        <li><img src="/assets/images/payment/approval.png" alt="Benefit" class="feature-icon">Priority customer support</li>
                    </ul>
                </article>
            </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;
    }
    .payment-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;
    }
    .payment-page-link:hover { background: #f4bb2f; color: #111827; }
    .plan-price sup { font-size: .48em; vertical-align: super; }
    .plan-price small { font-size: 16px; color: #f59e42; font-weight: 700; }
    .paypal-checkout, .paypal-current { margin: 12px 0 10px; }
</style>

<script>
document.querySelectorAll('.paypal-checkout-form').forEach(function (form) {
    form.addEventListener('submit', function (event) {
        event.preventDefault();
        Swal.fire({
            title: 'Continue with PayPal?',
            text: 'Your current membership will be replaced after payment is completed.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Continue',
            cancelButtonText: 'Cancel'
        }).then(result => { if (result.isConfirmed) form.submit(); });
    });
});
</script>
@endsection