@extends('backend.app')

@section('title', 'Subscription Details')

@push('style')
<style>
    .detail-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .info-row {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .info-row:last-child {
        border-bottom: none;
    }
    .timeline-item {
        position: relative;
        padding-left: 30px;
        padding-bottom: 20px;
        border-left: 2px solid #e0e0e0;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #7367f0;
    }
</style>
@endsection

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row align-items-center">
                    <div class="col-12">
                        @include('backend.partials.breadcrumb', [
                            'items' => [
                                ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fas fa-home'],
                                ['url' => route('admin.manual-subscriptions.index'), 'title' => 'Manual Subscriptions', 'icon' => 'fas fa-credit-card'],
                                ['title' => 'Subscription Details', 'icon' => 'fas fa-eye'],
                            ]
                        ])
                    </div>
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- User Info Header -->
            <div class="detail-card">
                <div class="d-flex align-items-center">
                    <div class="avatar bg-white me-3" style="width: 80px; height: 80px;">
                        <div class="avatar-content" style="font-size: 2rem; color: #7367f0;">
                            {{ substr($user->name ?? 'U', 0, 1) }}
                        </div>
                    </div>
                    <div>
                        <h3 class="mb-1">{{ $user->name }}</h3>
                        <p class="mb-0 opacity-75">{{ $user->email }}</p>
                        @if($user->company)
                            <p class="mb-0 mt-1">
                                <span class="badge bg-light text-dark">{{ $user->company->name }}</span>
                            </p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Subscription Details -->
                <div class="col-md-8">
                    <!-- Status Card -->
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0">Subscription Status</h4>
                            @if($subscription->active())
                                <span class="badge bg-light-success text-success">Active</span>
                            @elseif($subscription->onTrial())
                                <span class="badge bg-light-primary text-primary">On Trial</span>
                            @elseif($subscription->onGracePeriod())
                                <span class="badge bg-light-warning text-warning">Cancelling</span>
                            @else
                                <span class="badge bg-light-danger text-danger">Cancelled</span>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-row">
                                        <span class="text-muted">Stripe ID</span>
                                        <strong class="text-end">{{ $subscription->stripe_id }}</strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Status</span>
                                        <strong>{{ ucfirst($subscription->stripe_status) }}</strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Started At</span>
                                        <strong>{{ $subscription->starts_at->format('F d, Y g:i A') }}</strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Trial Ends</span>
                                        <strong>
                                            @if($subscription->trial_ends_at)
                                                {{ $subscription->trial_ends_at->format('F d, Y') }}
                                            @else
                                                <span class="text-muted">No trial</span>
                                            @endif
                                        </strong>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-row">
                                        <span class="text-muted">Price ID</span>
                                        <strong class="text-end" style="font-size: 0.9rem;">{{ $subscription->stripe_price }}</strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Quantity</span>
                                        <strong>{{ $subscription->quantity }}</strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Ends At</span>
                                        <strong>
                                            @if($subscription->ends_at)
                                                {{ $subscription->ends_at->format('F d, Y') }}
                                            @else
                                                <span class="text-success">Ongoing</span>
                                            @endif
                                        </strong>
                                    </div>
                                    <div class="info-row">
                                        <span class="text-muted">Created</span>
                                        <strong>{{ $subscription->created_at->format('F d, Y') }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Plan Details -->
                    @php
                        $plan = \App\Models\SubscriptionPlan::where('stripe_price_id', $subscription->stripe_price)->first();
                    @endphp
                    @if($plan)
                        <div class="card mb-3">
                            <div class="card-header">
                                <h4 class="card-title mb-0">Current Plan</h4>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="mb-1">{{ $plan->title }}</h5>
                                        <p class="text-muted mb-0">{{ $plan->description }}</p>
                                    </div>
                                    <div class="text-end">
                                        <h3 class="text-primary mb-0">
                                            {{ $plan->currency ?? 'SAR' }} {{ number_format($plan->getFinalPriceAttribute(), 2) }}
                                        </h3>
                                        <p class="text-muted small mb-0">{{ ucfirst($plan->duration) }}</p>
                                    </div>
                                </div>

                                @if($plan->features)
                                    <hr class="my-3">
                                    <h6 class="mb-2">Features:</h6>
                                    <ul class="mb-0">
                                        @foreach(json_decode($plan->features ?? '[]', true) as $feature)
                                            <li class="mb-1">{{ $feature }}</li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Company Status -->
                    @if($user->company)
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">Company Status</h4>
                            </div>
                            <div class="card-body">
                                <div class="info-row">
                                    <span class="text-muted">Subscription Status</span>
                                    <strong>
                                        @if($user->company->subscription_status)
                                            <span class="badge bg-light-{{ $user->company->subscription_status === 'active' ? 'success' : 'warning' }}">
                                                {{ ucfirst($user->company->subscription_status) }}
                                            </span>
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </strong>
                                </div>
                                <div class="info-row">
                                    <span class="text-muted">Subscription Ends At</span>
                                    <strong>
                                        @if($user->company->subscription_ends_at)
                                            {{ $user->company->subscription_ends_at->format('F d, Y') }}
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </strong>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Actions Sidebar -->
                <div class="col-md-4">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Quick Actions</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{{ route('admin.manual-subscriptions.edit', $subscription->id) }}"
                                   class="btn btn-outline-warning">
                                    <i class="fas fa-edit me-1"></i> Edit Subscription
                                </a>

                                @if($subscription->active() || $subscription->onGracePeriod())
                                    <button type="button" class="btn btn-outline-danger"
                                            onclick="cancelSubscription('{{ $user->name }}', {{ $subscription->id }})">
                                        <i class="fas fa-times me-1"></i> Cancel Now
                                    </button>
                                @endif

                                <a href="{{ route('admin.manual-subscriptions.index') }}"
                                   class="btn btn-outline-secondary">
                                    <i class="fas fa-list me-1"></i> Back to List
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Subscription Info -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Important Info</h5>
                        </div>
                        <div class="card-body">
                            @if($subscription->onGracePeriod())
                                <div class="alert alert-warning mb-2">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Cancelling:</strong> This subscription will expire at the end of the current period.
                                </div>
                            @endif

                            @if($subscription->onTrial())
                                <div class="alert alert-primary mb-2">
                                    <i class="fas fa-clock me-2"></i>
                                    <strong>Trial Period:</strong> User is currently on free trial until {{ $subscription->trial_ends_at->format('F d, Y') }}
                                </div>
                            @endif

                            <div class="timeline-item">
                                <strong>Created:</strong> {{ $subscription->created_at->diffForHumans() }}
                            </div>
                            <div class="timeline-item">
                                <strong>Last Updated:</strong> {{ $subscription->updated_at->diffForHumans() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function cancelSubscription(userName, subscriptionId) {
    Swal.fire({
        title: 'Cancel Subscription Immediately',
        html: 'Are you sure you want to <strong>immediately cancel</strong> ' + userName + '\'s subscription?',
        text: 'This action cannot be undone. The user will lose access immediately.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#ea5455',
        cancelButtonColor: '#7367f0',
        confirmButtonText: '<i class="fas fa-check me-1"></i> Yes, Cancel',
        cancelButtonText: '<i class="fas fa-times me-1"></i> No'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "{{ route('admin.manual-subscriptions.destroy', 'ID') }}".replace('ID', subscriptionId),
                type: 'DELETE',
                data: {_token: '{{ csrf_token() }}'},
                success: function(response) {
                    Swal.fire({
                        title: 'Cancelled!',
                        text: 'Subscription has been cancelled immediately.',
                        icon: 'success',
                        confirmButtonColor: '#28c76f'
                    }).then(() => {
                        window.location.href = "{{ route('admin.manual-subscriptions.index') }}";
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error!',
                        text: xhr.responseJSON?.message || 'Failed to cancel subscription.',
                        icon: 'error',
                        confirmButtonColor: '#ea5455'
                    });
                }
            });
        }
    });
}
</script>
@endpush
@endsection