@extends('layouts.admin')

@section('title', 'Pekerjaan')

@section('content')
    <div
        id="jobCrudRoot"
        data-csrf="{{ csrf_token() }}"
        data-index-url="{{ route('admin.jobs.index') }}"
        data-store-url="{{ route('admin.jobs.store') }}"
        data-show-url-template="{{ route('admin.jobs.show', ['job' => '__ID__']) }}"
        data-update-url-template="{{ route('admin.jobs.update', ['job' => '__ID__']) }}"
        data-destroy-url-template="{{ route('admin.jobs.destroy', ['job' => '__ID__']) }}"
    >
        <div class="admin-toolbar">
            <h1 style="margin: 0;">Daftar Pekerjaan</h1>
            <button id="jobCreateBtn" class="btn btn-primary" type="button">Tambah Lowongan</button>
        </div>

        <div id="jobsTableContainer">
            @include('admin.jobs.partials.table', ['jobs' => $jobs])
        </div>
    </div>

    <div id="jobModal" class="modal-backdrop" aria-hidden="true">
        <div class="modal-card" style="width: min(760px, 100%);">
            <div class="modal-head">
                <h3 id="jobModalTitle" style="margin: 0;">Tambah Lowongan</h3>
                <button id="jobModalCloseBtn" type="button" class="btn btn-outline">Tutup</button>
            </div>

            <div id="jobFormErrors" class="alert alert-error" style="display: none;"></div>

            <form id="jobForm" class="modal-form">
                @csrf
                <input type="hidden" id="jobMethodField" name="_method" value="">

                <div class="grid grid-2">
                    <div class="form-group">
                        <label for="job_title">Title</label>
                        <input id="job_title" type="text" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="job_location">Location</label>
                        <input id="job_location" type="text" name="location" required>
                    </div>
                    <div class="form-group">
                        <label for="job_department">Department</label>
                        <input id="job_department" type="text" name="department" required>
                    </div>
                    <div class="form-group">
                        <label for="job_type">Type</label>
                        <select id="job_type" name="type" required>
                            @foreach ($typeOptions as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="job_description">Description</label>
                    <textarea id="job_description" name="description"></textarea>
                </div>
                <div class="form-group">
                    <label for="job_requirements_text">Requirements (satu baris satu item)</label>
                    <textarea id="job_requirements_text" name="requirements_text"></textarea>
                </div>
                <div class="form-group">
                    <label>
                        <input id="job_is_active" type="checkbox" name="is_active" value="1" checked>
                        Aktif
                    </label>
                </div>

                <div class="modal-footer">
                    <button id="jobSaveBtn" class="btn btn-primary" type="submit">Simpan</button>
                    <button id="jobCancelBtn" class="btn btn-outline" type="button">Batal</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        (() => {
            const root = document.getElementById('jobCrudRoot');
            if (!root) {
                return;
            }

            const csrfToken = root.dataset.csrf;
            const indexUrl = root.dataset.indexUrl;
            const storeUrl = root.dataset.storeUrl;
            const showUrlTemplate = root.dataset.showUrlTemplate;
            const updateUrlTemplate = root.dataset.updateUrlTemplate;
            const destroyUrlTemplate = root.dataset.destroyUrlTemplate;

            const tableContainer = document.getElementById('jobsTableContainer');
            const createBtn = document.getElementById('jobCreateBtn');
            const modal = document.getElementById('jobModal');
            const modalTitle = document.getElementById('jobModalTitle');
            const modalCloseBtn = document.getElementById('jobModalCloseBtn');
            const cancelBtn = document.getElementById('jobCancelBtn');
            const form = document.getElementById('jobForm');
            const methodField = document.getElementById('jobMethodField');
            const errorBox = document.getElementById('jobFormErrors');
            const saveBtn = document.getElementById('jobSaveBtn');
            const activeCheckbox = document.getElementById('job_is_active');

            const ajaxHeaders = {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken,
            };

            let currentSubmitUrl = storeUrl;

            const buildUrl = (template, id) => template.replace('__ID__', String(id));

            const setBusy = (busy) => {
                saveBtn.disabled = busy;
                saveBtn.textContent = busy ? 'Menyimpan...' : 'Simpan';
            };

            const showFeedback = (message, type = 'success') => {
                if (type === 'error') {
                    window.toastError?.(message);
                    return;
                }

                window.toastSuccess?.(message);
            };

            const showErrors = (errors) => {
                if (!errors || Object.keys(errors).length === 0) {
                    errorBox.style.display = 'none';
                    errorBox.innerHTML = '';
                    return;
                }

                const items = Object.values(errors)
                    .flat()
                    .map((message) => `<li>${message}</li>`)
                    .join('');

                errorBox.innerHTML = `<ul style="margin: 0; padding-left: 20px;">${items}</ul>`;
                errorBox.style.display = 'block';
                window.toastError?.('Validasi gagal. Periksa input form.');
            };

            const openModal = () => {
                modal.classList.add('show');
                modal.setAttribute('aria-hidden', 'false');
            };

            const closeModal = () => {
                modal.classList.remove('show');
                modal.setAttribute('aria-hidden', 'true');
                showErrors({});
            };

            const fillForm = (job) => {
                form.elements.namedItem('title').value = job.title ?? '';
                form.elements.namedItem('location').value = job.location ?? '';
                form.elements.namedItem('department').value = job.department ?? '';
                form.elements.namedItem('type').value = job.type ?? 'On-site';
                form.elements.namedItem('description').value = job.description ?? '';
                form.elements.namedItem('requirements_text').value = job.requirements_text ?? '';
                activeCheckbox.checked = Boolean(job.is_active);
            };

            const resetCreate = () => {
                form.reset();
                methodField.value = '';
                currentSubmitUrl = storeUrl;
                modalTitle.textContent = 'Tambah Lowongan';
                activeCheckbox.checked = true;
            };

            const loadTable = async () => {
                const response = await fetch(indexUrl, { headers: ajaxHeaders });
                if (!response.ok) {
                    throw new Error('Gagal memuat data lowongan.');
                }

                const data = await response.json();
                tableContainer.innerHTML = data.table_html;
            };

            createBtn.addEventListener('click', () => {
                resetCreate();
                openModal();
            });

            modalCloseBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);

            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });

            tableContainer.addEventListener('click', async (event) => {
                const editBtn = event.target.closest('.js-job-edit');
                if (editBtn) {
                    event.preventDefault();
                    try {
                        const response = await fetch(buildUrl(showUrlTemplate, editBtn.dataset.id), { headers: ajaxHeaders });
                        if (!response.ok) {
                            throw new Error('Gagal memuat detail lowongan.');
                        }

                        const payload = await response.json();
                        fillForm(payload.job);
                        methodField.value = 'PATCH';
                        currentSubmitUrl = buildUrl(updateUrlTemplate, editBtn.dataset.id);
                        modalTitle.textContent = 'Edit Lowongan';
                        openModal();
                    } catch (error) {
                        showFeedback(error.message, 'error');
                    }
                    return;
                }

                const deleteBtn = event.target.closest('.js-job-delete');
                if (!deleteBtn) {
                    return;
                }

                event.preventDefault();
                if (!window.confirm('Hapus lowongan ini?')) {
                    return;
                }

                try {
                    const body = new FormData();
                    body.append('_method', 'DELETE');
                    const response = await fetch(buildUrl(destroyUrlTemplate, deleteBtn.dataset.id), {
                        method: 'POST',
                        headers: ajaxHeaders,
                        body,
                    });

                    if (!response.ok) {
                        throw new Error('Gagal menghapus lowongan.');
                    }

                    const payload = await response.json();
                    await loadTable();
                    showFeedback(payload.message || 'Lowongan berhasil dihapus.');
                } catch (error) {
                    showFeedback(error.message, 'error');
                }
            });

            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                showErrors({});
                setBusy(true);

                try {
                    const body = new FormData(form);
                    if (!methodField.value) {
                        body.delete('_method');
                    }

                    const response = await fetch(currentSubmitUrl, {
                        method: 'POST',
                        headers: ajaxHeaders,
                        body,
                    });

                    if (response.status === 422) {
                        const payload = await response.json();
                        showErrors(payload.errors || {});
                        return;
                    }

                    if (!response.ok) {
                        throw new Error('Gagal menyimpan lowongan.');
                    }

                    const payload = await response.json();
                    closeModal();
                    await loadTable();
                    showFeedback(payload.message || 'Perubahan disimpan.');
                } catch (error) {
                    showFeedback(error.message, 'error');
                } finally {
                    setBusy(false);
                }
            });
        })();
    </script>
@endsection