@extends('user.layout.master')
@section('title', 'Subscription')
@section('content')

    <!-- My Subscription -->

    @if (Auth::user()->hasActiveSubscription())
        <div class="subscription-section-container">

            <div class="subscription-section-header">
                <div class="subscription-section-title">Subscription</div>
            </div>


            <div class="subscription-plans">


                 @foreach($subscriptions as $subscription)
                                                @php
                                                    $interval = $subscription->interval;
                                                    $priceJson = data_get($subscription->plan, 'price', []);
                                                    $price = $interval === 'year' ? (data_get($priceJson, 'yearly_price')) : (data_get($priceJson, 'monthly_price'));
                                                @endphp
                <!-- Active Plan -->
                <div class="active-plan-card">
                    <div class="active-plan-content">
                        <div class="active-plan-header">
                            <div class="active-plan-title">{{ $subscription->plan->title ?? '—' }}</div>
                            <div class="active-best-value-tag">
                                <div class="active-best-value-text">Active Subscription</div>
                            </div>
                        </div>

                        <div class="active-plan-price">
                                                        @if(!is_null($price))
                            <div class="active-price-text">${{ number_format((float)$price, 2) }} /{{ $interval === 'year' ? 'year' : 'month' }}</div>
                            @else
                            <div class="active-price-text">$</div>
                            @endif
                            <div class="save-price">
                                <span class="discounted-price-text">
                                    $239.88/year
                                </span>
                                <div class="save-price-text">
                                    Save $48.89
                                </div>
                            </div>
                        </div>

                        <div class="active-plan-benefits">
                                                        @if(!empty($subscription->plan->description))
                            <div class="active-benefit-item">
                                <div class="active-benefit-icon">
                                    <div class="active-icon-check"></div>
                                </div>
                                <div class="active-benefit-text">{{ $subscription->plan->description ?? '—' }}</div>
                            </div>
                            @endif

                            {{-- <div class="active-benefit-item">
                                <div class="active-benefit-icon">
                                    <div class="active-icon-check"></div>
                                </div>
                                <div class="active-benefit-text">Choose from 4 professional PDF designs to match
                                    your
                                    style.</div>
                            </div>

                            <div class="active-benefit-item">
                                <div class="active-benefit-icon">
                                    <div class="active-icon-check"></div>
                                </div>
                                <div class="active-benefit-text">Get AI-powered content suggestions to enhance your
                                    resume.
                                </div>
                            </div> --}}
                        </div>

                        <div class="next-billing">
                            <div class="next-billing-icon"><i class="far fa-calender"></i></div>
                            <div class="next-billing-text">Next billing date: {{ optional($subscription->current_period_end)->toFormattedDateString() ?? '—' }}</div>
                        </div>

                        <div class="active-upgrade-button">
<a href="{{ route('user.plans.index') }}" style="text-decoration: none">
                            <div class="active-button-text">Upgrade Plan</div></a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    @else

            <div class="subscription-section-container">

                <div class="subscription-section-header">
                    <div class="subscription-section-title">Subscription</div>

                </div>

                <div class="no-subscription-alert">
                    <div class="alert-title">No Active Subscription</div>
                    <div class="alert-description">Upgrade to plan to unlock unlimited downloads and multiple PDF
                        designs.</div>
                </div>

                {{-- <div class="subscription-plans">
                    <!-- Monthly Plan -->
                    <div class="plan-card">
                        <div class="plan-content">
                            <div class="plan-header">
                                <div class="plan-title">Monthly Subscription</div>
                            </div>

                            <div class="plan-price">
                                <div class="price-text">$19.99 /month</div>
                            </div>

                            <div class="plan-benefits">
                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Download your resumes as many times as you need in
                                        multiple formats.</div>
                                </div>

                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Choose from 4 professional PDF designs to match your
                                        style.</div>
                                </div>

                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Get AI-powered content suggestions to enhance your resume.
                                    </div>
                                </div>
                            </div>

                            <div class="upgrade-button">
                                <a href="{{ route('user.plans.index') }}" style="text-decoration: none;">
                                <div class="button-text">Upgrade Plan</div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Yearly Plan -->
                    <div class="plan-card">
                        <div class="plan-content">
                            <div class="plan-header">
                                <div class="plan-title">Yearly Subscription</div>
                                <div class="best-value-tag">
                                    <div class="best-value-text">Best Value – 20% Off</div>
                                </div>
                            </div>

                            <div class="plan-price">
                                <div class="price-text">$190.99 /year</div>
                            </div>

                            <div class="plan-benefits">
                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Download your resumes as many times as you need in
                                        multiple formats.</div>
                                </div>

                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Choose from 4 professional PDF designs to match your
                                        style.</div>
                                </div>

                                <div class="benefit-item">
                                    <div class="benefit-icon">
                                        <div class="icon-check"></div>
                                    </div>
                                    <div class="benefit-text">Get AI-powered content suggestions to enhance your resume.
                                    </div>
                                </div>
                            </div>

                            <div class="upgrade-button">
                                <div class="button-text">Upgrade Plan</div>
                            </div>
                        </div>
                    </div>
                </div> --}}

            </div>
    @endif

    <!-- Subscription Details Modal -->
    <div class="modal fade" id="subscriptionDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Subscription Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="subscriptionDetailsContent">
                        <!-- Content will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showSubscriptionDetails(subscriptionId) {
            const modalEl = document.getElementById('subscriptionDetailsModal');
            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        }

        function cancelSubscription(subscriptionId) {
            if (confirm('Are you sure you want to cancel your subscription? This action cannot be undone.')) {
                alert('Subscription cancellation feature will be implemented here.');
            }
        }
    </script>

    <script>
        // Add interactivity to the upgrade buttons
        document.querySelectorAll('.upgrade-button').forEach(button => {
            button.addEventListener('click', function() {
                const planTitle = this.closest('.plan-content').querySelector('.plan-title').textContent;
                alert(`You've selected the ${planTitle}`);
                // In a real implementation, this would redirect to a payment page
            });
        });
    </script>

@endsection