<?php
use Livewire\Component;
use App\Models\Category;
use Illuminate\Support\Str;
?>

<div class="max-content">
    <header class="mb-10">
        <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Categories</h1>
        <p class="text-sm text-gray-500 mt-1">Organize your content with a hierarchical category system.</p>
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('message') }}</span>
        </div>
    @endif

    <div class="card p-8 mb-8">
        <h2 class="text-sm font-semibold mb-6 text-gray-900">Create New Category</h2>
        <form wire:submit.prevent="save" class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="space-y-2">
                <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Category Name</label>
                <input type="text" wire:model.live="name" class="input-field w-full" placeholder="e.g. Solar Energy"
                    required>
                @error('name')
                    <span class="text-red-500 text-xs mt-1">{{ $message }}</span>
                @enderror
            </div>
            <div class="space-y-2">
                <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Slug</label>
                <input type="text" wire:model="slug" class="input-field w-full" placeholder="e.g. solar-energy"
                    required>
                @error('slug')
                    <span class="text-red-500 text-xs mt-1">{{ $message }}</span>
                @enderror
            </div>
            <div class="space-y-2">
                <label class="block text-[11px] font-bold text-gray-500 uppercase mb-2">Parent</label>
                <select wire:model="parent_id" class="input-field w-full">
                    <option value="">Top Level (None)</option>
                    @foreach ($parentCategories as $parent)
                        <option value="{{ $parent->id }}">{{ $parent->name }}</option>
                    @endforeach
                </select>
                @error('parent_id')
                    <span class="text-red-500 text-xs mt-1">{{ $message }}</span>
                @enderror
            </div>
            <div class="md:col-span-3 flex justify-end pt-2">
                <button type="submit" class="btn-primary" style="background-color: #99BC85;">Add Category</button>
            </div>
        </form>
    </div>

    <div class="card">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/30">
            <h2 class="text-sm font-semibold text-gray-900">Hierarchy</h2>
            <span class="text-[10px] font-bold text-gray-400 uppercase">Total: {{ $categories->count() }}
                Categories</span>
        </div>
        <div class="overflow-x-auto">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Slug</th>
                        <th class="text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($categories->whereNull('parent_id') as $category)
                        <tr>
                            <td class="font-medium text-sm text-gray-900">{{ $category->name }}</td>
                            <td class="text-gray-400 text-sm">{{ $category->slug }}</td>
                            <td class="text-right">
                                <button class="text-red-600 font-semibold text-xs px-2"
                                    wire:click="delete({{ $category->id }})"
                                    wire:confirm="Are you sure you want to delete this category?"
                                    wire:loading.attr="disabled">Delete</button>
                            </td>
                        </tr>
                        @foreach ($category->children as $child)
                            <tr>
                                <td class="pl-10 text-gray-600 flex items-center gap-2 text-sm">
                                    <span class="text-gray-300">└</span> {{ $child->name }}
                                </td>
                                <td class="text-gray-400 text-sm">{{ $child->slug }}</td>
                                <td class="text-right">
                                    <button class="text-red-600 font-semibold text-xs px-2"
                                        wire:click="delete({{ $child->id }})"
                                        wire:confirm="Are you sure you want to delete this category?">Delete</button>
                                </td>
                            </tr>
                        @endforeach
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>