@extends('layouts.admin')

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

        <!-- Page Header -->
        <div class="page-header">
            <h1 class="page-title">Employees</h1>
            <div>
                <button class="btn btn-primary" @click="openAddModal()">
                    <i class="fas fa-plus"></i> Add Employee
                </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 by name or designation..."
                    x-model="filters.search">
            </div>
            <div class="form-group">
                <label class="form-label">Department</label>
                <select class="form-select" x-model="filters.department_id">
                    <option value="">All Departments</option>
                    <template x-for="dept in departments" :key="dept.id">
                        <option :value="dept.id" x-text="dept.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-4">
                    <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>Designation</th>
                            <th>Department</th>
                            <th>Order</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-if="loading">
                            <tr>
                                <td colspan="8" 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="8" class="text-center py-4 text-muted">No members found.</td>
                            </tr>
                        </template>

                        <template x-for="(item, index) in items" :key="item.id">
                            <tr>
                                <td x-text="index + 1"></td>
                                <td>
                                    <img :src="item.image_url ?? 'https://ui-avatars.com/api/?name=' + item.name + ' & size = 40 '"
                                        width="40" height="40" class="rounded-circle border"
                                        style="object-fit:cover;">
                                </td>
                                <td x-text="item.name"></td>
                                <td x-text="item.designation ?? '—'"></td>
                                <td><span class="badge bg-info text-dark" x-text="item.department_name ?? ''"></span></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" title="Edit"
                                        @click="openEditModal(item.id)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" title="Delete"
                                        @click="deleteItem(item.id)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Table এর নিচে, panel এর বাইরে -->
        <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> members
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    <!-- Previous -->
                    <li class="page-item" :class="{ disabled: pagination.current_page === 1 }">
                        <button class="page-link" @click="goToPage(pagination.current_page - 1)">
                            &laquo;
                        </button>
                    </li>

                    <!-- Page numbers -->
                    <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>

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

        <!-- Add / Edit Modal -->
        <div class="modal fade" id="employeeModal" 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 Member' : 'Add New Member'"></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                    </div>
                    <div class="modal-body">
                        <form id="employeeForm" enctype="multipart/form-data">
                            <div class="row">

                                <!-- Name -->
                                <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"
                                        placeholder="Full name">
                                    <div class="text-danger small mt-1" x-text="errors.name"></div>
                                </div>

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

                                <!-- Department -->
<div class="col-md-6 mb-3">
                                    <label class="form-label">Department <span class="text-danger">*</span></label>
                                    <select class="form-select" x-model="form.department_id">
                                        <option value="">Select Department</option>
                                        <template x-for="dept in departments" :key="dept.id">
                                            <option :value="dept.id" x-text="dept.name"></option>
                                        </template>
                                    </select>
                                    <div class="text-danger small mt-1" x-text="errors.department_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 class="text-danger small mt-1" x-text="errors.status"></div>
                                </div>

                                <!-- Image -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">
                                        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="80" height="80"
                                            class="rounded-circle border" style="object-fit:cover;">
                                    </div>
                                    <input type="file" class="form-control" id="imageInput"
                                        accept="image/jpg,image/jpeg,image/png,image/webp, image/avif"
                                        @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="80" height="80"
                                            class="rounded-circle border" style="object-fit:cover;">
                                    </div>
                                </div>

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

                                <!-- Phone -->
                                <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 class="text-danger small mt-1" x-text="errors.phone"></div>
                                </div>

                                <!-- Facebook -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Facebook URL</label>
                                    <input type="url" class="form-control" x-model="form.facebook"
                                        placeholder="https://facebook.com/...">
                                    <div class="text-danger small mt-1" x-text="errors.facebook"></div>
                                </div>

                                <!-- LinkedIn -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">LinkedIn URL</label>
                                    <input type="url" class="form-control" x-model="form.linkedin"
                                        placeholder="https://linkedin.com/...">
                                    <div class="text-danger small mt-1" x-text="errors.linkedin"></div>
                                </div>

                                <!-- Twitter -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Twitter URL</label>
                                    <input type="url" class="form-control" x-model="form.twitter"
                                        placeholder="https://twitter.com/...">
                                    <div class="text-danger small mt-1" x-text="errors.twitter"></div>
                                </div>

                                <!-- Instagram -->
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Instagram URL</label>
                                    <input type="url" class="form-control" x-model="form.instagram"
                                        placeholder="https://instagram.com/...">
                                    <div class="text-danger small mt-1" x-text="errors.instagram"></div>
                                </div>

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

                                <!-- Bio PDF -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">Bio PDF (Optional)
                                        <span class="text-muted small" x-show="isEditing && form.current_bio_pdf">(Leave empty to keep current)</span>
                                    </label>
                                    <div x-show="isEditing && form.current_bio_pdf" class="mb-2">
                                        <a :href="form.current_bio_pdf" target="_blank" class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-file-pdf"></i> View Current PDF
                                        </a>
                                    </div>
                                    <input type="file" class="form-control" id="bioPdfInput" accept="application/pdf"
                                        @change="handleBioPdfChange($event)">
                                    <div class="text-danger small mt-1" x-text="errors.bio_pdf"></div>
                                </div>

                                <!-- Bio Text -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">Bio Text (Optional)</label>
                                    <textarea class="form-control" id="bioTextEditor" placeholder="Biography..."></textarea>
                                    <div class="text-danger small mt-1" x-text="errors.bio_text"></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 Member' : 'Save Member'"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function employeeManager() {
            return {
                items: [], departments: [],
                loading: false,
                saving: false,
                isEditing: false,
                editingId: null,
                imagePreview: null,
                imageFile: null,
                bioPdfFile: null,
                per_page: 10,
                filters: {
                    search: '',
                    status: '',
                    department_id: '',
                },
                form: {
                    name: '',
                    designation: '',
                    email: '',
                    phone: '',
                    facebook: '',
                    linkedin: '',
                    twitter: '',
                    instagram: '',
                    
                    
                    bio_text: '',
                    department_id: '',
                    status: 'active',
                    order: 0,
                    current_image: '',
                    current_bio_pdf: '',
                },
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    total: 0,
                },
                errors: {},

                // ── Fetch list ──────────────────────────────────────────
                async fetchDepartments() {
                    try {
                        const res = await fetch(`{{ route('admin.employees.departments') }}`);
                        const json = await res.json();
                        this.departments = json.data;
                    } catch (e) {
                        console.error('Failed to load departments.');
                    }
                },
                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.department_id) params.append('department_id', this.filters.department_id);
                        params.append('page', page);
                        params.append('per_page', this.per_page);

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

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

                    document.getElementById('employeeModal').addEventListener('shown.bs.modal', () => {
                        this.initEditor('');
                    }, {
                        once: true
                    });
                },

                // ── Open Edit Modal ─────────────────────────────────────
                async openEditModal(id) {
                    this.resetForm();
                    this.isEditing = true;
                    this.editingId = id;

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

                        this.form.name = s.name;
                        this.form.designation = s.designation ?? '';
                        this.form.email = s.email ?? '';
                        this.form.phone = s.phone ?? '';
                        this.form.facebook = s.facebook ?? '';
                        this.form.linkedin = s.linkedin ?? '';
                        this.form.twitter = s.twitter ?? '';
                        this.form.instagram = s.instagram ?? '';
                        
                        
                        this.form.bio_text = s.bio_text ?? '';
                        this.form.department_id = s.department_id;
                        this.form.status = s.status;
                        this.form.order = s.order;
                        this.form.current_image = s.image_url ?? '';
                        this.form.current_bio_pdf = s.bio_pdf_url ?? '';
                    } catch (e) {
                        showError('Failed to load member data.');
                        return;
                    } finally {
                        hideLoading();
                    }

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

                    document.getElementById('employeeModal').addEventListener('shown.bs.modal', () => {
                        this.initEditor(this.form.bio_text);
                    }, {
                        once: true
                    });
                },

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

                handleBioPdfChange(event) {
                    const file = event.target.files[0];
                    if (!file) return;
                    this.bioPdfFile = file;
                },

                // ── Save (Create or Update) ─────────────────────────────
                async saveItem() {
                    this.errors = {};
                    this.saving = true;

                    const formData = new FormData();
                    formData.append('name', this.form.name);
                    formData.append('designation', this.form.designation ?? '');
                    formData.append('email', this.form.email ?? '');
                    formData.append('phone', this.form.phone ?? '');
                    formData.append('facebook', this.form.facebook ?? '');
                    formData.append('linkedin', this.form.linkedin ?? '');
                    formData.append('twitter', this.form.twitter ?? '');
                    formData.append('instagram', this.form.instagram ?? '');
                    
                    
                    formData.append('bio_text', this.form.bio_text ?? '');
                    formData.append('department_id', this.form.department_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);
                    }
                    if (this.bioPdfFile) {
                        formData.append('bio_pdf', this.bioPdfFile);
                    }

                    let url = this.isEditing ?
                        `{{ url('admin/employees') }}/${this.editingId}` :
                        '{{ route('admin.employees.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('employeeModal')).hide();
                            this.resetForm();
                            this.fetchItems();
                            showSuccess(json.message);
                        } else if (res.status === 422) {
                            Object.keys(json.errors).forEach(key => {
                                this.errors[key] = json.errors[key][0];
                            });
                        } else {
                            showError(json.message ?? 'Something went wrong.');
                        }
                    } catch (e) {
                        showError('Request failed. Please try again.');
                    } finally {
                        this.saving = false;
                    }
                },

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

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

                // ── Reset Form ──────────────────────────────────────────
                resetForm() {
                    this.form = {
                        name: '',
                        designation: '',
                        email: '',
                        phone: '',
                        facebook: '',
                        linkedin: '',
                        twitter: '',
                        instagram: '',
                        
                        
                        bio_text: '',
                        department_id: '',
                        status: 'active',
                        order: 0,
                        current_image: '',
                        current_bio_pdf: '',
                    };
                    this.errors = {};
                    this.imageFile = null;
                    this.imagePreview = null;
                    this.bioPdfFile = null;
                    this.editingId = null;

                    const fileInput = document.getElementById('imageInput');
                    if (fileInput) fileInput.value = '';
                    const bioPdfInput = document.getElementById('bioPdfInput');
                    if (bioPdfInput) bioPdfInput.value = '';
                },

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

                initEditor(content = '') {
                    $('#bioTextEditor').summernote({
                        height: 200,
                        toolbar: [
                            ['style', ['style']],
                            ['font', ['bold', 'underline', 'clear']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['table', ['table']],
                            ['insert', ['link', 'picture']],
                            ['view', ['fullscreen', 'codeview', 'help']]
                        ],
                        callbacks: {
                            onChange: (contents) => {
                                this.form.bio_text = contents;
                            }
                        }
                    });
                    $('#bioTextEditor').summernote('code', content);
                },
            };
        }
    </script>
@endpush