@php
$hrdRoute = $puRouteBases['trhrd'] ?? 'pengajuan-hrd';
// Get real data untuk HRD approval
$items = $table_detail_d ?? collect();

// Jika kosong, query langsung dari database
if ($items->isEmpty()) {
$items = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
->leftJoin('users as worker', 'tr_non_periodic.worker_id', '=', 'worker.id')
->select(
'tr_non_periodic.*',
'ms_area.nama_area as area_name',
\Illuminate\Support\Facades\DB::raw("CONCAT(COALESCE(worker.firstname, ''), ' ', COALESCE(worker.lastname, '')) as worker_name")
)
->orderBy('tr_non_periodic.created_at', 'desc')
->get();
}

// Pastikan area_name selalu tersedia untuk tampilan tabel
$areaMap = \Illuminate\Support\Facades\DB::table('ms_area')
->pluck('nama_area', 'id');

// Query petugas untuk dropdown - prefer ms_employee.nama
$workers = \Illuminate\Support\Facades\DB::table('users')
->leftJoin('ms_employee as emp', 'users.id', '=', 'emp.user_id')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('ptgoff', REPLACE(LOWER(users.idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('ptgspu', REPLACE(LOWER(users.idroles), ' ', ''))");
})
->where('users.isactive', '1')
->select('users.id', 'users.idroles', 'users.firstname', 'users.lastname', 'emp.nama as emp_name')
->orderBy('emp.nama')
->orderBy('users.firstname')
->get()
->map(function ($worker) {
$worker->display_name = trim(($worker->emp_name ?? '') ?: trim(($worker->firstname ?? '') . ' ' . ($worker->lastname ?? ''))) ?: ($worker->idroles ?? '');
return $worker;
})
->unique('display_name')
->values();

$displayItems = $items->map(function ($item) use ($areaMap) {
if (empty($item->area_name) && !empty($item->area_id)) {
$item->area_name = $areaMap->get((int) $item->area_id)
?? $areaMap->get((string) $item->area_id);
}

return $item;
});

$formatDateInput = function ($value) {
if (empty($value) || $value === '0000-00-00' || $value === '0000-00-00 00:00:00') {
return '';
}

return \Illuminate\Support\Carbon::parse($value)->format('Y-m-d');
};

$formatDateRange = function ($start, $end) {
if (empty($start) || $start === '0000-00-00' || $start === '0000-00-00 00:00:00') {
return '-';
}

$startDate = \Illuminate\Support\Carbon::parse($start)->format('d-m-Y');
$endDate = (!empty($end) && $end !== '0000-00-00' && $end !== '0000-00-00 00:00:00')
? \Illuminate\Support\Carbon::parse($end)->format('d-m-Y')
: '-';

return $startDate . ' s/d ' . $endDate;
};

// Step 1: approval items dari head (status review dan belum di-approval HRD)
$approvalItems = $displayItems->filter(function ($item) {
$statusValue = strtolower($item->request_status ?? '');

return in_array($statusValue, ['review', 'pending', 'approved']) && !empty($item->head_approval_date) && empty($item->hrd_approval_date);
});

// Step 2: in-progress items setelah HRD approve
$pendingItems = $displayItems->filter(function ($item) {
$statusValue = strtolower($item->request_status ?? '');
return !empty($item->hrd_approval_date) && in_array($statusValue, ['review', 'pengadaan', 'pengerjaan']);
});

// History items - status yang sudah selesai atau ditolak
$historyItems = $displayItems->filter(function ($item) {
$statusValue = strtolower($item->request_status ?? '');
return in_array($statusValue, ['completed', 'rejected', 'reject', 'cancel', 'cancelled', 'canceled']);
});
@endphp
{{-- ================================================================
     TAB: Approval HRD  (trhrd)
     HRD approval & status tracking after head approval
     ================================================================ --}}
<div id="trhrd-container">
    <div class="card mb-4">
        <div class="card-header pb-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Menunggu Persetujuan</h5>
                <span class="text-muted small">Approval HRD</span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_hrd_approval">
                <thead class="thead-light pu-thead-teal">
                    <tr>
                        <th style="text-align: center;">Aksi</th>
                        <th style="text-align: center;">ID Trans</th>
                        <th style="text-align: center;">Tanggal Pengajuan</th>
                        <th style="text-align: center;">Area</th>
                        <th style="text-align: center;">Deskripsi</th>
                        <th style="text-align: center;">Status</th>
                        <th style="text-align: center;">Catatan HRD</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($approvalItems as $detail)
                    @php
                    $primary = '';
                    if (isset($table_primary_d) && count($table_primary_d) > 0) {
                    foreach ($table_primary_d as $p) {
                    $primary = $primary == '' ? $detail->{$p->field} : $primary . ':' . $detail->{$p->field};
                    }
                    }
                    if ($primary == '' && isset($detail->id)) {
                    $primary = $detail->id;
                    }
                    $rawStatus = $detail->request_status ?? 'review';
                    $status = strtolower($rawStatus);
                    if (in_array($status, ['approved'], true)) {
                    $status = 'review';
                    } elseif ($status === 'reject') {
                    $status = 'rejected';
                    } elseif (in_array($status, ['canceled', 'cancelled'], true)) {
                    $status = 'cancel';
                    }
                    $statusText = $status === 'review' ? 'review' : $status;
                    $badgeClass = 'status-badge status-' . ($statusText ?: 'review');
                    $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                    $displayDate = $dateValue
                    ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                    : '-';
                    $displayNote = $detail->hrd_note ?? '-';
                    $pengadaanEstimatedStart = $formatDateInput($detail->pengadaan_estimated_started_at ?? null);
                    $pengadaanEstimatedEnd = $formatDateInput($detail->pengadaan_estimated_ended_at ?? null);
                    $pengerjaanEstimatedStart = $formatDateInput($detail->pengerjaan_estimated_started_at ?? null);
                    $pengerjaanEstimatedEnd = $formatDateInput($detail->pengerjaan_estimated_ended_at ?? null);
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="btn-group" role="group" aria-label="Aksi approval HRD">
                                <button class="btn btn-info btn-sm mb-0 px-3 text-white" type="button"
                                    title="Lihat Detail"
                                    onclick="window.location='{{ url($hrdRoute . '/show' . '/' . encrypt($primary)) }}'">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> Detail</span>
                                </button>
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    data-bs-toggle="modal" data-bs-target="#hrdApprovalModal"
                                    data-id="{{ $primary }}"
                                    data-status="{{ $rawStatus }}"
                                    data-work-type="{{ $detail->work_type ?? '' }}"
                                    data-vendor-name="{{ $detail->vendor_name ?? '' }}"
                                    data-worker-id="{{ $detail->worker_id ?? '' }}"
                                    data-pengadaan-estimated-start="{{ $pengadaanEstimatedStart }}"
                                    data-pengadaan-estimated-end="{{ $pengadaanEstimatedEnd }}"
                                    data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStart }}"
                                    data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEnd }}"
                                    data-note="{{ $detail->hrd_note ?? '' }}">
                                    <i class="fas fa-check"></i><span class="font-weight-bold"> Proses</span>
                                </button>
                            </div>
                        </td>
                        <td class="text-sm font-weight-bold text-primary" style="text-align: center;">{{ $detail->id_trans ?: '-' }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $displayDate }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm" style="text-align: left;">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm" style="text-align: center;">
                            <span class="{{ $badgeClass }}">{{ $statusText ?: 'approved' }}</span>
                        </td>
                        <td class="text-sm" style="text-align: left;">{{ $displayNote }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header pb-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Daftar Pengajuan</h5>
                <span class="text-muted small">Menunggu penyelesaian</span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_hrd_pending">
                <thead class="thead-light pu-thead-teal">
                    <tr>
                        <th style="text-align: center;">Aksi</th>
                        <th style="text-align: center;">ID Trans</th>
                        <th style="text-align: center;">Tanggal Pengajuan</th>
                        <th style="text-align: center;">Area</th>
                        <th style="text-align: center;">Deskripsi</th>
                        <th style="text-align: center;">Pelaksana</th>
                        <th style="text-align: center;">Status</th>
                        <th style="text-align: center;">Estimasi</th>
                        <th style="text-align: center;">Catatan HRD</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pendingItems as $detail)
                    @php
                    $primary = '';
                    if (isset($table_primary_d) && count($table_primary_d) > 0) {
                    foreach ($table_primary_d as $p) {
                    $primary = $primary == '' ? $detail->{$p->field} : $primary . ':' . $detail->{$p->field};
                    }
                    }
                    if ($primary == '' && isset($detail->id)) {
                    $primary = $detail->id;
                    }
                    $rawStatus = $detail->request_status ?? '';
                    $status = strtolower($rawStatus);
                    if (in_array($status, ['approved'], true)) {
                    $status = 'review';
                    } elseif ($status === 'reject') {
                    $status = 'rejected';
                    } elseif (in_array($status, ['canceled', 'cancelled'], true)) {
                    $status = 'cancel';
                    }
                    $badgeClass = 'status-badge status-' . ($status ?: 'pending');
                    $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                    $displayDate = $dateValue
                    ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                    : '-';
                    $displayNote = $detail->hrd_note ?? '-';
                    $pengadaanEstimatedStart = $formatDateInput($detail->pengadaan_estimated_started_at ?? null);
                    $pengadaanEstimatedEnd = $formatDateInput($detail->pengadaan_estimated_ended_at ?? null);
                    $pengerjaanEstimatedStart = $formatDateInput($detail->pengerjaan_estimated_started_at ?? null);
                    $pengerjaanEstimatedEnd = $formatDateInput($detail->pengerjaan_estimated_ended_at ?? null);
                    $displayPengadaanEstimate = $formatDateRange($detail->pengadaan_estimated_started_at ?? null, $detail->pengadaan_estimated_ended_at ?? null);
                    $displayPengerjaanEstimate = $formatDateRange($detail->pengerjaan_estimated_started_at ?? null, $detail->pengerjaan_estimated_ended_at ?? null);
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="btn-group">
                                {{-- Button View --}}
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    title="View Data"
                                    onclick="window.location='{{ url($hrdRoute . '/show' . '/' . encrypt($primary)) }}'">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </button>

                                {{-- Button Toggle --}}
                                <button type="button"
                                    class="btn btn-sm btn-primary mb-0 px-2 dropdown-toggle dropdown-toggle-split"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>

                                <ul class="dropdown-menu dropdown-menu-end">
                                    {{-- Button Update --}}
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <button class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                        type="button"
                                        title="Update Data"
                                        data-bs-toggle="modal"
                                        data-bs-target="#hrdActionModal"
                                        data-id="{{ $primary }}"
                                        data-status="{{ $rawStatus }}"
                                        data-note="{{ $detail->hrd_note ?? '' }}"
                                        data-work-type="{{ $detail->work_type ?? '' }}"
                                        data-vendor-name="{{ $detail->vendor_name ?? '' }}"
                                        data-worker-id="{{ $detail->worker_id ?? '' }}"
                                        data-pengadaan-estimated-start="{{ $pengadaanEstimatedStart }}"
                                        data-pengadaan-estimated-end="{{ $pengadaanEstimatedEnd }}"
                                        data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStart }}"
                                        data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEnd }}">
                                        <i class="fas fa-pen"></i><span class="font-weight-bold"> Update</span>
                                    </button>

                                    {{-- Penutup Divider --}}
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td class="text-sm font-weight-bold text-primary" style="text-align: center;">{{ $detail->id_trans ?: '-' }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $displayDate }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm" style="text-align: left;">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm" style="text-align: center;">
                            @if ($detail->work_type === 'vendor')
                            {{ $detail->vendor_name ?? '-' }}
                            @elseif ($detail->work_type === 'internal')
                            @php
                            $pelaksanaLabel = null;
                            // Prioritas 1: petugas_names (JSON) — diisi petugas saat konfirmasi selesai
                            if (!empty($detail->petugas_names)) {
                            $names = is_array($detail->petugas_names)
                            ? $detail->petugas_names
                            : json_decode($detail->petugas_names, true);
                            if (is_array($names)) {
                            $filtered = array_values(array_filter($names));
                            if (!empty($filtered)) {
                            $pelaksanaLabel = implode(', ', $filtered);
                            }
                            }
                            }
                            // Prioritas 2: worker_name dari join users
                            if (!$pelaksanaLabel) {
                            $workerNameRaw = trim((string) ($detail->worker_name ?? ''));
                            if ($workerNameRaw !== '') {
                            $pelaksanaLabel = $workerNameRaw;
                            }
                            }
                            // Prioritas 3: ms_employee.nama via worker_id
                            if (!$pelaksanaLabel && !empty($detail->worker_id)) {
                            $empName = \Illuminate\Support\Facades\DB::table('ms_employee')
                            ->where('user_id', $detail->worker_id)
                            ->where('is_active', '1')
                            ->value('nama');
                            if ($empName) $pelaksanaLabel = $empName;
                            }
                            @endphp
                            {{ $pelaksanaLabel ?: '-' }}
                            @else
                            -
                            @endif
                        </td>
                        <td class="text-sm" style="text-align: center;">
                            <span class="{{ $badgeClass }}">{{ $status ?: 'pending' }}</span>
                        </td>
                        <td class="text-sm" style="text-align: left;">
                            <div><strong>Pengadaan:</strong> {{ $displayPengadaanEstimate }}</div>
                            <div><strong>Pengerjaan:</strong> {{ $displayPengerjaanEstimate }}</div>
                        </td>
                        <td class="text-sm" style="text-align: left;">{{ $displayNote }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header pb-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
                <h5 class="mb-1">Riwayat Pengajuan</h5>
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small">Total selesai: {{ $historyItems->count() }}</span>
                    <select id="hrd-history-filter" class="form-select form-select-sm pu-filter-select">
                        <option value="">Semua</option>
                        <option value="completed">Completed</option>
                        <option value="rejected">Rejected</option>
                        <option value="cancel">Cancel</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_hrd_history">
                <thead class="thead-light pu-thead-teal">
                    <tr>
                        <th style="text-align: center;">ID Trans</th>
                        <th style="text-align: center;">Tanggal Pengajuan</th>
                        <th style="text-align: center;">Area</th>
                        <th style="text-align: center;">Deskripsi</th>
                        <th style="text-align: center;">Pelaksana</th>
                        <th style="text-align: center;">Waktu Pengadaan</th>
                        <th style="text-align: center;">Waktu Pengerjaan</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($historyItems as $detail)
                    @php
                    $rawStatus = $detail->request_status ?? '';
                    $status = strtolower($rawStatus);
                    if (in_array($status, ['pending', 'approved'], true)) {
                    $status = 'review';
                    } elseif ($status === 'reject') {
                    $status = 'rejected';
                    } elseif (in_array($status, ['canceled', 'cancelled'], true)) {
                    $status = 'cancel';
                    }
                    $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                    $displayDate = $dateValue
                    ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                    : '-';

                    // Format Waktu Pengadaan sebagai range
                    if ($detail->pengadaan_started_at) {
                    $startPengadaan = \Illuminate\Support\Carbon::parse($detail->pengadaan_started_at)->format('d-m-Y');
                    if ($detail->pengadaan_ended_at) {
                    $endPengadaan = \Illuminate\Support\Carbon::parse($detail->pengadaan_ended_at)->format('d-m-Y');
                    $displayPengadaan = $startPengadaan . ' s/d ' . $endPengadaan;
                    } else {
                    $displayPengadaan = $startPengadaan . ' s/d -';
                    }
                    } else {
                    $displayPengadaan = '-';
                    }

                    // Format Waktu Pengerjaan sebagai range
                    if ($detail->pengerjaan_started_at) {
                    $startPengerjaan = \Illuminate\Support\Carbon::parse($detail->pengerjaan_started_at)->format('d-m-Y');
                    if ($detail->pengerjaan_ended_at) {
                    $endPengerjaan = \Illuminate\Support\Carbon::parse($detail->pengerjaan_ended_at)->format('d-m-Y');
                    $displayPengerjaan = $startPengerjaan . ' s/d ' . $endPengerjaan;
                    } else {
                    $displayPengerjaan = $startPengerjaan . ' s/d -';
                    }
                    } else {
                    $displayPengerjaan = '-';
                    }
                    @endphp
                    <tr data-status="{{ $status }}">
                        <td class="text-sm font-weight-bold text-primary" style="text-align: center;">{{ $detail->id_trans ?: '-' }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $displayDate }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm" style="text-align: left;">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm" style="text-align: center;">
                            @if ($detail->work_type === 'vendor')
                            {{ $detail->vendor_name ?? '-' }}
                            @elseif ($detail->work_type === 'internal')
                            @php
                            $pelaksanaLabel = null;
                            // Prioritas 1: petugas_names (JSON) — diisi petugas saat konfirmasi selesai
                            if (!empty($detail->petugas_names)) {
                            $names = is_array($detail->petugas_names)
                            ? $detail->petugas_names
                            : json_decode($detail->petugas_names, true);
                            if (is_array($names)) {
                            $filtered = array_values(array_filter($names));
                            if (!empty($filtered)) {
                            $pelaksanaLabel = implode(', ', $filtered);
                            }
                            }
                            }
                            // Prioritas 2: worker_name dari join users
                            if (!$pelaksanaLabel) {
                            $workerNameRaw = trim((string) ($detail->worker_name ?? ''));
                            if ($workerNameRaw !== '') {
                            $pelaksanaLabel = $workerNameRaw;
                            }
                            }
                            // Prioritas 3: ms_employee.nama via worker_id
                            if (!$pelaksanaLabel && !empty($detail->worker_id)) {
                            $empName = \Illuminate\Support\Facades\DB::table('ms_employee')
                            ->where('user_id', $detail->worker_id)
                            ->where('is_active', '1')
                            ->value('nama');
                            if ($empName) $pelaksanaLabel = $empName;
                            }
                            @endphp
                            {{ $pelaksanaLabel ?: '-' }}
                            @else
                            -
                            @endif
                        </td>
                        <td class="text-sm" style="text-align: center;">{{ $displayPengadaan }}</td>
                        <td class="text-sm" style="text-align: center;">{{ $displayPengerjaan }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="hrdApprovalModal" tabindex="-1" aria-labelledby="hrdApprovalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ url('/pengajuan-hrd/update') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="hrdApprovalLabel">Approval HRD</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="hrd-approval-id">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="request_status" id="hrd-approval-status" required onchange="toggleApprovalWorkerVendorFields()">
                            <option value="">- Pilih Status -</option>
                            <option value="pengadaan">Pengadaan</option>
                            <option value="pengerjaan">Pengerjaan</option>
                            <option value="rejected">Reject</option>
                        </select>
                    </div>
                    <div id="pengadaan-approval-estimation-group" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Mulai</label>
                                <input type="date" class="form-control" name="pengadaan_estimated_started_at"
                                    id="hrd-approval-pengadaan-estimated-start">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Selesai</label>
                                <input type="date" class="form-control" name="pengadaan_estimated_ended_at"
                                    id="hrd-approval-pengadaan-estimated-end">
                            </div>
                        </div>
                    </div>
                    <div id="pengerjaan-approval-fields-group" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Mulai</label>
                                <input type="date" class="form-control" name="pengerjaan_estimated_started_at"
                                    id="hrd-approval-pengerjaan-estimated-start">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Selesai</label>
                                <input type="date" class="form-control" name="pengerjaan_estimated_ended_at"
                                    id="hrd-approval-pengerjaan-estimated-end">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Pelaksana</label>
                            <select class="form-select" name="work_type" id="hrd-approval-work-type" onchange="toggleApprovalWorkerVendor()">
                                <option value="">- Pilih Pelaksana -</option>
                                <option value="internal">Internal</option>
                                <option value="vendor">Vendor</option>
                            </select>
                        </div>
                        <div class="mb-3" id="hrd-approval-vendor-row" style="display: none;">
                            <label class="form-label">Nama Vendor</label>
                            <input type="text" class="form-control" name="vendor_name" id="hrd-approval-vendor-name"
                                placeholder="Nama vendor">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" id="hrd-approval-note-label">Catatan HRD</label>
                        <textarea class="form-control" name="hrd_note" id="hrd-approval-note" rows="4"
                            placeholder="Tulis catatan HRD"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="hrdActionModal" tabindex="-1" aria-labelledby="hrdActionLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ url('/pengajuan-hrd/update') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="hrdActionLabel">Update HRD</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="hrd-id">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="request_status" id="hrd-status" required onchange="toggleWorkerVendorFields()">
                            <option value="">- Pilih Status -</option>
                            <option value="pengadaan">Pengadaan</option>
                            <option value="pengerjaan">Pengerjaan</option>
                            <option value="cancel">Cancel</option>
                        </select>
                    </div>
                    <!-- Field untuk Pengerjaan -->
                    <div id="pengadaan-estimation-group" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Mulai</label>
                                <input type="date" class="form-control" name="pengadaan_estimated_started_at"
                                    id="hrd-pengadaan-estimated-start">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Selesai</label>
                                <input type="date" class="form-control" name="pengadaan_estimated_ended_at"
                                    id="hrd-pengadaan-estimated-end">
                            </div>
                        </div>
                    </div>
                    <div id="pengerjaan-fields-group" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Mulai</label>
                                <input type="date" class="form-control" name="pengerjaan_estimated_started_at"
                                    id="hrd-pengerjaan-estimated-start">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Estimasi Selesai</label>
                                <input type="date" class="form-control" name="pengerjaan_estimated_ended_at"
                                    id="hrd-pengerjaan-estimated-end">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Pelaksana</label>
                            <select class="form-select" name="work_type" id="hrd-work-type" onchange="toggleWorkerVendor()">
                                <option value="">- Pilih Pelaksana -</option>
                                <option value="internal">Internal</option>
                                <option value="vendor">Vendor</option>
                            </select>
                        </div>
                        <div class="mb-3" id="hrd-vendor-row" style="display: none;">
                            <label class="form-label">Nama Vendor</label>
                            <input type="text" class="form-control" name="vendor_name" id="hrd-vendor-name"
                                placeholder="Nama vendor">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Catatan HRD</label>
                        <textarea class="form-control" name="hrd_note" id="hrd-note" rows="4"
                            placeholder="Tulis catatan HRD"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@push('js')
<script>
    const hrdApprovalModal = document.getElementById('hrdApprovalModal');
    if (hrdApprovalModal) {
        hrdApprovalModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id') || '';
            const status = button.getAttribute('data-status') || '';
            const normalizedStatus = (status || '').toLowerCase();
            const workType = button.getAttribute('data-work-type') || 'internal';
            const vendorName = button.getAttribute('data-vendor-name') || '';
            const note = button.getAttribute('data-note') || '';
            const pengadaanEstimatedStart = button.getAttribute('data-pengadaan-estimated-start') || '';
            const pengadaanEstimatedEnd = button.getAttribute('data-pengadaan-estimated-end') || '';
            const pengerjaanEstimatedStart = button.getAttribute('data-pengerjaan-estimated-start') || '';
            const pengerjaanEstimatedEnd = button.getAttribute('data-pengerjaan-estimated-end') || '';

            const inputId = document.getElementById('hrd-approval-id');
            const inputStatus = document.getElementById('hrd-approval-status');
            const inputWorkType = document.getElementById('hrd-approval-work-type');
            const inputVendorName = document.getElementById('hrd-approval-vendor-name');
            const inputNote = document.getElementById('hrd-approval-note');
            const inputPengadaanEstimatedStart = document.getElementById('hrd-approval-pengadaan-estimated-start');
            const inputPengadaanEstimatedEnd = document.getElementById('hrd-approval-pengadaan-estimated-end');
            const inputPengerjaanEstimatedStart = document.getElementById('hrd-approval-pengerjaan-estimated-start');
            const inputPengerjaanEstimatedEnd = document.getElementById('hrd-approval-pengerjaan-estimated-end');

            if (inputId) inputId.value = id;
            if (inputStatus) {
                if (normalizedStatus === 'reject' || normalizedStatus === 'rejected') {
                    inputStatus.value = 'rejected';
                } else if (normalizedStatus === 'pengadaan' || normalizedStatus === 'pengerjaan') {
                    inputStatus.value = normalizedStatus;
                } else {
                    inputStatus.value = '';
                }
            }
            if (inputWorkType) inputWorkType.value = workType || 'internal';
            if (inputVendorName) inputVendorName.value = vendorName;
            if (inputNote) inputNote.value = note;
            if (inputPengadaanEstimatedStart) inputPengadaanEstimatedStart.value = pengadaanEstimatedStart;
            if (inputPengadaanEstimatedEnd) inputPengadaanEstimatedEnd.value = pengadaanEstimatedEnd;
            if (inputPengerjaanEstimatedStart) inputPengerjaanEstimatedStart.value = pengerjaanEstimatedStart;
            if (inputPengerjaanEstimatedEnd) inputPengerjaanEstimatedEnd.value = pengerjaanEstimatedEnd;

            toggleApprovalWorkerVendorFields();
            toggleApprovalWorkerVendor();
            toggleApprovalNoteRequired();
        });
    }

    function toggleApprovalWorkerVendorFields() {
        const statusSelect = document.getElementById('hrd-approval-status');
        const pengadaanGroup = document.getElementById('pengadaan-approval-estimation-group');
        const pengerjaanGroup = document.getElementById('pengerjaan-approval-fields-group');
        const pengadaanStart = document.getElementById('hrd-approval-pengadaan-estimated-start');
        const pengadaanEnd = document.getElementById('hrd-approval-pengadaan-estimated-end');
        const pengerjaanStart = document.getElementById('hrd-approval-pengerjaan-estimated-start');
        const pengerjaanEnd = document.getElementById('hrd-approval-pengerjaan-estimated-end');

        if (!statusSelect || !pengerjaanGroup) return;

        const selectedStatus = (statusSelect.value || '').toLowerCase();
        if (pengadaanGroup) {
            pengadaanGroup.style.display = selectedStatus === 'pengadaan' ? 'block' : 'none';
        }
        pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';
        if (pengadaanStart) pengadaanStart.required = selectedStatus === 'pengadaan';
        if (pengadaanEnd) pengadaanEnd.required = selectedStatus === 'pengadaan';
        if (pengerjaanStart) pengerjaanStart.required = selectedStatus === 'pengerjaan';
        if (pengerjaanEnd) pengerjaanEnd.required = selectedStatus === 'pengerjaan';

        toggleApprovalNoteRequired();
    }

    function toggleApprovalNoteRequired() {
        const statusSelect = document.getElementById('hrd-approval-status');
        const noteInput = document.getElementById('hrd-approval-note');
        const noteLabel = document.getElementById('hrd-approval-note-label');

        if (!statusSelect || !noteInput) return;

        const selectedStatus = (statusSelect.value || '').toLowerCase();
        const isRejected = selectedStatus === 'rejected';

        noteInput.required = isRejected;

        if (noteLabel) {
            noteLabel.textContent = isRejected ? 'Catatan HRD (wajib diisi)' : 'Catatan HRD';
        }
    }

    function toggleApprovalWorkerVendor() {
        const workTypeSelect = document.getElementById('hrd-approval-work-type');
        const vendorRow = document.getElementById('hrd-approval-vendor-row');

        if (!workTypeSelect) return;

        const isVendor = workTypeSelect.value === 'vendor';

        if (vendorRow) {
            vendorRow.style.display = isVendor ? 'block' : 'none';
        }
    }

    // Toggle pengerjaan fields berdasarkan status di hrdActionModal
    function toggleWorkerVendorFields() {
        const statusSelect = document.getElementById('hrd-status');
        const pengadaanGroup = document.getElementById('pengadaan-estimation-group');
        const pengerjaanGroup = document.getElementById('pengerjaan-fields-group');
        const pengadaanStart = document.getElementById('hrd-pengadaan-estimated-start');
        const pengadaanEnd = document.getElementById('hrd-pengadaan-estimated-end');
        const pengerjaanStart = document.getElementById('hrd-pengerjaan-estimated-start');
        const pengerjaanEnd = document.getElementById('hrd-pengerjaan-estimated-end');

        if (!statusSelect || !pengerjaanGroup) return;

        const selectedStatus = statusSelect.value;
        if (pengadaanGroup) {
            pengadaanGroup.style.display = selectedStatus === 'pengadaan' ? 'block' : 'none';
        }
        pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';
        if (pengadaanStart) pengadaanStart.required = selectedStatus === 'pengadaan';
        if (pengadaanEnd) pengadaanEnd.required = selectedStatus === 'pengadaan';
        if (pengerjaanStart) pengerjaanStart.required = selectedStatus === 'pengerjaan';
        if (pengerjaanEnd) pengerjaanEnd.required = selectedStatus === 'pengerjaan';
    }

    // Toggle worker/vendor field
    function toggleWorkerVendor() {
        const workTypeSelect = document.getElementById('hrd-work-type');
        const vendorRow = document.getElementById('hrd-vendor-row');

        if (!workTypeSelect) return;

        const isVendor = workTypeSelect.value === 'vendor';

        if (vendorRow) {
            vendorRow.style.display = isVendor ? 'block' : 'none';
        }
    }

    // Initialize hrdActionModal (replacement for old listener)
    const hrdActionModal = document.getElementById('hrdActionModal');
    if (hrdActionModal) {
        hrdActionModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id') || '';
            const status = button.getAttribute('data-status') || 'review';
            const normalizedStatus = (status || '').toLowerCase();
            const note = button.getAttribute('data-note') || '';
            const workType = button.getAttribute('data-work-type') || 'internal';
            const vendorName = button.getAttribute('data-vendor-name') || '';
            const pengadaanEstimatedStart = button.getAttribute('data-pengadaan-estimated-start') || '';
            const pengadaanEstimatedEnd = button.getAttribute('data-pengadaan-estimated-end') || '';
            const pengerjaanEstimatedStart = button.getAttribute('data-pengerjaan-estimated-start') || '';
            const pengerjaanEstimatedEnd = button.getAttribute('data-pengerjaan-estimated-end') || '';

            const inputId = document.getElementById('hrd-id');
            const inputStatus = document.getElementById('hrd-status');
            const inputWorkType = document.getElementById('hrd-work-type');
            const vendorRow = document.getElementById('hrd-vendor-row');
            const inputVendorName = document.getElementById('hrd-vendor-name');
            const inputNote = document.getElementById('hrd-note');
            const inputPengadaanEstimatedStart = document.getElementById('hrd-pengadaan-estimated-start');
            const inputPengadaanEstimatedEnd = document.getElementById('hrd-pengadaan-estimated-end');
            const inputPengerjaanEstimatedStart = document.getElementById('hrd-pengerjaan-estimated-start');
            const inputPengerjaanEstimatedEnd = document.getElementById('hrd-pengerjaan-estimated-end');

            if (inputId) inputId.value = id;
            if (inputStatus) {
                inputStatus.value = normalizedStatus || 'review';

                // Tampilkan/hide opsi berdasarkan status saat ini (one-way flow)
                const options = inputStatus.querySelectorAll('option');
                options.forEach(opt => {
                    opt.style.display = 'block'; // reset dulu
                    opt.disabled = false;
                });

                // Aturan transisi berdasarkan status saat ini
                if (normalizedStatus === 'pengadaan') {
                    // Dari pengadaan bisa update pengadaan, lanjut pengerjaan, atau cancel
                    options.forEach(opt => {
                        opt.style.display = 'block';
                    });
                } else if (normalizedStatus === 'pengerjaan') {
                    // Dari pengerjaan bisa update pengerjaan atau cancel
                    options.forEach(opt => {
                        if (opt.value === 'pengadaan') {
                            opt.style.display = 'none'; // sembunyikan pengadaan
                        }
                    });
                }
            }

            if (inputWorkType) inputWorkType.value = workType || 'internal';
            if (inputVendorName) inputVendorName.value = vendorName;
            if (inputNote) inputNote.value = note;
            if (inputPengadaanEstimatedStart) inputPengadaanEstimatedStart.value = pengadaanEstimatedStart;
            if (inputPengadaanEstimatedEnd) inputPengadaanEstimatedEnd.value = pengadaanEstimatedEnd;
            if (inputPengerjaanEstimatedStart) inputPengerjaanEstimatedStart.value = pengerjaanEstimatedStart;
            if (inputPengerjaanEstimatedEnd) inputPengerjaanEstimatedEnd.value = pengerjaanEstimatedEnd;

            // Trigger toggle untuk menampilkan pengerjaan fields sesuai status
            toggleWorkerVendorFields();

            // Show/hide vendor field based on work type
            if (inputWorkType) {
                if (vendorRow) {
                    vendorRow.style.display = inputWorkType.value === 'vendor' ? 'block' : 'none';
                }
            }
        });

        const workTypeSelect = document.getElementById('hrd-work-type');
        if (workTypeSelect) {
            workTypeSelect.addEventListener('change', function() {
                const workerRow = document.getElementById('hrd-worker-row');
                const vendorRow = document.getElementById('hrd-vendor-row');

                if (workerRow) {
                    workerRow.style.display = this.value === 'internal' ? 'block' : 'none';
                }
                if (vendorRow) {
                    vendorRow.style.display = this.value === 'vendor' ? 'block' : 'none';
                }
            });
        }
    }

    const hrdHistoryFilter = document.getElementById('hrd-history-filter');
    if (hrdHistoryFilter) {
        let currentHrdHistoryFilter = '';

        if ($.fn.DataTable) {
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                if (!settings.nTable || settings.nTable.id !== 'list_hrd_history') {
                    return true;
                }

                if (!currentHrdHistoryFilter) {
                    return true;
                }

                const rowData = settings.aoData[dataIndex];
                const rowNode = rowData ? rowData.nTr : null;
                const rowStatus = rowNode ? (rowNode.getAttribute('data-status') || '').toLowerCase() : '';

                return rowStatus === currentHrdHistoryFilter;
            });
        }

        hrdHistoryFilter.addEventListener('change', function() {
            currentHrdHistoryFilter = this.value.toLowerCase();

            if ($.fn.DataTable && $.fn.DataTable.isDataTable('#list_hrd_history')) {
                $('#list_hrd_history').DataTable().draw();
                return;
            }

            document.querySelectorAll('#list_hrd_history tbody tr[data-status]').forEach(function(row) {
                const rowStatus = (row.getAttribute('data-status') || '').toLowerCase();
                row.style.display = currentHrdHistoryFilter === '' || rowStatus === currentHrdHistoryFilter ? '' : 'none';
            });
        });

        const requestedHrdStatus = new URLSearchParams(window.location.search).get('status');
        if (requestedHrdStatus) {
            const normalizedRequestedStatus = requestedHrdStatus.toLowerCase();
            const optionExists = Array.from(hrdHistoryFilter.options).some(function(option) {
                return option.value.toLowerCase() === normalizedRequestedStatus;
            });

            if (optionExists) {
                hrdHistoryFilter.value = normalizedRequestedStatus;
                hrdHistoryFilter.dispatchEvent(new Event('change'));
            }
        }
    }

    if ($.fn.DataTable) {
        if (!$.fn.DataTable.isDataTable('#list_hrd_approval')) {
            $('#list_hrd_approval').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }

        if (!$.fn.DataTable.isDataTable('#list_hrd_pending')) {
            $('#list_hrd_pending').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }

        if (!$.fn.DataTable.isDataTable('#list_hrd_history')) {
            $('#list_hrd_history').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [0, 'desc']
                ],
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }
    }
</script>
@endpush