@extends(getTemplate().'.view.layout.layout')
@section('title')
    {{ get_option('site_title','') }} - My Subscription
@endsection
@section('meta_description',get_option('site_meta_description'))
@section('meta_keyword',get_option('site_meta_keyword'))
<style>
.plan-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.plan-card.featured {
    border-color: #059669;
    background: #f0fdf4;
}
.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
    font-size: 12px;
    color: #4b5563;
    text-align: left;
    flex: 1;
}
.plan-features-list li {
    padding: 3px 0;
}
</style>
@section('style')
@parent
@endsection
@section('page')

    @php
        $subscriptionSettings = \App\Models\SubscriptionSetting::first();
        $monthlySubscriptionPrice = $subscriptionSettings && $subscriptionSettings->monthly_subscription_price
            ? (float) $subscriptionSettings->monthly_subscription_price
            : 15000;
        $yearlySubscriptionPrice = $subscriptionSettings && $subscriptionSettings->yearly_subscription_price
            ? (float) $subscriptionSettings->yearly_subscription_price
            : $monthlySubscriptionPrice * 10;
        $hasYearlyPlan = !empty(get_paystack_plan_code_yearly());
        $limitedMonthlyPrice = $subscriptionSettings ? (float) ($subscriptionSettings->limited_monthly_price ?: 0) : 0;
        $limitedYearlyPrice = $subscriptionSettings ? (float) ($subscriptionSettings->limited_yearly_price ?: 0) : 0;
        $hasLimitedPlan = !empty(get_limited_plan_code()) || !empty(get_limited_plan_code_yearly());
        $hasLimitedYearly = !empty(get_limited_plan_code_yearly());
        $starterMonthlyPrice = $subscriptionSettings ? (float) ($subscriptionSettings->starter_monthly_price ?: 0) : 0;
        $starterYearlyPrice = $subscriptionSettings ? (float) ($subscriptionSettings->starter_yearly_price ?: 0) : 0;
        $hasStarterPlan = !empty(get_starter_plan_code()) || !empty(get_starter_plan_code_yearly());
        $hasStarterYearly = !empty(get_starter_plan_code_yearly());
        $user = Auth::user();
        $emailUsername = explode('@', $user->email)[0];
        if (strpos($emailUsername, '.') !== false) {
            $nameParts = explode('.', $emailUsername, 2);
            $firstName = ucfirst($nameParts[0]);
            $lastName = ucfirst($nameParts[1]);
        } elseif (strpos($emailUsername, '_') !== false) {
            $nameParts = explode('_', $emailUsername, 2);
            $firstName = ucfirst($nameParts[0]);
            $lastName = ucfirst($nameParts[1]);
        } else {
            $nameLen = strlen($emailUsername);
            $splitPos = max(1, (int)floor($nameLen * 0.45));
            $firstName = ucfirst(substr($emailUsername, 0, $splitPos));
            $lastName = ucfirst(substr($emailUsername, $splitPos));
        }
        $phoneLast10 = $user->phone ? substr($user->phone, -10) : '';
        $monthlyPaymentUrl = get_paystack_plan_code() ? get_paystack_plan_payment_url(get_paystack_plan_code(), $user->email, $firstName, $lastName, $phoneLast10) : null;
        $yearlyPaymentUrl = get_paystack_plan_code_yearly() ? get_paystack_plan_payment_url(get_paystack_plan_code_yearly(), $user->email, $firstName, $lastName, $phoneLast10) : null;
        $limitedMonthlyPaymentUrl = get_limited_plan_code() ? get_limited_plan_url(get_limited_plan_code(), $user->email, $firstName, $lastName, $phoneLast10) : null;
        $limitedYearlyPaymentUrl = get_limited_plan_code_yearly() ? get_limited_plan_url(get_limited_plan_code_yearly(), $user->email, $firstName, $lastName, $phoneLast10) : null;
        $starterMonthlyPaymentUrl = get_starter_plan_code() ? get_starter_plan_url(get_starter_plan_code(), $user->email, $firstName, $lastName, $phoneLast10) : null;
        $starterYearlyPaymentUrl = get_starter_plan_code_yearly() ? get_starter_plan_url(get_starter_plan_code_yearly(), $user->email, $firstName, $lastName, $phoneLast10) : null;
    @endphp

    <div class="container-fluid">
        <div class="row">
            <div class="container">
                <div class="col-md-12">
                    <h1 class="text-center mb-4">My Subscription</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="container">
                <div class="col-md-12">
                    <!-- Active Subscription Section -->
                    @if($activeSubscription)
                        <div class="panel panel-default mb-4">
                            <div class="panel-heading">
                                <h3 class="panel-title">Active Subscription</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Plan:</strong> {{ $activeSubscription->tier->name ?? ($activeSubscription->isUnlimited() ? 'All-Access' : ($activeSubscription->isStarter() ? 'Starter Plan' : '10-Course Plan')) }}</p>
                                        <p><strong>Type:</strong> 
                                            @if($activeSubscription->isUnlimited())
                                                <span class="label label-success">Unlimited</span>
                                            @else
                                                <span class="label label-info">{{ $activeSubscription->isStarter() ? 'Starter' : 'Limited' }} ({{ $activeSubscription->courses_allocated }} courses)</span>
                                            @endif
                                        </p>
                                        @if($activeSubscription->isLimited())
                                        <p><strong>Courses Used:</strong> {{ $activeSubscription->courses()->count() }} / {{ $activeSubscription->courses_allocated }}</p>
                                        @endif
                                        <p><strong>Status:</strong> 
                                            <span class="label label-success">{{ ucfirst($activeSubscription->status) }}</span>
                                        </p>
                                        <p><strong>Billing Cycle:</strong> {{ ucfirst($activeSubscription->billing_cycle) }}</p>
                                        <p><strong>Started:</strong> {{ $activeSubscription->starts_at->format('F j, Y') }}</p>
                                        <p><strong>Ends:</strong> {{ $activeSubscription->ends_at->format('F j, Y') }}</p>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        @if($activeSubscription->isLimited())
                                        <div class="alert alert-info" style="margin-bottom: 10px;">
                                            <strong>Upgrade Available:</strong> You're on the {{ $activeSubscription->courses_allocated }}-course plan. Upgrade to unlimited to access all courses!
                                        </div>
                                        <form method="POST" action="{{ route('subscription.upgrade') }}" style="display:inline-block; margin-right: 8px;">
                                            @csrf
                                            <button type="submit" class="btn btn-warning">Upgrade to Unlimited</button>
                                        </form>
                                        @endif
                                        <div class="alert alert-danger" style="margin-bottom: 10px;">
                                            <strong>⚠️ Warning:</strong> If you cancel your subscription, you will not be able to resubscribe. To access new courses after cancellation, you will need to purchase each course individually.
                                        </div>
                                        <form action="{{ route('subscription.cancel') }}" method="POST" onsubmit="return confirm('Are you sure you want to cancel your subscription? This action cannot be undone.');">
                                            @csrf
                                            <button type="submit" class="btn btn-danger">Cancel Subscription</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="panel panel-default mb-4">
                            <div class="panel-body text-center">
                                <h3>Choose Your Plan</h3>
                                <p class="text-muted" style="font-size: 13px; margin-top: 4px;">Pick the plan that best fits your learning goals</p>
                                <div class="row" style="margin-top: 20px; display: flex; justify-content: center;">
                                    @if($hasStarterPlan && $starterMonthlyPrice > 0)
                                    <div class="col-md-4" style="margin-bottom: 15px;">
                                        <div class="plan-card">
                                            <div style="font-size: 28px; margin-bottom: 6px;">🌟</div>
                                            <h5 style="font-weight: 700; color: #1f2937; margin: 0 0 2px;">Starter Plan</h5>
                                            <div style="font-size: 12px; color: #6b7280; margin-bottom: 10px;">Pick any 3 courses to get started!</div>
                                            <div style="font-size: 26px; font-weight: 700; color: #059669;">
                                                {{ currencySign() . number_format($starterMonthlyPrice) }}
                                                <span style="font-size: 13px; color: #6b7280;">/month</span>
                                            </div>
                                            @if($hasStarterYearly && $starterYearlyPrice > 0)
                                            <div style="font-size: 12px; color: #6b7280; margin: 2px 0 10px;">
                                                or {{ currencySign() . number_format($starterYearlyPrice) }}/year
                                                <span style="background: #dc2626; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px;">SAVE 15%</span>
                                            </div>
                                            @endif
                                            <ul class="plan-features-list">
                                                <li>✓ 3 courses of your choice</li>
                                                <li>✓ Full access to all projects</li>
                                                <li>✓ Free access to instructors</li>
                                                <li>✓ Perfect for beginners</li>
                                            </ul>
                                            @if($starterMonthlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-primary" style="font-weight: 600; width: 100%;" onclick="openPaystack('{{ $starterMonthlyPaymentUrl }}')">
                                                Subscribe Monthly
                                            </button>
                                            @else
                                            <button type="button" class="btn btn-sm btn-secondary" style="font-weight: 600; width: 100%; background: #e5e7eb; color: #6b7280; border: none; cursor: not-allowed;" disabled>
                                                Not Available
                                            </button>
                                            @endif
                                            @if($hasStarterYearly && $starterYearlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-outline-primary" style="margin-top: 4px; font-weight: 600; width: 100%; border: 1px solid #007bff; color: #007bff; background: white;" onclick="openPaystack('{{ $starterYearlyPaymentUrl }}')">
                                                Subscribe Yearly <span style="font-weight: 400;">(save 15%)</span>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                    @endif
                                    @if($hasLimitedPlan && $limitedMonthlyPrice > 0)
                                    <div class="col-md-4" style="margin-bottom: 15px;">
                                        <div class="plan-card">
                                            <div style="font-size: 28px; margin-bottom: 6px;">📘</div>
                                            <h5 style="font-weight: 700; color: #1f2937; margin: 0 0 2px;">10-Course Plan</h5>
                                            <div style="font-size: 12px; color: #6b7280; margin-bottom: 10px;">Gain access to any 10 courses of your choice!</div>
                                            <div style="font-size: 26px; font-weight: 700; color: #059669;">
                                                {{ currencySign() . number_format($limitedMonthlyPrice) }}
                                                <span style="font-size: 13px; color: #6b7280;">/month</span>
                                            </div>
                                            @if($hasLimitedYearly && $limitedYearlyPrice > 0)
                                            <div style="font-size: 12px; color: #6b7280; margin: 2px 0 10px;">
                                                or {{ currencySign() . number_format($limitedYearlyPrice) }}/year
                                                <span style="background: #dc2626; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px;">SAVE 15%</span>
                                            </div>
                                            @endif
                                            <ul class="plan-features-list">
                                                <li>✓ 10 courses free!</li>
                                                <li>✓ Full access to all its projects</li>
                                                <li>✓ Free access to instructors anytime</li>
                                                <li>✓ Full access to add courses</li>
                                            </ul>
                                            @if($limitedMonthlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-info" style="font-weight: 600; width: 100%;" onclick="openPaystack('{{ $limitedMonthlyPaymentUrl }}')">
                                                Subscribe Monthly
                                            </button>
                                            @else
                                            <button type="button" class="btn btn-sm btn-secondary" style="font-weight: 600; width: 100%; background: #e5e7eb; color: #6b7280; border: none; cursor: not-allowed;" disabled>
                                                Not Available
                                            </button>
                                            @endif
                                            @if($hasLimitedYearly && $limitedYearlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-outline-info" style="margin-top: 4px; font-weight: 600; width: 100%; border: 1px solid #17a2b8; color: #17a2b8; background: white;" onclick="openPaystack('{{ $limitedYearlyPaymentUrl }}')">
                                                Subscribe Yearly <span style="font-weight: 400;">(save 15%)</span>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                    @endif
                                    <div class="col-md-4" style="margin-bottom: 15px;">
                                        <div class="plan-card featured">
                                            <div style="font-size: 28px; margin-bottom: 6px;">🚀</div>
                                            <h5 style="font-weight: 700; color: #1f2937; margin: 0 0 2px;">All-Access Plan</h5>
                                            <div style="font-size: 12px; color: #6b7280; margin-bottom: 10px;">Unlock everything</div>
                                            <div style="font-size: 26px; font-weight: 700; color: #059669;">
                                                {{ currencySign() . number_format($monthlySubscriptionPrice) }}
                                                <span style="font-size: 13px; color: #6b7280;">/month</span>
                                            </div>
                                            @if($hasYearlyPlan && $yearlySubscriptionPrice > 0)
                                            <div style="font-size: 12px; color: #6b7280; margin: 2px 0 10px;">
                                                or {{ currencySign() . number_format($yearlySubscriptionPrice) }}/year
                                                <span style="background: #dc2626; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px;">SAVE 15%</span>
                                            </div>
                                            @endif
                                            <ul class="plan-features-list">
                                                <li>✓ Unlimited course access</li>
                                                <li>✓ All current & future courses</li>
                                                <li>✓ Best value for serious learners</li>
                                                <li>✓ No restrictions or limits</li>
                                            </ul>
                                            @if($monthlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-success" style="font-weight: 600; width: 100%;" onclick="openPaystack('{{ $monthlyPaymentUrl }}')">
                                                Subscribe Monthly
                                            </button>
                                            @else
                                            <button type="button" class="btn btn-sm btn-secondary" style="font-weight: 600; width: 100%; background: #e5e7eb; color: #6b7280; border: none; cursor: not-allowed;" disabled>
                                                Not Available
                                            </button>
                                            @endif
                                            @if($hasYearlyPlan && $yearlySubscriptionPrice > 0 && $yearlyPaymentUrl)
                                            <button type="button" class="btn btn-sm btn-outline-success" style="margin-top: 4px; font-weight: 600; width: 100%; border: 1px solid #28a745; color: #28a745; background: white;" onclick="openPaystack('{{ $yearlyPaymentUrl }}')">
                                                Subscribe Yearly <span style="font-weight: 400;">(save 15%)</span>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Subscription History Section -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Subscription History</h3>
                        </div>
                        <div class="panel-body">
                            @if($subscriptionHistory->count() > 0)
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Plan</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                            <th>Billing Cycle</th>
                                            <th>Started</th>
                                            <th>Ended</th>
                                            <th>Cancelled At</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($subscriptionHistory as $subscription)
                                            <tr>
                                                <td>{{ $subscription->tier->name ?? ($subscription->plan_type === 'limited' ? '10-Course Plan' : ($subscription->plan_type === 'starter' ? 'Starter Plan' : 'All-Access')) }}</td>
                                                <td>
                                                    @if($subscription->plan_type === 'limited')
                                                        <span class="label label-info">Limited</span>
                                                    @elseif($subscription->plan_type === 'starter')
                                                        <span class="label label-primary">Starter</span>
                                                    @else
                                                        <span class="label label-success">Unlimited</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($subscription->status == 'active')
                                                        <span class="label label-success">{{ ucfirst($subscription->status) }}</span>
                                                    @elseif($subscription->status == 'cancelled')
                                                        <span class="label label-warning">{{ ucfirst($subscription->status) }}</span>
                                                    @elseif($subscription->status == 'expired')
                                                        <span class="label label-danger">{{ ucfirst($subscription->status) }}</span>
                                                    @else
                                                        <span class="label label-default">{{ ucfirst($subscription->status) }}</span>
                                                    @endif
                                                </td>
                                                <td>{{ ucfirst($subscription->billing_cycle) }}</td>
                                                <td>{{ $subscription->starts_at ? $subscription->starts_at->format('F j, Y') : 'N/A' }}</td>
                                                <td>{{ $subscription->ends_at ? $subscription->ends_at->format('F j, Y') : 'N/A' }}</td>
                                                <td>{{ $subscription->cancelled_at ? $subscription->cancelled_at->format('F j, Y') : 'N/A' }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <p class="text-center text-muted">No subscription history found.</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            window.openPaystack = function(paymentUrl) {
                if (!paymentUrl || !paymentUrl.trim()) {
                    alert('Subscription is temporarily unavailable. Please contact support.');
                    return;
                }
                window.open(paymentUrl, '_blank');
                alert('You will be redirected to Paystack to complete your subscription. After subscribing, please refresh this page to access your courses.');
            };
        });
    </script>
@endsection