@extends('backend.app')
@push('style')
    <style>
        /* Content header styling */
        .content-header {
            padding: 1.5rem;
            background-color: #fff;
            border-bottom: 1px solid #ebe9f1;
            margin-bottom: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 6px rgba(34, 41, 47, 0.05);
        }

        .content-header-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2c2c2c;
        }

        .plan-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            margin-bottom: 2rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #ebe9f1;
        }

        .feature-list li:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: #28c76f;
            margin-right: 10px;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .info-card {
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .info-card .card-header {
            background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
            color: #fff;
            border-bottom: none;
            padding: 1rem 1.5rem;
        }

        .info-card .card-header.bg-primary {
            background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%) !important;
        }

        .info-card .card-header.bg-success {
            background: linear-gradient(135deg, #28c76f 0%, #21ae67 100%) !important;
        }

        .info-card .card-header.bg-info {
            background: linear-gradient(135deg, #00cfe8 0%, #00b5c2 100%) !important;
        }

        .info-card .card-header.bg-dark {
            background: linear-gradient(135deg, #4b4b4b 0%, #2c2c2c 100%) !important;
        }

        .info-card .card-body {
            padding: 1.5rem;
        }

        .info-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        }

        .stripe-badge {
            background: linear-gradient(135deg, #6352f5 0%, #a960ee 100%);
            color: white;
        }
    </style>
@endpush
@section('title', 'Subscription Plan Details')
@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row align-items-center">
                <div class="content-header-left col-md-9 col-12">
                    <h2 class="content-header-title mb-0">
                        <i class="fas fa-crown me-2 text-primary"></i>Subscription Plan Details
                    </h2>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12">
                    <a href="{{ route('subscriptions.edit', $subscription) }}" class="btn btn-primary me-2">
                        <i class="fas fa-edit me-1"></i>
                        <span>Edit</span>
                    </a>
                    <a href="{{ route('subscriptions.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>
                        <span>Back to List</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body" style="">
                <!-- Plan Header -->
                <div class="plan-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div>
                                <h2 class="mb-1">{{ $subscription->title }}</h2>
                                @if($subscription->subtitle)
                                    <p class="mb-0">{{ $subscription->subtitle }}</p>
                                @endif
                            </div>
                            @if($subscription->is_featured)
                                <span class="badge bg-warning text-dark mt-2">
                                    <i class="fas fa-star me-1"></i>Featured Plan
                                </span>
                            @endif
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="display-4 fw-bold">
                                @if($subscription->discounted_price)
                                    <small class="text-white-50" style="font-size: 1.5rem;">
                                        <del>${{ number_format($subscription->price, 2) }}</del>
                                    </small>
                                    ${{ number_format($subscription->discounted_price, 2) }}
                                @else
                                    ${{ number_format($subscription->price, 2) }}
                                @endif
                            </div>
                            <div class="small">/ {{ ucfirst($subscription->duration) }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Left Column - Main Info -->
                    <div class="col-md-8">
                        <!-- Description -->
                        @if($subscription->description)
                            <div class="card mb-3 info-card">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-align-left me-2"></i>Description</h5>
                                </div>
                                <div class="card-body mt-3">
                                    <p class="mb-0">{{ $subscription->description }}</p>
                                </div>
                            </div>
                        @endif

                        <!-- Features -->
                        @if($subscription->getFeaturesList())
                            <div class="card mb-3 info-card">
                                <div class="card-header bg-success text-white">
                                    <h5 class="mb-0"><i class="fas fa-list-check me-2"></i>Plan Features</h5>
                                </div>
                                <div class="card-body mt-1">
                                    <ul class="feature-list">
                                        @foreach($subscription->getFeaturesList() as $feature)
                                            <li>{{ $feature }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Right Column - Status & Settings -->
                    <div class="col-md-4">
                        <!-- Status -->
                        <div class="card mb-3 info-card">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="fas fa-toggle-on me-2"></i>Status</h5>
                            </div>
                            <div class="card-body mt-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>Active Status:</span>
                                    @if($subscription->is_active)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-danger">Inactive</span>
                                    @endif
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Featured:</span>
                                    @if($subscription->is_featured)
                                        <span class="badge bg-warning text-dark">Yes</span>
                                    @else
                                        <span class="badge bg-secondary">No</span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Duration -->
                        <div class="card mb-3 info-card">
                            <div class="card-header bg-dark text-white">
                                <h5 class="mb-0"><i class="fas fa-calendar me-2"></i>Billing Duration</h5>
                            </div>
                            <div class="card-body text-center mt-3">
                                <div class="h3">{{ ucfirst($subscription->duration) }}</div>
                                <small class="text-muted">
                                    Stripe interval: {{ $subscription->getStripeInterval() }}
                                    @if($subscription->getStripeIntervalCount() > 1)
                                        (every {{ $subscription->getStripeIntervalCount() }} {{ $subscription->getStripeInterval() }}s)
                                    @endif
                                </small>
                            </div>
                        </div>

                        <!-- Stripe Integration -->
                        <div class="card mb-3 info-card">
                            <div class="card-header stripe-badge">
                                <h5 class="mb-0"><i class="fab fa-stripe me-2"></i>Stripe Integration</h5>
                            </div>
                            <div class="card-body mt-3">
                                <div class="mb-2">
                                    <small class="text-muted">Product ID:</small>
                                    <div class="small font-monospace">
                                        @if($subscription->stripe_product_id)
                                            {{ $subscription->stripe_product_id }}
                                        @else
                                            <span class="text-danger">Not synced</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <small class="text-muted">Price ID:</small>
                                    <div class="small font-monospace">
                                        @if($subscription->stripe_price_id)
                                            {{ $subscription->stripe_price_id }}
                                        @else
                                            <span class="text-danger">Not synced</span>
                                        @endif
                                    </div>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>Sync Status:</span>
                                    @if($subscription->stripe_product_id && $subscription->stripe_price_id)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check me-1"></i>Synced
                                        </span>
                                    @else
                                        <span class="badge bg-warning">
                                            <i class="fas fa-exclamation-triangle me-1"></i>Not Synced
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Additional Info -->
                        <div class="card mb-3 info-card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Additional Info</h5>
                            </div>
                            <div class="card-body mt-3">
                                <div class="mb-2">
                                    <small class="text-muted">Created:</small>
                                    <div>{{ $subscription->created_at->format('M d, Y') }}</div>
                                </div>
                                <div>
                                    <small class="text-muted">Last Updated:</small>
                                    <div>{{ $subscription->updated_at->format('M d, Y') }}</div>
                                </div>
                            </div>
                        </div>

                        <!-- Discount Info -->
                        @if($subscription->hasDiscount())
                            <div class="card mb-3 info-card border-success">
                                <div class="card-body">
                                    <div class="text-center">
                                        <div class="text-muted small">You Save</div>
                                        <div class="h3 text-success">
                                            {{ $subscription->getDiscountPercentage() }}%
                                        </div>
                                        <div class="small">
                                            ${{ number_format($subscription->price - $subscription->discounted_price, 2) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection