@extends('partials.main')

@section('content')
	<div class="card card-flush mb-7">
		<div class="card-header pt-7">
			<div class="card-title">
				<h2 class="mb-0 fw-bold">Dashboard Progress</h2>
			</div>
			<div class="card-toolbar">
				<span class="text-muted">Progress per karyawan berdasarkan master pitstop aktif</span>
			</div>
		</div>

		<div class="card-body pt-0">
			<div class="row g-6">
				<div class="col-md-4">
					<div class="card bg-light-primary border-0 h-100">
						<div class="card-body">
							<div class="fw-semibold text-muted">Total Step Aktif</div>
							<div class="fs-2hx fw-bold mt-2">{{ $totalSteps }}</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card bg-light-info border-0 h-100">
						<div class="card-body">
							<div class="fw-semibold text-muted">Total Karyawan</div>
							<div class="fs-2hx fw-bold mt-2">{{ $totalUsers }}</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card bg-light-success border-0 h-100">
						<div class="card-body">
							<div class="fw-semibold text-muted">Total Step Lulus</div>
							<div class="fs-2hx fw-bold mt-2 text-success">
								{{ $totalSelesai }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="card card-flush">
		<div class="card-header pt-7">
			<div class="card-title">
				<h3 class="mb-0 fw-bold">Progress per Karyawan</h3>
			</div>
			<div class="card-toolbar">
				<form method="get" class="d-flex align-items-center gap-2">
					<div class="d-flex align-items-center position-relative my-1">
						<span class="svg-icon svg-icon-1 position-absolute ms-4">
							<i class="fa-solid fa-magnifying-glass"></i>
						</span>
						<input type="text" name="q" value="{{ $q ?? '' }}" class="form-control form-control-solid w-250px ps-12" placeholder="Cari nama..." />
					</div>
					<button type="submit" class="btn btn-sm btn-primary">Cari</button>
				</form>
			</div>
		</div>
		<div class="card-body pt-3">
			<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</th>
							<th style="width: 320px">Progress</th>
							<th class="text-end">Step Lulus</th>
						</tr>
					</thead>
					<tbody class="fw-semibold text-gray-800" id="tableUsers">
						@forelse ($users as $row)
							@php
								$done = (int) $row->lulus_count;
								$pct = $totalSteps > 0 ? round(($done / $totalSteps) * 100) : 0;
							@endphp
							<tr>
								<td>
									<a href="#" class="text-gray-800 text-hover-primary viewDetail" data-id="{{ $row->id }}" data-nama="{{ e($row->nama) }}">
										{{ $row->nama }}
									</a>
								</td>
								<td>
									<div class="d-flex align-items-center">
										<div class="progress h-6px w-100 me-3 bg-light">
											<div class="progress-bar bg-success" role="progressbar" style="width: {{ $pct }}%"></div>
										</div>
										<div class="text-muted fw-bold">{{ $pct }}%</div>
									</div>
								</td>
								<td class="text-end">{{ $done }} / {{ $totalSteps }}</td>
							</tr>
						@empty
							<tr>
								<td colspan="3" class="text-center text-muted py-6">Belum ada data</td>
							</tr>
						@endforelse
					</tbody>
				</table>
			</div>

			<div class="d-flex flex-wrap justify-content-between align-items-center mt-5">
				<div class="text-muted fs-7">
					Halaman {{ $users->currentPage() }} dari {{ $users->lastPage() }} ({{ $users->total() }} data)
				</div>
				<div class="d-flex gap-2">
					@if ($users->onFirstPage())
						<button type="button" class="btn btn-sm btn-light" disabled>Sebelumnya</button>
					@else
						<a class="btn btn-sm btn-light" href="{{ $users->previousPageUrl() }}">Sebelumnya</a>
					@endif

					@if ($users->hasMorePages())
						<a class="btn btn-sm btn-light" href="{{ $users->nextPageUrl() }}">Berikutnya</a>
					@else
						<button type="button" class="btn btn-sm btn-light" disabled>Berikutnya</button>
					@endif
				</div>
			</div>
		</div>
	</div>
@endsection

<div class="modal fade" id="modalDetail" 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">
				<div class="text-muted mb-4" id="detailNama"></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>Step (ID)</th>
								<th>Nama Step</th>
								<th>Status</th>
								<th class="text-end">Waktu</th>
							</tr>
						</thead>
						<tbody class="fw-semibold text-gray-800" id="detailTable">
							<tr>
								<td colspan="4" class="text-center text-muted py-6">Memuat data...</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

@section('custom_js')
<script>
	$(document).ready(function () {
		const escapeHtml = (str) => String(str ?? '').replace(/[&<>"']/g, (m) => ({
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#39;',
		}[m]));

		const renderDetail = (rows) => {
			if (!rows.length) {
				$('#detailTable').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 badge =
						status === 'lulus'
							? '<span class="badge badge-light-success">Lulus</span>'
							: status === 'tidak_lulus'
								? '<span class="badge badge-light-danger">Tidak Lulus</span>'
								: `<span class="badge badge-light">${status}</span>`;

					const waktu = r.created_at ? String(r.created_at) : '-';

					return `
						<tr>
							<td>${escapeHtml(r.masterpitstop_id ?? '-')}</td>
							<td>${escapeHtml(r.step_nama ?? '-')}</td>
							<td>${badge}</td>
							<td class="text-end">${escapeHtml(waktu)}</td>
						</tr>`;
				})
				.join('');

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

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

			$('#detailNama').text(nama);
			$('#detailTable').html('<tr><td colspan="4" class="text-center text-muted py-6">Memuat data...</td></tr>');

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

			new bootstrap.Modal(document.getElementById('modalDetail')).show();
		});
	});
</script>
@endsection