@extends('layouts.admin')

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

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

    <!-- Filter Bar -->
    <div class="filter-bar">
        <div class="form-group">
            <label class="form-label">Show</label>
            <select class="form-select" style="width:80px" x-model="per_page" @change="fetchItems(1)">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Search</label>
            <input type="text" class="form-control" placeholder="Title or department..." x-model="filters.search">
        </div>
        <div class="form-group">
            <label class="form-label">Type</label>
            <select class="form-select" x-model="filters.type">
                <option value="">All Types</option>
                <option value="full-time">Full Time</option>
                <option value="part-time">Part Time</option>
                <option value="contractual">Contractual</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label">Status</label>
            <select class="form-select" x-model="filters.status">
                <option value="">All</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>
        <div class="form-group align-self-end">
            <button class="btn btn-outline-secondary" @click="fetchItems(1)">
                <i class="fas fa-filter"></i> Filter
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="panel">
        <div class="panel-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Job Title</th>
                        <th>Type</th>
                        <th>Location</th>
                        <th>Vacancy</th>
                        <th>Deadline</th>
                        <th>PDF</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 career posts found.</td></tr>
                    </template>
                    <template x-for="(item, index) in items" :key="item.id">
                        <tr>
                            <td x-text="(pagination.current_page - 1) * pagination.per_page + index + 1"></td>
                            <td>
                                <div x-text="item.title" class="fw-semibold"></div>
                                <small class="text-muted" x-text="item.department ?? ''"></small>
                            </td>
                            <td>
                                <span class="badge"
                                    :class="{
                                        'bg-success':  item.type === 'full-time',
                                        'bg-info text-dark':     item.type === 'part-time',
                                        'bg-warning text-dark':  item.type === 'contractual',
                                    }"
                                    x-text="{
                                        'full-time':   'Full Time',
                                        'part-time':   'Part Time',
                                        'contractual': 'Contractual',
                                    }[item.type]">
                                </span>
                            </td>
                            <td x-text="item.location ?? '—'"></td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary px-2">
                                    <span x-text="item.vacancy"></span> seat(s)
                                </span>
                            </td>
                            <td>
                                <span x-show="item.deadline && !item.is_expired"
                                    class="text-success small fw-medium" x-text="item.deadline"></span>
                                <span x-show="item.deadline && item.is_expired"
                                    class="text-danger small fw-medium">
                                    <i class="bi bi-exclamation-circle me-1"></i>
                                    <span x-text="item.deadline"></span>
                                </span>
                                <span x-show="!item.deadline" class="text-muted">—</span>
                            </td>
                            <td>
                                <template x-if="item.pdf_url">
                                    <a :href="item.pdf_url" target="_blank"
                                        class="btn btn-sm btn-outline-danger py-0 px-2">
                                        <i class="bi bi-file-earmark-pdf"></i> View
                                    </a>
                                </template>
                                <span x-show="!item.pdf_url" class="text-muted">—</span>
                            </td>
                            <td>
                                <span class="badge"
                                    :class="item.status === 'active' ? 'bg-success' : 'bg-secondary'"
                                    x-text="item.status === 'active' ? 'Active' : 'Inactive'">
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" @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>

    <!-- Add / Edit Modal -->
    <div class="modal fade" id="careerModal" 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 Career Post' : 'Add Career Post'"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" @click="resetForm()"></button>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs mb-4">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#career-basic">
                                Basic Info
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#career-details">
                                Job Details
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">

                        <!-- Tab 1: Basic Info -->
                        <div class="tab-pane fade show active" id="career-basic">
                            <div class="row">

                                <div class="col-md-8 mb-3">
                                    <label class="form-label">Job Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" x-model="form.title"
                                        placeholder="e.g. Senior Software Engineer">
                                    <div class="text-danger small mt-1" x-text="errors.title"></div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Vacancy</label>
                                    <input type="number" class="form-control" x-model="form.vacancy" min="1">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Department</label>
                                    <input type="text" class="form-control" x-model="form.department"
                                        placeholder="e.g. IT Department">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Job Type <span class="text-danger">*</span></label>
                                    <select class="form-select" x-model="form.type">
                                        <option value="full-time">Full Time</option>
                                        <option value="part-time">Part Time</option>
                                        <option value="contractual">Contractual</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Location</label>
                                    <input type="text" class="form-control" x-model="form.location"
                                        placeholder="e.g. Dhaka, Remote">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Experience</label>
                                    <input type="text" class="form-control" x-model="form.experience"
                                        placeholder="e.g. 2-3 years">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Salary</label>
                                    <input type="text" class="form-control" x-model="form.salary"
                                        placeholder="e.g. Negotiable / 30,000-50,000">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Application Deadline</label>
                                    <input type="date" class="form-control" x-model="form.deadline">
                                </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>

                                <div class="col-12 mb-3">
                                    <label class="form-label">Short Description</label>
                                    <textarea class="form-control" rows="3" x-model="form.short_description"
                                        placeholder="Brief job summary..."></textarea>
                                </div>

                                <!-- PDF -->
                                <div class="col-12 mb-3">
                                    <label class="form-label">
                                        Job Circular PDF
                                        <span class="text-muted small" x-show="isEditing">(leave empty to keep current)</span>
                                    </label>
                                    <div x-show="isEditing && form.current_pdf" class="mb-2">
                                        <a :href="form.current_pdf" target="_blank"
                                            class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-file-earmark-pdf me-1"></i> View Current PDF
                                        </a>
                                    </div>
                                    <input type="file" class="form-control" id="careerPdfInput"
                                        accept="application/pdf"
                                        @change="handlePdfChange($event)">
                                    <div x-show="pdfName" class="mt-2">
                                        <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-2">
                                            <i class="bi bi-file-earmark-pdf me-1"></i>
                                            <span x-text="pdfName"></span>
                                        </span>
                                    </div>
                                    <div class="text-danger small mt-1" x-text="errors.pdf"></div>
                                </div>

                            </div>
                        </div>

                        <!-- Tab 2: Job Details -->
                        <div class="tab-pane fade" id="career-details">
                            <div class="mb-4">
                                <label class="form-label fw-semibold">Responsibilities</label>
                                <textarea class="form-control" id="responsibilitiesEditor"
                                    placeholder="Job responsibilities..."></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Requirements</label>
                                <textarea class="form-control" id="requirementsEditor"
                                    placeholder="Job requirements..."></textarea>
                            </div>
                        </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 Post' : 'Save Post'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function careerManager() {
    return {
        items: [],
        loading: false, saving: false,
        isEditing: false, editingId: null,
        per_page: 10,
        pdfFile: null, pdfName: null,
        filters: { search: '', status: '', type: '' },
        pagination: { current_page: 1, last_page: 1, per_page: 10, total: 0 },
        form: {
            title: '', department: '', type: 'full-time',
            location: '', experience: '', salary: '',
            vacancy: 1, short_description: '',
            responsibilities: '', requirements: '',
            deadline: '', status: 'active', current_pdf: '',
        },
        errors: {},

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

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

                const res  = await fetch(`{{ route('admin.careers.list') }}?${params}`);
                const json = await res.json();
                this.items      = json.data;
                this.pagination = json.pagination;
            } catch (e) { showError('Failed to load career posts.'); }
            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('careerModal')).show();
            document.getElementById('careerModal').addEventListener('shown.bs.modal', () => {
                this.initEditors('', '');
            }, { once: true });
        },

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

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

                responsibilities = s.responsibilities ?? '';
                requirements     = s.requirements ?? '';

                Object.assign(this.form, {
                    title:             s.title,
                    department:        s.department ?? '',
                    type:              s.type,
                    location:          s.location ?? '',
                    experience:        s.experience ?? '',
                    salary:            s.salary ?? '',
                    vacancy:           s.vacancy,
                    short_description: s.short_description ?? '',
                    responsibilities:  responsibilities,
                    requirements:      requirements,
                    deadline:          s.deadline ?? '',
                    status:            s.status,
                    current_pdf:       s.pdf_url ?? '',
                });
            } catch (e) { showError('Failed to load data.'); return; }
            finally { hideLoading(); }

            new bootstrap.Modal(document.getElementById('careerModal')).show();
            document.getElementById('careerModal').addEventListener('shown.bs.modal', () => {
                this.initEditors(responsibilities, requirements);
            }, { once: true });
        },

        initEditors(responsibilities = '', requirements = '') {
            ['responsibilitiesEditor', 'requirementsEditor'].forEach(id => {
                const el = document.getElementById(id);
                if (el && $(el).data('summernote')) {
                    $(el).summernote('destroy');
                }
            });

            $('#responsibilitiesEditor').summernote({
                height: 200,
                toolbar: {!! json_encode(editorTools()) !!},
                callbacks: {
                    onChange: (c) => { this.form.responsibilities = c; }
                }
            });
            $('#responsibilitiesEditor').summernote('code', responsibilities);

            $('#requirementsEditor').summernote({
                height: 200,
                toolbar: {!! json_encode(editorTools()) !!},
                callbacks: {
                    onChange: (c) => { this.form.requirements = c; }
                }
            });
            $('#requirementsEditor').summernote('code', requirements);
        },

        handlePdfChange(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.pdfFile = file;
            this.pdfName = file.name;
        },

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

            const formData = new FormData();
            const fields = [
                'title', 'department', 'type', 'location', 'experience',
                'salary', 'vacancy', 'short_description', 'responsibilities',
                'requirements', 'deadline', 'status',
            ];
            fields.forEach(f => formData.append(f, this.form[f] ?? ''));
            formData.append('_token', '{{ csrf_token() }}');
            if (this.pdfFile)   formData.append('pdf', this.pdfFile);
            if (this.isEditing) formData.append('_method', 'PUT');

            const url = this.isEditing
                ? `{{ url('admin/careers') }}/${this.editingId}`
                : '{{ route('admin.careers.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('careerModal')).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 career post will be permanently deleted.', 'Delete?', async () => {
                try {
                    showLoading();
                    const res  = await fetch(`{{ url('admin/careers') }}/${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() {
            ['responsibilitiesEditor', 'requirementsEditor'].forEach(id => {
                const el = document.getElementById(id);
                if (el && $(el).data('summernote')) $(el).summernote('destroy');
            });
            this.form = {
                title: '', department: '', type: 'full-time',
                location: '', experience: '', salary: '',
                vacancy: 1, short_description: '',
                responsibilities: '', requirements: '',
                deadline: '', status: 'active', current_pdf: '',
            };
            this.errors = {};
            this.pdfFile = null; this.pdfName = null;
            this.editingId = null;
            const pdf = document.getElementById('careerPdfInput');
            if (pdf) pdf.value = '';
        },
    };
}
</script>
@endpush