<x-layouts.admin title="Sizes">
    <div
        x-data="{
            open: false,
            mode: 'create',
            form: { id: null, name: '', sort_order: 0 },
            openCreate() { this.mode = 'create'; this.form = { id: null, name: '', sort_order: 0 }; this.open = true },
            openEdit(size) { this.mode = 'edit'; this.form = { ...size }; this.open = true },
        }"
    >
        <x-admin.page-header title="Sizes" subtitle="{{ $sizes->total() }} total — used to build product variant options.">
            <x-slot:actions>
                <x-admin.button variant="accent" x-on:click="openCreate()"><i class="fa-solid fa-plus text-xs"></i> New Size</x-admin.button>
            </x-slot:actions>
        </x-admin.page-header>

        <x-admin.card :padded="false">
            @if ($sizes->isEmpty())
                <x-admin.empty-state icon="fa-solid fa-ruler" title="No sizes yet" subtitle="Add the sizes your products come in — S, M, L, or numeric." />
            @else
                <div class="overflow-x-auto">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Size</th>
                                <th>Sort Order</th>
                                <th>Variants</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($sizes as $size)
                                <tr>
                                    <td class="font-medium text-ink">{{ $size->name }}</td>
                                    <td class="tabular-nums text-ink/60">{{ $size->sort_order }}</td>
                                    <td class="tabular-nums text-ink/60">{{ $size->variants_count }}</td>
                                    <td>
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" x-on:click="openEdit(@js(['id' => $size->id, 'name' => $size->name, 'sort_order' => $size->sort_order]))" class="text-ink/50 hover:text-ink" title="Edit">
                                                <i class="fa-solid fa-pen"></i>
                                            </button>
                                            <x-admin.delete-form :action="route('admin.sizes.destroy', $size)" confirm-title="Delete '{{ $size->name }}'?" />
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="border-t border-black/5 px-5 py-4">
                    {{ $sizes->links() }}
                </div>
            @endif
        </x-admin.card>

        {{-- Create/Edit Modal --}}
        <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div x-show="open" x-transition.opacity x-on:click="open = false" class="absolute inset-0 bg-ink/50"></div>

            <div x-show="open" x-transition class="relative w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl">
                <h3 class="mb-4 text-sm font-semibold text-ink" x-text="mode === 'edit' ? 'Edit Size' : 'New Size'"></h3>

                <form method="POST" x-bind:action="mode === 'edit' ? '{{ url('admin/sizes') }}/' + form.id : '{{ route('admin.sizes.store') }}'">
                    @csrf
                    <template x-if="mode === 'edit'">
                        <input type="hidden" name="_method" value="PUT">
                    </template>

                    <div class="space-y-4">
                        <div>
                            <x-admin.label value="Name" required />
                            <x-admin.input name="name" x-model="form.name" placeholder="S, M, L, XL, 38…" required />
                        </div>
                        <div>
                            <x-admin.label value="Sort Order" />
                            <x-admin.input type="number" min="0" name="sort_order" x-model="form.sort_order" />
                        </div>
                    </div>

                    <div class="mt-6 flex items-center gap-3">
                        <x-admin.button variant="accent">Save</x-admin.button>
                        <button type="button" x-on:click="open = false" class="text-sm text-ink/50 hover:text-ink">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-layouts.admin>
