@extends('layouts.app')

@section('title', 'Subscription Details - Primary Learning Tutor')

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="display-5 fw-bold">Subscription Details</h1>
                <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Subscriptions
                </a>
            </div>

            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-receipt me-2"></i>Subscription Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Payment Method</h6>
                            <p class="h5">
                                @if($subscription->payment_provider === 'stripe')
                                    <i class="fab fa-stripe me-2 text-primary"></i><strong>Stripe</strong>
                                @elseif($subscription->payment_provider === 'paypal')
                                    <i class="fab fa-paypal me-2 text-primary"></i><strong>PayPal</strong>
                                @else
                                    <strong>{{ ucfirst($subscription->payment_provider) }}</strong>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Status</h6>
                            <p class="h5">
                                @if($subscription->status === 'active')
                                    <span class="badge bg-success fs-6">Active</span>
                                @elseif($subscription->status === 'cancelled')
                                    <span class="badge bg-danger fs-6">Cancelled</span>
                                @elseif($subscription->status === 'pending')
                                    <span class="badge bg-warning fs-6">Pending</span>
                                @else
                                    <span class="badge bg-secondary fs-6">{{ ucfirst($subscription->status) }}</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Plan Type</h6>
                            <p class="h5">
                                <strong class="text-capitalize">{{ $subscription->plan_type }}</strong>
                                @if($subscription->plan_type === 'yearly')
                                    <span class="badge bg-info ms-2">Annual Plan</span>
                                @else
                                    <span class="badge bg-secondary ms-2">Monthly Plan</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Amount</h6>
                            <p class="h5">
                                <strong>{{ $subscription->currency }} {{ number_format($subscription->amount, 2) }}</strong>
                                @if($subscription->plan_type === 'monthly')
                                    <span class="text-muted">per month</span>
                                @else
                                    <span class="text-muted">per year</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Start Date</h6>
                            <p class="h5">
                                {{ $subscription->starts_at ? $subscription->starts_at->format('F j, Y') : 'N/A' }}
                            </p>
                        </div>
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">End Date</h6>
                            <p class="h5">
                                {{ $subscription->ends_at ? $subscription->ends_at->format('F j, Y') : 'N/A' }}
                                @if($subscription->ends_at && $subscription->ends_at->isFuture())
                                    <small class="text-muted d-block">({{ $subscription->ends_at->diffForHumans() }})</small>
                                @endif
                            </p>
                        </div>
                        @if($subscription->cancelled_at)
                            <div class="col-md-6 mb-4">
                                <h6 class="text-muted mb-2">Cancelled On</h6>
                                <p class="h5">
                                    {{ $subscription->cancelled_at->format('F j, Y') }}
                                </p>
                            </div>
                        @endif
                        <div class="col-md-6 mb-4">
                            <h6 class="text-muted mb-2">Subscription ID</h6>
                            <p class="font-monospace small">{{ $subscription->subscription_id ?? 'N/A' }}</p>
                        </div>
                    </div>

                    <hr>

                    @if($subscription->status === 'active')
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>Active Subscription:</strong> You have full access to all premium features until {{ $subscription->ends_at->format('F j, Y') }}.
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-danger" onclick="cancelSubscription({{ $subscription->id }})" id="cancelBtn{{ $subscription->id }}">
                                <i class="fas fa-times-circle me-2"></i>Cancel Subscription
                            </button>
                            <a href="{{ route('compare') }}" class="btn btn-outline-primary">
                                <i class="fas fa-sync-alt me-2"></i>Change Plan
                            </a>
                        </div>
                    @elseif($subscription->status === 'cancelled')
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Cancelled Subscription:</strong> This subscription was cancelled on {{ $subscription->cancelled_at->format('F j, Y') }}.
                            @if($subscription->ends_at && $subscription->ends_at->isFuture())
                                You will continue to have access until {{ $subscription->ends_at->format('F j, Y') }}.
                            @endif
                        </div>
                        <a href="{{ route('compare') }}" class="btn btn-primary">
                            <i class="fas fa-arrow-up me-2"></i>Reactivate Subscription
                        </a>
                    @else
                        <div class="alert alert-secondary">
                            <i class="fas fa-clock me-2"></i>
                            <strong>Pending:</strong> This subscription is pending activation.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function cancelSubscription(subscriptionId) {
    if (!confirm('Are you sure you want to cancel your subscription? You will continue to have access until the end of your current billing period.')) {
        return;
    }

    const btn = document.getElementById('cancelBtn' + subscriptionId);
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Cancelling...';

    try {
        const response = await fetch(`/subscriptions/${subscriptionId}/cancel`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            credentials: 'same-origin',
        });

        // Check if response is JSON
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            const text = await response.text();
            console.error('Non-JSON response:', text);
            alert('Server error: Please check the console for details.');
            btn.disabled = false;
            btn.innerHTML = originalText;
            return;
        }

        const data = await response.json();

        if (data.success) {
            alert('Success: ' + data.message);
            location.reload();
        } else {
            const errorMsg = data.error || 'Failed to cancel subscription';
            console.error('Cancellation error:', errorMsg);
            alert('Error: ' + errorMsg);
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    } catch (error) {
        console.error('Cancellation error:', error);
        alert('An error occurred. Please try again.');
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
}
</script>
@endpush
@endsection