@extends('layouts.admin')

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

        <div class="page-header">
            <h1 class="page-title">Departments</h1>
            <button class="btn btn-primary" @click="openAddModal()">
                <i class="fas fa-plus"></i> Add Department
            </button>
        </div>

        <!-- Filter Bar -->
        <div class="filter-bar">
            <div class="form-group">
                <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>
            <div class="form-group">
                <label class="form-label">Search</label>
                <input type="text" class="form-control" placeholder="Search..." x-model="filters.search">
            </div>
            <div class="form-group">
                <label class="form-label">Category</label>
                <select class="form-select" x-model="filters.category_id">
                    <option value="">All</option>
                    <template x-for="cat in categories" :key="cat.id">
                        <option :value="cat.id" x-text="cat.name"></option>
                    </template>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-select" x-model="filters.status">
                    <option value="">All</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">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Icon</th>
                            <th>Name</th>
                            <th>Category</th>
                            <th>Email</th>
                            {{-- <th>Services</th> --}}
                            <th>Order</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-if="loading">
                            <tr>
                                <td colspan="9" class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary"></div> Loading...
                                </td>
                            </tr>
                        </template>
                        <template x-if="!loading && items.length === 0">
                            <tr>
                                <td colspan="9" class="text-center py-4 text-muted">No departments 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>
                                    <div x-show="item.icon">
                                        <i :class="item.icon" class="fs-4 text-primary"></i>
                                    </div>
                                    <span x-show="!item.icon" class="text-muted">—</span>
                                </td>
                                <td>
                                    <div x-text="item.name" class="fw-semibold"></div>
                                    <small class="text-muted" x-text="item.slug"></small>
                                </td>
                                <td x-text="item.category_name ?? '—'"></td>
                                <td x-text="item.email ?? '—'"></td>
                                <td x-text="item.order"></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" @click="openEditModal(item.id)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" @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></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>

        <!-- Modal -->
        <div class="modal fade" id="departmentModal" tabindex="-1" data-bs-backdrop="static">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="isEditing ? 'Edit Department' : 'Add Department'"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-tabs mb-4">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dept-basic">Basic
                                    Info</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab"
                                    data-bs-target="#dept-services">Services</button>
                            </li>
                        </ul>

                        <div class="tab-content">

                            <!-- Tab 1: Basic -->
                            <div class="tab-pane fade show active" id="dept-basic">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" x-model="form.name"
                                            @input="autoGenerateSlug()" placeholder="Department name">
                                        <div class="text-danger small mt-1" x-text="errors.name"></div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Icon <span class="text-muted small">(Bootstrap Icon
                                                class)</span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" x-model="form.icon"
                                                placeholder="bi-laptop">
                                            <span class="input-group-text">
                                                <i :class="form.icon || 'bi-question'" class="fs-5"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Order</label>
                                        <input type="number" class="form-control" x-model="form.order" min="0">
                                    </div>
                                    <div class="col-12 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">
                                            <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>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Category <span class="text-danger">*</span></label>
                                        <select class="form-select" x-model="form.category_id">
                                            <option value="">Select Category</option>
                                            <template x-for="cat in categories" :key="cat.id">
                                                <option :value="cat.id" x-text="cat.name"></option>
                                            </template>
                                        </select>
                                        <div class="text-danger small mt-1" x-text="errors.category_id"></div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" class="form-control" x-model="form.email">
                                        <div class="text-danger small mt-1" x-text="errors.email"></div>
                                    </div>
                                    <div class="col-md-3 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>
                                    <!-- Image -->
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Image
                                            <span class="text-muted small" x-show="isEditing">(leave empty to keep
                                                current)</span>
                                        </label>
                                        <div x-show="form.current_image" class="mb-2">
                                            <img :src="form.current_image" width="120" height="75"
                                                class="rounded border" style="object-fit:cover;">
                                        </div>
                                        <input type="file" class="form-control" id="deptImageInput" accept="image/*"
                                            @change="handleImageChange($event)">
                                        <div x-show="imagePreview" class="mt-2">
                                            <img :src="imagePreview" width="120" height="75"
                                                class="rounded border" style="object-fit:cover;">
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Short Description</label>
                                        <textarea class="form-control" rows="2" x-model="form.short_des"></textarea>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Full Description</label>
                                        <textarea class="form-control" id="descriptionEditor" placeholder="Full description"></textarea>
                                        <div class="text-danger small mt-1" x-text="errors.description"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 2: Services -->
                            <div class="tab-pane fade" id="dept-services">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="form-label mb-0 fw-semibold">Services</label>
                                    <button type="button" class="btn btn-sm btn-outline-primary" @click="addService()">
                                        <i class="fas fa-plus"></i> Add Service
                                    </button>
                                </div>
                                <div class="text-muted small mb-3">Icon: Bootstrap Icon class যেমন <code>bi-server</code>,
                                    <code>bi-code-slash</code>
                                </div>
                                <template x-for="(service, index) in form.services" :key="index">
                                    <div class="card mb-2 border">
                                        <div class="card-body py-2">
                                            <div class="row g-2 align-items-center">
                                                <div class="col-md-3">
                                                    <input type="text" class="form-control form-control-sm"
                                                        x-model="service.title" placeholder="Service title">
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" class="form-control form-control-sm"
                                                        x-model="service.description" placeholder="Short description">
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="input-group input-group-sm">
                                                        <input type="text" class="form-control" x-model="service.icon"
                                                            placeholder="bi-server">
                                                        <span class="input-group-text">
                                                            <i :class="service.icon || 'bi-question'"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 text-end">
                                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                                        @click="removeService(index)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <p x-show="form.services.length === 0" class="text-muted small">No services added yet.</p>
                            </div>

                        </div>
                    </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 Department' : 'Save Department'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function departmentManager() {
            return {
                items: [],
                categories: [],
                loading: false,
                saving: false,
                isEditing: false,
                editingId: null,
                per_page: 10,
                imageFile: null,
                imagePreview: null,
                filters: {
                    search: '',
                    status: '',
                    category_id: ''
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    per_page: 10,
                    total: 0
                },
                form: {
                    name: '',
                    slug: '',
                    icon: '',
                    short_des: '',
                    description: '',
                    category_id: '',
                    status: 'active',
                    order: 0,
                    email: '',
                    phone: '',
                    current_image: '',
                    services: [],
                },
                errors: {},
                slugTimer: null,

                async init() {
                    await this.loadCategories();
                    await this.fetchItems();
                },

                async loadCategories() {
                    try {
                        const res = await fetch('{{ route('admin.departments.categories') }}');
                        const json = await res.json();
                        this.categories = json.data;
                    } catch (e) {}
                },

                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.category_id) params.append('category_id', this.filters.category_id);
                        params.append('per_page', this.per_page);
                        params.append('page', page);

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

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

                openAddModal() {
                    this.resetForm();
                    this.isEditing = false;
                    // new bootstrap.Modal(document.getElementById('departmentModal')).show();
                    const modal = new bootstrap.Modal(document.getElementById('departmentModal'));
                    modal.show();

                    // modal পুরো open হওয়ার পর editor init করো
                    document.getElementById('departmentModal').addEventListener('shown.bs.modal', () => {
                        this.initEditor('');
                    }, {
                        once: true
                    });
                },

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

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

                        Object.assign(this.form, {
                            name: s.name,
                            slug: s.slug,
                            icon: s.icon ?? '',
                            short_des: s.short_des ?? '',
                            description: description,
                            category_id: s.category_id,
                            status: s.status,
                            order: s.order,
                            email: s.email ?? '',
                            phone: s.phone ?? '',
                            current_image: s.image_url ?? '',
                            services: s.services ?? [],
                        });
                    } catch (e) {
                        showError('Failed to load data.');
                        return;
                    } finally {
                        hideLoading();
                    }
                    // new bootstrap.Modal(document.getElementById('departmentModal')).show();
                    const modal = new bootstrap.Modal(document.getElementById('departmentModal'));
                    modal.show();

                    // modal পুরো open হওয়ার পর description সহ init করো
                    document.getElementById('departmentModal').addEventListener('shown.bs.modal', () => {
                        this.initEditor(description);
                    }, {
                        once: true
                    });
                },

                autoGenerateSlug() {
                    if (this.isEditing) return;
                    clearTimeout(this.slugTimer);
                    this.slugTimer = setTimeout(() => this.generateSlug(), 500);
                },

                async generateSlug() {
                    if (!this.form.name) return;
                    const exclude = this.isEditing ? `&exclude=${this.editingId}` : '';
                    const res = await fetch(
                        `{{ route('admin.departments.generate-slug') }}?name=${encodeURIComponent(this.form.name)}${exclude}`
                    );
                    const json = await res.json();
                    this.form.slug = json.slug;
                },

                handleImageChange(event) {
                    const file = event.target.files[0];
                    if (!file) return;
                    this.imageFile = file;
                    this.imagePreview = URL.createObjectURL(file);
                },

                addService() {
                    this.form.services.push({
                        title: '',
                        description: '',
                        icon: ''
                    });
                },
                removeService(index) {
                    this.form.services.splice(index, 1);
                },

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

                    const formData = new FormData();
                    const fields = ['name', 'slug', 'icon', 'short_des', 'description', 'category_id', 'status',
                        'order', 'email', 'phone'
                    ];
                    fields.forEach(f => formData.append(f, this.form[f] ?? ''));
                    formData.append('services', JSON.stringify(this.form.services));
                    formData.append('_token', '{{ csrf_token() }}');
                    if (this.imageFile) formData.append('image', this.imageFile);
                    if (this.isEditing) formData.append('_method', 'PUT');

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

                    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('departmentModal')).hide();
                            this.resetForm();
                            this.fetchItems(this.pagination.current_page);
                            showSuccess(json.message);
                        } else if (res.status === 422) {
                            Object.keys(json.errors).forEach(k => this.errors[k] = json.errors[k][0]);
                        } else {
                            showError(json.message ?? 'Something went wrong.');
                        }
                    } catch (e) {
                        showError('Request failed.');
                    } finally {
                        this.saving = false;
                    }
                },

                deleteItem(id) {
                    showConfirm('This department will be permanently deleted.', 'Delete?', async () => {
                        try {
                            showLoading();
                            const res = await fetch(`{{ url('admin/departments') }}/${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: '',
                        icon: '',
                        short_des: '',
                        description: '',
                        category_id: '',
                        status: 'active',
                        order: 0,
                        email: '',
                        phone: '',
                        current_image: '',
                        services: [],
                    };
                    this.errors = {};
                    this.imageFile = null;
                    this.imagePreview = null;
                    this.editingId = null;
                    const el = document.getElementById('deptImageInput');
                    if (el) el.value = '';
                },
                initEditor(content = '') {
                    $('#descriptionEditor').summernote({
                        height: 250,
                        toolbar: {!! json_encode(editorTools()) !!},
                        callbacks: {
                            onChange: (contents) => {
                                this.form.description = contents;
                            }
                        }
                    });
                    $('#descriptionEditor').summernote('code', content);
                },
            };
        }
    </script>
@endpush