@extends('layouts.admin')

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

        <!-- Page Header -->
        <div class="page-header">
            <h1 class="page-title">Projects</h1>
            <div>
                <button class="btn btn-primary" @click="openAddModal()">
                    <i class="fas fa-plus"></i> Add Project
                </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 projects..." 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 Categories</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 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>Image</th>
                            <th>Title</th>
                            <th>Category</th>
                            <th>Budget</th>
                            <th>Duration</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" role="status"></div>
                                    Loading...
                                </td>
                            </tr>
                        </template>
                        <template x-if="!loading && items.length === 0">
                            <tr>
                                <td colspan="9" class="text-center py-4 text-muted">No projects 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>
                                    <img :src="item.image_url ?? 'https://ui-avatars.com/api/?name=' + item.title + ' & size = 40 '"
                                        width="50" height="40" class="rounded border" style="object-fit:cover;">
                                </td>
                                <td>
                                    <div x-text="item.title"></div>
                                    <small class="text-muted" x-text="item.slug"></small>
                                </td>
                                <td x-text="item.category_name ?? '—'"></td>
                                <td x-text="item.budget ? '৳' + Number(item.budget).toLocaleString() : '—'"></td>
                                <td x-text="item.duration ?? '—'"></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> projects
                    </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="projectModal" tabindex="-1" data-bs-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" x-text="isEditing ? 'Edit Project' : 'Add New Project'"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                    </div>
                    <div class="modal-body">
                        <form id="projectForm">
                            <div class="row">

                                <!-- Title -->
                                <div class="col-md-8 mb-3">
                                    <label class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" x-model="form.title"
                                        placeholder="Project title" @input="autoGenerateSlug()">
                                    <div class="text-danger small mt-1" x-text="errors.title"></div>
                                </div>

                                <!-- Order -->
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Order</label>
                                    <input type="number" class="form-control" x-model="form.order" min="0">
                                    <div class="text-danger small mt-1" x-text="errors.order"></div>
                                </div>

                                <!-- Slug -->
                                <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"
                                            placeholder="project-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>

                                <!-- Category -->
                                <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>

                                <!-- Status -->
                                <div class="col-md-6 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>

                                <!-- Duration -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Duration</label>
                                    <input type="text" class="form-control" x-model="form.duration"
                                        placeholder="e.g. 6 months">
                                    <div class="text-danger small mt-1" x-text="errors.duration"></div>
                                </div>

                                <!-- Budget -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Budget (৳)</label>
                                    <input type="number" class="form-control" x-model="form.budget" placeholder="0.00"
                                        min="0">
                                    <div class="text-danger small mt-1" x-text="errors.budget"></div>
                                </div>

                                <!-- Coordinator -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">Coordinator</label>
                                    <input type="text" class="form-control" x-model="form.coordinator"
                                        placeholder="Coordinator name">
                                    <div class="text-danger small mt-1" x-text="errors.coordinator"></div>
                                </div>

                                <!-- Main Image -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">
                                        Main Image
                                        <span class="text-danger" x-show="!isEditing">*</span>
                                        <span class="text-muted small" x-show="isEditing">(leave empty to keep
                                            current)</span>
                                    </label>
                                    <div x-show="isEditing && form.current_image" class="mb-2">
                                        <img :src="form.current_image" width="120" height="70"
                                            class="rounded border" style="object-fit:cover;">
                                    </div>
                                    <input type="file" class="form-control" id="imageInput" accept="image/*"
                                        @change="handleImageChange($event)">
                                    <div class="text-danger small mt-1" x-text="errors.image"></div>
                                    <div x-show="imagePreview" class="mt-2">
                                        <img :src="imagePreview" width="120" height="70" class="rounded border"
                                            style="object-fit:cover;">
                                    </div>
                                </div>

                                <!-- Multiple Images -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">Gallery Images
                                        <span class="text-muted small">(multiple)</span>
                                    </label>
                                    <!-- Current gallery -->
                                    <div x-show="isEditing && form.current_mul_images.length > 0"
                                        class="d-flex gap-2 flex-wrap mb-2">
                                        <template x-for="img in form.current_mul_images" :key="img">
                                            <img :src="img" width="70" height="50"
                                                class="rounded border" style="object-fit:cover;">
                                        </template>
                                    </div>
                                    <input type="file" class="form-control" id="mulImageInput" accept="image/*"
                                        multiple @change="handleMulImageChange($event)">
                                    <div class="text-danger small mt-1" x-text="errors.mul_image"></div>
                                    <!-- New gallery preview -->
                                    <div x-show="mulImagePreviews.length > 0" class="d-flex gap-2 flex-wrap mt-2">
                                        <template x-for="preview in mulImagePreviews" :key="preview">
                                            <img :src="preview" width="70" height="50"
                                                class="rounded border" style="object-fit:cover;">
                                        </template>
                                    </div>
                                </div>

                                <!-- Short Description -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">Short Description</label>
                                    <textarea class="form-control" rows="2" x-model="form.short_des" placeholder="Brief description"></textarea>
                                    <div class="text-danger small mt-1" x-text="errors.short_des"></div>
                                </div>

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

    </div>
@endsection

@push('scripts')
    <script>
        function projectManager() {
            return {
                items: [],
                categories: [],
                loading: false,
                saving: false,
                isEditing: false,
                editingId: null,
                per_page: 10,
                imageFile: null,
                imagePreview: null,
                mulImageFiles: [],
                mulImagePreviews: [],
                filters: {
                    search: '',
                    status: '',
                    category_id: ''
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    per_page: 10,
                    total: 0
                },
                form: {
                    title: '',
                    slug: '',
                    short_des: '',
                    description: '',
                    duration: '',
                    budget: '',
                    coordinator: '',
                    category_id: '',
                    status: 'active',
                    order: 0,
                    current_image: '',
                    current_mul_images: [],
                },
                errors: {},
                slugTimer: null,

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

                async loadCategories() {
                    try {
                        const res = await fetch('{{ route('admin.projects.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.projects.list') }}?${params}`);
                        const json = await res.json();
                        this.items = json.data;
                        this.pagination = json.pagination;
                    } catch (e) {
                        showError('Failed to load projects.');
                    } 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('projectModal')).show();
                    this.$nextTick(() => this.initEditor(''));
                },

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


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

                        this.form.title = s.title;
                        this.form.slug = s.slug;
                        this.form.short_des = s.short_des ?? '';
                        this.form.description = s.description ?? '';
                        this.form.duration = s.duration ?? '';
                        this.form.budget = s.budget ?? '';
                        this.form.coordinator = s.coordinator ?? '';
                        this.form.category_id = s.category_id;
                        this.form.status = s.status;
                        this.form.order = s.order;
                        this.form.current_image = s.image_url ?? '';
                        this.form.current_mul_images = s.mul_image_url ?? [];
                        description = s.description ?? '';

                    } catch (e) {
                        showError('Failed to load project data.');
                        return;
                    } finally {
                        hideLoading();
                    }

                    new bootstrap.Modal(document.getElementById('projectModal')).show();
                    this.$nextTick(() => this.initEditor(description));

                },

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

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

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

                handleMulImageChange(event) {
                    this.mulImageFiles = Array.from(event.target.files);
                    this.mulImagePreviews = this.mulImageFiles.map(f => URL.createObjectURL(f));
                },

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

                    const formData = new FormData();
                    formData.append('title', this.form.title);
                    formData.append('slug', this.form.slug);
                    formData.append('short_des', this.form.short_des ?? '');
                    formData.append('description', this.form.description ?? '');
                    formData.append('duration', this.form.duration ?? '');
                    formData.append('budget', this.form.budget ?? '');
                    formData.append('coordinator', this.form.coordinator ?? '');
                    formData.append('category_id', this.form.category_id);
                    formData.append('status', this.form.status);
                    formData.append('order', this.form.order ?? 0);
                    formData.append('_token', '{{ csrf_token() }}');

                    if (this.imageFile) formData.append('image', this.imageFile);
                    this.mulImageFiles.forEach(f => formData.append('mul_image[]', f));

                    let url = this.isEditing ?
                        `{{ url('admin/projects') }}/${this.editingId}` :
                        '{{ route('admin.projects.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('projectModal')).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. Please try again.');
                    } finally {
                        this.saving = false;
                    }
                },

                deleteItem(id) {
                    showConfirm('This project will be permanently deleted.', 'Delete Project?', async () => {
                        try {
                            showLoading();
                            const res = await fetch(`{{ url('admin/projects') }}/${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() {
                    const editor = document.getElementById('descriptionEditor');
                    if (editor && $(editor).data('summernote')) {
                        $('#descriptionEditor').summernote('destroy');
                    }
                    this.form = {
                        title: '',
                        slug: '',
                        short_des: '',
                        description: '',
                        duration: '',
                        budget: '',
                        coordinator: '',
                        category_id: '',
                        status: 'active',
                        order: 0,
                        current_image: '',
                        current_mul_images: [],
                    };
                    this.errors = {};
                    this.imageFile = null;
                    this.imagePreview = null;
                    this.mulImageFiles = [];
                    this.mulImagePreviews = [];
                    this.editingId = null;

                    const img = document.getElementById('imageInput');
                    const mul = document.getElementById('mulImageInput');
                    if (img) img.value = '';
                    if (mul) mul.value = '';
                },
                 initEditor(content = '') {
                    $('#descriptionEditor').summernote({
                        height: 250,
                        toolbar: {!! json_encode(editorTools()) !!},
                        callbacks: {
                            onChange: (contents) => {
                                this.form.description = contents;
                            }
                        }
                    });
                    $('#descriptionEditor').summernote('code', content);
                },
            };
        }
    </script>
@endpush