@push('title')
    Subscription #{{ $subscription->id }}
@endpush

@php
    if (!function_exists('humanTime')) {
        function humanTime(int $days): string {
            if ($days <= 0)  return 'Expired';
            if ($days === 1) return '1 day left';
            if ($days < 7)   return $days . ' days left';
            if ($days < 14)  return '1 week left';
            if ($days < 30)  return round($days / 7) . ' weeks left';
            if ($days < 60)  return '1 month left';
            if ($days < 365) return round($days / 30) . ' months left';
            return round($days / 365, 1) . ' years left';
        }
    }

    $apiKey      = $subscription->apiKeys->first();
    $daysLeft    = $subscription->expires_at ? (int) floor(now()->diffInDays($subscription->expires_at, false)) : null;
    $isExpired   = $subscription->expires_at && $subscription->expires_at->isPast();
    $expiringSoon = !$isExpired && $daysLeft !== null && $daysLeft <= 7;

    $progressPct = 0;
    if ($subscription->starts_at && $subscription->expires_at) {
        $totalDays   = max(1, $subscription->starts_at->diffInDays($subscription->expires_at));
        $elapsed     = $subscription->starts_at->diffInDays(now());
        $progressPct = min(100, round(($elapsed / $totalDays) * 100));
    }
@endphp

<x-app-layout>

    {{-- ── TOP BREADCRUMB BAR ── --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">Subscription #{{ $subscription->id }}</h4>
            <p class="text-muted mb-0" style="font-size:13px;">
                {{ $subscription->user ? $subscription->user->name : 'Unknown User' }} ·
                {{ $subscription->created_at->format('d M Y') }}
            </p>
        </div>
        <a href="{{ route('admin.subscriptions.index') }}" class="btn btn-label-secondary btn-sm">
            <i class="bx bx-chevron-left me-1"></i> Back
        </a>
    </div>

    <div class="row g-4">

        {{-- ══════════════════════════════════
             LEFT COLUMN
        ══════════════════════════════════ --}}
        <div class="col-md-4">

            {{-- Subscriber Profile Card --}}
            <div class="card mb-4">
                <div class="card-body text-center pt-4 pb-4">
                    {{-- Avatar --}}
                    @if ($subscription->user && $subscription->user->profile_picture && !str_starts_with($subscription->user->profile_picture, 'avt') && file_exists(public_path('assets/img/avatars/' . $subscription->user->profile_picture)))
                        <img src="{{ asset('assets/img/avatars/' . $subscription->user->profile_picture) }}"
                             alt="Profile" class="rounded-circle mb-3"
                             width="80" height="80" style="object-fit:cover; border:3px solid #e4e4e7;">
                    @else
                        <div class="rounded-circle d-flex justify-content-center align-items-center mx-auto mb-3 fw-bold"
                             style="width:80px;height:80px;font-size:2rem;color:#fff;background:linear-gradient(135deg,#18181b,#52525b);border:3px solid #e4e4e7;">
                            {{ strtoupper(substr($subscription->user ? $subscription->user->name : 'U', 0, 1)) }}
                        </div>
                    @endif

                    <h5 class="fw-bold mb-1">{{ $subscription->user ? $subscription->user->name : 'N/A' }}</h5>
                    <p class="text-muted mb-3" style="font-size:13px;">{{ $subscription->user ? $subscription->user->email : 'N/A' }}</p>

                    <div class="d-flex justify-content-center gap-3 border-top pt-3">
                        <div class="text-center">
                            <p class="text-muted mb-0" style="font-size:11px; text-transform:uppercase; letter-spacing:1px;">Role</p>
                            <span class="badge bg-label-primary mt-1">
                                {{ $subscription->user ? ucfirst($subscription->user->getRoleNames()->first()) : 'N/A' }}
                            </span>
                        </div>
                        <div class="text-center">
                            <p class="text-muted mb-0" style="font-size:11px; text-transform:uppercase; letter-spacing:1px;">Member Since</p>
                            <span class="fw-semibold d-block mt-1" style="font-size:13px;">
                                {{ $subscription->user ? $subscription->user->created_at->format('M Y') : 'N/A' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- API Key Card --}}
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between border-bottom pb-3">
                    <h6 class="fw-bold mb-0">API Key</h6>
                    @if($apiKey)
                        <span class="badge {{ $apiKey->status === 'active' ? 'bg-success' : 'bg-danger' }}">
                            {{ ucfirst($apiKey->status) }}
                        </span>
                    @else
                        <span class="badge bg-secondary">None</span>
                    @endif
                </div>
                <div class="card-body pt-3">
                    @if($apiKey)
                        <p class="text-muted mb-1" style="font-size:11px; text-transform:uppercase; letter-spacing:1px;">Key String</p>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control font-monospace fw-bold"
                                   style="font-size:12px; background:#f9f9f9;"
                                   value="{{ $apiKey->key }}" readonly id="apiKeyInput">
                            <button class="btn btn-outline-secondary" type="button"
                                    onclick="navigator.clipboard.writeText('{{ $apiKey->key }}').then(() => { this.innerHTML='<i class=\'bx bx-check\'></i>'; setTimeout(() => this.innerHTML='<i class=\'bx bx-copy\'></i>', 1500); })">
                                <i class="bx bx-copy"></i>
                            </button>
                        </div>

                        @can('rotate_subscription_management')
                            <form action="{{ route('admin.subscriptions.rotate', $subscription->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-warning w-100"
                                        onclick="return confirm('Rotate this API key? The subscriber will be notified by email.')">
                                    <i class="bx bx-key me-1"></i> Rotate Key & Notify
                                </button>
                            </form>
                        @endcan
                    @else
                        <div class="text-center py-3">
                            <div style="font-size:2rem;" class="mb-2">🔑</div>
                            <p class="text-muted small mb-3">No API key linked to this subscription.</p>
                            @can('rotate_subscription_management')
                                <form action="{{ route('admin.subscriptions.rotate', $subscription->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="bx bx-plus me-1"></i> Generate Key
                                    </button>
                                </form>
                            @endcan
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════
             RIGHT COLUMN
        ══════════════════════════════════ --}}
        <div class="col-md-8">

            {{-- Subscription Plan Overview --}}
            <div class="card mb-4">
                <div class="card-body p-4">

                    {{-- Plan header row --}}
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <p class="text-muted mb-0" style="font-size:11px; text-transform:uppercase; letter-spacing:1.5px;">Plan</p>
                            <h4 class="fw-bold text-capitalize mb-0">{{ $subscription->plan_type ?: 'Standard' }} Premium</h4>
                        </div>
                        <div class="text-end">
                            <p class="text-muted mb-0" style="font-size:11px; text-transform:uppercase; letter-spacing:1.5px;">Amount Paid</p>
                            <h3 class="fw-bold text-success mb-0">${{ number_format($subscription->amount ?: 0, 2) }}</h3>
                        </div>
                    </div>

                    {{-- Status + Countdown --}}
                    <div class="d-flex align-items-center justify-content-between mb-2 mt-3">
                        <span class="fw-semibold" style="font-size:14px;">Subscription Status</span>
                        @if($isExpired)
                            <span class="badge bg-danger">Expired</span>
                        @elseif($expiringSoon)
                            <span class="badge bg-warning text-dark">Expiring Soon</span>
                        @else
                            <span class="badge bg-success">Active</span>
                        @endif
                    </div>

                    {{-- Progress bar --}}
                    @if($subscription->starts_at && $subscription->expires_at)
                        <div class="progress mb-2" style="height:5px; border-radius:99px; background:#f4f4f5;">
                            <div class="progress-bar {{ $isExpired ? 'bg-danger' : ($expiringSoon ? 'bg-warning' : 'bg-success') }}"
                                 role="progressbar" style="width:{{ $progressPct }}%; border-radius:99px;"></div>
                        </div>
                        <div class="d-flex justify-content-between mb-3" style="font-size:11px; color:#aaa;">
                            <span>{{ $subscription->starts_at->format('d M Y') }}</span>
                            <span>{{ $subscription->expires_at->format('d M Y') }}</span>
                        </div>
                    @endif

                    {{-- Human-readable time left box --}}
                    @if($daysLeft !== null)
                        @if(!$isExpired)
                            <div class="text-center py-3 rounded-3" style="background:#f9f9f9; border:1px solid #efefef;">
                                <span class="fw-bold" style="font-size:24px; letter-spacing:-0.5px; color:{{ $expiringSoon ? '#d97706' : '#16a34a' }};">
                                    {{ humanTime($daysLeft) }}
                                </span>
                            </div>
                        @else
                            <div class="alert alert-danger py-2 px-3 text-center small mb-0">
                                This subscription has expired.
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            {{-- Dates & PayPal Info --}}
            <div class="card mb-4">
                <div class="card-body p-4">
                    <div class="row g-3">

                        <div class="col-md-6">
                            <p class="text-muted mb-1" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">Started On</p>
                            <div class="d-flex align-items-center gap-2">
                                <i class="bx bx-calendar-event text-primary fs-5"></i>
                                <span class="fw-semibold">
                                    {{ $subscription->starts_at ? $subscription->starts_at->format('d F Y') : 'N/A' }}
                                </span>
                            </div>
                            @if($subscription->starts_at)
                                <small class="text-muted">{{ $subscription->starts_at->format('H:i') }}</small>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <p class="text-muted mb-1" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">Expires On</p>
                            <div class="d-flex align-items-center gap-2">
                                <i class="bx bx-calendar-x {{ $isExpired ? 'text-danger' : ($expiringSoon ? 'text-warning' : 'text-success') }} fs-5"></i>
                                <span class="fw-semibold {{ $isExpired ? 'text-danger' : ($expiringSoon ? 'text-warning' : '') }}">
                                    {{ $subscription->expires_at ? $subscription->expires_at->format('d F Y') : 'N/A' }}
                                </span>
                            </div>
                            @if($subscription->expires_at)
                                <small class="text-muted">{{ $subscription->expires_at->format('H:i') }}</small>
                            @endif
                        </div>

                        <div class="col-12">
                            <hr class="my-1">
                        </div>

                        <div class="col-md-6">
                            <p class="text-muted mb-2" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">
                                <i class="bx bxl-paypal me-1"></i> PayPal Order Reference
                            </p>
                            <code class="fw-bold" style="font-size:14px; color:#18181b;">
                                {{ $subscription->paypal_order_id ?: 'N/A' }}
                            </code>
                        </div>

                        <div class="col-md-6">
                            <p class="text-muted mb-2" style="font-size:11px; text-transform:uppercase; letter-spacing:1.2px;">
                                <i class="bx bxl-paypal me-1"></i> PayPal Transaction ID
                            </p>
                            <code class="fw-bold text-success font-monospace" style="font-size:14px;">
                                {{ $subscription->paypal_transaction_id ?: 'N/A' }}
                            </code>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Administrative Controls Card --}}
            <div class="card mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
                        <i class="bx bx-cog text-primary"></i> Administrative Controls
                    </h6>
                    <div class="d-flex flex-wrap gap-3">
                        {{-- Extend Button --}}
                        <button type="button" class="btn btn-primary btn-sm d-flex align-items-center gap-1 px-3 py-2"
                                data-bs-toggle="modal" data-bs-target="#extendSubModal">
                            <i class="bx bx-calendar-plus fs-5"></i> Extend Subscription
                        </button>

                        {{-- Suspend/Reactivate Button --}}
                        <form action="{{ route('admin.subscriptions.toggle-suspend', $subscription->id) }}" method="POST" class="d-inline">
                            @csrf
                            @if($subscription->status === 'active')
                                <button type="submit" class="btn btn-outline-warning btn-sm d-flex align-items-center gap-1 px-3 py-2"
                                        onclick="return confirm('Are you sure you want to suspend this subscription? The linked API key will be disabled.')">
                                    <i class="bx bx-pause-circle fs-5"></i> Suspend Subscription
                                </button>
                            @else
                                <button type="submit" class="btn btn-outline-success btn-sm d-flex align-items-center gap-1 px-3 py-2">
                                    <i class="bx bx-play-circle fs-5"></i> Reactivate Subscription
                                </button>
                            @endif
                        </form>
                    </div>
                </div>
            </div>

            {{-- Actions row --}}
            @can('delete_subscription_management')
                <div class="card border-danger" style="border-width:1px;">
                    <div class="card-body p-4 d-flex align-items-center justify-content-between">
                        <div>
                            <h6 class="fw-bold text-danger mb-1">Delete Subscription</h6>
                            <p class="text-muted small mb-0">This will permanently remove the subscription and all associated API keys.</p>
                        </div>
                        <button type="button" class="btn btn-danger btn-sm ms-3"
                                data-bs-toggle="modal" data-bs-target="#deleteSubModal">
                            <i class="bx bx-trash me-1"></i> Delete
                        </button>
                    </div>
                </div>
            @endcan

        </div>
    </div>

    {{-- Extend Subscription Modal --}}
    <div class="modal fade" id="extendSubModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content p-3">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold">Extend Subscription</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.subscriptions.extend', $subscription->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <p class="text-muted small mb-4">Extend the duration of this premium subscription. If it is currently expired or suspended, the extension will start from today.</p>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Extension Type</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="extension_type" id="extPreset" value="preset" checked>
                                    <label class="form-check-label" for="extPreset">Preset Duration</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="extension_type" id="extCustom" value="custom">
                                    <label class="form-check-label" for="extCustom">Custom Date</label>
                                </div>
                            </div>
                        </div>

                        {{-- Preset Select --}}
                        <div class="mb-3" id="presetContainer">
                            <label for="daysSelect" class="form-label fw-bold">Select Preset</label>
                            <select class="form-select" name="days" id="daysSelect">
                                <option value="7">+7 Days (1 Week)</option>
                                <option value="30" selected>+30 Days (1 Month)</option>
                                <option value="90">+90 Days (3 Months)</option>
                                <option value="365">+365 Days (1 Year)</option>
                            </select>
                        </div>

                        {{-- Custom Date Input --}}
                        <div class="mb-3 d-none" id="customDateContainer">
                            <label for="customDate" class="form-label fw-bold">Choose Expiration Date</label>
                            <input type="date" class="form-control" name="custom_date" id="customDate" min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Apply Extension</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    @can('delete_subscription_management')
        <div class="modal fade" id="deleteSubModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <h3>Warning</h3>
                        <p class="mt-3">Are you sure you want to delete this subscription?</p>
                        <p class="mt-2">Subscriber :- {{ $subscription->user ? $subscription->user->name : 'N/A' }}</p>
                        <p class="mt-2">PayPal Order ID :- {{ $subscription->paypal_order_id }}</p>
                        <p class="mt-2 mb-3">Amount Paid :- ${{ number_format($subscription->amount, 2) }}</p>
                        <form action="{{ route('admin.subscriptions.destroy', $subscription->id) }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger me-3">Delete</button>
                        </form>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const extPreset = document.getElementById('extPreset');
                const extCustom = document.getElementById('extCustom');
                const presetContainer = document.getElementById('presetContainer');
                const customDateContainer = document.getElementById('customDateContainer');

                function toggleContainers() {
                    if (extPreset.checked) {
                        presetContainer.classList.remove('d-none');
                        customDateContainer.classList.add('d-none');
                    } else {
                        presetContainer.classList.add('d-none');
                        customDateContainer.classList.remove('d-none');
                    }
                }

                if (extPreset && extCustom) {
                    extPreset.addEventListener('change', toggleContainers);
                    extCustom.addEventListener('change', toggleContainers);
                }
            });
        </script>
    @endpush

</x-app-layout>