@extends('layouts.admin')

@section('title', 'Lamaran')

@section('content')
    <div
        id="applicationCrudRoot"
        data-csrf="{{ csrf_token() }}"
        data-index-url="{{ route('admin.applications.index') }}"
        data-store-url="{{ route('admin.applications.store') }}"
        data-show-url-template="{{ route('admin.applications.show', ['application' => '__ID__']) }}"
        data-update-url-template="{{ route('admin.applications.update', ['application' => '__ID__']) }}"
        data-destroy-url-template="{{ route('admin.applications.destroy', ['application' => '__ID__']) }}"
    >
        <div class="admin-toolbar">
            <h1 style="margin: 0;">Lamaran Masuk</h1>
            <button id="applicationCreateBtn" class="btn btn-primary" type="button">Tambah Lamaran</button>
        </div>

        <section class="card" style="margin-bottom: 16px;">
            <form id="applicationFilterForm" method="get" class="filters" action="{{ route('admin.applications.index') }}">
                <div class="form-group">
                    <label for="status">Status</label>
                    <select id="status" name="status">
                        <option value="">Semua</option>
                        @foreach ($statusOptions as $item)
                            <option value="{{ $item }}" @selected($filters['status'] === $item)>{{ ucfirst($item) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="job_id">Posisi</label>
                    <select id="job_id" name="job_id">
                        <option value="">Semua</option>
                        @foreach ($jobs as $job)
                            <option value="{{ $job->id }}" @selected((string) $filters['job_id'] === (string) $job->id)>{{ $job->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="date_from">Dari Tanggal</label>
                    <input id="date_from" type="date" name="date_from" value="{{ $filters['date_from'] }}">
                </div>
                <div class="form-group">
                    <label for="date_to">Sampai Tanggal</label>
                    <input id="date_to" type="date" name="date_to" value="{{ $filters['date_to'] }}">
                </div>
                <div class="form-group" style="align-self: end;">
                    <button class="btn btn-primary" type="submit">Filter</button>
                </div>
            </form>
        </section>

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

    <div id="applicationModal" class="modal-backdrop" aria-hidden="true">
        <div class="modal-card">
            <div class="modal-head">
                <h3 id="applicationModalTitle" style="margin: 0;">Tambah Lamaran</h3>
                <button id="applicationModalCloseBtn" type="button" class="btn btn-outline">Tutup</button>
            </div>

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

            <form id="applicationForm" class="modal-form" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" id="applicationMethodField" value="">

                <div class="modal-grid">
                    <div class="form-group">
                        <label for="form_career_job_id">Posisi</label>
                        <select id="form_career_job_id" name="career_job_id" required>
                            <option value="">Pilih Posisi</option>
                            @foreach ($jobs as $job)
                                <option value="{{ $job->id }}">{{ $job->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_status">Status</label>
                        <select id="form_status" name="status" required>
                            @foreach ($statusOptions as $status)
                                <option value="{{ $status }}">{{ ucfirst($status) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_full_name">Nama Lengkap</label>
                        <input id="form_full_name" type="text" name="full_name" required>
                    </div>
                    <div class="form-group">
                        <label for="form_birth_date">Tanggal Lahir</label>
                        <input id="form_birth_date" type="date" name="birth_date" required>
                    </div>
                    <div class="form-group">
                        <label for="form_email">Email</label>
                        <input id="form_email" type="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="form_phone">No. Telepon</label>
                        <input id="form_phone" type="text" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="form_gender">Jenis Kelamin</label>
                        <select id="form_gender" name="gender">
                            <option value="">-</option>
                            @foreach ($genderOptions as $gender)
                                <option value="{{ $gender }}">{{ $gender }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_referral_source">Sumber Informasi</label>
                        <input id="form_referral_source" type="text" name="referral_source">
                    </div>
                    <div class="form-group">
                        <label for="form_current_company">Perusahaan Saat Ini</label>
                        <input id="form_current_company" type="text" name="current_company">
                    </div>
                    <div class="form-group">
                        <label for="form_current_salary">Gaji Saat Ini</label>
                        <input id="form_current_salary" type="text" name="current_salary">
                    </div>
                    <div class="form-group">
                        <label for="form_total_experience">Pengalaman Total</label>
                        <input id="form_total_experience" type="text" name="total_experience">
                    </div>
                    <div class="form-group">
                        <label for="form_education_level">Jenjang Pendidikan</label>
                        <input id="form_education_level" type="text" name="education_level" required>
                    </div>
                    <div class="form-group">
                        <label for="form_major">Jurusan</label>
                        <input id="form_major" type="text" name="major" required>
                    </div>
                    <div class="form-group">
                        <label for="form_institution">Institusi</label>
                        <input id="form_institution" type="text" name="institution" required>
                    </div>
                    <div class="form-group">
                        <label for="form_start_year">Tahun Mulai</label>
                        <input id="form_start_year" type="text" name="start_year" required>
                    </div>
                    <div class="form-group">
                        <label for="form_end_year">Tahun Selesai</label>
                        <input id="form_end_year" type="text" name="end_year" required>
                    </div>
                    <div class="form-group">
                        <label for="form_gpa">IPK</label>
                        <input id="form_gpa" type="text" name="gpa" required>
                    </div>
                    <div class="form-group">
                        <label for="form_willing_to_relocate">Bersedia Relokasi</label>
                        <select id="form_willing_to_relocate" name="willing_to_relocate" required>
                            @foreach ($yesNoOptions as $item)
                                <option value="{{ $item }}">{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_knows_employee">Kenal Karyawan Internal</label>
                        <select id="form_knows_employee" name="knows_employee" required>
                            @foreach ($yesNoOptions as $item)
                                <option value="{{ $item }}">{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_data_consent">Persetujuan Data</label>
                        <select id="form_data_consent" name="data_consent" required>
                            @foreach ($yesNoOptions as $item)
                                <option value="{{ $item }}">{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_submitted_at">Tanggal Kirim</label>
                        <input id="form_submitted_at" type="datetime-local" name="submitted_at">
                    </div>
                    <div class="form-group form-group-full">
                        <label for="form_address">Alamat</label>
                        <textarea id="form_address" name="address"></textarea>
                    </div>
                    <div class="form-group form-group-full">
                        <label for="form_skills">Skills</label>
                        <textarea id="form_skills" name="skills"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="form_linkedin_url">LinkedIn URL</label>
                        <input id="form_linkedin_url" type="url" name="linkedin_url">
                    </div>
                    <div class="form-group">
                        <label for="form_github_url">Github URL</label>
                        <input id="form_github_url" type="url" name="github_url">
                    </div>
                    <div class="form-group form-group-full">
                        <label for="form_portfolio_url">Portfolio URL</label>
                        <input id="form_portfolio_url" type="url" name="portfolio_url">
                    </div>
                    <div class="form-group">
                        <label for="form_cv_file">CV File</label>
                        <input id="form_cv_file" type="file" name="cv_file" accept=".pdf,.doc,.docx">
                    </div>
                    <div class="form-group">
                        <label for="form_photo_file">Foto File</label>
                        <input id="form_photo_file" type="file" name="photo_file" accept=".jpg,.jpeg,.png,.webp">
                    </div>
                    <div id="applicationExistingFiles" class="form-group form-group-full"></div>
                    <div class="form-group form-group-full">
                        <label for="form_notes">Catatan Reviewer</label>
                        <textarea id="form_notes" name="notes"></textarea>
                    </div>
                </div>

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

    <script>
        (() => {
            const root = document.getElementById('applicationCrudRoot');
            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 filterForm = document.getElementById('applicationFilterForm');
            const tableContainer = document.getElementById('applicationsTableContainer');
            const createBtn = document.getElementById('applicationCreateBtn');
            const modal = document.getElementById('applicationModal');
            const modalTitle = document.getElementById('applicationModalTitle');
            const modalCloseBtn = document.getElementById('applicationModalCloseBtn');
            const modalCancelBtn = document.getElementById('applicationCancelBtn');
            const saveBtn = document.getElementById('applicationSaveBtn');
            const form = document.getElementById('applicationForm');
            const methodField = document.getElementById('applicationMethodField');
            const errorBox = document.getElementById('applicationFormErrors');
            const existingFiles = document.getElementById('applicationExistingFiles');

            let currentTableUrl = `${indexUrl}${window.location.search || ''}`;
            let currentSubmitUrl = storeUrl;

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

            const formFields = [
                'career_job_id', 'full_name', 'email', 'phone', 'address', 'birth_date', 'skills',
                'current_company', 'current_salary', 'total_experience', 'linkedin_url', 'github_url',
                'portfolio_url', 'education_level', 'major', 'institution', 'start_year', 'end_year',
                'gpa', 'willing_to_relocate', 'knows_employee', 'data_consent', 'gender',
                'referral_source', 'status', 'notes', 'submitted_at',
            ];

            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 = (application = {}) => {
                formFields.forEach((field) => {
                    const input = form.elements.namedItem(field);
                    if (!input) {
                        return;
                    }
                    input.value = application[field] ?? '';
                });

                existingFiles.innerHTML = '';
                const links = [];
                if (application.cv_url) {
                    links.push(`<a href="${application.cv_url}" target="_blank">CV saat ini</a>`);
                }
                if (application.photo_url) {
                    links.push(`<a href="${application.photo_url}" target="_blank">Foto saat ini</a>`);
                }
                if (links.length > 0) {
                    existingFiles.innerHTML = `<label>Dokumen Saat Ini</label><div style="display: flex; gap: 10px; flex-wrap: wrap;">${links.join('')}</div>`;
                }
            };

            const resetForCreate = () => {
                form.reset();
                methodField.value = '';
                currentSubmitUrl = storeUrl;
                modalTitle.textContent = 'Tambah Lamaran';
                form.elements.namedItem('status').value = 'pending';
                form.elements.namedItem('willing_to_relocate').value = 'Yes';
                form.elements.namedItem('knows_employee').value = 'No';
                form.elements.namedItem('data_consent').value = 'Yes';
                form.elements.namedItem('submitted_at').value = new Date(Date.now() - (new Date().getTimezoneOffset() * 60000))
                    .toISOString()
                    .slice(0, 16);
                existingFiles.innerHTML = '';
            };

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

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

                if (pushHistory) {
                    history.replaceState({}, '', url);
                }
            };

            const queryFromForm = (formElement) => {
                const source = new URLSearchParams(new FormData(formElement));
                const params = new URLSearchParams();
                source.forEach((value, key) => {
                    if (String(value).trim() !== '') {
                        params.append(key, value);
                    }
                });
                return params.toString();
            };

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

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

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

            filterForm.addEventListener('submit', async (event) => {
                event.preventDefault();
                const query = queryFromForm(filterForm);
                const url = query ? `${indexUrl}?${query}` : indexUrl;

                try {
                    await loadTable(url);
                } catch (error) {
                    showFeedback(error.message, 'error');
                }
            });

            tableContainer.addEventListener('click', async (event) => {
                const paginationLink = event.target.closest('nav[role="navigation"] a[href]');
                if (paginationLink) {
                    event.preventDefault();
                    try {
                        await loadTable(paginationLink.href);
                    } catch (error) {
                        showFeedback(error.message, 'error');
                    }
                    return;
                }

                const editBtn = event.target.closest('.js-application-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 lamaran.');
                        }

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

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

                event.preventDefault();
                if (!window.confirm('Hapus lamaran 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 lamaran.');
                    }

                    const payload = await response.json();
                    await loadTable(currentTableUrl, false);
                    showFeedback(payload.message || 'Lamaran 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 lamaran.');
                    }

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