@extends('layouts.admin.app')

@section('title', __('pages/admin/subscription.title'))

@section('content')
<div
    class="animate-fade-in"
    x-data="subscriptionsManagementPage({
        indexUrl: @js(route('admin.subscriptions.index')),
        hasRecords: @js(($totalSubscriptions ?? 0) > 0),
        messages: @js(array_merge(trans('pages/admin/subscription.cancel'), [
            'confirm' => __('buttons.cancel'),
            'cancel_failed' => __('messages.change.failed', ['attribute' => __('pages/admin/subscription.heading.singular')]),
        ])),
    })">

    <div class="px-4 py-4">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/subscription.section')],
            ['label' => __('pages/admin/subscription.heading.plural')],
        ]" />
    </div>

    <div class="px-6 pb-6 space-y-4 mt-1" data-cb-ajax-table>
        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
            <div
                data-cb-table-toolbar
                class="flex items-center gap-2 min-w-0 @if(($totalSubscriptions ?? 0) === 0) hidden @endif">

                <div class="w-64 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        placeholder="{{ __('pages/admin/subscription.search_placeholder') }}" />
                </div>

                <x-common.table-filter>
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/common.status.label') }}</x-forms.label>
                        <x-forms.select data-cb-filter="status">
                            <option value="">{{ __('pages/common.status.all') }}</option>
                            @foreach(['active', 'trialing', 'canceled', 'incomplete', 'past_due', 'unpaid'] as $status)
                                <option value="{{ $status }}">{{ \App\Support\SubscriptionStatusLabel::for($status) }}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                </x-common.table-filter>

                <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    {{ __('buttons.filter.reset') }}
                </x-buttons.secondary>
            </div>
        </div>

        <div class="hidden" data-cb-skeleton-template>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
                <div class="overflow-x-auto overflow-y-clip">
                    <table class="w-full table-fixed text-left text-sm text-muted-foreground">
                        <thead class="sr-only">
                            <tr>
                                <th>{{ __('form.label.user') }}</th>
                                <th>{{ __('pages/admin/subscription.table.plan') }}</th>
                                <th>{{ __('form.label.status') }}</th>
                                <th>{{ __('pages/admin/subscription.table.stripe_subscription') }}</th>
                                <th>{{ __('pages/admin/subscription.table.started') }}</th>
                                <th>{{ __('buttons.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for($i = 0; $i < (int) config('pagination.skeleton_rows', 7); $i++)
                                <tr class="border-t border-border bg-card">
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-48 max-w-full rounded" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-40 max-w-full rounded" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-5 w-16 rounded-full" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-28 max-w-full rounded" /></td>
                                    <td class="align-middle"><x-skeleton.horizontal class="h-4 w-20 max-w-full rounded" /></td>
                                    <td class="text-right align-middle"><x-skeleton.horizontal class="h-8 w-20 rounded-lg" /></td>
                                </tr>
                            @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="hidden" data-cb-empty-template>
            <x-no-data-available
                :title="__('pages/admin/subscription.no_data_available.title')"
                :description="__('pages/admin/subscription.no_data_available.description')"
                :buttonText="''" />
        </div>

        <div id="table-container"></div>
    </div>

    <x-alert-dialog />
</div>
@endsection

@push('before-app-js')
@vite(['resources/js/admin/subscription/subscriptions-management.js'])
@endpush