@extends('admin.layouts.app')
@section('page_title', 'Categories')

@section('content')
<div x-data="categoryPage()" class="mx-auto max-w-7xl">

    {{-- Header --}}
    <div class="mb-6 flex items-start justify-between">
        <div>
            <h2 class="text-2xl font-semibold text-gray-900">Category Management</h2>
            <p class="mt-1 text-sm text-gray-600">Create, search, update, and manage your video categories.</p>
        </div>

        <button @click="openAdd()"
            class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-black via-gray-600 to-gray-800 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:from-gray-700 hover:to-gray-500">
            <i class="ri-add-line text-base"></i> Add Category
        </button>
    </div>

    {{-- Alerts --}}
    @if (session('success'))
        <div class="mb-4 flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
            <i class="ri-check-line text-lg"></i> <span>{{ session('success') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            <p class="font-medium">Please fix the following errors:</p>
            <ul class="mt-2 list-disc ps-5 space-y-1">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Toolbar --}}
    <div class="mb-4 rounded-xl border border-gray-200 bg-white/70 p-4 backdrop-blur">
        <form method="GET" class="grid items-center gap-3 md:grid-cols-12">
            <div class="md:col-span-7">
                <div class="relative">
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Search categories..."
                        class="w-full rounded-lg border-gray-300 py-2.5 pe-3 ps-10 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500">
                    <i class="ri-search-line absolute left-3 top-2.5 text-gray-400"></i>
                </div>
            </div>

            <div class="md:col-span-2">
                <select name="per_page"
                    class="w-full rounded-lg border-gray-300 py-2.5 text-sm shadow-sm focus:border-violet-500 focus:ring-1 focus:ring-violet-500"
                    onchange="this.form.submit()">
                    @foreach ([10, 25, 50, 100] as $n)
                        <option value="{{ $n }}" @selected(request('per_page', 10) == $n)>{{ $n }} per page</option>
                    @endforeach
                </select>
            </div>

            <div class="md:col-span-3 flex items-center justify-end gap-2">
                <button class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700">
                    <i class="ri-equalizer-line text-base"></i> Search
                </button>
                <a href="{{ route('admin.categories.index') }}"
                    class="inline-flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium text-violet-700 hover:bg-violet-50">
                    <i class="ri-refresh-line text-base"></i> Reset
                </a>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
        <div class="border-b border-gray-200 bg-gray-50 px-4 py-3 text-sm font-semibold text-gray-700">
            Categories List
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-xs uppercase tracking-wide text-gray-500">
                    <tr>
                        <th class="px-4 py-3 w-16">#</th>
                        <th class="px-4 py-3">Name</th>
                        <th class="px-4 py-3">Icon</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Created</th>
                        <th class="px-4 py-3 text-right w-56">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @forelse ($categories as $idx => $cat)
                        <tr class="hover:bg-gray-50/60">
                            <td class="px-4 py-3">{{ ($categories->currentPage()-1)*$categories->perPage()+$idx+1 }}</td>

                            <td class="px-4 py-3 font-semibold text-gray-900">{{ $cat->name }}</td>

                            <td class="px-4 py-3">
                                <img src="{{ $cat->icon ? asset('assets/images/icon/'.$cat->icon) : asset('assets/images/icon/default.png') }}"
                                    class="h-10 w-10 object-contain rounded-md border">
                            </td>

                            <td class="px-4 py-3">
                                    <form action="{{ route('admin.categories.status', $cat->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')

                                        <label class="inline-flex items-center cursor-pointer">
                                            <input type="checkbox" name="status" 
                                                onchange="this.form.submit()" 
                                                class="sr-only peer"
                                                {{ $cat->status ? 'checked' : '' }}>

                                            <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer
                                                        peer-checked:bg-green-500 relative after:content-[''] after:absolute
                                                        after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300
                                                        after:border after:rounded-full after:h-5 after:w-5 after:transition-all
                                                        peer-checked:after:translate-x-full peer-checked:after:border-white"></div>

                                            <span class="ml-2 text-sm {{ $cat->status ? 'text-green-700' : 'text-red-600' }}">
                                                {{ $cat->status ? 'Active' : 'Inactive' }}
                                            </span>
                                        </label>
                                    </form>
                                </td>


                            <td class="px-4 py-3 text-gray-500">
                                {{ $cat->created_at->format('d M Y, h:i A') }}
                            </td>

                            <td class="px-4 py-3 text-right">
                                <div class="flex justify-end gap-2">

                                    {{-- EDIT BUTTON --}}
                                    <button
                                        @click="openEdit({
                                            id: {{ $cat->id }},
                                            name: '{{ addslashes($cat->name) }}',
                                            icon: '{{ $cat->icon ? asset('assets/images/icon/'.$cat->icon) : asset('assets/images/icon/default.png') }}'
                                        })"
                                        class="inline-flex items-center gap-1.5 rounded-md border border-violet-200 bg-violet-50 px-3 py-2 text-xs font-medium text-violet-700 hover:bg-violet-100">
                                        <i class="ri-edit-2-line text-sm"></i> Edit
                                    </button>

                                    {{-- DELETE --}}
                                    <form action="{{ route('admin.categories.destroy', $cat->id) }}" method="POST"
                                        onsubmit="return confirm('Delete this category?')">
                                        @csrf @method('DELETE')
                                        <button
                                            class="inline-flex items-center gap-1.5 rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-medium text-rose-700 hover:bg-rose-100">
                                            <i class="ri-delete-bin-line text-sm"></i> Delete
                                        </button>
                                    </form>

                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-10 text-center text-sm text-gray-500">
                                <i class="ri-folder-line text-4xl text-gray-300"></i><br>
                                No categories found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if ($categories->hasPages())
            <div class="border-t border-gray-200 bg-white px-4 py-3">
                <div class="flex items-center justify-between">
                    <p class="text-sm text-gray-600">
                        Showing {{ $categories->firstItem() }}–{{ $categories->lastItem() }} of {{ $categories->total() }}
                    </p>
                    <div class="text-sm">{{ $categories->withQueryString()->links() }}</div>
                </div>
            </div>
        @endif
    </div>

    {{-- ADD MODAL --}}
    <div x-show="showAdd" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
        <div @click.away="showAdd=false" class="w-full max-w-md rounded-xl bg-white shadow-lg">
            
            <div class="flex items-center justify-between rounded-t-xl bg-indigo-600 px-5 py-3">
                <h3 class="text-base font-semibold text-white">Add Category</h3>
                <button @click="showAdd=false" class="text-white/80 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>

            <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data"
                class="p-5 space-y-4">
                @csrf

                {{-- ICON UPLOAD --}}
                <div x-data="{ fileName: '', preview: '' }">
                    <label class="block text-sm font-medium mb-1">Category Icon</label>

                    <label for="iconUpload"
                        class="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-indigo-300 bg-indigo-50/40 p-5 cursor-pointer hover:bg-indigo-50">
                        <i class="ri-image-add-line text-3xl text-indigo-500"></i>
                        <p class="mt-2 text-sm font-medium text-indigo-700">Click to Upload</p>
                        <p class="text-xs text-indigo-500">PNG, JPG, JPEG, WEBP, SVG</p>

                        <template x-if="fileName">
                            <p class="mt-2 text-sm">Selected: <span x-text="fileName" class="font-semibold"></span></p>
                        </template>

                        <template x-if="preview">
                            <img :src="preview" class="mt-4 h-20 w-20 object-contain rounded-lg border shadow">
                        </template>
                    </label>

                    <input id="iconUpload" type="file" name="icon" accept="image/*" class="hidden"
                        @change="
                            fileName = $event.target.files[0]?.name;
                            if ($event.target.files[0]) {
                                const reader = new FileReader();
                                reader.onload = e => preview = e.target.result;
                                reader.readAsDataURL($event.target.files[0]);
                            }
                        ">
                </div>

                <label class="block text-sm font-medium">Category Name</label>
                <input type="text" name="name" required
                    class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5 text-sm focus:ring-indigo-500">

                <div class="flex justify-end gap-2">
                    <button type="button" @click="showAdd=false"
                        class="rounded-lg border px-4 py-2.5 text-sm text-gray-700">Cancel</button>
                    <button type="submit"
                        class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-indigo-500">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- EDIT MODAL --}}
    <div x-show="showEdit" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4">
        <div @click.away="showEdit=false" class="w-full max-w-md rounded-xl bg-white shadow-lg">

            <div class="flex items-center justify-between rounded-t-xl bg-sky-600 px-5 py-3">
                <h3 class="text-base font-semibold text-white">Edit Category</h3>
                <button @click="showEdit=false" class="text-white/80 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>

            <form :action="editAction" method="POST" enctype="multipart/form-data" class="p-5 space-y-4">
                @csrf @method('PUT')

                <label class="block text-sm font-medium">Category Name</label>
                <input type="text" name="name" x-model="editName" required
                    class="mt-1 w-full rounded-lg border-gray-300 px-3 py-2.5">

                {{-- ICON UPLOAD --}}
                <div x-data="{ fileName: '', preview: editIconUrl }">
                    <label class="block text-sm font-medium">Category Icon</label>

                    <label for="iconEdit"
                        class="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-sky-300 bg-sky-50/40 p-5 cursor-pointer hover:bg-sky-50">
                        <i class="ri-image-add-line text-3xl text-sky-500"></i>
                        <p class="mt-2 text-sm text-sky-700">Click to Upload New Icon</p>

                        <template x-if="fileName">
                            <p class="mt-2 text-sm">Selected: <span x-text="fileName" class="font-semibold"></span></p>
                        </template>
                    </label>

                    <input id="iconEdit" type="file" name="icon" accept="image/*" class="hidden"
                        @change="
                            fileName = $event.target.files[0]?.name;
                            if ($event.target.files[0]) {
                                const reader = new FileReader();
                                reader.onload = e => preview = e.target.result;
                                reader.readAsDataURL($event.target.files[0]);
                            }
                        ">

                    <template x-if="preview">
                        <img :src="preview" class="mt-3 h-20 w-20 object-contain rounded-lg border shadow-sm">
                    </template>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" @click="showEdit=false"
                        class="rounded-lg border px-4 py-2.5 text-sm text-gray-700">Cancel</button>
                    <button class="rounded-lg bg-sky-600 px-4 py-2.5 text-sm text-white hover:bg-sky-500">
                        Update
                    </button>
                </div>

            </form>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
    function categoryPage() {
        return {
            showAdd: false,
            showEdit: false,
            editName: '',
            editIconUrl: '',
            editAction: '',

            openAdd() {
                this.showAdd = true;
            },

            openEdit(cat) {
                this.editName = cat.name;
                this.editIconUrl = cat.icon; // load preview
                this.editAction = "{{ route('admin.categories.update', ':id') }}"
                    .replace(':id', cat.id);
                this.showEdit = true;
            }
        }
    }
</script>
@endpush