@extends('layouts.admin')

@section('admin_content')
    <div x-data="categoryManager()" x-init="fetchItems()">

        <!-- Page Header -->
        <div class="page-header">
            <h1 class="page-title">Categories</h1>
            <div>
                <button class="btn btn-primary" @click="openAddModal()">
                    <i class="fas fa-plus"></i> Add Category
                </button>
            </div>
        </div>

        <!-- Filter Bar -->
        <div class="filter-bar">

            <div class="form-group">
                <label class="form-label">Search</label>
                <input type="text" class="form-control" placeholder="Search categories..." x-model="filters.search">
            </div>
            <div class="form-group">
                <label class="form-label">Type</label>
                <select class="form-select" x-model="filters.type">
                    <option value="">All Types</option>
                    <option value="projects">Projects</option>
                    <option value="resources">Resources</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-select" x-model="filters.status">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="form-group align-self-end">
                <button class="btn btn-outline-secondary" @click="fetchItems(1)">
                    <i class="fas fa-filter"></i> Filter
                </button>
            </div>
        </div>

        <!-- Table -->
        <div class="panel">
            <div class="panel-body">
                <div class="form-group mb-2">
                    {{-- <label class="form-label">Show</label> --}}
                    <select class="form-select" style="width:80px" x-model="per_page" @change="fetchItems(1)">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Parent</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-if="loading">
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                                    Loading...
                                </td>
                            </tr>
                        </template>

                        <template x-if="!loading && items.length === 0">
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">No categories found.</td>
                            </tr>
                        </template>

                        <template x-for="(item, index) in items" :key="item.id">
                            <tr>
                                <td x-text="(pagination.current_page - 1) * pagination.per_page + index + 1"></td>
                                <td x-text="item.name"></td>
                                <td><code x-text="item.slug"></code></td>
                                <td x-text="item.parent_name"></td>
                                <td>
                                    <span class="badge bg-info text-dark"
                                        {{-- x-text="item.type === 'projects' ? 'Projects' : 'Resources'"> --}}
                                        x-text="getTypeLabel(item.type)"
                                    </span>
                                </td>
                                <td>
                                    <span class="badge" :class="item.status === 'active' ? 'bg-success' : 'bg-secondary'"
                                        x-text="item.status === 'active' ? 'Active' : 'Inactive'">
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" title="Edit"
                                        @click="openEditModal(item.id)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" title="Delete"
                                        @click="deleteItem(item.id)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3" x-show="pagination.last_page > 1">
                    <div class="text-muted small">
                        Total: <strong x-text="pagination.total"></strong> categories
                    </div>
                    <nav>
                        <ul class="pagination pagination-sm mb-0">
                            <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
                                <button class="page-link" @click="goToPage(pagination.current_page - 1)">&laquo;</button>
                            </li>
                            <template x-for="page in pagination.last_page" :key="page">
                                <li class="page-item" :class="{ active: page === pagination.current_page }">
                                    <button class="page-link" x-text="page" @click="goToPage(page)"></button>
                                </li>
                            </template>
                            <li class="page-item" :class="{ disabled: pagination.current_page === pagination.last_page }">
                                <button class="page-link" @click="goToPage(pagination.current_page + 1)">&raquo;</button>
                            </li>
                        </ul>
                    </nav>
                </div>

            </div>
        </div>

        <!-- Add / Edit Modal -->
        <div class="modal fade" id="categoryModal" tabindex="-1" data-bs-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="isEditing ? 'Edit Category' : 'Add New Category'"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                    </div>
                    <div class="modal-body">
                        <form id="categoryForm">

                            <!-- Name -->
                            <div class="mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" x-model="form.name"
                                    placeholder="Category name" @input="autoGenerateSlug()">
                                <div class="text-danger small mt-1" x-text="errors.name"></div>
                            </div>

                            <!-- Slug -->
                            <div class="mb-3">
                                <label class="form-label">Slug <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" x-model="form.slug"
                                        placeholder="category-slug">
                                    <button type="button" class="btn btn-outline-secondary" @click="generateSlug()">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                                <div class="text-danger small mt-1" x-text="errors.slug"></div>
                            </div>

                            <!-- Type -->
                            <div class="mb-3">
                                <label class="form-label">Type <span class="text-danger">*</span></label>
                                <select class="form-select" x-model="form.type" @change="loadParents()">
                                    <option value="projects">Projects</option>
                                    <option value="resources">Resources</option>
                                    <option value="photo">Photo Gallery</option>
                                    <option value="video">Video Gallery</option>
                                    <option value="institution">Institutions</option>
                                    <option value="department">Our Departments</option>
                                </select>
                                <div class="text-danger small mt-1" x-text="errors.type"></div>
                            </div>

                            <!-- Parent Category -->
                            <div class="mb-3">
                                <label class="form-label">Parent Category
                                    <span class="text-muted small">(optional)</span>
                                </label>
                                <select class="form-select" x-model="form.parent_id">
                                    <option value="">— No Parent —</option>
                                    <template x-for="parent in parents" :key="parent.id">
                                        <option :value="parent.id" x-text="parent.name"></option>
                                    </template>
                                </select>
                                <div class="text-danger small mt-1" x-text="errors.parent_id"></div>
                            </div>

                            <!-- Status -->
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" x-model="form.status">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                                <div class="text-danger small mt-1" x-text="errors.status"></div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                            @click="resetForm()">Cancel</button>
                        <button type="button" class="btn btn-primary" @click="saveItem()" :disabled="saving">
                            <span x-show="saving" class="spinner-border spinner-border-sm me-1"></span>
                            <span x-text="isEditing ? 'Update Category' : 'Save Category'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function categoryManager() {
            return {
                items: [],
                parents: [],
                loading: false,
                saving: false,
                isEditing: false,
                editingId: null,
                per_page: 10,
                filters: {
                    search: '',
                    status: '',
                    type: '',
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    per_page: 10,
                    total: 0,
                },
                form: {
                    name: '',
                    slug: '',
                    type: 'projects',
                    status: 'active',
                    parent_id: '',
                },
                errors: {},
                slugTimer: null,

                async fetchItems(page = 1) {
                    this.loading = true;
                    try {
                        const params = new URLSearchParams();
                        if (this.filters.search) params.append('search', this.filters.search);
                        if (this.filters.status) params.append('status', this.filters.status);
                        if (this.filters.type) params.append('type', this.filters.type);
                        params.append('per_page', this.per_page);
                        params.append('page', page);

                        const res = await fetch(`{{ route('admin.categories.list') }}?${params}`);
                        const json = await res.json();
                        this.items = json.data;
                        this.pagination = json.pagination;
                    } catch (e) {
                        showError('Failed to load categories.');
                    } finally {
                        this.loading = false;
                    }
                },

                async loadParents() {
                    try {
                        const exclude = this.isEditing ? `&exclude=${this.editingId}` : '';
                        const res = await fetch(
                            `{{ route('admin.categories.parents') }}?type=${this.form.type}${exclude}`);
                        const json = await res.json();
                        this.parents = json.data;
                        this.form.parent_id = ''; // type change হলে reset
                    } catch (e) {}
                },

                goToPage(page) {
                    if (page < 1 || page > this.pagination.last_page) return;
                    this.fetchItems(page);
                },

                openAddModal() {
                    this.resetForm();
                    this.isEditing = false;
                    this.loadParents();
                    new bootstrap.Modal(document.getElementById('categoryModal')).show();
                },

                async openEditModal(id) {
                    this.resetForm();
                    this.isEditing = true;
                    this.editingId = id;

                    try {
                        showLoading();
                        const res = await fetch(`{{ url('admin/categories') }}/${id}`);
                        const json = await res.json();
                        const s = json.data;

                        this.form.name = s.name;
                        this.form.slug = s.slug;
                        this.form.type = s.type;
                        this.form.status = s.status;
                        this.form.parent_id = s.parent_id ?? '';

                        await this.loadParents();
                    } catch (e) {
                        showError('Failed to load category data.');
                        return;
                    } finally {
                        hideLoading();
                    }

                    new bootstrap.Modal(document.getElementById('categoryModal')).show();
                },

                // Name input হলে auto slug generate (debounce)
                autoGenerateSlug() {
                    if (this.isEditing) return;
                    clearTimeout(this.slugTimer);
                    this.slugTimer = setTimeout(() => this.generateSlug(), 500);
                },

                async generateSlug() {
                    if (!this.form.name) return;
                    try {
                        const exclude = this.isEditing ? `&exclude=${this.editingId}` : '';

                        const res = await fetch(
                            `{{ route('admin.categories.generate-slug') }}?name=${encodeURIComponent(this.form.name)}${exclude}`
                        );
                        const json = await res.json();
                        this.form.slug = json.slug;
                    } catch (e) {}
                },

                async saveItem() {
                    this.errors = {};
                    this.saving = true;

                    const formData = new FormData();
                    formData.append('name', this.form.name);
                    formData.append('slug', this.form.slug);
                    formData.append('type', this.form.type);
                    formData.append('status', this.form.status);
                    formData.append('parent_id', this.form.parent_id ?? '');
                    formData.append('_token', '{{ csrf_token() }}');

                    let url = this.isEditing ?
                        `{{ url('admin/categories') }}/${this.editingId}` :
                        '{{ route('admin.categories.store') }}';

                    if (this.isEditing) {
                        formData.append('_method', 'PUT');
                    }

                    try {
                        const res = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json'
                            },
                            body: formData,
                        });
                        const json = await res.json();

                        if (res.ok && json.success) {
                            bootstrap.Modal.getInstance(document.getElementById('categoryModal')).hide();
                            this.resetForm();
                            this.fetchItems(this.pagination.current_page);
                            showSuccess(json.message);
                        } else if (res.status === 422) {
                            Object.keys(json.errors).forEach(key => {
                                this.errors[key] = json.errors[key][0];
                            });
                        } else {
                            showError(json.message ?? 'Something went wrong.');
                        }
                    } catch (e) {
                        showError('Request failed. Please try again.');
                    } finally {
                        this.saving = false;
                    }
                },

                getTypeLabel(type) {
                    const labels = {
                        'projects': 'Projects',
                        'resources': 'Resources',
                        'photo': 'Photo',
                        'video': 'Video',
                        'institution': 'Institution',
                        'department': 'Department',
                    };
                    return labels[type] ?? type;
                },

                deleteItem(id) {
                    showConfirm('This category will be permanently deleted.', 'Delete Category?', async () => {
                        try {
                            showLoading();
                            const res = await fetch(`{{ url('admin/categories') }}/${id}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                },
                            });
                            const json = await res.json();

                            if (json.success) {
                                this.fetchItems(this.pagination.current_page);
                                showSuccess(json.message);
                            } else {
                                showError(json.message ?? 'Delete failed.');
                            }
                        } catch (e) {
                            showError('Request failed.');
                        } finally {
                            hideLoading();
                        }
                    });
                },

                resetForm() {
                    this.form = {
                        name: '',
                        slug: '',
                        type: 'projects',
                        status: 'active',
                        parent_id: '',
                    };
                    this.errors = {};
                    this.parents = [];
                    this.editingId = null;
                },
            };
        }
    </script>
@endpush