@extends('layouts.app')

@section('title', 'Manajemen Pekerjaan')

@section('content')
@php
    $oldJobId = filter_var(old('id_pekerjaan'), FILTER_VALIDATE_INT);
    $editingAfterError = old('_form') === 'job' && old('_method') === 'PUT' && $oldJobId;
    $jobFormAction = $editingAfterError
        ? route('pkbm.pekerjaan.update', $oldJobId)
        : route('pkbm.pekerjaan.store');
    $oldStatusJobId = filter_var(old('_job_id'), FILTER_VALIDATE_INT);
@endphp
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Pekerjaan</p>
            <h1 class="pkbm-dashboard__title">Manajemen Pekerjaan</h1>
            <p class="pkbm-dashboard__subtitle">Atur penanggung jawab, prioritas, deadline, dan progres pekerjaan lembaga.</p>
        </div>
        <button type="button" class="sp-btn-primary shrink-0" data-open-job>
            <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah pekerjaan
        </button>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span>
        </div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Permintaan belum dapat diproses.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4" aria-label="Ringkasan pekerjaan">
        <article class="sp-card flex items-center gap-3 p-4">
            <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-blue-50 text-lg text-blue-600"><i class="bi bi-list-task" aria-hidden="true"></i></span>
            <div><p class="text-xs font-medium text-slate-500">Semua pekerjaan</p><p class="text-xl font-bold text-slate-800">{{ $counts['total'] }}</p></div>
        </article>
        <article class="sp-card flex items-center gap-3 p-4">
            <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-amber-50 text-lg text-amber-600"><i class="bi bi-clock-history" aria-hidden="true"></i></span>
            <div><p class="text-xs font-medium text-slate-500">Belum dimulai</p><p class="text-xl font-bold text-slate-800">{{ $counts['Belum Dimulai'] }}</p></div>
        </article>
        <article class="sp-card flex items-center gap-3 p-4">
            <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-sky-50 text-lg text-sky-600"><i class="bi bi-arrow-repeat" aria-hidden="true"></i></span>
            <div><p class="text-xs font-medium text-slate-500">Sedang dikerjakan</p><p class="text-xl font-bold text-slate-800">{{ $counts['Sedang Dikerjakan'] }}</p></div>
        </article>
        <article class="sp-card flex items-center gap-3 p-4">
            <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-emerald-50 text-lg text-emerald-600"><i class="bi bi-check2-circle" aria-hidden="true"></i></span>
            <div><p class="text-xs font-medium text-slate-500">Selesai</p><p class="text-xl font-bold text-slate-800">{{ $counts['Selesai'] }}</p></div>
        </article>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <h2 class="sp-section-title">Daftar pekerjaan</h2>
                <p class="mt-1 text-xs text-slate-500">
                    @if ($jobs->total())
                        Menampilkan {{ $jobs->firstItem() }}–{{ $jobs->lastItem() }} dari {{ $jobs->total() }} pekerjaan
                    @else
                        0 pekerjaan ditampilkan
                    @endif
                </p>
            </div>
            <form method="GET" action="{{ route('pkbm.pekerjaan.index') }}" class="grid gap-2 sm:grid-cols-[minmax(12rem,1fr)_12rem_auto]">
                <label class="sr-only" for="pekerjaan-search">Cari pekerjaan</label>
                <input id="pekerjaan-search" type="search" name="q" value="{{ $search }}" class="sp-form-control w-full px-3 py-2 text-sm" placeholder="Cari pekerjaan atau penanggung jawab">
                <label class="sr-only" for="pekerjaan-status-filter">Filter status</label>
                <select id="pekerjaan-status-filter" name="status" class="sp-form-control w-full px-3 py-2 text-sm">
                    <option value="">Semua status</option>
                    @foreach ($statuses as $status)
                        <option value="{{ $status }}" @selected($selectedStatus === $status)>{{ $status }}</option>
                    @endforeach
                </select>
                <button type="submit" class="sp-btn-secondary justify-center"><i class="bi bi-search" aria-hidden="true"></i>Filter</button>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[66rem]">
                <thead>
                    <tr>
                        <th scope="col" class="w-14 text-center">No.</th>
                        <th scope="col">Pekerjaan</th>
                        <th scope="col">Penanggung jawab</th>
                        <th scope="col">Prioritas</th>
                        <th scope="col">Deadline</th>
                        <th scope="col">Sisa waktu</th>
                        <th scope="col">Status & catatan</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($jobs as $job)
                        <tr>
                            <td class="text-center text-sm text-slate-500">{{ $jobs->firstItem() + $loop->index }}</td>
                            <td class="max-w-sm">
                                <p class="font-semibold text-slate-800">{{ $job->nama_pekerjaan }}</p>
                                <p class="mt-1 truncate text-xs text-slate-500" title="{{ $job->deskripsi }}">{{ $job->deskripsi ?: 'Tidak ada deskripsi' }}</p>
                            </td>
                            <td>
                                <p class="font-medium text-slate-700">{{ $job->penanggung_jawab }}</p>
                                <p class="mt-1 text-xs text-slate-500"><i class="bi bi-person-badge mr-1" aria-hidden="true"></i>Pelaksana</p>
                            </td>
                            <td>
                                <span @class([
                                    'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                    'bg-rose-50 text-rose-700' => $job->prioritas === 'Tinggi',
                                    'bg-amber-50 text-amber-700' => $job->prioritas === 'Sedang',
                                    'bg-slate-100 text-slate-600' => $job->prioritas === 'Rendah' || ! in_array($job->prioritas, $priorities, true),
                                ])>{{ $job->prioritas ?: 'Belum diatur' }}</span>
                            </td>
                            <td class="whitespace-nowrap text-sm text-slate-700">
                                @if ($job->deadline)
                                    <i class="bi bi-calendar-event mr-1 text-slate-400" aria-hidden="true"></i>{{ \Carbon\CarbonImmutable::parse($job->deadline)->format('d/m/Y') }}
                                @else
                                    <span class="text-slate-400">Belum ditentukan</span>
                                @endif
                            </td>
                            <td>
                                @if ($job->status === 'Selesai')
                                    <span class="text-sm font-semibold text-emerald-700"><i class="bi bi-calendar-check mr-1" aria-hidden="true"></i>Beres</span>
                                @elseif ($job->days_remaining === null)
                                    <span class="text-sm text-slate-500">Belum ada deadline</span>
                                @elseif ($job->days_remaining < 0)
                                    <span class="text-sm font-semibold text-rose-700"><i class="bi bi-exclamation-triangle mr-1" aria-hidden="true"></i>Terlambat {{ abs($job->days_remaining) }} hari</span>
                                @elseif ($job->days_remaining === 0)
                                    <span class="text-sm font-semibold text-rose-700"><i class="bi bi-alarm mr-1" aria-hidden="true"></i>Hari ini</span>
                                @else
                                    <span class="text-sm font-medium text-slate-700">{{ $job->days_remaining }} hari lagi</span>
                                @endif
                            </td>
                            <td class="max-w-xs">
                                <button type="button" data-open-status
                                        data-job-id="{{ $job->id }}"
                                        data-job-name="{{ $job->nama_pekerjaan }}"
                                        data-current-status="{{ $job->status }}"
                                        data-note="{{ $job->keterangan }}"
                                        @class([
                                            'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
                                            'bg-emerald-50 text-emerald-700' => $job->status === 'Selesai',
                                            'bg-sky-50 text-sky-700' => $job->status === 'Sedang Dikerjakan',
                                            'bg-amber-50 text-amber-700' => $job->status === 'Belum Dimulai' || ! in_array($job->status, $statuses, true),
                                        ])
                                        aria-label="Ubah status pekerjaan {{ $job->nama_pekerjaan }}: {{ $job->status }}">
                                    {{ $job->status ?: 'Belum Dimulai' }}<i class="bi bi-chevron-down ml-2" aria-hidden="true"></i>
                                </button>
                                <p class="mt-1 truncate text-xs text-slate-500" title="{{ $job->keterangan }}">{{ $job->keterangan ?: 'Belum ada catatan progres' }}</p>
                            </td>
                            <td class="whitespace-nowrap text-right">
                                <div class="inline-flex items-center gap-1">
                                    <button type="button" data-open-job
                                            data-job-id="{{ $job->id }}"
                                            data-name="{{ $job->nama_pekerjaan }}"
                                            data-description="{{ $job->deskripsi }}"
                                            data-assignee="{{ $job->penanggung_jawab }}"
                                            data-priority="{{ $job->prioritas }}"
                                            data-deadline="{{ $job->deadline }}"
                                            data-status="{{ $job->status }}"
                                            data-note="{{ $job->keterangan }}"
                                            class="settings-icon-action" aria-label="Ubah {{ $job->nama_pekerjaan }}" title="Ubah pekerjaan">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </button>
                                    <form method="POST" action="{{ route('pkbm.pekerjaan.destroy', $job->id) }}" onsubmit="return confirm('Hapus pekerjaan ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus {{ $job->nama_pekerjaan }}" title="Hapus pekerjaan">
                                            <i class="bi bi-trash" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-12 text-center">
                                <span class="mx-auto grid size-12 place-items-center rounded-2xl bg-slate-100 text-xl text-slate-500"><i class="bi bi-clipboard2-check" aria-hidden="true"></i></span>
                                <p class="mt-3 text-sm font-semibold text-slate-700">{{ $counts['total'] ? 'Pekerjaan tidak ditemukan' : 'Belum ada pekerjaan' }}</p>
                                <p class="mt-1 text-xs text-slate-500">{{ $counts['total'] ? 'Coba ubah kata pencarian atau filter status.' : 'Tambahkan pekerjaan pertama untuk mulai mengatur tugas dan deadline lembaga.' }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($jobs->hasPages())
            <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                <p class="text-xs text-slate-500">Gunakan navigasi untuk melihat pekerjaan lainnya.</p>
                {{ $jobs->links() }}
            </div>
        @endif
    </section>
</div>

<dialog id="job-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-job-dialog" aria-labelledby="job-dialog-title">
    <form id="job-form" method="POST" action="{{ $jobFormAction }}">
        @csrf
        @if ($editingAfterError)
            @method('PUT')
        @endif
        <input type="hidden" name="_form" value="job">
        <input id="job-id" type="hidden" name="id_pekerjaan" value="{{ $editingAfterError ? $oldJobId : '' }}">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-list-check"></i></span>
                <div>
                    <h2 id="job-dialog-title" class="sp-section-title">{{ $editingAfterError ? 'Ubah pekerjaan' : 'Tambah pekerjaan' }}</h2>
                    <p class="mt-1 text-xs text-slate-500">Isi detail penugasan dan tenggat waktu pekerjaan.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup dialog"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>
        <div class="grid gap-4 overflow-y-auto p-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="job-name" class="sp-form-label">Nama pekerjaan <span class="text-rose-600">*</span></label>
                <input id="job-name" name="nama_pekerjaan" maxlength="255" required value="{{ old('nama_pekerjaan') }}" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: Laporan SPJ bulanan">
            </div>
            <div class="sm:col-span-2">
                <label for="job-assignee" class="sp-form-label">Penanggung jawab <span class="text-rose-600">*</span></label>
                <input id="job-assignee" name="penanggung_jawab" list="job-teachers" maxlength="150" required value="{{ old('penanggung_jawab') }}" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Pilih guru atau ketik nama lain">
                <datalist id="job-teachers">
                    @foreach ($teachers as $teacher)<option value="{{ $teacher }}">@endforeach
                </datalist>
                <p class="mt-1 text-xs text-slate-500">Nama guru tersedia sebagai saran; penanggung jawab lain dapat diisi manual.</p>
            </div>
            <div class="sm:col-span-2">
                <label for="job-description" class="sp-form-label">Deskripsi tugas</label>
                <textarea id="job-description" name="deskripsi" rows="3" maxlength="5000" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Rincian atau hasil yang diharapkan">{{ old('deskripsi') }}</textarea>
            </div>
            <div>
                <label for="job-priority" class="sp-form-label">Prioritas</label>
                <select id="job-priority" name="prioritas" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    @foreach ($priorities as $priority)
                        <option value="{{ $priority }}" @selected(old('prioritas', 'Sedang') === $priority)>{{ $priority }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="job-deadline" class="sp-form-label">Deadline <span class="text-rose-600">*</span></label>
                <input id="job-deadline" type="date" name="deadline" required value="{{ old('deadline', now()->toDateString()) }}" class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="job-initial-status" class="sp-form-label">Status awal</label>
                <select id="job-initial-status" name="status" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                    @foreach ($statuses as $status)
                        <option value="{{ $status }}" @selected(old('status', 'Belum Dimulai') === $status)>{{ $status }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="job-note" class="sp-form-label">Catatan progres</label>
                <textarea id="job-note" name="keterangan" rows="2" maxlength="2000" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Catatan awal (opsional)">{{ old('keterangan') }}</textarea>
            </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan pekerjaan</button>
        </div>
    </form>
</dialog>

<dialog id="status-dialog" class="pkbm-master-dialog pkbm-class-form-dialog pkbm-job-dialog pkbm-job-dialog--compact" aria-labelledby="status-dialog-title">
    <form id="status-form" method="POST" action="{{ old('_form') === 'status' && $oldStatusJobId ? route('pkbm.pekerjaan.status', $oldStatusJobId) : route('pkbm.pekerjaan.status', '__JOB__') }}">
        @csrf
        @method('PATCH')
        <input type="hidden" name="_form" value="status">
        <input id="status-job-id" type="hidden" name="_job_id" value="{{ old('_form') === 'status' ? $oldStatusJobId : '' }}">
        <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
            <div class="flex items-start gap-3">
                <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-chat-left-text"></i></span>
                <div>
                    <h2 id="status-dialog-title" class="sp-section-title">Perbarui progres</h2>
                    <p class="mt-1 text-xs text-slate-500">Simpan status terbaru dan catatan pengerjaan.</p>
                </div>
            </div>
            <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup dialog"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
        </div>
        <div class="space-y-4 overflow-y-auto p-5">
        <p id="status-job-name" class="rounded-lg bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700"></p>
        <div>
            <label for="status-value" class="sp-form-label">Status</label>
            <select id="status-value" name="status" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                @foreach ($statuses as $status)
                    <option value="{{ $status }}" @selected(old('status', 'Belum Dimulai') === $status)>{{ $status }}</option>
                @endforeach
            </select>
        </div>
        <div class="mt-4">
            <label for="status-note" class="sp-form-label">Keterangan / catatan progres</label>
            <textarea id="status-note" name="keterangan" rows="4" maxlength="2000" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: dokumen sedang diperiksa atau kendala penyelesaian">{{ old('keterangan') }}</textarea>
        </div>
        </div>
        <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
            <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
            <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan progres</button>
        </div>
    </form>
</dialog>

<style>
    .pkbm-job-dialog { width: min(42rem, calc(100vw - 2rem)); }
    .pkbm-job-dialog--compact { width: min(34rem, calc(100vw - 2rem)); }
</style>

@push('scripts')
<script>
(() => {
    const jobDialog = document.getElementById('job-dialog');
    const statusDialog = document.getElementById('status-dialog');
    const jobForm = document.getElementById('job-form');
    const jobMethod = jobForm.querySelector('input[name="_method"]') || document.createElement('input');
    const jobId = document.getElementById('job-id');
    const statusForm = document.getElementById('status-form');
    const jobUpdateUrl = @json(route('pkbm.pekerjaan.update', '__JOB__'));
    const statusUpdateUrl = @json(route('pkbm.pekerjaan.status', '__JOB__'));

    if (!jobMethod.name) {
        jobMethod.type = 'hidden';
        jobForm.append(jobMethod);
    }

    document.querySelectorAll('[data-open-job]').forEach((button) => {
        button.addEventListener('click', () => {
            const editing = Boolean(button.dataset.jobId);
            jobForm.reset();
            jobForm.action = editing ? jobUpdateUrl.replace('__JOB__', button.dataset.jobId) : @json(route('pkbm.pekerjaan.store'));
            jobId.value = editing ? button.dataset.jobId : '';
            jobMethod.name = editing ? '_method' : '';
            jobMethod.value = editing ? 'PUT' : '';
            document.getElementById('job-dialog-title').textContent = editing ? 'Ubah pekerjaan' : 'Tambah pekerjaan';
            document.getElementById('job-name').value = button.dataset.name || '';
            document.getElementById('job-assignee').value = button.dataset.assignee || '';
            document.getElementById('job-description').value = button.dataset.description || '';
            document.getElementById('job-priority').value = button.dataset.priority || 'Sedang';
            document.getElementById('job-deadline').value = button.dataset.deadline || @json(now()->toDateString());
            document.getElementById('job-initial-status').value = button.dataset.status || 'Belum Dimulai';
            document.getElementById('job-note').value = button.dataset.note || '';
            jobDialog.showModal();
        });
    });

    document.querySelectorAll('[data-open-status]').forEach((button) => {
        button.addEventListener('click', () => {
            statusForm.action = statusUpdateUrl.replace('__JOB__', button.dataset.jobId);
            document.getElementById('status-job-id').value = button.dataset.jobId;
            document.getElementById('status-job-name').textContent = button.dataset.jobName;
            document.getElementById('status-value').value = button.dataset.currentStatus || 'Belum Dimulai';
            document.getElementById('status-note').value = button.dataset.note || '';
            statusDialog.showModal();
        });
    });

    document.querySelectorAll('[data-close-dialog]').forEach((button) => {
        button.addEventListener('click', () => button.closest('dialog').close());
    });

    if (@json(old('_form') === 'job')) {
        jobDialog.showModal();
    } else if (@json(old('_form') === 'status')) {
        statusDialog.showModal();
    }
})();
</script>
@endpush
@endsection