{{--
| Package details drawer.
|
| The packages resource has no `show` route (the controller declares
| ->except('show')), and this redesign may not add one — so the detail view is a
| drawer built from the collection already on the page rather than a page that
| would 404.
--}}

<div x-show="detailsId !== null" x-cloak @click="detailsId = null"
     x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
     x-transition:leave="transition ease-in duration-150" x-transition:leave-end="opacity-0"
     class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm"></div>

<aside x-show="detailsId !== null" x-cloak
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
       class="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col bg-white shadow-2xl dark:bg-shell-card"
       role="dialog" aria-modal="true" aria-label="Package details">

    <template x-if="detailsPackage">
        <div class="flex min-h-0 flex-1 flex-col">
            <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5
                           dark:border-white/[0.06]">
                <div class="flex min-w-0 items-center gap-3">
                    <span class="grid size-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600
                                 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/10 dark:text-brand-400">
                        <x-icon name="package" class="size-4" />
                    </span>
                    <span class="min-w-0">
                        <span class="block truncate text-sm font-semibold text-slate-900 dark:text-white"
                              x-text="detailsPackage.name"></span>
                        <span class="block truncate font-mono text-[11px] text-slate-500 dark:text-slate-400"
                              x-text="detailsPackage.slug"></span>
                    </span>
                </div>

                <button type="button" @click="detailsId = null" aria-label="Close"
                        class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                               dark:hover:bg-white/10 dark:hover:text-white">
                    <x-icon name="x" class="size-5" />
                </button>
            </header>

            <div class="scroll-slim min-h-0 flex-1 overflow-y-auto p-5">

                {{-- Headline numbers --}}
                <div class="grid grid-cols-2 gap-3">
                    <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Price</p>
                        <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white" x-text="money(detailsPackage.price)"></p>
                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400"
                           x-text="perDayOf(detailsPackage) ? `Rs ${perDayOf(detailsPackage).toFixed(2)} per day` : 'Quoted per license'"></p>
                    </div>

                    <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Licenses</p>
                        <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white" x-text="detailsPackage.licenses"></p>
                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400"
                           x-text="`${Math.round(shareOfLicenses(detailsPackage))}% of all issued`"></p>
                    </div>
                </div>

                {{-- Revenue is stated with its formula attached: this is not a
                     ledger figure, it is price × licences issued. --}}
                <div class="mt-3 rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                    <div class="flex items-baseline justify-between gap-2">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                            Revenue booked
                        </p>
                        <p class="text-[11px] text-slate-500 dark:text-slate-400"
                           x-text="`${Math.round(shareOfRevenue(detailsPackage))}% of total`"></p>
                    </div>
                    <p class="mt-1 text-xl font-bold text-emerald-600 dark:text-emerald-400"
                       x-text="money(revenueOf(detailsPackage))"></p>
                    <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100 dark:bg-white/[0.06]">
                        <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-400 transition-all duration-500"
                             :style="`width: ${shareOfRevenue(detailsPackage)}%`"></div>
                    </div>
                    <p class="mt-1.5 text-[11px] text-slate-400 dark:text-slate-500">
                        Package price × licenses issued.
                    </p>
                </div>

                {{-- Everything the record actually stores --}}
                <h3 class="profile-heading mt-5">Package record</h3>
                <dl class="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200/80
                           dark:divide-white/[0.06] dark:border-white/[0.06]">
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Duration</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="durationLabel(detailsPackage)"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Billing cycle</dt>
                        <dd class="text-xs font-semibold capitalize text-slate-800 dark:text-slate-100" x-text="detailsPackage.billing"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Status</dt>
                        <dd>
                            <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 ring-inset"
                                  :class="detailsPackage.active
                                      ? 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-500/10 dark:text-emerald-400 dark:ring-emerald-500/30'
                                      : 'bg-slate-100 text-slate-600 ring-slate-500/20 dark:bg-white/5 dark:text-slate-400 dark:ring-white/10'">
                                <span class="size-1.5 rounded-full" :class="detailsPackage.active ? 'bg-emerald-500' : 'bg-slate-400'"></span>
                                <span x-text="detailsPackage.active ? 'Active' : 'Inactive'"></span>
                            </span>
                        </dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Sort order</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="detailsPackage.sort"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Created</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="detailsPackage.createdLabel"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Slug</dt>
                        <dd class="flex items-center gap-1.5">
                            <code class="font-mono text-xs text-slate-800 dark:text-slate-100" x-text="detailsPackage.slug"></code>
                            <button type="button" @click="copy(detailsPackage.slug, 'Slug copied')"
                                    class="rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                                           dark:hover:bg-white/10 dark:hover:text-white" aria-label="Copy slug">
                                <x-icon name="copy" class="size-3.5" />
                            </button>
                        </dd>
                    </div>
                </dl>

                {{-- What a package can and cannot do is a property of this
                     system, not of the row — so it is described as such rather
                     than dressed up as a per-package feature matrix. --}}
                <h3 class="profile-heading mt-5">What a license from this package grants</h3>
                <ul class="space-y-1.5">
                    @foreach ([
                        ['globe', 'One bound domain', 'A key activates against a single installation.'],
                        ['refresh', 'Automatic updates', 'Published releases reach every active install.'],
                        ['zap', 'Instant status sync', 'Suspend or renew pushes to the install immediately.'],
                        ['shield-check', 'Signed verification', 'Installs re-verify on the configured interval.'],
                    ] as [$icon, $title, $description])
                        <li class="flex items-start gap-2.5 rounded-xl border border-slate-200/80 p-2.5 dark:border-white/[0.06]">
                            <span class="grid size-7 shrink-0 place-items-center rounded-lg bg-emerald-50 text-emerald-600
                                         dark:bg-emerald-500/10 dark:text-emerald-400">
                                <x-icon :name="$icon" class="size-3.5" />
                            </span>
                            <span class="min-w-0">
                                <span class="block text-xs font-semibold text-slate-800 dark:text-slate-100">{{ $title }}</span>
                                <span class="block text-[11px] leading-relaxed text-slate-500 dark:text-slate-400">{{ $description }}</span>
                            </span>
                        </li>
                    @endforeach
                </ul>
                <p class="mt-2 text-[11px] leading-relaxed text-slate-400 dark:text-slate-500">
                    These apply to every package — the catalogue stores a term, a cycle and a price, not per-package entitlements.
                </p>
            </div>

            <footer class="flex shrink-0 items-center gap-2 border-t border-slate-200 p-4 dark:border-white/[0.06]">
                <button type="button" @click="openEdit(detailsPackage.id)" class="btn-primary flex-1">
                    <x-icon name="edit" class="size-4" /> Edit package
                </button>
                <button type="button" @click="duplicate(detailsPackage.id)"
                        class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-600
                               transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5">
                    <x-icon name="copy" class="size-4" />
                    <span class="sr-only">Duplicate</span>
                </button>
                <button type="button" @click="setActive(detailsPackage.id, ! detailsPackage.active)"
                        class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-600
                               transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
                        :aria-label="detailsPackage.active ? 'Deactivate package' : 'Activate package'">
                    <x-icon name="pause" class="size-4" x-show="detailsPackage.active" />
                    <x-icon name="play" class="size-4" x-show="! detailsPackage.active" />
                </button>
            </footer>
        </div>
    </template>
</aside>