@extends('layouts.admin')

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

        <div class="page-header">
            <h1 class="page-title">Institutions</h1>
            <button class="btn btn-primary" @click="openAddModal()">
                <i class="fas fa-plus"></i> Add Institution
            </button>
        </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..." 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">
                <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>Name</th>
                            <th>Category</th>
                            <th>Email</th>
                            <th>Phone</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 institutions 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.name}&size=40`"
                                        width="50" height="40" class="rounded border" style="object-fit:cover;">
                                </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.phone ?? '—'"></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="institutionModal" 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 Institution' : 'Add Institution'"></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" id="institutionTabs">
                            <li class="nav-item">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-basic">Basic
                                    Info</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab"
                                    data-bs-target="#tab-contact">Contact</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-stats">Stats</button>
                            </li>
                        </ul>

                        <div class="tab-content">

                            <!-- Tab 1: Basic Info -->
                            <div class="tab-pane fade show active" id="tab-basic">
                                <div class="row">
                                    <div class="col-md-8 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="Institution name">
                                        <div class="text-danger small mt-1" x-text="errors.name"></div>
                                    </div>
                                    <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>
                                    <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-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>
                                    <!-- 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="instImageInput" 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: Contact -->
                            <div class="tab-pane fade" id="tab-contact">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" class="form-control" x-model="form.email"
                                            placeholder="email@example.com">
                                        <div class="text-danger small mt-1" x-text="errors.email"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Phone</label>
                                        <input type="text" class="form-control" x-model="form.phone"
                                            placeholder="+880...">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Website</label>
                                        <input type="url" class="form-control" x-model="form.website"
                                            placeholder="https://...">
                                        <div class="text-danger small mt-1" x-text="errors.website"></div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Location / Map Link</label>
                                        <input type="text" class="form-control" x-model="form.location"
                                            placeholder="Google Maps embed or address">
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Address</label>
                                        <textarea class="form-control" rows="2" x-model="form.address"></textarea>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label"><i
                                                class="fab fa-facebook text-primary me-1"></i>Facebook</label>
                                        <input type="url" class="form-control" x-model="form.facebook"
                                            placeholder="https://facebook.com/...">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label"><i
                                                class="fab fa-youtube text-danger me-1"></i>YouTube</label>
                                        <input type="url" class="form-control" x-model="form.youtube"
                                            placeholder="https://youtube.com/...">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label"><i
                                                class="fab fa-linkedin text-info me-1"></i>LinkedIn</label>
                                        <input type="url" class="form-control" x-model="form.linkedin"
                                            placeholder="https://linkedin.com/...">
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 3: Stats -->
                            <div class="tab-pane fade" id="tab-stats">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="form-label mb-0 fw-semibold">Stats (e.g. 2,500+ Students)</label>
                                    <button type="button" class="btn btn-sm btn-outline-primary" @click="addStat()">
                                        <i class="fas fa-plus"></i> Add Stat
                                    </button>
                                </div>
                                <template x-for="(stat, index) in form.stats" :key="index">
                                    <div class="row mb-2 align-items-center">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control" x-model="stat.value"
                                                placeholder="2,500+">
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" x-model="stat.label"
                                                placeholder="Students">
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" class="form-control" x-model="stat.icon"
                                                placeholder="bi-people">
                                        </div>
                                        <div class="col-md-1">
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                @click="removeStat(index)">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                                <p x-show="form.stats.length === 0" class="text-muted small">No stats 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 Institution' : 'Save Institution'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function institutionManager() {
            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: '',
                    short_des: '',
                    description: '',
                    category_id: '',
                    status: 'active',
                    order: 0,
                    email: '',
                    phone: '',
                    website: '',
                    address: '',
                    facebook: '',
                    youtube: '',
                    linkedin: '',
                    location: '',
                    current_image: '',
                    stats: [],
                },
                errors: {},
                slugTimer: null,

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

                async loadCategories() {
                    try {
                        const res = await fetch('{{ route('admin.institutions.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.institutions.list') }}?${params}`);
                        const json = await res.json();
                        this.items = json.data;
                        this.pagination = json.pagination;
                    } catch (e) {
                        showError('Failed to load institutions.');
                    } 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('institutionModal')).show();
                    // this.$nextTick(() => this.initEditor(''));
                    const modal = new bootstrap.Modal(document.getElementById('institutionModal'));
                    modal.show();

                    // modal পুরো open হওয়ার পর editor init করো
                    document.getElementById('institutionModal').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/institutions') }}/${id}`);
                        const json = await res.json();
                        const s = json.data;

                        description = s.description ?? '';

                        Object.assign(this.form, {
                            name: s.name,
                            slug: s.slug,
                            short_des: s.short_des ?? '',
                            description: description,
                            category_id: s.category_id,
                            status: s.status,
                            order: s.order,
                            email: s.email ?? '',
                            phone: s.phone ?? '',
                            website: s.website ?? '',
                            address: s.address ?? '',
                            facebook: s.facebook ?? '',
                            youtube: s.youtube ?? '',
                            linkedin: s.linkedin ?? '',
                            location: s.location ?? '',
                            current_image: s.image_url ?? '',
                            stats: s.stats ?? [],
                        });
                    } catch (e) {
                        showError('Failed to load data.');
                        return;
                    } finally {
                        hideLoading();
                    }
                    // new bootstrap.Modal(document.getElementById('institutionModal')).show();
                    // this.$nextTick(() => this.initEditor(description));

                    const modal = new bootstrap.Modal(document.getElementById('institutionModal'));
                    modal.show();

                    // modal পুরো open হওয়ার পর description সহ init করো
                    document.getElementById('institutionModal').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.institutions.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);
                },

                addStat() {
                    this.form.stats.push({
                        value: '',
                        label: '',
                        icon: ''
                    });
                },
                removeStat(index) {
                    this.form.stats.splice(index, 1);
                },

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

                    const formData = new FormData();
                    const fields = ['name', 'slug', 'short_des', 'description', 'category_id', 'status', 'order',
                        'email', 'phone', 'website', 'address', 'facebook', 'youtube', 'linkedin', 'location'
                    ];
                    fields.forEach(f => formData.append(f, this.form[f] ?? ''));
                    formData.append('stats', JSON.stringify(this.form.stats));
                    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/institutions') }}/${this.editingId}` :
                        '{{ route('admin.institutions.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('institutionModal')).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 institution will be permanently deleted.', 'Delete?', async () => {
                        try {
                            showLoading();
                            const res = await fetch(`{{ url('admin/institutions') }}/${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 = {
                        name: '',
                        slug: '',
                        short_des: '',
                        description: '',
                        category_id: '',
                        status: 'active',
                        order: 0,
                        email: '',
                        phone: '',
                        website: '',
                        address: '',
                        facebook: '',
                        youtube: '',
                        linkedin: '',
                        location: '',
                        current_image: '',
                        stats: [],
                    };
                    this.errors = {};
                    this.imageFile = null;
                    this.imagePreview = null;
                    this.editingId = null;
                    const el = document.getElementById('instImageInput');
                    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