@extends('partials.main')

@section('content')
	<div class="card card-flush mb-7">
		<div class="card-header pt-7">
			<div class="card-title">
				<div class="d-flex flex-column">
					<h2 class="mb-0 fw-bold">{{ $tipe ?? '-' }}</h2>
					<div class="text-muted">Detail monitoring karyawan luar per tipe</div>
				</div>
			</div>
			<div class="card-toolbar">
				<div class="d-flex align-items-center gap-2">
					<div class="btn-group">
						<button type="button" class="btn btn-sm btn-light-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
							<i class="fa-solid fa-file-export me-2"></i>Export
						</button>
						<ul class="dropdown-menu dropdown-menu-end">
							<li><h6 class="dropdown-header">Tipe</h6></li>
							<li>
								<a class="dropdown-item" href="/monitoring-pra-akreditasi/pdf-external?tipe={{ urlencode($tipe ?? '') }}">PDF</a>
							</li>
							<li>
								<a class="dropdown-item" href="/monitoring-pra-akreditasi/excel-external?tipe={{ urlencode($tipe ?? '') }}">Excel</a>
							</li>
						</ul>
					</div>
					<a href="/" class="btn btn-sm btn-light">
						<i class="fa-solid fa-arrow-left me-2"></i>Kembali
					</a>
				</div>
			</div>
		</div>

		<div class="card-body pt-3">
			<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
				<div class="d-flex align-items-center position-relative">
					<span class="svg-icon svg-icon-1 position-absolute ms-4">
						<i class="fa-solid fa-magnifying-glass"></i>
					</span>
					<input type="text" id="searchPegawaiLuar" class="form-control form-control-solid w-300px ps-12" placeholder="Cari karyawan..." autocomplete="off" />
				</div>
			</div>

			<div class="table-responsive">
				<table id="tblPegawaiLuar" class="table align-middle table-row-dashed fs-6 gy-3 w-100">
					<thead>
						<tr class="text-muted fw-semibold fs-7 text-uppercase gs-0">
							<th>Nama</th>
							<th style="width: 320px">Progress</th>
							<th>Belum dikerjakan</th>
							<th class="text-end">Aksi</th>
						</tr>
					</thead>
					<tbody class="fw-semibold text-gray-800"></tbody>
				</table>
			</div>
		</div>
	</div>
@endsection

<div class="modal fade" id="modalDetailLuar" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Detail Progress</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<style>
					.modal .cell-ellipsis {
						max-width: 220px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				</style>
				<div class="text-muted mb-4" id="detailNamaLuar"></div>
				<div class="table-responsive">
					<table class="table align-middle table-row-dashed fs-6 gy-3">
						<thead>
							<tr class="text-muted fw-semibold fs-7 text-uppercase gs-0">
								<th>Nama Pitstop</th>
								<th>Nilai</th>
								<th style="width: 240px">Pemberi Nilai</th>
								<th class="text-end">Waktu</th>
							</tr>
						</thead>
						<tbody class="fw-semibold text-gray-800" id="detailTableLuar">
							<tr>
								<td colspan="4" class="text-center text-muted py-6">Memuat data...</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modalBelumLuar" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">PitStop Belum Dikerjakan</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div class="fw-semibold mb-4 text-dark" id="belumNamaLuar"></div>
				<ul id="belumListLuar" class="mb-0 ps-5"></ul>
			</div>
		</div>
	</div>
</div>


@section('custom_js')
<script>
	$(document).ready(function () {
		const tipe = String(@json($tipe ?? ''));
		const totalSteps = Number(@json((int) ($totalSteps ?? 0)));
		const csrf = $('meta[name="csrf-token"]').attr('content');

		const escapeHtml = (str) => String(str ?? '').replace(/[&<>"']/g, (m) => ({
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#39;',
		}[m]));

		const renderDetail = (rows) => {
			if (!rows.length) {
				$('#detailTableLuar').html('<tr><td colspan="4" class="text-center text-muted py-6">Belum ada data</td></tr>');
				return;
			}

			const html = rows
				.map((r) => {
					const status = String(r.status ?? '-');
					const waktu = r.created_at ? String(r.created_at) : '-';

					return `
						<tr>
							<td>${escapeHtml(r.step_nama ?? '-')}</td>
							<td>${r.nilai}</td>
							<td><span class="d-inline-block cell-ellipsis" title="${escapeHtml(r.penilai_nama ?? '-')}">${escapeHtml(r.penilai_nama ?? '-')}</span></td>
							<td class="text-end">${escapeHtml(waktu)}</td>
						</tr>`;
				})
				.join('');

			$('#detailTableLuar').html(html);
		};


		$('#step_luar').on('change', function () {
			const selectedLocked = $('#step_luar').find('option:selected').attr('data-locked') === '1';
			$('#stepHintLuar').html(selectedLocked ? '<span class="text-success fw-semibold">Selesai</span>' : '');
		});

		$('#tblPegawaiLuar').DataTable({
			processing: true,
			serverSide: true,
			searchDelay: 350,
			dom: 'rtip',
			pageLength: 10,
			lengthMenu: [10, 20, 50, 100],
			order: [[2, 'desc']],
			ajax: {
				// Jangan pakai path param: tipe bisa mengandung "/" yang membuat route param rusak.
				url: `/data/progress-external/by-tipe?tipe=${encodeURIComponent(tipe)}`,
				type: 'GET',
			},
			columns: [
				{
					data: null,
					render: function (data, type, row) {
						const nama = escapeHtml(row.nama ?? '-');
						const nik = escapeHtml(row.nik ?? '-');
						return `
							<div class="d-flex flex-column">
								<span class="fw-semibold">${nama}</span>
								<span class="text-muted fs-7">NIK: ${nik}</span>
							</div>`;
					},
				},
				{
					data: null,
					orderable: false,
					render: function (data, type, row) {
						const pct = Number(row.pct ?? 0);
						return `
							<div class="d-flex flex-column gap-1">
								<div class="d-flex justify-content-between">
									<span class="text-muted fs-7">${row.lulus_count ?? 0} / ${totalSteps}</span>
									<span class="text-muted fs-7">${totalSteps > 0 ? pct + '%' : '-'}</span>
								</div>
								<div class="progress h-6px">
									<div class="progress-bar bg-primary" role="progressbar" style="width: ${pct}%" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
							</div>`;
					},
				},
				{
					data: null,
					className: 'text-center',
					orderable: false,
					render: function (data, type, row) {
						const c = Number(row.belum_count ?? 0);
						if (c <= 0) return '<span class="text-muted">-</span>';
						return `<a href="#" class="showBelumLuar" data-nama="${escapeHtml(row.nama)}" data-steps="${escapeHtml(row.belum_steps ?? '')}" data-nik="${escapeHtml(row.nik ?? '')}"><span class="badge badge-warning text-dark">${c} pitstop</span></a>`;
					},
				},
				{
					data: null,
					className: 'text-end',
					orderable: false,
					searchable: false,
					render: function (data, type, row) {
						const disabled = Number(row.selesai ?? 0) === 1 ? 'disabled' : '';
						return `
							<div class="d-flex justify-content-end gap-2">
								<a href="#" class="btn btn-sm btn-primary viewDetailLuar" data-id="${row.id}" data-nama="${escapeHtml(row.nama)}" data-nik="${escapeHtml(row.nik ?? '-')}">Detail</a>
							</div>`;
					},
				},
			],
		});

		const table = $('#tblPegawaiLuar').DataTable();
		let timer = null;
		$('#searchPegawaiLuar').on('keyup', function () {
			const val = String($(this).val() ?? '');
			clearTimeout(timer);
			timer = setTimeout(function () {
				table.search(val).draw();
			}, 250);
		});

		$(document).on('click', '.viewDetailLuar', function (e) {
			e.preventDefault();
			const id = $(this).data('id');
			const nama = $(this).data('nama');
			const nik = $(this).data('nik');

			$('#detailNamaLuar').text(`${nama} (NIK: ${nik})`);
			$('#detailTableLuar').html('<tr><td colspan="4" class="text-center text-muted py-6">Memuat data...</td></tr>');

			$.get('/pitstop/progress-detail-external', { pegawai_id: id })
				.done(function (res) {
					renderDetail(res?.data ?? []);
				})
				.fail(function () {
					$('#detailTableLuar').html('<tr><td colspan="4" class="text-center text-muted py-6">Gagal memuat data</td></tr>');
				});

			new bootstrap.Modal(document.getElementById('modalDetailLuar')).show();
		});

		$(document).on('click', '.showBelumLuar', function (e) {
			e.preventDefault();
			const nama = $(this).data('nama');
			const nik = $(this).data('nik');
			const stepsRaw = String($(this).data('steps') ?? '').trim();

			$('#belumNamaLuar').text(nama + ' (NIK ' + nik +')');

			if (!stepsRaw) {
				$('#belumListLuar').html('<li class="text-muted">Tidak ada data.</li>');
			} else {
				const steps = stepsRaw.split(',').map((s) => s.trim()).filter(Boolean);
				const html = steps.map((s) => `<li><span class="fw-semibold">${escapeHtml(s)}</span></li>`).join('');
				$('#belumListLuar').html(html || '<li class="text-muted">Tidak ada data.</li>');
			}

			new bootstrap.Modal(document.getElementById('modalBelumLuar')).show();
		});

	});
</script>
@endsection