{{--
| Package comparison drawer.
|
| Answers the question the table cannot: of the packages I have selected, which
| is actually the better deal? Every row is derived from the same collection the
| grid is showing — nothing here is fetched or invented.
--}}

<div x-show="compareOpen" x-cloak @click="compareOpen = false"
     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="compareOpen" x-cloak
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full"
       class="fixed inset-x-0 bottom-0 z-50 max-h-[85vh] rounded-t-2xl border-t border-slate-200 bg-white
              shadow-2xl dark:border-white/[0.06] dark:bg-shell-card"
       role="dialog" aria-modal="true" aria-label="Compare packages">

    <header class="flex items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-white/[0.06]">
        <div>
            <h2 class="text-sm font-semibold text-slate-900 dark:text-white">Compare packages</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400">
                <span x-text="selectedPackages.length"></span> selected · the cheapest daily rate is highlighted
            </p>
        </div>

        <button type="button" @click="compareOpen = false" 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 max-h-[calc(85vh-5rem)] overflow-auto p-5">
        <table class="w-full text-sm">
            <thead>
                <tr>
                    <th scope="col" class="w-40 pb-3 text-left text-[11px] font-semibold uppercase tracking-wider
                                           text-slate-500 dark:text-slate-400">Attribute</th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <th scope="col" class="min-w-[9rem] px-3 pb-3 text-left">
                            <span class="block truncate text-[13px] font-semibold text-slate-900 dark:text-white"
                                  x-text="pkg.name"></span>
                            <span class="block truncate font-mono text-[10px] text-slate-400 dark:text-slate-500"
                                  x-text="pkg.slug"></span>
                        </th>
                    </template>
                </tr>
            </thead>

            <tbody class="divide-y divide-slate-100 dark:divide-white/[0.06]">
                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">Price</th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5 text-[13px] font-bold text-slate-900 dark:text-white" x-text="money(pkg.price)"></td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">Duration</th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5 text-[13px] text-slate-700 dark:text-slate-200" x-text="durationLabel(pkg)"></td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">
                        Price per day
                    </th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5">
                            {{-- The one cell that makes the comparison worth
                                 opening: cheapest daily rate wins the green. --}}
                            <span class="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] font-semibold"
                                  :class="perDayOf(pkg) !== null
                                      && perDayOf(pkg) === Math.min(...selectedPackages.map(p => perDayOf(p)).filter(v => v !== null))
                                      ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
                                      : 'text-slate-700 dark:text-slate-200'">
                                <span x-text="perDayOf(pkg) !== null ? `Rs ${perDayOf(pkg).toFixed(2)}` : '—'"></span>
                            </span>
                        </td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">Billing</th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5 text-[13px] capitalize text-slate-700 dark:text-slate-200" x-text="pkg.billing"></td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">
                        Licenses issued
                    </th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5 text-[13px] text-slate-700 dark:text-slate-200">
                            <span x-text="pkg.licenses"></span>
                            <span class="text-slate-400 dark:text-slate-500"
                                  x-text="` (${Math.round(shareOfLicenses(pkg))}%)`"></span>
                        </td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">
                        Revenue booked
                    </th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5 text-[13px] font-semibold text-emerald-600 dark:text-emerald-400"
                            x-text="money(revenueOf(pkg))"></td>
                    </template>
                </tr>

                <tr>
                    <th scope="row" class="py-2.5 text-left text-xs font-medium text-slate-500 dark:text-slate-400">Status</th>
                    <template x-for="pkg in selectedPackages" :key="pkg.id">
                        <td class="px-3 py-2.5">
                            <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="pkg.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="pkg.active ? 'bg-emerald-500' : 'bg-slate-400'"></span>
                                <span x-text="pkg.active ? 'Active' : 'Inactive'"></span>
                            </span>
                        </td>
                    </template>
                </tr>
            </tbody>
        </table>
    </div>
</aside>