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

<div class="page-content">
    <section class="section">
        <div class="section-header">
            <h1>Subscription</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="{{ route('user.dashboard') }}">Dashboard</a></div>
                <div class="breadcrumb-item">Subscription</div>
            </div>
        </div>

        <div class="section-body">
            {{-- @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif --}}

            <!-- Subscription Status Card -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-crown text-warning mr-2"></i>Subscription Status</h4>
                        </div>
                        <div class="card-body">
                            @if(Auth::user()->hasActiveSubscription())
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5 class="text-success mb-2">
                                            <i class="fas fa-check-circle mr-2"></i>
                                            Active Subscription
                                        </h5>
                                        <p class="text-muted mb-0">You have access to all premium features including unlimited downloads and multiple PDF designs.</p>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <span class="badge bg-success">Premium</span>
                                    </div>
                                </div>
                            @else
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5 class="text-warning mb-2">
                                            <i class="fas fa-exclamation-triangle mr-2"></i>
                                            No Active Subscription
                                        </h5>
                                        <p class="text-muted mb-0">Upgrade to a premium plan to unlock unlimited downloads and multiple PDF designs.</p>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <a href="{{ route('user.plans.index') }}" class="btn btn-primary">
                                            <i class="fas fa-crown me-2"></i>
                                            Upgrade Now
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            @if(($subscriptions ?? collect())->isEmpty())
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-credit-card text-muted" style="font-size: 4rem;"></i>
                                </div>
                                <h4 class="text-muted mb-3">No Active Subscriptions</h4>
                                <p class="text-muted mb-4">You don't have any active subscriptions. Choose a plan to get started.</p>
                                <a href="{{ route('user.plans.index') }}" class="btn btn-primary btn-lg">
                                    <i class="fas fa-crown mr-2"></i>
                                    Choose a Plan
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- Subscription Details -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4><i class="fas fa-list mr-2"></i>Subscription Details</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped align-middle">
                                        <thead>
                                            <tr>
                                                <th>Plan</th>
                                                <th>Interval</th>
                                                <th>Price</th>
                                                <th>Status</th>
                                                <th>Next Billing</th>
                                                {{-- <th>Actions</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @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
                                                <tr>
                                                    <td>
                                                        <div class="font-weight-bold">{{ $subscription->plan->title ?? '—' }}</div>
                                                        @if(!empty($subscription->plan->description))
                                                            <small class="text-muted">{{ $subscription->plan->description }}</small>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-info">{{ ucfirst($interval ?? '—') }}</span>
                                                    </td>
                                                    <td>
                                                        @if(!is_null($price))
                                                            <strong>${{ number_format((float)$price, 2) }}</strong>
                                                            <small class="text-muted">/{{ $interval === 'year' ? 'year' : 'month' }}</small>
                                                        @else
                                                            —
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @php
                                                            $isActive = $subscription->status === 'active';
                                                        @endphp
                                                        <span class="badge {{ $isActive ? 'bg-success' : 'bg-secondary' }}">
                                                            {{ ucfirst($subscription->status) }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        {{ optional($subscription->current_period_end)->toFormattedDateString() ?? '—' }}
                                                    </td>
                                                    {{-- <td>
                                                        <div class="btn-group">
                                                            @if($isActive)
                                                                <button class="btn btn-sm btn-outline-warning" onclick="cancelSubscription('{{ $subscription->id }}')">
                                                                    <i class="fas fa-times"></i> Cancel
                                                                </button>
                                                            @endif
                                                            <button class="btn btn-sm btn-outline-info" onclick="showSubscriptionDetails('{{ $subscription->id }}')">
                                                                <i class="fas fa-eye"></i> Details
                                                            </button>
                                                        </div>
                                                    </td> --}}
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Subscription Features -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4><i class="fas fa-star text-warning mr-2"></i>Premium Features</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="text-center mb-4">
                                            <div class="bg-primary rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-download text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h6>Unlimited Downloads</h6>
                                            <small class="text-muted">Download resumes anytime</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center mb-4">
                                            <div class="bg-success rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-palette text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h6>4 PDF Designs</h6>
                                            <small class="text-muted">Modern, Classic, Minimal, Creative</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center mb-4">
                                            <div class="bg-warning rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-magic text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h6>AI Assistance</h6>
                                            <small class="text-muted">Smart content suggestions</small>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center mb-4">
                                            <div class="bg-info rounded-circle p-3 mx-auto mb-3" style="width: 60px; height: 60px;">
                                                <i class="fas fa-headset text-white" style="font-size: 1.5rem;"></i>
                                            </div>
                                            <h6>Priority Support</h6>
                                            <small class="text-muted">24/7 customer support</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
</div>

<!-- 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>

@endsection