{{-- `sel` is the ONLY selection state the checkboxes touch: an entangled (deferred)
     mirror of $selected, so ticking boxes is instant and costs ZERO round-trips —
     the ids ride along with the next real action (bulk delete/hide/activate). --}}
<div x-data="{ collapsed: false, sel: $wire.entangle('selected') }">
    <x-admin.page-header :title="__('Services')" :subtitle="__('Your sellable catalogue and pricing, grouped by category.')" icon="layers">
        <x-slot:actions>
            {{-- Collapse/expand every category card at once (the reference panel's "Hide All"). --}}
            <button type="button" class="rf-btn rf-btn-secondary"
                    @click="collapsed = !collapsed; $dispatch(collapsed ? 'services-collapse' : 'services-expand')">
                <i data-lucide="chevrons-down-up" style="width:16px;height:16px;"></i>
                <span x-text="collapsed ? @js(__('Expand all')) : @js(__('Collapse all'))"></span>
            </button>

            {{-- Import from provider: single provider = direct link; multiple = dropdown. --}}
            @if ($providers->count() === 1 && $providers->first())
                <a href="{{ route('admin.providers.catalog', $providers->first()) }}" wire:navigate class="rf-btn rf-btn-secondary">
                    <i data-lucide="download" style="width:16px;height:16px;"></i>{{ __('Import services') }}
                </a>
            @elseif ($providers->count() > 1)
                <div x-data="{ open: false }" @click.outside="open = false" class="relative">
                    <button type="button" class="rf-btn rf-btn-secondary" @click="open = !open">
                        <i data-lucide="download" style="width:16px;height:16px;"></i>
                        {{ __('Import services') }}
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </button>
                    <div x-show="open" x-cloak x-transition
                         class="rf-menu" style="position:absolute;z-index:50;right:0;top:calc(100% + 4px);min-width:200px;">
                        @foreach ($providers as $p)
                            <a href="{{ route('admin.providers.catalog', $p) }}" wire:navigate class="rf-menu-item" @click="open = false">
                                <i data-lucide="plug" style="width:14px;height:14px;"></i>
                                {{ $p->name }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <button class="rf-btn rf-btn-primary" wire:click="create">
                <i data-lucide="plus" style="width:16px;height:16px;"></i>{{ __('Add new') }}
            </button>
        </x-slot:actions>
    </x-admin.page-header>

    {{-- Filters: free-text search + searchable category + provider / status / type --}}
    <x-admin.filter-bar :placeholder="__('Search by name, ID or provider service ID…')">
        <x-slot:controls>
            {{-- Searchable category picker (hundreds of categories: typeahead, never a full select) --}}
            <div x-data="{ open: false }" @click.outside="open = false" class="relative" style="min-width:200px;">
                @if ($selectedCategoryName)
                    <button type="button" wire:click="clearCategory"
                            class="rf-input flex items-center justify-between gap-2" style="width:100%;">
                        <span class="truncate">{{ $selectedCategoryName }}</span>
                        <i data-lucide="x" style="width:15px;height:15px;flex-shrink:0;color:var(--color-text-subtle);"></i>
                    </button>
                @else
                    <input type="text" wire:model.live.debounce.300ms="categorySearch"
                           @focus="open = true" @input="open = true"
                           placeholder="{{ __('Filter by category…') }}" class="rf-input" style="width:100%;">
                    <div x-show="open" x-cloak x-transition
                         class="rf-menu" style="position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;">
                        @forelse ($categoryOptions as $opt)
                            <button type="button" class="rf-menu-item" style="width:100%;text-align:left;"
                                    wire:click="selectCategory({{ $opt->id }})" @click="open = false">
                                {{ $opt->name }}
                            </button>
                        @empty
                            <div class="px-3 py-2 text-xs" style="color:var(--color-text-subtle);">
                                {{ $categorySearch === '' ? __('Type to search categories…') : __('No categories match.') }}
                            </div>
                        @endforelse
                    </div>
                @endif
            </div>

            <select wire:model.live="providerFilter" class="rf-select" style="width:auto;">
                <option value="">{{ __('All providers') }}</option>
                {{-- Orphans: api services whose provider was deleted (fk SET NULL). --}}
                <option value="none">{{ __('(no provider)') }}</option>
                @foreach ($providers as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
            </select>

            <select wire:model.live="typeFilter" class="rf-select" style="width:auto;">
                <option value="">{{ __('All types') }}</option>
                @foreach ($types as $label => $slug)<option value="{{ $slug }}">{{ __($label) }}</option>@endforeach
            </select>

            <select wire:model.live="statusFilter" class="rf-select" style="width:auto;">
                <option value="">{{ __('Any status') }}</option>
                <option value="active">{{ __('Active') }}</option>
                <option value="inactive">{{ __('Inactive') }}</option>
            </select>
        </x-slot:controls>
    </x-admin.filter-bar>

    {{-- Summary line: how many services across how many category groups --}}
    <div class="mb-3 flex items-center gap-2 text-xs" style="color:var(--color-text-subtle);">
        <span class="rf-chip">{{ trans_choice(':count service|:count services', $matchedTotal, ['count' => number_format($matchedTotal)]) }}</span>
        <span>{{ __('in') }}</span>
        <span class="rf-chip">{{ trans_choice(':count category|:count categories', $categories->total(), ['count' => number_format($categories->total())]) }}</span>
    </div>

    {{-- ══ One collapsible card per category, its services beneath (reference panel A5) ══ --}}
    @forelse ($categories as $category)
        @php
            $rows = $grouped->get($category->id, collect());
            // Ids of every service in this group (string-keyed, same shape as the
            // checkbox values) — handed to Alpine so the group checkbox works
            // entirely client-side against `sel`.
            $catRowIds = $rows->pluck('id')->map(fn ($id) => (string) $id)->values()->all();
        @endphp
        <div wire:key="cat-{{ $category->id }}"
             x-data="{ open: true, ids: @js($catRowIds), allIn() { return this.ids.length > 0 && this.ids.every(i => this.sel.includes(i)) } }"
             @services-collapse.window="open = false" @services-expand.window="open = true"
             class="rf-card mb-4">
            {{-- Category header: name (with its raw emojis/stars) + count + collapse ▲/✕ --}}
            <div class="flex items-center justify-between gap-3 px-5 py-3"
                 style="border-bottom:1px solid var(--color-border);cursor:pointer;"
                 @click="open = !open">
                <div class="flex min-w-0 items-center gap-2">
                    {{-- Select every service in this category (the reference panel per-group select) — client-side, instant. --}}
                    <input type="checkbox" class="rf-checkbox" x-on:click.stop
                           x-bind:checked="allIn()"
                           x-on:change="allIn() ? sel = sel.filter(i => !ids.includes(i)) : sel = [...new Set([...sel, ...ids])]"
                           title="{{ __('Select all in this category') }}">
                    @if ($category->platform)
                        <i data-lucide="{{ $category->platform->icon ?: 'grid' }}"
                           style="width:16px;height:16px;flex-shrink:0;color:var(--color-text-subtle);"></i>
                    @endif
                    <h2 class="rf-card-title truncate">{{ $category->name }}</h2>
                    <span class="rf-chip" style="flex-shrink:0;">{{ number_format($category->matched_count) }}</span>
                    <a href="#" wire:click.prevent="selectCategory({{ $category->id }})" @click.stop
                       class="rf-icon-btn" style="width:26px;height:26px;" title="{{ __('Open this category') }}">
                        <i data-lucide="external-link" style="width:14px;height:14px;"></i>
                    </a>
                </div>
                <button type="button" class="rf-icon-btn" style="width:28px;height:28px;flex-shrink:0;"
                        @click.stop="open = !open" :title="open ? @js(__('Collapse')) : @js(__('Expand'))">
                    <i data-lucide="chevron-up"
                       x-bind:style="open ? '' : 'transform:rotate(180deg)'"
                       style="width:16px;height:16px;flex-shrink:0;color:var(--color-text-muted);transition:transform var(--motion-base) var(--ease-out);"></i>
                </button>
            </div>

            <div x-show="open" x-collapse>
                <div class="overflow-x-auto">
                    <table class="rf-table">
                        <thead>
                            <tr>
                                <th style="width:36px;padding-right:0;"><span class="sr-only">{{ __('Select') }}</span></th>
                                <th>{{ __('Service') }}</th>
                                <th>{{ __('Provider') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th class="text-right">{{ __('Rate / 1000') }}</th>
                                <th class="text-right">{{ __('Min / Max') }}</th>
                                <th style="text-align:center;width:60px;">{{ __('View') }}</th>
                                <th style="width:70px;">{{ __('Status') }}</th>
                                <th style="width:70px;text-align:right;">{{ __('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody x-data="{ openDesc: null }">
                            @foreach ($rows->take($rowCap) as $s)
                                <tr wire:key="svc-{{ $s->id }}">
                                    {{-- Row selector for the bulk actions — client-side (`sel`), never a round-trip --}}
                                    <td style="width:36px;padding-right:0;">
                                        <input type="checkbox" class="rf-checkbox" value="{{ $s->id }}" x-model="sel">
                                    </td>

                                    {{-- Service name + internal ID --}}
                                    <td>
                                        <div class="text-sm font-medium">{{ \Illuminate\Support\Str::limit($s->name, 52) }}</div>
                                        <div class="text-xs rf-mono" style="color:var(--color-text-subtle);">ID {{ $s->id }}</div>
                                    </td>

                                    {{-- Provider + provider service id (e.g. "REDFAMOSA · 8476") --}}
                                    <td>
                                        @if ($s->add_type === 'api')
                                            <div class="text-xs font-medium">{{ $s->provider?->name ?? __('API') }}</div>
                                            @if ($s->api_service_id)
                                                <div class="text-xs rf-mono" style="color:var(--color-text-subtle);">{{ $s->api_service_id }}</div>
                                            @endif
                                        @else
                                            <span class="text-xs" style="color:var(--color-text-muted);">{{ __('Manual') }}</span>
                                        @endif
                                    </td>

                                    {{-- Type + capability icons --}}
                                    <td>
                                        <div class="flex flex-wrap items-center gap-1">
                                            <span class="rf-chip">{{ __(ucfirst(str_replace('_', ' ', $s->service_type))) }}</span>
                                            @if ($s->refill)<i data-lucide="rotate-cw" style="width:12px;height:12px;color:var(--color-text-subtle);" title="{{ __('Refill') }}"></i>@endif
                                            @if ($s->cancel)<i data-lucide="x-circle" style="width:12px;height:12px;color:var(--color-text-subtle);" title="{{ __('Cancel button') }}"></i>@endif
                                            @if ($s->dripfeed)<i data-lucide="droplets" style="width:12px;height:12px;color:var(--color-text-subtle);" title="{{ __('Drip-feed') }}"></i>@endif
                                        </div>
                                    </td>

                                    {{-- Rate per 1000: sale on top, provider cost below (red if cost > sale) --}}
                                    <td class="text-right">
                                        <div class="rf-mono tabular text-sm font-medium">{{ rate_money($s->owner_price, current_panel()?->base_currency ?? 'USD') }}</div>
                                        @if ($s->cost_price !== null)
                                            <div class="rf-mono tabular text-xs"
                                                 style="color:{{ (float) $s->cost_price > (float) $s->owner_price ? 'var(--color-danger)' : 'var(--color-text-subtle)' }};">
                                                {{ rate_money($s->cost_price, current_panel()?->base_currency ?? 'USD') }}
                                            </div>
                                        @endif
                                    </td>

                                    {{-- Min / Max, with the scraped average delivery time beneath (when present) --}}
                                    <td class="text-right text-xs" style="color:var(--color-text-muted);">
                                        <div class="tabular">{{ number_format($s->min) }} <span style="color:var(--color-text-subtle);">/</span> {{ number_format($s->max) }}</div>
                                        @if (filled($s->average_time))
                                            <div class="mt-0.5 inline-flex items-center gap-1" style="color:var(--color-text-subtle);" title="{{ __('Average delivery time') }}">
                                                <i data-lucide="timer" style="width:11px;height:11px;"></i>{{ $s->average_time }}
                                            </div>
                                        @endif
                                    </td>

                                    {{-- View: toggles a description row (only when a description exists) --}}
                                    <td class="text-center">
                                        @if (filled($s->description))
                                            <button type="button" class="rf-icon-btn" style="width:28px;height:28px;"
                                                    @click="openDesc = (openDesc === {{ $s->id }} ? null : {{ $s->id }})"
                                                    title="{{ __('View') }}">
                                                <i data-lucide="eye" style="width:15px;height:15px;"></i>
                                            </button>
                                        @else
                                            <span style="color:var(--color-text-subtle);">—</span>
                                        @endif
                                    </td>

                                    {{-- Status toggle --}}
                                    <td><x-admin.switch :active="$s->status" wire:click="toggleStatus({{ $s->id }})" /></td>

                                    {{-- Shared kebab: edit / reorder / delete --}}
                                    <td class="text-right">
                                        <x-admin.kebab>
                                            <button class="rf-menu-item" wire:click="edit({{ $s->id }})"><i data-lucide="pencil" style="width:15px;height:15px;"></i>{{ __('Edit') }}</button>
                                            <button class="rf-menu-item" wire:click="move({{ $s->id }}, 'up')"><i data-lucide="arrow-up" style="width:15px;height:15px;"></i>{{ __('Move up') }}</button>
                                            <button class="rf-menu-item" wire:click="move({{ $s->id }}, 'down')"><i data-lucide="arrow-down" style="width:15px;height:15px;"></i>{{ __('Move down') }}</button>
                                            <div class="rf-menu-sep"></div>
                                            <button class="rf-menu-item rf-menu-item-danger" wire:click="delete({{ $s->id }})"
                                                    @rfconfirm(
                                                        title: __('Delete service'),
                                                        text: __('The service is deleted permanently.'),
                                                        action: __('Delete service'),
                                                    )><i data-lucide="trash-2" style="width:15px;height:15px;"></i>{{ __('Delete') }}</button>
                                        </x-admin.kebab>
                                    </td>
                                </tr>

                                {{-- Expandable description row (opened by the View button) --}}
                                @if (filled($s->description))
                                    <tr x-show="openDesc === {{ $s->id }}" x-cloak wire:key="desc-{{ $s->id }}">
                                        <td colspan="9" style="background:var(--color-surface-2);">
                                            <div class="text-xs" style="color:var(--color-text-muted);white-space:pre-line;">{{ $s->description }}</div>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach

                            {{-- Overflow guard: a single huge category renders up to the cap --}}
                            @if ($rows->count() > $rowCap)
                                <tr>
                                    <td colspan="9" class="text-center text-xs" style="color:var(--color-text-subtle);padding:12px;">
                                        {{ __('Showing :shown of :total services — open this category to page through the rest.', ['shown' => number_format($rowCap), 'total' => number_format($category->matched_count)]) }}
                                        <a href="#" wire:click.prevent="selectCategory({{ $category->id }})" class="rf-link">{{ __('Open this category') }}</a>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @empty
        <x-admin.card>
            <div class="flex flex-col items-center justify-center gap-2 py-12 text-center">
                <span class="flex h-12 w-12 items-center justify-center rounded-full"
                      style="background:var(--color-surface-2);color:var(--color-text-subtle);">
                    <i data-lucide="layers" style="width:22px;height:22px;"></i>
                </span>
                <p class="text-sm font-medium" style="color:var(--color-text);">{{ __('No services found') }}</p>
                <p class="text-sm" style="color:var(--color-text-subtle);">{{ __('Try a different search term or filter.') }}</p>
            </div>
        </x-admin.card>
    @endforelse

    {{-- Pagination BY GROUPS: pages the category cards, never the 5k row list --}}
    @if ($categories->hasPages())
        <div class="mt-2">{{ $categories->links() }}</div>
    @endif

    {{-- ══ Bulk action bar (sticky) — the reference panel services bulk-action parity ══
         Always in the DOM, shown/hidden client-side so it appears the instant a
         box is ticked (no server round-trip). A wire:loading overlay covers the
         bar while a bulk action runs so it never looks frozen. --}}
    <div class="rf-bulkbar" x-cloak x-show="sel.length > 0" wire:key="services-bulkbar"
         wire:loading.class="rf-paginating" wire:target="bulkActivate, bulkHide, bulkDelete, selectAllFiltered">
        <span class="rf-bulkbar-count" x-text="sel.length.toLocaleString() + ' ' + @js(__('selected'))"></span>
        <button type="button" class="rf-link" wire:click="selectAllFiltered"
                x-show="sel.length < {{ (int) $matchedTotal }}">
            {{ __('Select all :n filtered', ['n' => number_format($matchedTotal)]) }}
        </button>
        <span class="rf-bulkbar-sep"></span>
        <button type="button" class="rf-btn rf-btn-sm rf-btn-secondary" wire:click="bulkActivate" wire:target="bulkActivate" wire:loading.attr="disabled">
            <i data-lucide="eye" style="width:14px;height:14px;"></i>{{ __('Activate') }}
        </button>
        <button type="button" class="rf-btn rf-btn-sm rf-btn-secondary" wire:click="bulkHide" wire:target="bulkHide" wire:loading.attr="disabled">
            <i data-lucide="eye-off" style="width:14px;height:14px;"></i>{{ __('Hide') }}
        </button>
        <button type="button" class="rf-btn rf-btn-sm rf-btn-danger" wire:click="bulkDelete" wire:target="bulkDelete" wire:loading.attr="disabled"
                @rfconfirm(
                    title: __('Delete selected services'),
                    text: __('The selected services are deactivated instead of deleted if they have orders, to protect your order history.'),
                    action: __('Delete services'),
                    note: __('This cannot be undone.'),
                )>
            <i data-lucide="trash-2" style="width:14px;height:14px;"></i>{{ __('Delete') }}
        </button>
        <span class="rf-bulkbar-sep"></span>
        <button type="button" class="rf-icon-btn" style="width:30px;height:30px;" @click="sel = []" title="{{ __('Clear selection') }}">
            <i data-lucide="x" style="width:16px;height:16px;"></i>
        </button>
    </div>

    {{-- ══ Add / edit service modal (the pricing core) ══ --}}
    <x-admin.modal wire-model="showModal" :title="$editingId ? __('Edit service') : __('Add new service')" size="lg">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label class="rf-label">{{ __('Service name') }} *</label>
                <input type="text" wire:model="form.name" class="rf-input @error('form.name') rf-input-error @enderror">
                @error('form.name') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('Category') }} *</label>
                <select wire:model="form.category_id" class="rf-select">
                    @foreach ($modalCategories as $cat)<option value="{{ $cat->id }}">{{ $cat->name }}</option>@endforeach
                </select>
            </div>
            <div>
                <label class="rf-label">{{ __('Mode') }}</label>
                <select wire:model.live="form.add_type" class="rf-select">
                    <option value="manual">{{ __('Manual') }}</option>
                    <option value="api">{{ __('API provider') }}</option>
                </select>
            </div>
            <div>
                <label class="rf-label">{{ __('Service Type') }}</label>
                <select wire:model="form.service_type" class="rf-select">
                    @foreach ($types as $label => $slug)<option value="{{ $slug }}">{{ __($label) }}</option>@endforeach
                </select>
            </div>

            {{-- Provider link (API mode only) --}}
            @if (($form['add_type'] ?? 'manual') === 'api')
                <div>
                    <label class="rf-label">{{ __('Provider') }} *</label>
                    <select wire:model="form.api_provider_id" class="rf-select @error('form.api_provider_id') rf-input-error @enderror">
                        <option value="">{{ __('Choose provider') }}</option>
                        @foreach ($providers as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
                    </select>
                    @error('form.api_provider_id') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="rf-label">{{ __('Provider Service ID') }} *</label>
                    <input type="text" wire:model="form.api_service_id" class="rf-input @error('form.api_service_id') rf-input-error @enderror">
                    @error('form.api_service_id') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                </div>
            @endif

            {{-- Pricing --}}
            <div>
                <label class="rf-label">{{ __('Rate per 1000') }} *</label>
                <input type="number" step="0.0001" min="0" wire:model="form.owner_price" class="rf-input @error('form.owner_price') rf-input-error @enderror">
                @error('form.owner_price') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('Provider cost / 1000') }}</label>
                <input type="number" step="0.0001" min="0" wire:model="form.cost_price" class="rf-input" placeholder="{{ __('Optional') }}">
            </div>
            <div>
                <label class="rf-label">{{ __('Min order') }} *</label>
                <input type="number" min="1" wire:model="form.min" class="rf-input @error('form.min') rf-input-error @enderror">
                @error('form.min') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('Max order') }} *</label>
                <input type="number" min="1" wire:model="form.max" class="rf-input @error('form.max') rf-input-error @enderror">
                @error('form.max') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="rf-label">{{ __('Overflow %') }}</label>
                <input type="number" step="0.01" min="0" wire:model="form.overflow_percent" class="rf-input">
            </div>
            <div>
                <label class="rf-label">{{ __('Auto markup %') }}</label>
                <input type="number" step="0.01" min="0" wire:model="form.markup_percent" class="rf-input">
            </div>

            {{-- Capabilities --}}
            <div class="sm:col-span-2 grid grid-cols-2 gap-3 sm:grid-cols-4">
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.dripfeed" class="rf-checkbox">{{ __('Drip-feed') }}</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.refill" class="rf-checkbox">{{ __('Refill') }}</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.cancel" class="rf-checkbox">{{ __('Cancel button') }}</label>
                <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.deny_duplicates" class="rf-checkbox">{{ __('Prevent duplicates') }}</label>
            </div>

            {{-- Provider sync toggles (API mode only) --}}
            @if (($form['add_type'] ?? 'manual') === 'api')
                <div class="sm:col-span-2">
                    <p class="rf-label">{{ __('Sync with provider') }}</p>
                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_rate" class="rf-checkbox">{{ __('Rate') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_min" class="rf-checkbox">{{ __('Min') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_max" class="rf-checkbox">{{ __('Max') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_status" class="rf-checkbox">{{ __('Status') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_name" class="rf-checkbox">{{ __('Name') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="form.sync_description" class="rf-checkbox">{{ __('Description') }}</label>
                    </div>
                </div>
            @endif

            <div class="sm:col-span-2">
                <label class="rf-label">{{ __('Description') }}</label>
                <textarea wire:model="form.description" rows="3" class="rf-textarea"></textarea>
            </div>
        </div>
        <x-slot:footer>
            <button type="button" class="rf-btn rf-btn-secondary" @click="open = false">{{ __('Cancel') }}</button>
            <button type="button" class="rf-btn rf-btn-primary" wire:click="save">{{ __('Save service') }}</button>
        </x-slot:footer>
    </x-admin.modal>
</div>