@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@push('css')
<style>
    .hrd-history-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #eef2ff;
        color: #1e3a8a;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .hrd-history-chip.incomplete {
        background: #fef2f2;
        color: #b91c1c;
    }

    .hrd-history-day-card {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .hrd-history-day-card+.hrd-history-day-card {
        margin-top: 16px;
    }

    .hrd-history-day-header {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding: 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .hrd-history-day-stats {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .hrd-history-progress {
        height: 8px;
        background: #fee2e2;
        border-radius: 999px;
        overflow: hidden;
        margin-top: 10px;
        min-width: 220px;
    }

    .hrd-history-progress-fill {
        height: 100%;
        background: #22c55e;
        border-radius: inherit;
    }

    .hrd-history-status {
        display: inline-flex;
        justify-content: center;
        min-width: 96px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .hrd-history-status.completed {
        background: rgba(34, 197, 94, 0.16);
        color: #15803d;
    }

    .hrd-history-status.not-completed {
        background: rgba(239, 68, 68, 0.16);
        color: #b91c1c;
    }

    .hrd-history-filter {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 10px 12px 8px;
        margin-bottom: 24px;
    }

    .hrd-history-filter .form-label {
        margin-bottom: 0.15rem;
    }

    .hrd-history-filter .form-select {
        min-height: 44px;
        height: 44px;
        border-radius: 10px;
        padding: .45rem .75rem;
    }

    /* Use a compact grid so every control shares the same baseline */
    .hrd-history-filter form.row {
        display: grid;
        grid-template-columns: minmax(180px, 1.15fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
        gap: 12px 10px;
        align-items: end;
        margin: 0;
    }

    .hrd-history-filter form.row>[class*="col-"] {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 0;
        width: 100%;
        min-width: 0;
    }

    .hrd-history-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }

    .hrd-history-actions .btn {
        min-height: 44px;
        height: 44px;
        border-radius: 10px;
        white-space: nowrap;
    }

    /* Place action group at the bottom of its column on larger screens */
    .hrd-history-filter .hrd-history-actions {
        align-self: flex-end;
    }

    @media (max-width: 991.98px) {
        .hrd-history-filter form.row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hrd-history-filter .hrd-history-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 575.98px) {
        .hrd-history-filter form.row {
            grid-template-columns: 1fr;
        }

        .hrd-history-actions .btn {
            width: 100%;
        }
    }

    /* Status badges */
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
        line-height: 1.2;
    }

    .status-pending {
        background: rgba(59, 130, 246, 0.16);
        color: #1e40af;
        border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .status-draft {
        background: rgba(100, 116, 139, 0.15);
        color: #334155;
        border: 1px solid rgba(100, 116, 139, 0.3);
    }

    .status-review,
    .status-verifikasi {
        background: rgba(20, 184, 166, 0.16);
        color: #0f766e;
        border: 1px solid rgba(20, 184, 166, 0.3);
    }

    .status-pengadaan {
        background: rgba(245, 158, 11, 0.18);
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .status-pengerjaan {
        background: rgba(14, 165, 233, 0.16);
        color: #0369a1;
        border: 1px solid rgba(14, 165, 233, 0.3);
    }

    .status-revisi {
        background: rgba(251, 146, 60, 0.18);
        color: #c2410c;
        border: 1px solid rgba(251, 146, 60, 0.3);
    }

    .status-completed {
        background: rgba(34, 197, 94, 0.16);
        color: #166534;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .status-rejected {
        background: rgba(239, 68, 68, 0.16);
        color: #b91c1c;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .status-cancel {
        background: rgba(156, 163, 175, 0.18);
        color: #7c2d12;
        border: 1px solid rgba(156, 163, 175, 0.32);
    }
</style>
@endpush

@if (in_array($dmenu, ['trreq', 'trhis']))
@push('css')
<link rel="stylesheet" href="{{ asset('/') }}assets/css/pu-consolidated.css">
<style>
    :root {
        --pu-ink: #0f172a;
        --pu-mute: #64748b;
        --pu-teal: #0ea5a5;
        --pu-amber: #f59e0b;
        --pu-slate: #e2e8f0;
        --pu-card: #ffffff;
        --pu-bg: #ffffff;
    }

    .pu-wrap {
        font-family: var(--bs-body-font-family);
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }

    .pu-table-card {
        border-radius: 18px;
        border: 1px solid var(--pu-slate);
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .pu-table-card .card-body {
        padding: 1rem 1.25rem 0.85rem;
    }

    .pu-table-card .table-responsive {
        margin-top: 0.25rem;
    }

    .pu-kpi-link {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
        position: relative;
        z-index: 10;
        pointer-events: auto;
        transition: transform 0.15s ease;
    }

    .pu-kpi-link:hover {
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .pu-kpi-link .card {
        height: 100%;
        cursor: pointer;
        pointer-events: auto;
        transition: box-shadow 0.15s ease;
    }

    .pu-kpi-link:hover .card {
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    }

    .pu-kpi-clickable {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .pu-table tbody tr {
        border-bottom: 1px solid #eef2f7;
    }

    .pu-table tbody tr:hover {
        background: #f8fafc;
    }

    .pu-actions-inline .btn {
        border-radius: 10px;
    }

    .pu-table .btn-group {
        gap: 0;
    }

    .pu-table .btn-group .btn {
        border-radius: 0;
    }

    .pu-table .btn-group .btn:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .pu-table .btn-group .btn:last-of-type {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .pu-empty {
        padding: 32px;
        text-align: center;
        color: var(--pu-mute);
    }

    /* Tracker Styles */
    .tracker-container {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 5px;
        margin-top: 5px;
        width: 100%;
        min-width: 350px;
    }

    .tracker-container::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 30px;
        right: 30px;
        height: 3px;
        background: #e2e8f0;
        z-index: 1;
    }

    .tracker-step {
        position: relative;
        z-index: 2;
        text-align: center;
        flex: 1;
    }

    .tracker-step .step-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #e2e8f0;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 5px;
        font-size: 11px;
        border: 2px solid white;
    }

    .tracker-step.completed .step-icon {
        background: #10b981;
        color: white;
    }

    .tracker-step.current .step-icon {
        background: #f59e0b;
        color: white;
    }

    .tracker-step.rejected .step-icon {
        background: #ef4444;
        color: white;
    }

    .tracker-step .step-label {
        font-size: 10px;
        color: #64748b;
        font-weight: 600;
        text-transform: uppercase;
    }

    .tracker-step.completed .step-label,
    .tracker-step.current .step-label,
    .tracker-step.rejected .step-label {
        color: #0f172a;
    }

    .tracker-step .step-date {
        font-size: 9px;
        color: #94a3b8;
        display: block;
        margin-top: 2px;
    }
</style>
@endpush
@php
// Get data
$items = $table_detail_d ?? collect();

$filterMonth = request()->input('bulan', date('m'));
$filterYear = request()->input('tahun', date('Y'));

// Jika kosong, query langsung dari database
if ($items->isEmpty()) {
$query = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
->select('tr_non_periodic.*', 'ms_area.nama_area as area_name')
->orderBy('tr_non_periodic.created_at', 'desc');

if ($filterMonth !== 'all') {
$query->whereMonth('tr_non_periodic.created_at', $filterMonth);
}
if ($filterYear !== 'all') {
$query->whereYear('tr_non_periodic.created_at', $filterYear);
}

$items = $query->get();
} else {
if ($filterMonth !== 'all') {
$items = $items->filter(function($item) use ($filterMonth) {
return \Carbon\Carbon::parse($item->created_at ?? $item->tanggal ?? now())->format('m') == str_pad($filterMonth, 2, '0', STR_PAD_LEFT);
});
}
if ($filterYear !== 'all') {
$items = $items->filter(function($item) use ($filterYear) {
return \Carbon\Carbon::parse($item->created_at ?? $item->tanggal ?? now())->format('Y') == $filterYear;
});
}
}
$areaMap = \Illuminate\Support\Facades\DB::table('ms_area')
->pluck('nama_area', 'id');

$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;
});
$statusField = 'request_status';
if ($displayItems->first() && isset($displayItems->first()->status)) {
$statusField = 'status';
}

$hrdUserIds = \Illuminate\Support\Facades\DB::table('users')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
})
->pluck('id')
->map(fn ($id) => (int) $id)
->all();

$hrdUsernames = \Illuminate\Support\Facades\DB::table('users')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
})
->pluck('username')
->map(fn ($username) => strtolower((string) $username))
->all();

$isHrdSubmission = function ($item) use ($hrdUserIds, $hrdUsernames) {
$uid = isset($item->user_id) ? (string) $item->user_id : '';
$uidInt = is_numeric($uid) ? (int) $uid : null;
$createdBy = strtolower((string) ($item->user_create ?? ''));

if ($uidInt !== null && in_array($uidInt, $hrdUserIds, true)) {
return true;
}

if ($uid !== '' && !is_numeric($uid) && in_array(strtolower($uid), $hrdUsernames, true)) {
return true;
}

return $createdBy !== '' && in_array($createdBy, $hrdUsernames, true);
};

$currentUserId = $user_login->id ?? null;
$sessionUsername = strtolower(trim((string) (session('username') ?? '')));
$modelUsername = strtolower(trim((string) ($user_login->username ?? '')));
$currentUsername = $sessionUsername !== '' && !is_numeric($sessionUsername)
? $sessionUsername
: $modelUsername;

$isCurrentViewerHrd = ($currentUserId && in_array((int) $currentUserId, $hrdUserIds, true))
|| ($currentUsername !== '' && in_array($currentUsername, $hrdUsernames, true));

$isOwnedByCurrentUser = function ($item) use ($currentUserId, $currentUsername) {
$uid = isset($item->user_id) ? (string) $item->user_id : '';
$createdBy = strtolower((string) ($item->user_create ?? ''));

$byUserId = $currentUserId && $uid !== '' && is_numeric($uid) && (int) $uid === (int) $currentUserId;
$byLegacyUserId = $currentUsername !== '' && $uid !== '' && !is_numeric($uid) && strtolower($uid) === $currentUsername;
$byUserCreate = $currentUsername !== '' && $createdBy === $currentUsername;

return $byUserId || $byLegacyUserId || $byUserCreate;
};



// Filter pending items - status pending atau review yang belum ada head_approval_date
$pendingItems = $displayItems->filter(function ($item) use ($statusField, $isHrdSubmission) {
$statusValue = strtolower($item->{$statusField} ?? '');
return ($statusValue === 'pending' || $statusValue === 'review')
&& empty($item->head_approval_date)
&& !$isHrdSubmission($item);
});

// Approved count
$approvedCount = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
return !empty($item->head_approval_date) && in_array($statusValue, ['review', 'approved', 'pengadaan', 'pengerjaan', 'completed']);
})->count();

// Rejected count
$rejectedCount = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
return in_array($statusValue, ['rejected', 'reject']);
})->count();

// Completed count
$completedCount = $displayItems->where($statusField, 'completed')->count();

// History items - only show completed, rejected, cancel (finished work)
$historyItems = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
// Normalize status
if (in_array($statusValue, ['reject'])) {
$statusValue = 'rejected';
} elseif (in_array($statusValue, ['canceled', 'cancelled'])) {
$statusValue = 'cancel';
}
return in_array($statusValue, ['completed', 'rejected', 'cancel']);
});

// Verifikasi HRD di menu Pengajuan PU (mirip user)
$verifikasiItems = collect();
if ($isCurrentViewerHrd) {
$verifikasiItems = $displayItems->filter(function ($item) use ($statusField, $isOwnedByCurrentUser) {
$statusValue = strtolower($item->{$statusField} ?? '');
return $statusValue === 'verifikasi' && $isOwnedByCurrentUser($item);
})->values();
}

// Tracking items - review, pengadaan, pengerjaan, revisi, verifikasi
$trackingItems = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
return !empty($item->head_approval_date) && in_array($statusValue, ['review', 'pengadaan', 'pengerjaan', 'revisi', 'verifikasi']);
});
@endphp
@php
// Build a mapping from role code to an example employee full name (if any)
$roleUserMap = [];
$roleUsers = \Illuminate\Support\Facades\DB::table('users')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('ptgoff', REPLACE(LOWER(idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('ptgspu', REPLACE(LOWER(idroles), ' ', ''))");
})->where('isactive', '1')->select('idroles', 'firstname', 'lastname')->get();
foreach ($roleUsers as $ru) {
$roles = array_map('trim', explode(',', ($ru->idroles ?? '')));
foreach ($roles as $r) {
$code = strtolower($r);
if (!isset($roleUserMap[$code]) || empty($roleUserMap[$code])) {
$roleUserMap[$code] = trim(($ru->firstname ?? '') . ' ' . ($ru->lastname ?? ''));
}
}
}
@endphp
<div class="container-fluid py-4 pu-wrap">
    <div class="pu-hero">
        <div class="row align-items-center">
            <div class="col-lg-12 d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <h2 class="mb-1">{{ $dmenu == 'trreq' ? 'Daftar Pengajuan Pekerjaan PU' : 'Riwayat Pengajuan Pekerjaan PU' }}</h2>
                <form method="GET" action="{{ url()->current() }}" class="d-flex gap-2 m-0" id="filterForm">
                    <select name="bulan" class="form-select form-select-sm" style="width: 130px; border-radius: 10px;" onchange="document.getElementById('filterForm').submit()">
                        <option value="all" {{ $filterMonth == 'all' ? 'selected' : '' }}>Semua Bulan</option>
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}" {{ $filterMonth == str_pad($i, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                            {{ date('F', mktime(0, 0, 0, $i, 10)) }}
                            </option>
                            @endfor
                    </select>
                    <select name="tahun" class="form-select form-select-sm" style="width: 100px; border-radius: 10px;" onchange="document.getElementById('filterForm').submit()">
                        <option value="all" {{ $filterYear == 'all' ? 'selected' : '' }}>Semua Tahun</option>
                        @for ($i = date('Y') - 2; $i <= date('Y') + 1; $i++)
                            <option value="{{ $i }}" {{ $filterYear == $i ? 'selected' : '' }}>{{ $i }}</option>
                            @endfor
                    </select>
                </form>
            </div>
        </div>
    </div>

    {{-- Summary Cards --}}
    @if ($dmenu == 'trreq')
    <div class="row mb-4">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <a href="#list_head_pending" class="pu-kpi-link" aria-label="Buka daftar pending approval">
                <div class="card pu-kpi-clickable" onclick="window.location.href='#list_head_pending'" style="cursor: pointer;" onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='0 10px 24px rgba(15, 23, 42, 0.12)';" onmouseleave="this.style.transform='';this.style.boxShadow='';">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Pending Approval</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $pendingItems->count() }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                    <i class="fas fa-clock text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <a href="#list_head_tracking" class="pu-kpi-link" aria-label="Buka daftar approved">
                <div class="card pu-kpi-clickable" onclick="window.location.href='#list_head_tracking'" style="cursor: pointer;" onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='0 10px 24px rgba(15, 23, 42, 0.12)';" onmouseleave="this.style.transform='';this.style.boxShadow='';">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Approved</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $approvedCount }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="fas fa-check text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <a href="{{ request()->fullUrlWithQuery(['status' => 'rejected']) }}#list_riwayat_pengajuan" class="pu-kpi-link" aria-label="Buka riwayat rejected">
                <div class="card pu-kpi-clickable" onclick="window.location.href='{{ request()->fullUrlWithQuery(['status' => 'rejected']) }}#list_riwayat_pengajuan'" style="cursor: pointer;" onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='0 10px 24px rgba(15, 23, 42, 0.12)';" onmouseleave="this.style.transform='';this.style.boxShadow='';">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Rejected</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $rejectedCount }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="fas fa-times text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-3 col-sm-6">
            <a href="{{ request()->fullUrlWithQuery(['status' => 'completed']) }}#list_riwayat_pengajuan" class="pu-kpi-link" aria-label="Buka riwayat completed">
                <div class="card pu-kpi-clickable" onclick="window.location.href='{{ request()->fullUrlWithQuery(['status' => 'completed']) }}#list_riwayat_pengajuan'" style="cursor: pointer;" onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='0 10px 24px rgba(15, 23, 42, 0.12)';" onmouseleave="this.style.transform='';this.style.boxShadow='';">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Completed</p>
                                    <h5 class="font-weight-bolder mb-0">{{ $completedCount }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-info shadow-info text-center rounded-circle">
                                    <i class="fas fa-check-circle text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- Section Head Approval - Pending Items --}}
    @if($pendingItems->count() > 0)
    <div class="card pu-table-card mb-4">
        <div class="card-header border-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Daftar Pengajuan Baru</h5>
                <span class="text-muted small">Menunggu keputusan Head</span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_head_pending">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th class="text-uppercase text-xs text-center">Aksi</th>
                        <th class="text-uppercase text-xs">Tanggal Pengajuan</th>
                        <th class="text-uppercase text-xs">Area</th>
                        <th class="text-uppercase text-xs">Deskripsi</th>
                        <th class="text-uppercase text-xs">Status</th>
                        <th class="text-uppercase text-xs">Catatan Head</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 ?? $detail->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')
                    : '-';
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    title="View Data"
                                    onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </button>
                                <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">
                                    <li class="px-2 mb-2">
                                        <button class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2 mb-1"
                                            style="background-color:#ff6b47;border-color:#ff6b47;"
                                            type="button"
                                            data-bs-toggle="modal" data-bs-target="#headActionModal"
                                            data-action="Approve" data-id="{{ $primary }}">
                                            <i class="fas fa-check me-2 text-white"></i>Setujui
                                        </button>
                                    </li>
                                    <li class="px-2">
                                        <button class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2"
                                            style="background-color:#ff4d6d;border-color:#ff4d6d;"
                                            type="button"
                                            data-bs-toggle="modal" data-bs-target="#headActionModal"
                                            data-action="Reject" data-id="{{ $primary }}">
                                            <i class="fas fa-times me-2 text-white"></i>Tolak
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td class="text-sm">{{ $displayDate }}</td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm">
                            <span class="{{ $badgeClass }}">{{ $status ?: 'pending' }}</span>
                        </td>
                        <td class="text-sm">{{ $detail->head_note ?? '-' }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="pu-empty">Belum ada pengajuan baru.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif


    {{-- Section Head Active Items (Draft / In-progress) --}}
    @php
    $activeHeadItems = $displayItems->filter(function ($item) use ($statusField) {
    $s = strtolower($item->{$statusField} ?? '');
    if (in_array($s, ['reject'])) $s = 'rejected';
    if (in_array($s, ['canceled','cancelled'])) $s = 'cancel';
    return !in_array($s, ['completed','rejected','cancel']);
    });
    @endphp
    @if($activeHeadItems->count() > 0)
    <div class="card pu-table-card mb-4">
        <div class="card-header border-0 pb-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Pengajuan Aktif</h5>
                <div class="d-flex align-items-center gap-2">
                    <select id="head-active-filter" class="form-select form-select-sm" style="width: 180px;">
                        <option value="">Semua</option>
                        <option value="draft">Draft</option>
                        <option value="pending">Pending</option>
                        <option value="review">Review</option>
                        <option value="pengadaan">Pengadaan</option>
                        <option value="pengerjaan">Pengerjaan</option>
                        <option value="revisi">Revisi</option>
                        <option value="verifikasi">Verifikasi</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_pengajuan_aktif">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th>Tanggal</th>
                        <th>Area</th>
                        <th>Deskripsi</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($activeHeadItems as $detail)
                    @php
                    $rawStatus = $detail->{$statusField} ?? '';
                    $status = strtolower($rawStatus);
                    if (in_array($status, ['approved'], true)) $status = 'review';
                    if ($status === 'reject') $status = 'rejected';
                    if (in_array($status, ['canceled','cancelled'], true)) $status = 'cancel';
                    $dateValue = $detail->created_at ?? null;
                    $displayDate = $dateValue ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y') : '-';
                    @endphp
                    <tr data-status="{{ $status }}">
                        <td class="text-sm">{{ $displayDate }}</td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? '-' }}</td>
                        <td class="text-sm">{{ Str::limit($detail->job_description ?? $detail->description ?? '-', 80) }}</td>
                        <td class="text-sm"><span class="status-badge status-{{ $status }}">{{ $status }}</span></td>
                        <td class="text-sm"><button class="btn btn-sm btn-primary" onclick="window.location='{{ url($url_menu . '/show/' . encrypt($detail->id ?? '')) }}'">View</button></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Section Head Tracking Items --}}
    @if($trackingItems->count() > 0)
    <div class="card pu-table-card mb-4">
        <div class="card-header border-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Tracking Status Pekerjaan</h5>
                <span class="text-muted small">Pekerjaan yang sedang berjalan</span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_head_tracking">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th class="text-uppercase text-xs text-center">Aksi</th>
                        <th class="text-uppercase text-xs">Area</th>
                        <th class="text-uppercase text-xs">Deskripsi</th>
                        <th class="text-uppercase text-xs">Progress</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($trackingItems 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 ?? $detail->status ?? '';
                    $status = strtolower($rawStatus);

                    $datePending = $detail->created_at ? \Illuminate\Support\Carbon::parse($detail->created_at)->format('d/m/Y') : '-';
                    $dateReview = $detail->head_approval_date ? \Illuminate\Support\Carbon::parse($detail->head_approval_date)->format('d/m/Y') : '-';
                    $datePengadaan = (!empty($detail->pengadaan_started_at) && $detail->pengadaan_started_at !== '0000-00-00 00:00:00') ? \Illuminate\Support\Carbon::parse($detail->pengadaan_started_at)->format('d/m/Y') : '-';
                    $datePengerjaan = (!empty($detail->pengerjaan_started_at) && $detail->pengerjaan_started_at !== '0000-00-00 00:00:00') ? \Illuminate\Support\Carbon::parse($detail->pengerjaan_started_at)->format('d/m/Y') : '-';

                    $isPengadaanDone = in_array($status, ['pengadaan', 'pengerjaan', 'revisi', 'verifikasi', 'completed']) || (!empty($detail->pengadaan_started_at) && $detail->pengadaan_started_at !== '0000-00-00 00:00:00');
                    $isPengerjaanDone = in_array($status, ['pengerjaan', 'revisi', 'verifikasi', 'completed']) || (!empty($detail->pengerjaan_started_at) && $detail->pengerjaan_started_at !== '0000-00-00 00:00:00');
                    $isCompleteDone = in_array($status, ['verifikasi', 'completed']);
                    $isRejected = in_array($status, ['reject', 'rejected', 'cancel', 'canceled', 'cancelled']);

                    // Determine current status step
                    $currentStep = 'review';
                    if ($isRejected) $currentStep = 'rejected';
                    elseif (in_array($status, ['pengadaan'])) $currentStep = 'pengadaan';
                    elseif (in_array($status, ['pengerjaan', 'revisi'])) $currentStep = 'pengerjaan';
                    elseif (in_array($status, ['verifikasi', 'completed'])) $currentStep = 'complete';
                    @endphp
                    <tr>
                        <td class="text-center">
                            <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                title="View Data"
                                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                            </button>
                        </td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td>
                            @if($isRejected)
                            <span class="badge bg-danger">Ditolak / Dibatalkan</span>
                            @else
                            <div class="tracker-container">
                                <!-- Step 1: Pending -->
                                <div class="tracker-step completed">
                                    <div class="step-icon"><i class="fas fa-check"></i></div>
                                    <div class="step-label">Pending</div>
                                    <span class="step-date">{{ $datePending }}</span>
                                </div>
                                <!-- Step 2: Review -->
                                <div class="tracker-step {{ $currentStep == 'review' ? 'current' : ($isPengadaanDone ? 'completed' : '') }}">
                                    <div class="step-icon"><i class="fas {{ $isPengadaanDone ? 'fa-check' : 'fa-clipboard-check' }}"></i></div>
                                    <div class="step-label">Review</div>
                                    <span class="step-date">{{ $dateReview }}</span>
                                </div>
                                <!-- Step 3: Pengadaan -->
                                <div class="tracker-step {{ $currentStep == 'pengadaan' ? 'current' : ($isPengerjaanDone ? 'completed' : '') }}">
                                    <div class="step-icon"><i class="fas {{ $isPengerjaanDone ? 'fa-check' : 'fa-box' }}"></i></div>
                                    <div class="step-label">Pengadaan</div>
                                    <span class="step-date">{{ $datePengadaan !== '-' ? $datePengadaan : ($currentStep == 'pengadaan' ? 'Proses...' : '-') }}</span>
                                </div>
                                <!-- Step 4: Pengerjaan -->
                                <div class="tracker-step {{ $currentStep == 'pengerjaan' ? 'current' : ($isCompleteDone ? 'completed' : '') }}">
                                    <div class="step-icon"><i class="fas {{ $isCompleteDone ? 'fa-check' : 'fa-tools' }}"></i></div>
                                    <div class="step-label">Pengerjaan</div>
                                    <span class="step-date">{{ $datePengerjaan !== '-' ? $datePengerjaan : ($currentStep == 'pengerjaan' ? 'Proses...' : '-') }}</span>
                                </div>
                                <!-- Step 5: Complete -->
                                <div class="tracker-step {{ $currentStep == 'complete' ? 'current' : '' }}">
                                    <div class="step-icon"><i class="fas {{ $currentStep == 'complete' ? 'fa-check' : 'fa-flag-checkered' }}"></i></div>
                                    <div class="step-label">Complete</div>
                                    <span class="step-date">-</span>
                                </div>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    @if($verifikasiItems->count() > 0)
    <div class="card pu-table-card mb-4" style="border: 2px solid #f59e0b; box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);">
        <div class="card-header border-0" style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <div>
                    <h5 class="mb-1 text-dark">
                        <i class="fas fa-clipboard-check text-warning me-2"></i>
                        Verifikasi Pekerjaan
                    </h5>
                    <p class="text-sm mb-0 text-muted">Pekerjaan yang diselesaikan petugas dan memerlukan verifikasi Anda</p>
                </div>
                <span class="badge bg-gradient-warning text-white px-3 py-2">{{ $verifikasiItems->count() }} Task</span>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table display" id="list_head_verifikasi">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th class="text-uppercase text-xs text-center">Aksi</th>
                        <th class="text-uppercase text-xs">Tanggal Pengajuan</th>
                        <th class="text-uppercase text-xs">Area</th>
                        <th class="text-uppercase text-xs">Deskripsi</th>
                        <th class="text-uppercase text-xs text-center">Dokumentasi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($verifikasiItems as $detail)
                    @php
                    $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                    $displayDate = $dateValue
                    ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                    : '-';
                    $docCount = \Illuminate\Support\Facades\DB::table('tr_documentation')
                    ->where('non_periodic_id', $detail->id)
                    ->where('is_active', '1')
                    ->whereNotNull('file')
                    ->whereNotIn('file', ['', '0', 'null'])
                    ->count();
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <button class="btn btn-success btn-sm mb-0 px-2" type="button"
                                    data-bs-toggle="modal" data-bs-target="#trreqVerifyModal"
                                    data-action="approve"
                                    data-non-periodic-id="{{ $detail->id }}"
                                    title="Setujui">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-warning btn-sm mb-0 px-2" type="button"
                                    data-bs-toggle="modal" data-bs-target="#trreqVerifyModal"
                                    data-action="reject"
                                    data-non-periodic-id="{{ $detail->id }}"
                                    title="Minta Revisi">
                                    <i class="fas fa-redo"></i>
                                </button>
                            </div>
                        </td>
                        <td class="text-sm">{{ $displayDate }}</td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm text-center">
                            @if ($docCount > 0)
                            <span class="badge bg-info">{{ $docCount }} Lampiran</span>
                            @else
                            <span class="badge bg-secondary">Belum ada</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
    @endif

    <!-- RIWAYAT PENGAJUAN (SELESAI) -->
    <div class="card pu-table-card">
        <div class="card-header pb-0">
            <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 rejected: {{ $rejectedCount }}</span>
                    <select id="head-history-filter" class="form-select form-select-sm" style="width: 180px;">
                        <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_riwayat_pengajuan">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th>Tanggal Pengajuan</th>
                        <th>Area</th>
                        <th>Deskripsi</th>
                        <th>Status</th>
                        <th>Catatan Head</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($historyItems as $detail)
                    @php
                    $rawStatus = $detail->request_status ?? $detail->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')
                    : '-';
                    @endphp
                    <tr data-status="{{ $status }}">
                        <td class="text-sm">{{ $displayDate }}</td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm">
                            <span class="{{ $badgeClass }}">{{ $status ?: 'pending' }}</span>
                        </td>
                        <td class="text-sm">{{ $detail->head_note ?? '-' }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>

<div class="modal fade" id="trreqVerifyModal" tabindex="-1" aria-labelledby="trreqVerifyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('work-schedule.verify') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="trreqVerifyModalLabel">Verifikasi Pekerjaan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="non_periodic_id" id="trreq-verify-non-periodic-id" value="">
                    <input type="hidden" name="decision" id="trreq-verify-decision" value="">
                    <div class="mb-3">
                        <label class="form-label" id="trreq-verify-notes-label">Catatan</label>
                        <textarea class="form-control" name="notes" id="trreq-verify-notes" rows="3" placeholder="Tulis catatan jika diperlukan"></textarea>
                    </div>
                    <div class="mb-3" id="trreq-verify-attachment-wrapper" style="display: none;">
                        <label class="form-label" for="trreq-verify-attachments">Lampiran Revisi</label>
                        <input class="form-control" type="file" name="revision_attachments[]" id="trreq-verify-attachments" accept=".jpg,.jpeg,.png,.webp,.jfif,.heic,.heif,.pdf" multiple>
                        <small class="text-muted">Format: JPG, PNG, WEBP, HEIC, PDF (maks 5MB/file)</small>
                    </div>
                    <div class="alert alert-info mb-0">
                        <small>
                            <strong>Setuju:</strong> Pekerjaan akan ditandai selesai.<br>
                            <strong>Revisi:</strong> Pekerjaan akan dikembalikan ke petugas untuk perbaikan.
                        </small>
                    </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" id="trreqVerifySubmit">Setujui</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="headActionModal" tabindex="-1" aria-labelledby="headActionLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url('/pengajuan-head/update') }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="headActionLabel">Approval Head</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="head-request-id" value="">
                    <input type="hidden" name="request_status" id="head-request-status" value="review">
                    <input type="hidden" name="return_url" value="{{ request()->fullUrl() }}">
                    <div class="mb-3">
                        <label class="form-label" id="head-note-label">Catatan</label>
                        <textarea class="form-control" name="head_note" id="head-note-input" rows="3" placeholder="Tulis catatan"></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" id="headActionSubmit">Approve</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('js')
<script>
    const headActionModal = document.getElementById('headActionModal');
    if (headActionModal) {
        headActionModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const action = button.getAttribute('data-action') || 'Approve';
            const title = action === 'Reject' ? 'Catatan Penolakan' : 'Catatan Persetujuan';
            const submit = document.getElementById('headActionSubmit');
            const label = document.getElementById('headActionLabel');
            const inputId = document.getElementById('head-request-id');
            const inputStatus = document.getElementById('head-request-status');
            const noteInput = document.getElementById('head-note-input');
            const noteLabel = document.getElementById('head-note-label');

            if (label) {
                label.textContent = title;
            }
            if (submit) {
                submit.textContent = action === 'Reject' ? 'Tolak' : 'Setujui';
            }
            if (inputId) {
                inputId.value = button.getAttribute('data-id') || '';
            }
            if (inputStatus) {
                inputStatus.value = action === 'Reject' ? 'rejected' : 'review';
            }
            if (noteInput) {
                noteInput.value = '';
                noteInput.required = action === 'Reject';
            }
            if (noteLabel) {
                noteLabel.textContent = action === 'Reject' ? 'Catatan (wajib diisi)' : 'Catatan';
            }
        });
    }

    const headHistoryFilter = document.getElementById('head-history-filter');
    if (headHistoryFilter) {
        headHistoryFilter.addEventListener('change', function() {
            const value = this.value.toLowerCase();
            document.querySelectorAll('table tbody tr[data-status]').forEach(function(row) {
                const rowStatus = (row.getAttribute('data-status') || '').toLowerCase();
                if (!row.closest('.pu-table-card')) {
                    return;
                }
                row.style.display = value === '' || rowStatus === value ? '' : 'none';
            });
        });
    }

    const trreqVerifyModal = document.getElementById('trreqVerifyModal');
    if (trreqVerifyModal) {
        trreqVerifyModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const action = button.getAttribute('data-action') || 'approve';
            const nonPeriodicId = button.getAttribute('data-non-periodic-id') || '';

            const modalTitle = document.getElementById('trreqVerifyModalLabel');
            const submitBtn = document.getElementById('trreqVerifySubmit');
            const decisionInput = document.getElementById('trreq-verify-decision');
            const nonPeriodicIdInput = document.getElementById('trreq-verify-non-periodic-id');
            const notesInput = document.getElementById('trreq-verify-notes');
            const notesLabel = document.getElementById('trreq-verify-notes-label');
            const revisionAttachmentWrapper = document.getElementById('trreq-verify-attachment-wrapper');
            const revisionAttachmentInput = document.getElementById('trreq-verify-attachments');

            if (action === 'approve') {
                modalTitle.textContent = 'Setujui Pekerjaan';
                submitBtn.textContent = 'Setujui';
                submitBtn.className = 'btn btn-success';
                decisionInput.value = 'approve';
                if (notesLabel) notesLabel.textContent = 'Catatan';
                if (notesInput) notesInput.required = false;
                if (revisionAttachmentWrapper) revisionAttachmentWrapper.style.display = 'none';
            } else {
                modalTitle.textContent = 'Minta Revisi';
                submitBtn.textContent = 'Minta Revisi';
                submitBtn.className = 'btn btn-warning';
                decisionInput.value = 'reject';
                if (notesLabel) notesLabel.textContent = 'Catatan (wajib diisi)';
                if (notesInput) notesInput.required = true;
                if (revisionAttachmentWrapper) revisionAttachmentWrapper.style.display = '';
            }

            nonPeriodicIdInput.value = nonPeriodicId;
            if (notesInput) notesInput.value = '';
            if (revisionAttachmentInput) revisionAttachmentInput.value = '';
        });
    }

    $(document).ready(function() {
        if ($('#list_head_pending').length) {
            $('#list_head_pending').DataTable();
        }
        if ($('#list_head_tracking').length) {
            $('#list_head_tracking').DataTable();
        }
        if ($('#list_head_verifikasi').length) {
            $('#list_head_verifikasi').DataTable();
        }
        if ($('#list_riwayat_pengajuan').length) {
            $('#list_riwayat_pengajuan').DataTable();
        }

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

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

                if ($.fn.DataTable && $.fn.DataTable.isDataTable('#list_riwayat_pengajuan')) {
                    $('#list_riwayat_pengajuan').DataTable().draw();
                }
            }
        }
    });
</script>
@endpush
@if ($dmenu == 'trhrd')
@push('css')
<link
    rel="stylesheet">
<style>
    :root {
        --pu-ink: #0f172a;
        --pu-mute: #64748b;
        --pu-teal: #0ea5a5;
        --pu-amber: #f59e0b;
        --pu-slate: #e2e8f0;
        --pu-card: #ffffff;
        --pu-bg: #ffffff;
    }

    .pu-wrap {
        font-family: var(--bs-body-font-family);
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }

    .pu-table-card {
        border-radius: 18px;
        border: 1px solid var(--pu-slate);
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .pu-table tbody tr {
        border-bottom: 1px solid #eef2f7;
    }

    .pu-table tbody tr:hover {
        background: #f8fafc;
    }

    .pu-table thead th {
        text-align: center !important;
    }

    .pu-table tbody td {
        text-align: center !important;
    }

    .pu-actions-inline .btn {
        border-radius: 10px;
    }

    .kpi-card {
        background: var(--pu-card);
        border-radius: 18px;
        padding: 18px 20px;
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
        border: 1px solid rgba(226, 232, 240, 0.8);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 100%;
    }

    .kpi-row {
        margin-top: 12px;
        position: relative;
        z-index: 3;
    }

    .kpi-label {
        color: #94a3b8;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--pu-ink);
        margin: 0;
    }

    .kpi-desc {
        color: var(--pu-mute);
        font-size: 0.85rem;
        margin: 4px 0 0;
    }

    .kpi-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 1.1rem;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
    }

    .kpi-icon.teal {
        background: linear-gradient(135deg, #22c55e, #16a34a);
    }

    .kpi-icon.amber {
        background: linear-gradient(135deg, #f59e0b, #f97316);
    }

    .kpi-icon.blue {
        background: linear-gradient(135deg, #38bdf8, #2563eb);
    }

    .kpi-icon.red {
        background: linear-gradient(135deg, #fb7185, #ef4444);
    }

    .pu-empty {
        padding: 32px;
        text-align: center;
        color: var(--pu-mute);
    }

    /* Center alignment for HRD card headers */
    #trhrd-container .card-header {
        text-align: center;
    }

    #trhrd-container .card-header h5 {
        margin: 0 auto;
    }

    #trhrd-container .card-header .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Align table headers with body content */
    #trhrd-container .table thead th {
        text-align: center !important;
        vertical-align: middle;
    }

    #trhrd-container .table tbody td {
        text-align: center !important;
        vertical-align: middle;
    }

    #trhrd-container .table tbody td.text-sm {
        text-align: center !important;
    }

    #trhrd-container .table thead th:first-child {
        width: 12%;
    }

    #trhrd-container .table tbody td:first-child {
        width: 12%;
        text-align: center !important;
    }

    /* Override Bootstrap/DataTables defaults */
    #trhrd-container table.display tbody td {
        text-align: center !important;
    }

    #trhrd-container table.display thead th {
        text-align: center !important;
    }
</style>
@endpush
@php
// 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, fallback to users.firstname/lastname
$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;
});

// 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
<div class="container-fluid py-4 pu-wrap" id="trhrd-container">
    <div class="pu-hero">
        <div class="row align-items-center justify-content-center">
            <div class="col-auto">
                <h2 class="mb-1">Daftar Pengajuan HRD</h2>
            </div>
        </div>
    </div>


    <div class="card mb-4">
        <div class="card-header pb-0">
            <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" style="background-color: #00b7bd4f;">
                    <tr>
                        <th style="text-align: center;">Aksi</th>
                        <th style="text-align: center;">No</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 ?? '-';
                    @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($url_menu . '/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-note="{{ $detail->hrd_note ?? '' }}">
                                    <i class="fas fa-check"></i><span class="font-weight-bold"> Proses</span>
                                </button>
                            </div>
                        </td>
                        <td class="text-sm" style="text-align: center;">{{ $loop->iteration }}</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: center;">{{ $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: center;">{{ $displayNote }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header pb-0">
            <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" style="background-color: #00b7bd4f;">
                    <tr>
                        <th style="text-align: center;">Aksi</th>
                        <th style="text-align: center;">No</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;">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 ?? '-';
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    title="View Data"
                                    onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </button>
                                <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">
                                    <li class="px-2 mb-2">
                                        <button class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2"
                                            style="background-color:#ff6b47;border-color:#ff6b47;"
                                            type="button"
                                            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 ?? '' }}">
                                            <i class="fas fa-pen me-2 text-white"></i>Update
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td class="text-sm" style="text-align: center;">{{ $loop->iteration }}</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: center;">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm" style="text-align: center;">
                            @if (($detail->request_status ?? '') !== 'pengadaan' && $detail->work_type === 'vendor')
                            {{ $detail->vendor_name ?? '-' }}
                            @elseif (($detail->request_status ?? '') !== 'pengadaan' && $detail->work_type === 'internal')
                            Petugas PU
                            @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: center;">{{ $displayNote }}</td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header pb-0">
            <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" style="width: 180px;">
                        <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" style="background-color: #00b7bd4f;">
                    <tr>
                        <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" 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: center;">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm" style="text-align: center;">
                            @if (($detail->request_status ?? '') !== 'pengadaan' && $detail->work_type === 'vendor')
                            {{ $detail->vendor_name ?? '-' }}
                            @elseif (($detail->request_status ?? '') !== 'pengadaan' && $detail->work_type === 'internal')
                            Petugas PU
                            @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="pengerjaan-approval-fields-group" style="display: none;">
                        <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="pengerjaan-fields-group" style="display: none;">
                        <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 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');

            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;

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

    function toggleApprovalWorkerVendorFields() {
        const statusSelect = document.getElementById('hrd-approval-status');
        const pengerjaanGroup = document.getElementById('pengerjaan-approval-fields-group');

        if (!statusSelect || !pengerjaanGroup) return;

        const selectedStatus = (statusSelect.value || '').toLowerCase();
        pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';

        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 pengerjaanGroup = document.getElementById('pengerjaan-fields-group');

        if (!statusSelect || !pengerjaanGroup) return;

        const selectedStatus = statusSelect.value;
        pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';
    }

    // 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 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');

            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 hanya bisa ke: pengerjaan atau cancel
                    options.forEach(opt => {
                        if (opt.value === 'pengadaan') {
                            opt.style.display = 'none'; // sembunyikan pengadaan
                        }
                    });
                } else if (normalizedStatus === 'pengerjaan') {
                    // Dari pengerjaan hanya bisa ke: cancel (atau tetap pengerjaan untuk update)
                    options.forEach(opt => {
                        if (opt.value === 'pengadaan') {
                            opt.style.display = 'none'; // sembunyikan pengadaan
                        }
                        if (opt.value === 'pengerjaan') {
                            opt.style.display = 'none'; // sembunyikan pengerjaan juga
                        }
                    });
                }
            }

            if (inputWorkType) inputWorkType.value = workType || 'internal';
            if (inputVendorName) inputVendorName.value = vendorName;
            if (inputNote) inputNote.value = note;

            // 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) {
        hrdHistoryFilter.addEventListener('change', function() {
            const value = this.value.toLowerCase();
            document.querySelectorAll('table tbody tr[data-status]').forEach(function(row) {
                const rowStatus = (row.getAttribute('data-status') || '').toLowerCase();
                if (!row.closest('.pu-table-card')) {
                    return;
                }
                row.style.display = value === '' || rowStatus === value ? '' : 'none';
            });
        });
    }

    $(document).ready(function() {
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#list_hrd_daily_history')) {
            $('#list_hrd_daily_history').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                language: {
                    emptyTable: 'Belum ada riwayat pekerjaan.'
                },
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }

        if ($('#list_hrd_approval').length) {
            $('#list_hrd_approval').DataTable();
        }
        if ($('#list_hrd_pending').length) {
            $('#list_hrd_pending').DataTable();
        }
        if ($('#list_hrd_history').length) {
            $('#list_hrd_history').DataTable();
        }
    });
</script>
@endpush
@elseif ($dmenu == 'trdper')

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4>Daftar Periodic HRD</h4>
                            <p>Manajemen jadwal kerja periodic dan assigmen petugas.</p>
                        </div>
                        @if ($authorize->add == '1')
                        <button type="button" class="btn btn-primary btn-sm" onclick="window.location='{{ URL::to($url_menu . '/add/') }}'">
                            <i class="fas fa-plus me-2"></i>Tambah Jadwal
                        </button>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover display" id="list_periodic_hrd">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center" style="width: 200px;">Action</th>
                                    <th>Tahun</th>
                                    <th>Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                // Get all periodic headers from database
                                $periodicHeaders = \Illuminate\Support\Facades\DB::table('tr_periodic_header')
                                ->where('is_active', '1')
                                ->orderBy('tahun', 'desc')
                                ->get();
                                @endphp
                                @forelse ($periodicHeaders as $header)
                                <tr>
                                    <td class="text-center">
                                        <div class="btn-group">
                                            <!-- Tombol Utama (View) -->
                                            <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                title="View Data"
                                                onclick="window.location='{{ URL::to($url_menu . '/show/' . $header->tahun) }}'">
                                                <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                            </button>

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

                                            <ul class="dropdown-menu">
                                                @if ($authorize->edit == '1')
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <!-- Edit Jadwal -->
                                                <li class="mb-2">
                                                    <button type="button"
                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                        title="Edit Data"
                                                        onclick="window.location='{{ URL::to($url_menu . '/edit/' . $header->tahun) }}'">
                                                        <i class="fas fa-edit"></i><span class="font-weight-bold"> Edit Jadwal</span>
                                                    </button>
                                                </li>
                                                <!-- Copy Ke Tahun Lain -->
                                                <li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-info mx-2 mb-0 w-90 text-white"
                                                        title="Copy Data"
                                                        onclick="openCopyModal('{{ $header->id }}', '{{ $header->tahun }}')">
                                                        <i class="fas fa-copy"></i><span class="font-weight-bold"> Copy Ke Tahun Lain</span>
                                                    </button>
                                                </li>
                                                @endif

                                                @if ($authorize->delete == '1')
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <button type="button"
                                                        class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                        title="Hapus Data"
                                                        onclick="confirmDeletePeriodicHeader(event, 'form-delete-{{ $header->id }}', '{{ $header->tahun }}')">
                                                        <i class="fas fa-trash"></i><span class="font-weight-bold"> Hapus</span>
                                                    </button>
                                                </li>
                                                @endif
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                            </ul>
                                        </div>
                                        @if ($authorize->delete == '1')
                                        <form id="form-delete-{{ $header->id }}" action="{{ URL::to($url_menu . '/' . $header->tahun) }}" method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                        @endif
                                    </td>
                                    <td class="text-sm font-weight-bold">{{ $header->tahun }}</td>
                                    <td class="text-sm">{{ $header->keterangan ?? '-' }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="3" class="text-center">Data tidak ditemukan</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Copy Jadwal -->
<div class="modal fade" id="copyPeriodicModal" tabindex="-1" aria-labelledby="copyPeriodicModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="copyPeriodicModalLabel">Copy Jadwal Periodic</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="copyPeriodicForm">
                <div class="modal-body">
                    <input type="hidden" id="copy_source_header_id" name="source_header_id">
                    <p>Anda akan menyalin seluruh jadwal periodic dari tahun <strong id="copy_source_tahun_label"></strong>.</p>
                    <div class="mb-3">
                        <label for="copy_target_tahun" class="form-label">Tahun Tujuan</label>
                        <input type="number" class="form-control" id="copy_target_tahun" name="target_tahun" min="2000" max="2100" required placeholder="Contoh: 2026">
                        <small class="text-muted">Jadwal pada tahun tujuan akan ditambahkan berdasarkan setup tahun asal.</small>
                    </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" id="btnSubmitCopy">Copy Jadwal</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('js')
<script>
    function resetCopyPeriodicModalState() {
        $('#copyPeriodicModal').modal('hide');
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open').css('padding-right', '');
        $('#copyPeriodicModal').css('display', 'none').attr('aria-hidden', 'true');
    }

    function openCopyModal(headerId, tahun) {
        $('#copy_source_header_id').val(headerId);
        $('#copy_source_tahun_label').text(tahun);
        $('#copy_target_tahun').val(parseInt(tahun) + 1); // default ke tahun depan
        $('#copyPeriodicModal').modal('show');
    }

    $(document).ready(function() {
        const reloadFlagKey = 'periodicScheduleReloadAfterCopy';

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                resetCopyPeriodicModalState();
            }

            const shouldReloadPuList = sessionStorage.getItem('puListNeedsReload') === '1';
            if (shouldReloadPuList) {
                sessionStorage.removeItem('puListNeedsReload');
                window.location.reload();
                return;
            }

            if (event.persisted && (window.location.pathname.indexOf('/user') !== -1 || window.location.pathname.indexOf('/pengajuan-hrd') !== -1)) {
                window.location.reload();
                return;
            }

            if (sessionStorage.getItem(reloadFlagKey) === '1') {
                sessionStorage.removeItem(reloadFlagKey);
                window.location.reload();
            }
        });

        $('#copyPeriodicForm').on('submit', function(e) {
            e.preventDefault();
            const btn = $('#btnSubmitCopy');
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Menyalin...');

            $.ajax({
                url: '{{ route('periodic-schedule.copy') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    source_header_id: $('#copy_source_header_id').val(),
                    target_tahun: $('#copy_target_tahun').val()
                },
                success: function(res) {
                    if (res.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: res.message,
                            icon: 'success',
                            showCancelButton: true,
                            confirmButtonText: 'Ubah Tanggal',
                            cancelButtonText: 'Tutup',
                            reverseButtons: true
                        }).then((result) => {
                            resetCopyPeriodicModalState();
                            if (result.isConfirmed && res.target_tahun) {
                                sessionStorage.setItem(reloadFlagKey, '1');
                                window.location.href = '{{ URL::to($url_menu . ' / edit ') }}/' + res.target_tahun;
                            } else {
                                window.location.reload();
                            }
                        });
                    } else {
                        Swal.fire('Gagal!', res.message, 'error');
                        btn.prop('disabled', false).text('Copy Jadwal');
                    }
                },
                error: function(xhr) {
                    let errorMsg = 'Terjadi kesalahan saat menyalin jadwal.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    Swal.fire('Error!', errorMsg, 'error');
                    btn.prop('disabled', false).text('Copy Jadwal');
                }
            });
        });
    });

    function confirmDeletePeriodicHeader(event, formId, tahun) {
        event.preventDefault();
        const submitDelete = () => {
            const form = document.getElementById(formId);
            if (form) {
                form.submit();
            }
        };

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Hapus data tahun ${tahun}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    submitDelete();
                }
            });
            return;
        }

        if (confirm(`Hapus data tahun ${tahun}?`)) {
            submitDelete();
        }
    }

    $(document).ready(function() {
        if ($('#list_periodic_hrd').length) {
            $('#list_periodic_hrd').DataTable();
        }
    });
</script>
@endpush

@elseif ($dmenu == 'trpetp')
@push('css')
<link
    rel="stylesheet">
<style>
    :root {
        --pu-ink: #0f172a;
        --pu-mute: #64748b;
        --pu-teal: #0ea5a5;
        --pu-amber: #f59e0b;
        --pu-slate: #e2e8f0;
        --pu-card: #ffffff;
        --pu-bg: #ffffff;
    }

    .pu-wrap {
        font-family: var(--bs-body-font-family);
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }

    .pu-table-card {
        border-radius: 18px;
        border: 1px solid var(--pu-slate);
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .pu-table tbody tr {
        border-bottom: 1px solid #eef2f7;
    }

    .pu-table tbody tr:hover {
        background: #f8fafc;
    }

    .pu-empty {
        padding: 24px;
        text-align: center;
        color: var(--pu-mute);
    }
</style>
@endpush
@php
// Use $user_login from controller (already passed to all views)
$currentUser = $user_login ?? auth()->user();
if (!$currentUser && session()->has('username')) {
$currentUser = \Illuminate\Support\Facades\DB::table('users')
->where('username', session('username'))
->first();
}
$currentUserId = $currentUser ? $currentUser->id : null;
$currentUserRoles = $currentUser ? (string) ($currentUser->idroles ?? '') : '';
$normalizedRoles = ',' . str_replace(' ', '', strtolower($currentUserRoles)) . ',';
$isPetugas = str_contains($normalizedRoles, ',ptgoff,') || str_contains($normalizedRoles, ',ptgspu,');

// Get all user IDs with the same role as current user for role-based filtering
$roleGroupUserIds = [];
if ($isPetugas && $currentUser) {
$currentUserRole = str_contains($normalizedRoles, ',ptgoff,') ? 'ptgoff' : 'ptgspu';
$roleGroupUserIds = \Illuminate\Support\Facades\DB::table('users')
->whereRaw("FIND_IN_SET(?, REPLACE(idroles, ' ', ''))", [$currentUserRole])
->where('isactive', '1')
->pluck('id')
->toArray();
}

// Get filter values from request, default periode = bulan_ini
$filterPeriode = request('periode', 'bulan_ini');
$filterArea = request('area', '');

// Calculate date range based on periode filter
$dateStart = null;
$dateEnd = null;
$today = \Illuminate\Support\Carbon::today();

switch ($filterPeriode) {
case 'hari_ini':
$dateStart = $today->format('Y-m-d');
$dateEnd = $today->format('Y-m-d');
break;
case 'minggu_ini':
$dateStart = $today->copy()->startOfWeek()->format('Y-m-d');
$dateEnd = $today->copy()->endOfWeek()->format('Y-m-d');
break;
case 'bulan_ini':
$dateStart = $today->copy()->startOfMonth()->format('Y-m-d');
$dateEnd = $today->copy()->endOfMonth()->format('Y-m-d');
break;
case 'semua':
default:
// No date filter
break;
}

// Get all areas for filter dropdown
$allAreas = \Illuminate\Support\Facades\DB::table('ms_area')
->where('is_active', '1')
->orderBy('nama_area', 'asc')
->get();

// Query periodic items with filters
$query = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
->join('tr_periodic_detail', 'tr_periodic_items.detail_id', '=', 'tr_periodic_detail.id')
->join('ms_periodic', 'tr_periodic_detail.periodic_id', '=', 'ms_periodic.id')
->leftJoin('ms_area', 'tr_periodic_detail.area_id', '=', 'ms_area.id')
->leftJoin('users as worker', 'tr_periodic_detail.worker_id', '=', 'worker.id')
->select(
'tr_periodic_items.id as periodic_item_id',
'tr_periodic_items.planned_date',
'tr_periodic_items.realization_date',
'tr_periodic_items.is_finished',
'tr_periodic_items.created_at',
'ms_periodic.job_description',
'tr_periodic_detail.periode',
'tr_periodic_detail.area_id',
'ms_area.nama_area as area_name',
\Illuminate\Support\Facades\DB::raw("CONCAT(COALESCE(worker.firstname, ''), ' ', COALESCE(worker.lastname, '')) as worker_name")
)
->where('tr_periodic_items.is_active', '1')
->where('tr_periodic_detail.is_active', '1')
->whereNotNull('tr_periodic_items.planned_date')
->orderBy('tr_periodic_items.planned_date', 'asc')
->orderBy('tr_periodic_items.id', 'asc');

// Apply role-based filter for petugas
if ($isPetugas && !empty($roleGroupUserIds)) {
$query->whereIn('tr_periodic_detail.worker_id', $roleGroupUserIds);
}

// Apply date filter
if ($dateStart && $dateEnd) {
$query->whereBetween('tr_periodic_items.planned_date', [$dateStart, $dateEnd]);
}

// Apply area filter
if ($filterArea) {
$query->where('tr_periodic_detail.area_id', $filterArea);
}

// Batas max input tanggal realisasi: akhir bulan saat ini
$periodicRealizationMaxDate = \Illuminate\Support\Carbon::today()->endOfMonth()->format('Y-m-d');
$periodicRealizationOldestDate = \Illuminate\Support\Carbon::today()->startOfMonth()->format('Y-m-d');

$totalItems = (clone $query)->count();

$periodicItems = $query->get();
@endphp

<div class="container-fluid py-4 pu-wrap">
    <div class="card pu-hero mb-3">
        <div class="card-body py-4 px-4">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h2 class="mb-1">Pekerjaan Periodic</h2>
                    <p class="text-sm mb-0">Daftar pekerjaan periodic berdasarkan tanggal rencana dari HRD.</p>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
        <div class="alert alert-{{ session('class') === 'danger' ? 'danger' : 'success' }} alert-dismissible fade show text-white mb-3" role="alert">
            <span class="alert-icon"><i class="fas {{ session('class') === 'danger' ? 'fa-exclamation-triangle' : 'fa-check-circle' }}"></i></span>
            <span class="alert-text"><strong>{{ session('class') === 'danger' ? 'Gagal!' : 'Berhasil!' }}</strong> {{ session('message') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show text-white mb-3" role="alert">
            <span class="alert-icon"><i class="fas fa-exclamation-triangle"></i></span>
            <span class="alert-text">
                <strong>Gagal!</strong>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    {{-- Filter Section --}}
    <div class="card mb-3">
        <div class="card-body py-3">
            <form method="GET" action="{{ url()->current() }}" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label for="filter-periode" class="form-label text-xs mb-1">
                        <i class="fas fa-calendar-alt me-1"></i> Periode
                    </label>
                    <select name="periode" id="filter-periode" class="form-select form-select-sm">
                        <option value="hari_ini" {{ $filterPeriode == 'hari_ini' ? 'selected' : '' }}>Hari Ini</option>
                        <option value="minggu_ini" {{ $filterPeriode == 'minggu_ini' ? 'selected' : '' }}>Minggu Ini</option>
                        <option value="bulan_ini" {{ $filterPeriode == 'bulan_ini' ? 'selected' : '' }}>Bulan Ini</option>
                        <option value="semua" {{ $filterPeriode == 'semua' ? 'selected' : '' }}>Semua</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="filter-area" class="form-label text-xs mb-1">
                        <i class="fas fa-map-marker-alt me-1"></i> Area
                    </label>
                    <select name="area" id="filter-area" class="form-select form-select-sm">
                        <option value="">Semua Area</option>
                        @foreach ($allAreas as $area)
                        <option value="{{ $area->id }}" {{ $filterArea == $area->id ? 'selected' : '' }}>
                            {{ $area->nama_area }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary btn-sm me-2">
                        <i class="fas fa-filter me-1"></i> Terapkan Filter
                    </button>
                    <a href="{{ url()->current() }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-redo me-1"></i> Reset
                    </a>
                </div>
            </form>
            @if ($totalItems > 0)
            <div class="mt-2">
                <small class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Menampilkan {{ $periodicItems->count() }} dari {{ $totalItems }} pekerjaan
                </small>
            </div>
            @endif
        </div>
    </div>

    <div class="card pu-table-card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table display mb-0" id="list_petugas_periodic">
                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                        <tr>
                            <th class="text-uppercase text-xs text-center">Aksi</th>
                            <th class="text-uppercase text-xs">Periode</th>
                            <th class="text-uppercase text-xs">Area</th>
                            <th class="text-uppercase text-xs">Deskripsi</th>
                            <th class="text-uppercase text-xs">Rencana</th>
                            <th class="text-uppercase text-xs">Realisasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($periodicItems as $detail)
                        @php
                        $plannedDateValue = $detail->planned_date ? \Illuminate\Support\Carbon::parse($detail->planned_date)->startOfDay() : null;
                        // Enable tombol: planned_date harus dalam bulan yang sama atau sebelum bulan ini
                        $todayMonthKey = \Illuminate\Support\Carbon::today()->format('Y-m');
                        $plannedMonthKey = $plannedDateValue ? $plannedDateValue->format('Y-m') : null;
                        $canInputRealization = $plannedDateValue && $plannedMonthKey <= $todayMonthKey;
                            // Min date untuk input: awal bulan dari planned_date
                            $minRealizationDate=$plannedDateValue
                            ? $plannedDateValue->copy()->startOfMonth()->format('Y-m-d')
                            : $periodicRealizationOldestDate;
                            // Max date untuk input: akhir bulan dari planned_date
                            $maxRealizationDateForItem = $plannedDateValue
                            ? $plannedDateValue->copy()->endOfMonth()->format('Y-m-d')
                            : $periodicRealizationMaxDate;
                            // Decode realization_date JSON jika ada
                            $realizationDates = [];
                            if (!empty($detail->realization_date)) {
                                $decoded = json_decode($detail->realization_date, true);
                                if (is_array($decoded)) {
                                    $realizationDates = $decoded;
                                } else {
                                    // Legacy: single date string
                                    $realizationDates = [$detail->realization_date];
                                }
                            }
                            $hasRealization = !empty($realizationDates);

                            $documentations = \Illuminate\Support\Facades\DB::table('tr_documentation')
                                ->where('periodic_item_id', $detail->periodic_item_id)
                                ->where('is_active', '1')
                                ->select('id', 'file')
                                ->get()
                                ->toArray();
                            @endphp
                            <tr>
                                <td class="text-center">
                                    @if ($detail->is_finished == '1')
                                        {{-- Sudah final selesai --}}
                                        <span class="badge bg-success px-3 py-2">
                                            <i class="fas fa-check-circle me-1"></i>Selesai
                                        </span>
                                    @elseif ($hasRealization)
                                        {{-- Sudah ada realisasi, tampilkan Update + Tandai Selesai --}}
                                        <div class="d-flex flex-column gap-1 align-items-center">
                                            <button class="btn btn-warning text-white btn-sm mb-0 px-3" type="button"
                                                data-bs-toggle="modal" data-bs-target="#petugasPeriodicModal"
                                                data-periodic-item-id="{{ $detail->periodic_item_id }}"
                                                data-description="{{ $detail->job_description ?? '' }}"
                                                data-planned-date="{{ $detail->planned_date ?? '' }}"
                                                data-min-realization-date="{{ $minRealizationDate }}"
                                                data-max-realization-date="{{ $maxRealizationDateForItem }}"
                                                data-realization-dates="{{ json_encode($realizationDates) }}"
                                                data-documentations="{{ json_encode($documentations) }}">
                                                <i class="fas fa-edit"></i><span class="font-weight-bold"> Update Realisasi</span>
                                            </button>
                                            <form method="POST" action="{{ route('work-schedule.finish') }}" class="m-0 p-0"
                                                onsubmit="return confirmFinishPeriodic(event)">
                                                @csrf
                                                <input type="hidden" name="periodic_item_id" value="{{ $detail->periodic_item_id }}">
                                                <button type="submit" class="btn btn-success btn-sm mb-0 px-3">
                                                    <i class="fas fa-check-double"></i><span class="font-weight-bold"> Tandai Selesai</span>
                                                </button>
                                            </form>
                                        </div>
                                    @elseif ($canInputRealization)
                                        {{-- Belum ada realisasi, bisa input --}}
                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                            data-bs-toggle="modal" data-bs-target="#petugasPeriodicModal"
                                            data-periodic-item-id="{{ $detail->periodic_item_id }}"
                                            data-description="{{ $detail->job_description ?? '' }}"
                                            data-planned-date="{{ $detail->planned_date ?? '' }}"
                                            data-min-realization-date="{{ $minRealizationDate }}"
                                            data-max-realization-date="{{ $maxRealizationDateForItem }}"
                                            data-realization-dates="{{ json_encode($realizationDates) }}"
                                            data-documentations="{{ json_encode($documentations) }}">
                                            <i class="fas fa-calendar-check"></i><span class="font-weight-bold"> Input Realisasi</span>
                                        </button>
                                    @else
                                        {{-- Belum waktunya --}}
                                        <button class="btn btn-secondary btn-sm mb-0 px-3" type="button" disabled
                                            title="Input realisasi hanya bisa dilakukan mulai tanggal rencana">
                                            <i class="fas fa-calendar-times"></i><span class="font-weight-bold"> Input Realisasi</span>
                                        </button>
                                    @endif
                                </td>
                                <td class="text-sm">
                                    {{ ucfirst($detail->periode ?? '-') }}
                                    @if (strtolower($detail->periode ?? '') === 'mingguan' && $detail->planned_date)
                                        (Ke-{{ ceil(\Illuminate\Support\Carbon::parse($detail->planned_date)->day / 7) }})
                                    @endif
                                </td>
                                <td class="text-sm">{{ $detail->area_name ?? '-' }}</td>
                                <td class="text-sm">{{ $detail->job_description ?? '-' }}</td>
                                <td class="text-sm">{{ $detail->planned_date ? \Illuminate\Support\Carbon::parse($detail->planned_date)->format('d-m-Y') : '-' }}</td>
                                <td class="text-sm">
                                    @if (!empty($realizationDates))
                                    @foreach ($realizationDates as $rDate)
                                    <span class="badge bg-light text-dark border me-1">{{ \Illuminate\Support\Carbon::parse($rDate)->format('d-m-Y') }}</span>
                                    @endforeach
                                    @else
                                    -
                                    @endif
                                </td>
                            </tr>
                            @empty
                            @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="petugasPeriodicModal" tabindex="-1" aria-labelledby="petugasPeriodicLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('work-schedule.complete') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="petugasPeriodicLabel">Input Realisasi Pekerjaan Periodic</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="periodic_item_id" id="petugas-periodic-item-id">
                    <div class="mb-3">
                        <label class="form-label">Pekerjaan</label>
                        <input type="text" class="form-control" id="petugas-periodic-description" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Rencana</label>
                        <input type="text" class="form-control" id="petugas-periodic-planned-date" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Realisasi <span class="text-danger">*</span>
                            <small class="text-muted">(bisa lebih dari 1 tanggal)</small>
                        </label>
                        <style>
                            .periodic-date-input-wrapper {
                                position: relative;
                                margin-bottom: 0.5rem;
                            }

                            .periodic-date-input-wrapper .form-control {
                                padding-right: 45px;
                            }

                            .periodic-date-input-wrapper .btn-remove-periodic-date {
                                position: absolute;
                                right: 5px;
                                top: 50%;
                                transform: translateY(-50%);
                                height: 32px;
                                width: 32px;
                                padding: 0 !important;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: none;
                                border-radius: 7px;
                                color: white !important;
                            }

                            .periodic-date-input-wrapper .btn-remove-periodic-date:hover {
                                transform: translateY(-50%) !important;
                                right: 5px !important;
                                top: 50% !important;
                            }

                            .periodic-date-input-wrapper .btn-remove-periodic-date:active,
                            .periodic-date-input-wrapper .btn-remove-periodic-date:focus {
                                transform: translateY(-50%) !important;
                                right: 5px !important;
                                top: 50% !important;
                                box-shadow: none !important;
                            }
                        </style>
                        <div id="periodic-realization-dates-container">
                            <div class="periodic-date-input-wrapper">
                                <input type="date" class="form-control periodic-realization-date-input"
                                    name="realization_dates[]" required>
                                <button class="btn btn-danger btn-remove-periodic-date d-none" type="button"
                                    style="white-space:nowrap;" title="Hapus tanggal">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mt-1"
                            id="btn-add-periodic-date">
                            <i class="fas fa-plus"></i> Tambah Tanggal
                        </button>
                    </div>
                    <div class="mb-3" id="petugas-existing-documentation-container" style="display: none;">
                        <label class="form-label">Dokumentasi Sebelumnya</label>
                        <div id="petugas-existing-documentation-list" class="d-flex flex-wrap gap-2">
                            <!-- Existing files will be dynamically loaded here -->
                        </div>
                        <div id="deleted-documentation-inputs"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Dokumentasi (bisa pilih lebih dari 1 file)</label>
                        <input type="file" class="form-control" name="documentation[]" id="petugas-periodic-documentation-input" required multiple
                            accept=".jpg,.jpeg,.png,.pdf">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control" name="description" rows="3"
                            placeholder="Keterangan pekerjaan"></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>
    // ---- Periodic Realisasi Multi-Date Modal ----
    const petugasPeriodicModal = document.getElementById('petugasPeriodicModal');
    const periodicDatesContainer = document.getElementById('periodic-realization-dates-container');
    const btnAddPeriodicDate = document.getElementById('btn-add-periodic-date');

    let periodicMinDate = '';
    let periodicMaxDate = '';

    function setPeriodicDateConstraints(input) {
        if (periodicMinDate) input.min = periodicMinDate;
        if (periodicMaxDate) input.max = periodicMaxDate;
    }

    function updatePeriodicRemoveBtns() {
        const wrappers = periodicDatesContainer ?
            periodicDatesContainer.querySelectorAll('.periodic-date-input-wrapper') :
            [];
        wrappers.forEach(function(w) {
            const btn = w.querySelector('.btn-remove-periodic-date');
            if (btn) btn.classList.toggle('d-none', wrappers.length <= 1);
        });
    }

    function addPeriodicDateRow(value) {
        const row = document.createElement('div');
        row.className = 'periodic-date-input-wrapper';
        row.innerHTML = `
                        <input type="date" class="form-control periodic-realization-date-input"
                            name="realization_dates[]" required>
                        <button class="btn btn-danger btn-remove-periodic-date" type="button"
                            style="white-space:nowrap;" title="Hapus tanggal">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    `;
        periodicDatesContainer.appendChild(row);
        const input = row.querySelector('.periodic-realization-date-input');
        setPeriodicDateConstraints(input);
        if (value) input.value = value;

        row.querySelector('.btn-remove-periodic-date').addEventListener('click', function() {
            row.remove();
            updatePeriodicRemoveBtns();
        });
        updatePeriodicRemoveBtns();
    }

    if (btnAddPeriodicDate) {
        btnAddPeriodicDate.addEventListener('click', function() {
            addPeriodicDateRow('');
        });
    }

    if (petugasPeriodicModal) {
        petugasPeriodicModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            if (!button || button.disabled) {
                event.preventDefault();
                return;
            }

            const periodicItemId = button.getAttribute('data-periodic-item-id') || '';
            const description = button.getAttribute('data-description') || '';
            const plannedDate = button.getAttribute('data-planned-date') || '';
            periodicMinDate = button.getAttribute('data-min-realization-date') || '';
            periodicMaxDate = button.getAttribute('data-max-realization-date') || '';
            const realizationDatesStr = button.getAttribute('data-realization-dates') || '[]';

            let realizationDates = [];
            try {
                realizationDates = JSON.parse(realizationDatesStr);
            } catch (e) {
                realizationDates = [];
            }

            const inputPeriodicItemId = document.getElementById('petugas-periodic-item-id');
            const inputDescription = document.getElementById('petugas-periodic-description');
            const inputPlannedDate = document.getElementById('petugas-periodic-planned-date');

            if (inputPeriodicItemId) inputPeriodicItemId.value = periodicItemId;
            if (inputDescription) inputDescription.value = description;
            if (inputPlannedDate) inputPlannedDate.value = plannedDate ?
                new Date(plannedDate + 'T00:00:00').toLocaleDateString('id-ID') : '';

            // Reset container and populate with existing dates or 1 empty row
            if (periodicDatesContainer) {
                periodicDatesContainer.innerHTML = '';
                if (realizationDates && realizationDates.length > 0) {
                    realizationDates.forEach(function(date) {
                        addPeriodicDateRow(date);
                    });
                } else {
                    addPeriodicDateRow('');
                }
            }

            // Existing docs container
            const existingDocsContainer = document.getElementById('petugas-existing-documentation-container');
            const existingDocsList = document.getElementById('petugas-existing-documentation-list');
            const deletedDocsInputs = document.getElementById('deleted-documentation-inputs');
            const inputDocumentation = document.getElementById('petugas-periodic-documentation-input');

            if (deletedDocsInputs) deletedDocsInputs.innerHTML = '';
            if (existingDocsList) existingDocsList.innerHTML = '';

            const docsStr = button.getAttribute('data-documentations') || '[]';
            let docs = [];
            try {
                docs = JSON.parse(docsStr);
            } catch (e) {
                docs = [];
            }

            if (docs && docs.length > 0) {
                if (existingDocsContainer) existingDocsContainer.style.display = 'block';
                if (inputDocumentation) inputDocumentation.removeAttribute('required');

                docs.forEach(function(doc) {
                    const filePath = typeof doc === 'string' ? doc : (doc && doc.file ? String(doc.file) : '');
                    if (!filePath || filePath === '0' || filePath === 'null' || filePath === 'undefined') return;

                    const cleanPath = filePath.replace(/^\/?storage\//, '');
                    const isPdf = /\.pdf$/i.test(cleanPath);
                    const fileUrl = @json(url('/attachment-file')) + '/' + cleanPath;
                    const docId = (typeof doc === 'object' && doc && doc.id) ? doc.id : 0;

                    const item = document.createElement('div');
                    item.className = 'position-relative border rounded p-1 d-flex flex-column align-items-center justify-content-center bg-light m-1';
                    item.style.width = '80px';
                    item.style.height = '80px';

                    if (isPdf) {
                        item.innerHTML = `
                            <a href="${fileUrl}" target="_blank" class="d-flex flex-column align-items-center text-decoration-none text-dark">
                                <i class="fas fa-file-pdf text-danger fa-2x mb-1"></i>
                                <span class="text-xs text-center text-truncate" style="max-width: 70px;" title="PDF File">PDF</span>
                            </a>
                            <button type="button" class="btn btn-danger btn-sm p-0 position-absolute" 
                                style="top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; line-height: 18px;"
                                onclick="removeExistingDoc(this, ${docId})">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                        `;
                    } else {
                        item.innerHTML = `
                            <a href="${fileUrl}" target="_blank" class="d-flex flex-column align-items-center text-decoration-none" style="width:100%; height:100%;">
                                <img src="${fileUrl}" class="rounded" style="width: 100%; height: 100%; object-fit: cover;" />
                            </a>
                            <button type="button" class="btn btn-danger btn-sm p-0 position-absolute" 
                                style="top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; line-height: 18px;"
                                onclick="removeExistingDoc(this, ${docId})">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                        `;
                    }
                    existingDocsList.appendChild(item);
                });
            } else {
                if (existingDocsContainer) existingDocsContainer.style.display = 'none';
                if (inputDocumentation) inputDocumentation.setAttribute('required', 'required');
            }

            updatePeriodicRemoveBtns();
        });
    }

    window.removeExistingDoc = function(btn, docId) {
        const item = btn.closest('.position-relative');
        if (item) {
            item.remove();
        }

        const deletedDocsInputs = document.getElementById('deleted-documentation-inputs');
        if (deletedDocsInputs) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'deleted_documentation_ids[]';
            input.value = docId;
            deletedDocsInputs.appendChild(input);
        }

        const existingDocsList = document.getElementById('petugas-existing-documentation-list');
        const inputDocumentation = document.getElementById('petugas-periodic-documentation-input');
        if (existingDocsList && existingDocsList.children.length === 0) {
            const existingDocsContainer = document.getElementById('petugas-existing-documentation-container');
            if (existingDocsContainer) existingDocsContainer.style.display = 'none';
            if (inputDocumentation) inputDocumentation.setAttribute('required', 'required');
        }
    };

    window.confirmFinishPeriodic = function(event) {
        event.preventDefault();
        const form = event.target;

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Tandai Selesai?',
                text: 'Setelah ditandai selesai, pekerjaan ini tidak dapat diupdate kembali. Apakah Anda yakin?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Tandai Selesai',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        } else {
            if (confirm('Setelah ditandai selesai, pekerjaan ini tidak dapat diupdate kembali. Lanjutkan?')) {
                form.submit();
            }
        }
        return false;
    };

    $(document).ready(function() {
        const periodicTable = $('#list_petugas_periodic');
        if (periodicTable.length && !$.fn.DataTable.isDataTable('#list_petugas_periodic')) {
            periodicTable.DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [4, 'asc']
                ],
                language: {
                    search: 'Cari :',
                    lengthMenu: 'Tampilkan _MENU_ baris',
                    zeroRecords: 'Maaf - Data tidak ada',
                    info: 'Data _START_ - _END_ dari _TOTAL_',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(pencarian dari _MAX_ data)',
                    emptyTable: 'Belum ada pekerjaan periodic dengan tanggal rencana.'
                },
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }, {
                    targets: [4, 5],
                    render: function(data, type) {
                        if (type !== 'sort' && type !== 'type') {
                            return data;
                        }

                        const parts = String(data || '').split('-');
                        if (parts.length !== 3) {
                            return data || '';
                        }

                        return `${parts[2]}-${parts[1]}-${parts[0]}`;
                    }
                }]
            });
        }
    });
</script>
@endpush
@elseif ($dmenu == 'trpetn')
@push('css')
<link
    rel="stylesheet">
<style>
    :root {
        --pu-ink: #0f172a;
        --pu-mute: #64748b;
        --pu-teal: #0ea5a5;
        --pu-amber: #f59e0b;
        --pu-slate: #e2e8f0;
        --pu-card: #ffffff;
        --pu-bg: #ffffff;
    }

    .pu-wrap {
        font-family: var(--bs-body-font-family);
        position: relative;
        z-index: 3;
        padding-top: 12px;
    }

    .pu-table-card {
        border-radius: 18px;
        border: 1px solid var(--pu-slate);
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .pu-table tbody tr {
        border-bottom: 1px solid #eef2f7;
    }

    .pu-table tbody tr:hover {
        background: #f8fafc;
    }

    .pu-empty {
        padding: 24px;
        text-align: center;
        color: var(--pu-mute);
    }
</style>
@endpush
@php
// Use $user_login from controller (already passed to all views)
$currentUser = $user_login ?? auth()->user();
if (!$currentUser && session()->has('username')) {
$currentUser = \Illuminate\Support\Facades\DB::table('users')
->where('username', session('username'))
->first();
}
$currentUserId = $currentUser ? $currentUser->id : null;
$currentUserRoles = $currentUser ? (string) ($currentUser->idroles ?? '') : '';
$normalizedRoles = ',' . str_replace(' ', '', strtolower($currentUserRoles)) . ',';
$isPetugasOffice = str_contains($normalizedRoles, ',ptgoff,');
$isPetugasPU = str_contains($normalizedRoles, ',ptgspu,');

// Get all user IDs with ptgoff role for Office filtering
$officeRoleUserIds = [];
if ($isPetugasOffice) {
$officeRoleUserIds = \Illuminate\Support\Facades\DB::table('users')
->whereRaw("FIND_IN_SET('ptgoff', REPLACE(idroles, ' ', ''))")
->where('isactive', '1')
->pluck('id')
->toArray();
}

$nonPeriodicItems = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
->select(
'tr_non_periodic.id',
'tr_non_periodic.request_status',
'tr_non_periodic.job_description',
'tr_non_periodic.work_type',
'tr_non_periodic.*',
'ms_area.nama_area as area_name'
)
->whereIn('tr_non_periodic.request_status', ['pengadaan', 'pengerjaan', 'revisi'])
->where('tr_non_periodic.is_active', '1');

// Apply role-based filter: Petugas Office only sees assigned tasks, Petugas PU sees all
if ($isPetugasOffice && !empty($officeRoleUserIds)) {
$nonPeriodicItems->whereIn('tr_non_periodic.worker_id', $officeRoleUserIds);
}

$nonPeriodicItems = $nonPeriodicItems->orderBy('tr_non_periodic.created_at', 'desc')->get();

// Parse attachment files from each item
$nonPeriodicItems = $nonPeriodicItems->map(function ($item) {
$attachments = [];
if (!empty($item->attachment)) {
$rawAttachment = $item->attachment;
// Try JSON decode first
$decoded = json_decode($rawAttachment, true);
if (is_array($decoded)) {
$attachments = $decoded;
} else {
// Fallback: treat as comma-separated or single path
$parts = array_map('trim', explode(',', $rawAttachment));
$attachments = array_filter($parts);
}
}

$revisionAttachments = [];
if (!empty($item->revision_attachment)) {
$rawRevisionAttachment = $item->revision_attachment;
$decodedRevision = json_decode($rawRevisionAttachment, true);
if (is_array($decodedRevision)) {
$revisionAttachments = $decodedRevision;
} else {
$partsRevision = array_map('trim', explode(',', $rawRevisionAttachment));
$revisionAttachments = array_filter($partsRevision);
}
}
$item->attachments = array_values($attachments);
$item->revision_attachments = array_values($revisionAttachments);
return $item;
});

$getPelaksanaLabel = function ($item) {
$workType = strtolower(trim((string) ($item->work_type ?? '')));

if ($workType === 'internal') {
return 'Internal';
}

if ($workType === 'vendor') {
return 'Vendor';
}

return '-';
};

$getPelaksanaClass = function ($item) {
$workType = strtolower(trim((string) ($item->work_type ?? '')));

if ($workType === 'internal') {
return 'background-color:#1d4ed8;color:#ffffff;';
}

if ($workType === 'vendor') {
return 'background-color:#f59e0b;color:#ffffff;';
}

return 'background-color:#6b7280;color:#ffffff;';
};
@endphp
<div class="container-fluid py-4 pu-wrap">
    <div class="pu-hero">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h2 class="mb-1">Pekerjaan Non-Periodic</h2>
                <p class="text-sm">Daftar pekerjaan non-periodic untuk petugas.</p>
            </div>
        </div>
    </div>

    @include('components.alert')

    <div class="card pu-table-card">
        <div class="table-responsive">
            <table class="table display" id="list_petugas_non_periodic">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th class="text-uppercase text-xs text-center">Aksi</th>
                        <th class="text-uppercase text-xs">No</th>
                        <th class="text-uppercase text-xs">ID Trans</th>
                        <th class="text-uppercase text-xs">Tanggal Pengajuan</th>
                        <th class="text-uppercase text-xs">Area</th>
                        <th class="text-uppercase text-xs">Deskripsi</th>
                        <th class="text-uppercase text-xs">Pelaksana</th>
                        <th class="text-uppercase text-xs">Status</th>
                        <th class="text-uppercase text-xs">Catatan Revisi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($nonPeriodicItems as $detail)
                    @php
                    $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';
                    }
                    $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                    $displayDate = $dateValue
                    ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                    : '-';
                    @endphp
                    <tr>
                        <td class="text-center">
                            <div class="btn-group" role="group" aria-label="Aksi Pekerjaan">
                                <button class="btn btn-info btn-sm mb-0 px-3" type="button"
                                    data-bs-toggle="modal" data-bs-target="#petugasDetailModal"
                                    data-tanggal="{{ $displayDate }}"
                                    data-area="{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}"
                                    data-deskripsi="{{ $detail->job_description ?? $detail->description ?? '-' }}"
                                    data-attachments="{{ json_encode($detail->attachments ?? []) }}"
                                    data-revision-attachments="{{ json_encode($detail->revision_attachments ?? []) }}"
                                    data-catatan="{{ data_get($detail, 'requester_note') ?? '-' }}">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> Detail</span>
                                </button>
                                @if ($status !== 'pengadaan')
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    data-bs-toggle="modal" data-bs-target="#petugasCompleteModal"
                                    data-non-periodic-id="{{ $detail->id }}"
                                    data-description="{{ $detail->job_description ?? $detail->description ?? '' }}"
                                    onclick="document.getElementById('petugas-non-periodic-id').value='{{ $detail->id }}'; document.getElementById('petugas-job-description').value='{{ addslashes($detail->job_description ?? $detail->description ?? '') }}';">
                                    <i class="fas fa-check"></i><span class="font-weight-bold"> Selesai</span>
                                </button>
                                @else
                                <button class="btn btn-secondary btn-sm mb-0 px-3" type="button" disabled title="Menunggu pengerjaan">
                                    <i class="fas fa-check"></i><span class="font-weight-bold"> Selesai</span>
                                </button>
                                @endif
                            </div>
                        </td>
                        <td class="text-sm">{{ $loop->iteration }}</td>
                        <td class="text-sm font-weight-bold text-primary">{{ $detail->id_trans ?: '-' }}</td>
                        <td class="text-sm">{{ $displayDate }}</td>
                        <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                        <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                        <td class="text-sm">
                            <span class="badge" style="{{ $getPelaksanaClass($detail) }}">
                                {{ $getPelaksanaLabel($detail) }}
                            </span>
                        </td>
                        <td class="text-sm">
                            @php
                            $statusNormalized = strtolower(trim($status ?? ''));
                            $badgeClass = 'status-badge status-' . ($statusNormalized ?: 'pending');
                            $statusLabel = $statusNormalized ? ucfirst($statusNormalized) : 'Pending';
                            @endphp
                            <span class="{{ $badgeClass }}">{{ $statusLabel }}</span>
                        </td>
                        <td class="text-sm">
                            @php
                            $requesterNote = data_get($detail, 'requester_note');
                            @endphp
                            @if($status === 'revisi' && !empty($requesterNote))
                            <small class="text-muted">{{ $requesterNote }}</small>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="petugasCompleteModal" tabindex="-1" aria-labelledby="petugasCompleteLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('work-schedule.complete') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="petugasCompleteLabel">Konfirmasi Pekerjaan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <input type="hidden" name="non_periodic_id" id="petugas-non-periodic-id">
                    <div class="mb-3">
                        <label class="form-label">Pekerjaan</label>
                        <input type="text" class="form-control" id="petugas-job-description" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Petugas (bisa lebih dari 1)</label>
                        <style>
                            .petugas-input-wrapper {
                                position: relative;
                                margin-bottom: 0.5rem;
                            }

                            .petugas-input-wrapper .form-control {
                                padding-right: 45px;
                            }

                            .petugas-input-wrapper .btn-remove-petugas {
                                position: absolute;
                                right: 5px;
                                top: 50%;
                                transform: translateY(-50%);
                                height: 32px;
                                width: 32px;
                                padding: 0 !important;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: none;
                                border-radius: 4px;
                                background-color: #dc3545 !important;
                                color: white !important;
                            }

                            .petugas-input-wrapper .btn-remove-petugas:hover {
                                background-color: #c82333 !important;
                                transform: translateY(-50%) !important;
                                right: 5px !important;
                                top: 50% !important;
                            }

                            .petugas-input-wrapper .btn-remove-petugas:active,
                            .petugas-input-wrapper .btn-remove-petugas:focus {
                                background-color: #b02a2a !important;
                                transform: translateY(-50%) !important;
                                right: 5px !important;
                                top: 50% !important;
                                box-shadow: none !important;
                            }
                        </style>
                        <div id="petugas-names-container">
                            <div class="petugas-input-wrapper">
                                <input type="text" class="form-control petugas-name-input" name="petugas_names[]" placeholder="Masukkan nama petugas">
                                <button class="btn btn-danger btn-remove-petugas" type="button" style="display: none;">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-petugas">
                            <i class="fas fa-plus"></i> Tambah Petugas
                        </button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Selesai Pengerjaan</label>
                        <input type="datetime-local" class="form-control" name="pengerjaan_ended_at" id="pengerjaan-ended-at">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Dokumentasi (bisa pilih lebih dari 1 file)</label>
                        <input type="file" class="form-control" name="documentation[]" required multiple
                            accept=".jpg,.jpeg,.png,.pdf">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control" name="description" rows="3"
                            placeholder="Keterangan pekerjaan"></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="petugasDetailModal" tabindex="-1" aria-labelledby="petugasDetailLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="petugasDetailLabel">Detail Pengajuan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Tanggal Pengajuan</label>
                    <input type="text" class="form-control" id="petugas-detail-tanggal" readonly>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Area</label>
                    <input type="text" class="form-control" id="petugas-detail-area" readonly>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Deskripsi</label>
                    <textarea class="form-control" id="petugas-detail-deskripsi" rows="3" readonly></textarea>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Lampiran Pengajuan</label>
                    <div id="petugas-detail-attachments" class="d-flex flex-wrap gap-2" style="max-height: 300px; overflow-y: auto;">
                        <p class="text-muted text-sm mb-0">Belum ada lampiran.</p>
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Lampiran Revisi</label>
                    <div id="petugas-detail-revision-attachments" class="d-flex flex-wrap gap-2" style="max-height: 300px; overflow-y: auto;">
                        <p class="text-muted text-sm mb-0">Belum ada lampiran revisi.</p>
                    </div>
                </div>
                <div class="mb-0">
                    <label class="form-label text-xs text-uppercase mb-1">Catatan Revisi</label>
                    <textarea class="form-control" id="petugas-detail-catatan" rows="3" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
<!-- Image Preview Modal -->
<div class="modal fade" id="previewImageModal" tabindex="-1" aria-labelledby="previewImageLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewImageLabel">Preview Lampiran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center" style="background-color: #f8f9fa;">
                <img id="previewImage" src="" alt="Preview" style="max-width: 100%; max-height: 500px; border-radius: 4px;">
            </div>
            <div class="modal-footer">
                <a id="downloadImageBtn" href="" download class="btn btn-primary">
                    <i class="fas fa-download"></i> Download
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@push('js')
<script>
    const petugasCompleteModal = document.getElementById('petugasCompleteModal');
    if (petugasCompleteModal) {
        petugasCompleteModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const nonPeriodicId = button.getAttribute('data-non-periodic-id') || '';
            const description = button.getAttribute('data-description') || '';

            const inputNonPeriodic = document.getElementById('petugas-non-periodic-id');
            const inputDesc = document.getElementById('petugas-job-description');

            if (inputNonPeriodic) inputNonPeriodic.value = nonPeriodicId;
            if (inputDesc) inputDesc.value = description;
        });
    }

    const petugasDetailModal = document.getElementById('petugasDetailModal');
    if (petugasDetailModal) {
        petugasDetailModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const tanggal = button.getAttribute('data-tanggal') || '-';
            const area = button.getAttribute('data-area') || '-';
            const deskripsi = button.getAttribute('data-deskripsi') || '-';
            const attachmentsJson = button.getAttribute('data-attachments') || '[]';
            const revisionAttachmentsJson = button.getAttribute('data-revision-attachments') || '[]';
            const catatan = button.getAttribute('data-catatan') || '-';

            const inputTanggal = document.getElementById('petugas-detail-tanggal');
            const inputArea = document.getElementById('petugas-detail-area');
            const inputDeskripsi = document.getElementById('petugas-detail-deskripsi');
            const inputAttachments = document.getElementById('petugas-detail-attachments');
            const inputRevisionAttachments = document.getElementById('petugas-detail-revision-attachments');
            const inputCatatan = document.getElementById('petugas-detail-catatan');

            if (inputTanggal) inputTanggal.value = tanggal;
            if (inputArea) inputArea.value = area;
            if (inputDeskripsi) inputDeskripsi.value = deskripsi;
            if (inputCatatan) inputCatatan.value = catatan;

            const renderAttachmentFiles = function(container, filesJson, emptyMessage) {
                if (!container) {
                    return;
                }
                try {
                    const files = JSON.parse(filesJson || '[]');
                    container.innerHTML = '';

                    if (files.length === 0) {
                        container.innerHTML = '<p class="text-muted text-sm mb-0">' + emptyMessage + '</p>';
                    } else {
                        files.forEach(function(file) {
                            const fileUrl = @json(url('/attachment-file')) + '/' + String(file)
                                .split('/')
                                .map(encodeURIComponent)
                                .join('/');
                            const isImage = /\.(jpg|jpeg|png|gif|webp|jfif|heic|heif)$/i.test(file);
                            const isPdf = /\.pdf$/i.test(file);

                            const thumbWrapper = document.createElement('div');
                            thumbWrapper.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border-radius:6px;border:1px solid #e9ecef;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);flex-shrink:0;';

                            if (isImage) {
                                thumbWrapper.style.cursor = 'pointer';
                                const img = document.createElement('img');
                                img.src = fileUrl;
                                img.alt = 'Lampiran';
                                img.style.cssText = 'width:150px;height:150px;object-fit:cover;display:block;';
                                thumbWrapper.appendChild(img);
                                thumbWrapper.onclick = function() {
                                    const previewImg = document.getElementById('previewImage');
                                    const downloadBtn = document.getElementById('downloadImageBtn');
                                    if (previewImg) previewImg.src = fileUrl;
                                    if (downloadBtn) {
                                        downloadBtn.href = fileUrl;
                                        downloadBtn.download = file.split('/').pop();
                                    }
                                    const previewModal = new bootstrap.Modal(document.getElementById('previewImageModal'));
                                    previewModal.show();
                                };
                            } else if (isPdf) {
                                thumbWrapper.style.cssText += 'background:#fff5f5;border-color:#fca5a5;text-decoration:none;padding:8px;';
                                const icon = document.createElement('i');
                                icon.className = 'fas fa-file-pdf fa-3x text-danger mb-2';
                                const label = document.createElement('span');
                                label.style.cssText = 'word-break:break-all;max-height:32px;overflow:hidden;line-height:1.2;font-size:0.7rem;color:#dc3545;font-weight:600;text-align:center;padding:0 4px;';
                                label.textContent = file.split('/').pop();
                                thumbWrapper.appendChild(icon);
                                thumbWrapper.appendChild(label);
                                thumbWrapper.style.cursor = 'pointer';
                                thumbWrapper.onclick = function() { window.open(fileUrl, '_blank'); };
                            }
                            container.appendChild(thumbWrapper);
                        });
                    }
                } catch (e) {
                    container.innerHTML = '<p class="text-muted text-sm mb-0">' + emptyMessage + '</p>';
                }
            };

            renderAttachmentFiles(inputAttachments, attachmentsJson, 'Belum ada lampiran.');
            renderAttachmentFiles(inputRevisionAttachments, revisionAttachmentsJson, 'Belum ada lampiran revisi.');
        });
    }

    // Handle adding and removing petugas names
    const btnAddPetugas = document.getElementById('btn-add-petugas');
    const petugasNamesContainer = document.getElementById('petugas-names-container');

    if (btnAddPetugas) {
        btnAddPetugas.addEventListener('click', function() {
            const newRow = document.createElement('div');
            newRow.className = 'petugas-input-wrapper';
            newRow.innerHTML = `
                            <input type="text" class="form-control petugas-name-input" name="petugas_names[]" placeholder="Masukkan nama petugas">
                            <button class="btn btn-danger btn-remove-petugas" type="button">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        `;
            petugasNamesContainer.appendChild(newRow);

            // Update visibility of remove buttons
            updateRemoveButtonsVisibility();

            // Attach remove handler to new button
            const removeBtn = newRow.querySelector('.btn-remove-petugas');
            removeBtn.addEventListener('click', function() {
                newRow.remove();
                updateRemoveButtonsVisibility();
            });
        });
    }

    // Function to update remove buttons visibility
    function updateRemoveButtonsVisibility() {
        const removeButtons = document.querySelectorAll('.btn-remove-petugas');
        removeButtons.forEach(function(btn, index) {
            btn.style.display = removeButtons.length > 1 ? 'block' : 'none';
        });
    }

    // Attach remove handlers to initial remove buttons
    const initialRemoveButtons = document.querySelectorAll('.btn-remove-petugas');
    initialRemoveButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            btn.closest('.input-group').remove();
            updateRemoveButtonsVisibility();
        });
    });

    // Update remove buttons visibility on page load
    updateRemoveButtonsVisibility();

    $(document).ready(function() {
        const nonPeriodicTable = $('#list_petugas_non_periodic');
        if (nonPeriodicTable.length && !nonPeriodicTable.find('.pu-empty').length) {
            nonPeriodicTable.DataTable();
        }
    });
</script>
@endpush
@elseif ($dmenu == 'trpetd')
<style>
    .pu-wrap {
        padding-top: 12px;
        /* pull the page content further up to reduce hero visible height */
        margin-top: -160px;
    }

    @media (max-width: 768px) {
        .pu-wrap {
            /* mobile adjustment */
            margin-top: -80px;
        }
    }

    .daily-top-progress {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 20px 22px;
        margin-bottom: 16px;
    }

    .daily-top-progress h2 {
        font-weight: 700;
        color: #344767;
    }

    .daily-top-progress p {
        color: #67748e;
        margin-bottom: 0;
    }

    .pu-table-card {
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: none;
    }

    .daily-progress {
        height: 8px;
        background: #e9ecef;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 10px;
    }

    .daily-progress-fill {
        height: 100%;
        background: #5e72e4;
        transition: width 0.3s ease;
    }

    .daily-stats {
        display: flex;
        gap: 14px;
        margin-top: 8px;
        font-size: 0.85rem;
    }

    .daily-stat-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #67748e;
    }

    .daily-stat-number {
        font-weight: 700;
        color: #344767;
    }

    .daily-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e9ecef;
    }

    .daily-section-title {
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #344767;
    }

    .daily-section-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .daily-section-badge.today {
        background: #e8f0fe;
        color: #5e72e4;
    }

    .daily-section-badge.backlog {
        background: #fff3cd;
        color: #b27a00;
    }

    .daily-list {
        display: grid;
        gap: 8px;
    }

    .daily-item {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 14px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        transition: background-color 0.2s ease;
    }

    .daily-item:hover {
        background: #f8f9fa;
    }

    .daily-item.today {
        border-color: #dbe2ef;
        background: #ffffff;
    }

    .daily-item.backlog {
        border-color: #f2e6c9;
        background: #fffdf7;
    }

    .daily-item.completed {
        opacity: 0.75;
    }

    .daily-item-content {
        flex: 1;
    }

    .daily-title {
        font-weight: 600;
        color: #344767;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .daily-date-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #fff3cd;
        color: #b27a00;
    }

    .daily-status {
        font-size: 0.75rem;
        color: #67748e;
    }

    .daily-inline-progress {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 10px 12px;
        background: #f8f9fa;
    }

    .daily-inline-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #344767;
        margin-bottom: 6px;
    }

    .form-check-input:checked {
        background-color: #5e72e4;
        border-color: #5e72e4;
    }

    .pu-empty {
        padding: 24px;
        text-align: center;
        color: #67748e;
    }

    .toast-success {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        background: #ffffff;
        border-left: 4px solid #198754;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>
@php
// Use $user_login from controller (already passed to all views)
$currentUser = $user_login ?? auth()->user();
if (!$currentUser && session()->has('username')) {
$currentUser = \Illuminate\Support\Facades\DB::table('users')
->where('username', session('username'))
->first();
}

$currentUserId = $currentUser ? $currentUser->id : null;
$today = \Illuminate\Support\Carbon::today()->toDateString();
$isDailyInputClosed = now()->greaterThanOrEqualTo(\Illuminate\Support\Carbon::today()->setTime(19, 0));

$todayCompletedCount = 0;
$totalTodayCount = 0;

// Get current user role for assigned_role based filtering
$assignedRoleFilter = null;
if ($currentUser) {
$normalizedRoles = array_values(array_filter(explode(',', str_replace(' ', '', strtolower((string) ($currentUser->idroles ?? ''))))));
foreach ($normalizedRoles as $roleCode) {
if (str_starts_with($roleCode, 'ptg')) {
$assignedRoleFilter = $roleCode;
break;
}
}
}

$dailyTasksQuery = \Illuminate\Support\Facades\DB::table('ms_daily')
->where('is_active', '1');

// Apply role-based filter using assigned_role column
if ($assignedRoleFilter) {
$dailyTasksQuery->where('assigned_role', $assignedRoleFilter);
}

$dailyTasks = $dailyTasksQuery->orderBy('id')->get();

$taskIds = $dailyTasks->pluck('id');

// Always load today's logs for the visible tasks so we can detect completed items
$todayLogs = collect();
if ($taskIds->isNotEmpty()) {
$todayLogs = \Illuminate\Support\Facades\DB::table('rp_daily_log')
->where('work_date', $today)
->whereIn('daily_task_id', $taskIds)
->get()
->keyBy('daily_task_id');
}
$todayCompletedCount = $todayLogs->filter(function ($log) {
return strtolower($log->job_status ?? '') === 'completed';
})->count();

$totalTodayCount = $dailyTasks->count();

$progressPercent = $totalTodayCount > 0 ? round(($todayCompletedCount / $totalTodayCount) * 100) : 0;
@endphp
<div class="container-fluid py-4 pu-wrap">
    <div class="daily-top-progress">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h2 class="mb-1">Pekerjaan Daily</h2>
                <p class="text-sm">Checklist harian petugas.</p>
                <div class="daily-progress">
                    <div class="daily-progress-fill" style="width: {{ $progressPercent }}%;"></div>
                </div>
                <div class="daily-stats">
                    <div class="daily-stat-item">
                        <i class="fas fa-check-circle text-primary"></i>
                        <span class="daily-stat-number">{{ $todayCompletedCount }}/{{ $totalTodayCount }}</span>
                        <span>Selesai</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (session('message'))
    <div class="toast-success" id="toast-notification">
        <div class="d-flex align-items-center gap-2">
            <i class="fas {{ session('class') === 'danger' ? 'fa-times-circle text-danger' : 'fa-check-circle text-success' }}" style="font-size: 1.25rem;"></i>
            <div>
                <div style="font-weight: 600; color: #0f172a;">{{ session('class') === 'danger' ? 'Gagal!' : 'Berhasil!' }}</div>
                <div style="font-size: 0.875rem; color: #64748b;">{{ session('message') }}</div>
            </div>
        </div>
    </div>
    @endif

    <div class="card pu-table-card">
        <div class="card-body">
            <form method="POST" action="{{ route('daily-log.store') }}" id="daily-checklist-form">
                @csrf
                <input type="hidden" name="work_date" value="{{ $today }}">

                <div class="daily-inline-progress mb-3">
                    <div class="daily-inline-title">Progress Hari Ini</div>
                    <div class="daily-progress mt-0">
                        <div class="daily-progress-fill" style="width: {{ $progressPercent }}%;"></div>
                    </div>
                    <div class="daily-stats">
                        <div class="daily-stat-item">
                            <i class="fas fa-check-circle text-primary"></i>
                            <span class="daily-stat-number">{{ $todayCompletedCount }}/{{ $totalTodayCount }}</span>
                            <span>Selesai</span>
                        </div>
                    </div>
                </div>

                <div class="daily-section-header">
                    <span class="daily-section-title">Checklist Hari Ini</span>
                    <span class="daily-section-badge today">{{ $totalTodayCount }}</span>
                </div>
                @if ($isDailyInputClosed)
                <div class="alert alert-warning text-sm mb-3">
                    Checklist hari ini sudah ditutup pada jam 19:00. Pekerjaan yang belum dicentang dianggap tidak dikerjakan.
                </div>
                @endif
                <div class="daily-list">
                    @forelse ($dailyTasks as $task)
                    @php
                    $log = $todayLogs->get($task->id);
                    $isCompleted = $log && strtolower($log->job_status ?? '') === 'completed';
                    @endphp
                    @if (! $isCompleted)
                    <div class="daily-item today">
                        <div>
                            <div class="daily-title">{{ $task->job_description }}</div>
                            <div class="daily-status">Status: pending</div>
                        </div>
                        <div class="form-check form-switch mb-0">
                            <input type="hidden" name="daily_status_by_date[{{ $today }}][{{ $task->id }}]" value="pending">
                            <input class="form-check-input" type="checkbox"
                                name="daily_status_by_date[{{ $today }}][{{ $task->id }}]" value="completed"
                                id="daily-{{ $today }}-{{ $task->id }}" {{ $isDailyInputClosed ? 'disabled' : '' }}>
                            <label class="form-check-label" for="daily-{{ $today }}-{{ $task->id }}">Selesai</label>
                        </div>
                    </div>
                    @endif
                    @empty
                    <div class="pu-empty">Belum ada daily checklist.</div>
                    @endforelse
                </div>

                @if (false)
                <div class="daily-section-header mt-4">
                    <span class="daily-section-title">Belum Dicentang (3 Hari Terakhir)</span>
                    <span class="daily-section-badge backlog">{{ $backlogCount }}</span>
                </div>
                <div class="daily-list">
                    @foreach ($backlogEntries as $entry)
                    @php
                    $entryDateLabel = \Illuminate\Support\Carbon::parse($entry->work_date)->format('d M');
                    $statusLabel = $entry->status_label ?? 'pending';
                    @endphp
                    <div class="daily-item backlog">
                        <div>
                            <div class="daily-title">{{ $entry->job_description }}</div>
                            <div class="daily-status">Tanggal: {{ $entryDateLabel }} · Status: {{ $statusLabel }}</div>
                        </div>
                        <button type="button"
                            class="btn btn-sm btn-outline-primary rounded-circle backlog-update-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#updateLateModal"
                            data-task-id="{{ $entry->task_id }}"
                            data-work-date="{{ $entry->work_date }}"
                            data-job-desc="{{ e($entry->job_description) }}"
                            title="Update keterlambatan">
                            <i class="fas fa-pen"></i>
                        </button>
                        <!-- mark-missed button removed: feature integrated into update modal -->
                    </div>
                    @endforeach
                </div>
                @endif

                @if ($dailyTasks->isNotEmpty() && ! $isDailyInputClosed)
                <div class="mt-3 d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary" id="daily-save-button">
                        <span class="daily-save-text">Simpan Checklist</span>
                    </button>
                </div>
                @endif
            </form>
        </div>
    </div>
</div>

{{-- Modal Update Late Completion --}}
<div class="modal fade" id="updateLateModal" tabindex="-1" aria-labelledby="updateLateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateLateModalLabel">Update Pengerjaan Tertunda</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('daily-log.update-late-completion') }}" method="POST" id="updateLateForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Tanggal Seharusnya</label>
                        <input type="text" class="form-control" id="backlogWorkDateDisplay" disabled>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Deskripsi Pekerjaan</label>
                        <input type="text" class="form-control" id="backlogJobDescDisplay" disabled>
                    </div>
                    <input type="hidden" name="daily_task_id" id="backlogTaskId">
                    <input type="hidden" name="work_date" id="backlogWorkDate">
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="isMissed">
                        <label class="form-check-label" for="isMissed">Tidak dikerjakan</label>
                    </div>
                    <input type="hidden" name="action" id="updateAction" value="late">
                    <div class="mb-3" id="completedAtWrapper">
                        <label for="completedAt" class="form-label">Tanggal & Jam Selesai <span class="text-danger">*</span></label>
                        <input type="datetime-local" class="form-control" id="completedAt" name="completed_at">
                    </div>
                    <div class="mb-3">
                        <label for="alasanLate" class="form-label">Alasan</label>
                        <textarea class="form-control" id="alasanLate" name="alasan" rows="3" placeholder="Jelaskan alasan..."></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 dailyChecklistForm = document.getElementById('daily-checklist-form');
    if (dailyChecklistForm) {
        dailyChecklistForm.addEventListener('submit', function() {
            const saveButton = document.getElementById('daily-save-button');
            if (!saveButton) {
                return;
            }

            const saveText = saveButton.querySelector('.daily-save-text');
            saveButton.disabled = true;
            if (saveText) {
                saveText.textContent = 'Menyimpan...';
            }
        });
    }

    const toastNotification = document.getElementById('toast-notification');
    if (toastNotification) {
        setTimeout(() => {
            toastNotification.style.animation = 'slideIn 0.3s ease reverse';
            setTimeout(() => {
                toastNotification.style.display = 'none';
            }, 300);
        }, 3000);
    }

    document.querySelectorAll('.backlog-update-btn').forEach((button) => {
        button.addEventListener('click', function() {
            const taskId = this.getAttribute('data-task-id');
            const workDate = this.getAttribute('data-work-date');
            const jobDesc = this.getAttribute('data-job-desc');

            document.getElementById('backlogTaskId').value = taskId;
            document.getElementById('backlogWorkDate').value = workDate;
            document.getElementById('backlogWorkDateDisplay').value = new Date(workDate).toLocaleDateString('id-ID');
            document.getElementById('backlogJobDescDisplay').value = jobDesc;
            // reset modal fields
            document.getElementById('completedAt').value = '';
            document.getElementById('alasanLate').value = '';
            // ensure modal is in 'late' mode by default
            const isMissedCheckbox = document.getElementById('isMissed');
            const completedAtWrapper = document.getElementById('completedAtWrapper');
            const updateAction = document.getElementById('updateAction');
            if (isMissedCheckbox) {
                isMissedCheckbox.checked = false;
            }
            if (completedAtWrapper) {
                completedAtWrapper.style.display = '';
            }
            if (updateAction) {
                updateAction.value = 'late';
            }
            const completedAtEl = document.getElementById('completedAt');
            if (completedAtEl) {
                completedAtEl.setAttribute('required', 'required');
            }
        });
    });

    // Toggle 'Tidak dikerjakan' in update modal
    const isMissedCheckbox = document.getElementById('isMissed');
    const completedAtWrapper = document.getElementById('completedAtWrapper');
    const updateAction = document.getElementById('updateAction');
    if (isMissedCheckbox) {
        isMissedCheckbox.addEventListener('change', function() {
            if (this.checked) {
                if (completedAtWrapper) completedAtWrapper.style.display = 'none';
                if (updateAction) updateAction.value = 'missed';
                const completedAtEl = document.getElementById('completedAt');
                if (completedAtEl) completedAtEl.removeAttribute('required');
            } else {
                if (completedAtWrapper) completedAtWrapper.style.display = '';
                if (updateAction) updateAction.value = 'late';
                const completedAtEl = document.getElementById('completedAt');
                if (completedAtEl) completedAtEl.setAttribute('required', 'required');
            }
        });
    }

    // Confirm before submitting when marking as missed, and prevent double submit
    const updateLateForm = document.getElementById('updateLateForm');
    if (updateLateForm) {
        updateLateForm.addEventListener('submit', function(e) {
            const actionVal = (document.getElementById('updateAction') || {}).value || 'late';
            e.preventDefault();

            const doSubmit = () => {
                const submitBtn = updateLateForm.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.textContent = actionVal === 'missed' ? 'Menandai...' : 'Menyimpan...';
                }
                updateLateForm.submit();
            };

            if (actionVal === 'missed') {
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Anda yakin ingin menandai pekerjaan ini sebagai tidak dikerjakan?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, tandai',
                    cancelButtonText: 'Batal',
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmit();
                    }
                });
            } else {
                doSubmit();
            }
        });
    }
</script>
@endpush
@elseif ($dmenu == 'trhdly')
@push('css')
<style>
    /* pull HRD daily content up under the cover image (reduced) */
    .pu-wrap {
        padding-top: 12px;
        /* pull HRD daily content further up to reduce hero visible height */
        margin-top: -160px;
    }

    @media (max-width: 768px) {
        .pu-wrap {
            margin-top: -80px;
        }
    }

    .hrd-daily-hero {
        background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ecfeff 100%);
        border-radius: 18px;
        padding: 24px 28px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
        margin-bottom: 20px;
    }

    .hrd-daily-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .hrd-daily-status.completed {
        background: rgba(34, 197, 94, 0.16);
        color: #15803d;
    }

    .hrd-daily-status.pending {
        background: rgba(148, 163, 184, 0.2);
        color: #475569;
    }

    .hrd-daily-status.not-completed {
        background: rgba(239, 68, 68, 0.16);
        color: #b91c1c;
    }

    .hrd-today-summary {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        flex-wrap: wrap;
    }

    .hrd-today-date {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #0f172a;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        margin-top: -1px;
    }

    .hrd-history-card {
        border-radius: 18px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    }

    .hrd-history-card .card-body {
        padding: 1rem;
    }

    .hrd-history-note {
        max-width: 360px;
        white-space: normal;
        line-height: 1.45;
    }

    .hrd-history-meta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .hrd-history-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #eef2ff;
        color: #1e3a8a;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .hrd-history-chip.incomplete {
        background: #fef2f2;
        color: #b91c1c;
    }

    .hrd-history-day-card {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .hrd-history-day-card+.hrd-history-day-card {
        margin-top: 16px;
    }

    .hrd-history-day-header {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding: 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .hrd-history-day-stats {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    .hrd-history-progress-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        min-width: 260px;
    }

    .hrd-history-progress {
        flex: 1;
        height: 8px;
        background: #fee2e2;
        border-radius: 999px;
        overflow: hidden;
    }

    .hrd-history-progress-fill {
        height: 100%;
        background: #22c55e;
        border-radius: inherit;
    }

    .hrd-history-progress-label {
        min-width: 42px;
        text-align: right;
        font-size: 0.75rem;
        font-weight: 700;
        color: #0f172a;
    }

    .hrd-history-status {
        display: inline-flex;
        justify-content: center;
        min-width: 96px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .hrd-history-status.completed {
        background: rgba(34, 197, 94, 0.16);
        color: #15803d;
    }

    .hrd-history-status.not-completed {
        background: rgba(239, 68, 68, 0.16);
        color: #b91c1c;
    }

    .hrd-history-filter {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px 14px;
        margin-bottom: 16px;
        display: none;
    }

    .hrd-history-filter-form {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        align-items: center !important;
        width: 100%;
    }

    .hrd-history-filter-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
        flex: 0 0 auto;
    }

    .hrd-history-filter .form-label {
        margin-bottom: 0;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #0f172a;
        line-height: 1;
        letter-spacing: 0.01em;
        white-space: nowrap;
        flex: 0 0 auto !important;
    }

    .hrd-history-filter .form-control,
    .hrd-history-filter .form-select {
        min-height: 36px;
        height: 36px;
        border-radius: 10px;
        padding: .3rem .65rem;
        width: 140px;
        flex: 0 0 140px !important;
    }

    .hrd-history-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-left: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .hrd-history-actions .btn {
        min-height: 36px;
        height: 36px;
        border-radius: 10px;
        white-space: nowrap;
        padding-inline: 1rem;
    }

    .hrd-history-table-wrap {
        margin-top: 10px;
    }

    @media (max-width: 768px) {
        .hrd-history-filter-form {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .hrd-history-filter-group {
            flex-direction: column;
            flex: 0 0 calc(50% - 8px);
        }

        .hrd-history-filter .form-label {
            flex: 0 0 auto;
        }

        .hrd-history-filter .form-control,
        .hrd-history-filter .form-select {
            width: 100%;
            flex: 1 1 auto;
        }

        .hrd-history-actions {
            flex: 0 0 100%;
            margin-left: 0;
            margin-top: 8px;
        }
    }

    /* History table fixed layout and column width rules */
    .hrd-history-table {
        table-layout: fixed;
        width: 100%;
    }

    .hrd-daily-table th,
    .hrd-daily-table td,
    .hrd-history-table th,
    .hrd-history-table td {
        text-align: center;
        vertical-align: middle;
    }

    .hrd-daily-table tbody tr,
    .hrd-daily-table tbody tr:nth-of-type(odd),
    .hrd-daily-table tbody tr:nth-of-type(even) {
        background-color: #ffffff;
    }

    .hrd-daily-table th:nth-child(4),
    .hrd-daily-table td:nth-child(4),
    .hrd-history-table th:nth-child(6),
    .hrd-history-table td:nth-child(6) {
        text-align: center !important;
    }

    .hrd-daily-table td:nth-child(4) .hrd-daily-status {
        display: inline-flex;
        justify-content: center;
        margin: 0 auto;
    }

    .hrd-daily-status {
        margin-left: auto;
        margin-right: auto;
    }

    .hrd-history-table col.no {
        width: 5%;
    }

    .hrd-history-table col.tanggal {
        width: 20%;
    }

    .hrd-history-table col.deskripsi {
        width: 30%;
    }

    .hrd-history-table col.petugas {
        width: 18%;
    }

    .hrd-history-table col.catatan {
        width: 27%;
    }

    .hrd-history-table th:nth-child(6),
    .hrd-history-table td:nth-child(6) {
        /* data cells are muted and italic */
        color: #6c757d;
        font-style: italic;
    }

    .hrd-history-note {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .hrd-history-table td:nth-child(2) {
        white-space: nowrap;
    }
</style>
@endpush
@php
$today = $today ?? \Illuminate\Support\Carbon::today()->toDateString();
$tasks = $tasks ?? collect();
$todayLogs = $todayLogs ?? collect();
$lastCompleted = $lastCompleted ?? collect();
$historyLogs = $historyLogs ?? collect();
$historyDays = $historyDays ?? collect();
$totalTodayCount = $tasks->count();
$todayCompletedCount = $todayLogs->filter(function ($log) {
return strtolower($log->job_status ?? '') === 'completed';
})->count();
$progressPercent = $totalTodayCount > 0 ? round(($todayCompletedCount / $totalTodayCount) * 100) : 0;
$historyCompletedCount = $historyDays->sum('completed_count');
$historyNotCompletedCount = $historyDays->sum('not_completed_count');
@endphp
<div class="container-fluid py-4">
    <div class="card" style="border-radius: 18px; border: 1px solid #e2e8f0; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);">
        <div class="card-body">
            {{-- Filter Petugas --}}
            <label class="form-label text-xs fw-bold text-uppercase mb-1" style="color: #0f172a;">Petugas</label>
            <form method="GET" action="{{ url('hrd/daily') }}" class="d-flex gap-2 mb-3 flex-wrap align-items-center">
                <select class="form-select form-select-sm" name="history_role" style="width: 180px; border-radius: 10px; height: 36px;">
                    <option value="">-- Semua Petugas --</option>
                    <option value="ptgoff" {{ $historyRole === 'ptgoff' ? 'selected' : '' }}>Petugas Office</option>
                    <option value="ptgspu" {{ $historyRole === 'ptgspu' ? 'selected' : '' }}>Petugas PU</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm" style="height: 36px; border-radius: 10px;">
                    <i class="fas fa-search"></i> Filter
                </button>
                <a href="{{ url('hrd/daily') }}" class="btn btn-secondary btn-sm" style="height: 36px; border-radius: 10px;">
                    <i class="fas fa-redo"></i> Reset
                </a>
            </form>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="hrd-today-summary">
                    <div>
                        <div class="text-uppercase text-xs fw-bold" style="color: #0f172a;">Progress Hari Ini</div>
                        <div style="color: #64748b;">{{ $todayCompletedCount }}/{{ $totalTodayCount }} selesai</div>
                    </div>
                    <span class="hrd-today-date">
                        <i class="fas fa-calendar-day"></i>
                        {{ \Illuminate\Support\Carbon::parse($today)->format('d-m-Y') }}
                    </span>
                </div>
                <div class="hrd-daily-status {{ $progressPercent >= 100 ? 'completed' : 'pending' }}">
                    {{ $progressPercent }}%
                </div>
            </div>
            <div class="progress mb-4" style="height: 8px;">
                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $progressPercent }}%;"></div>
            </div>

            <div class="table-responsive">
                <table id="list_trhdly" class="table display align-items-center mb-0 hrd-daily-table">
                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                        <tr>
                            <th class="text-sm">Deskripsi</th>
                            <th class="text-sm">Petugas</th>
                            <th class="text-sm text-center">Status Hari Ini</th>
                            <th class="text-sm">Terakhir Selesai</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($tasks as $task)
                        @php
                        $log = $todayLogs->get($task->id);
                        $isCompleted = $log && strtolower($log->job_status ?? '') === 'completed';
                        $last = data_get($lastCompleted->get($task->id), 'last_done');
                        // Prefer showing an employee full name for the role if available
                        $assignedRoleCode = strtolower(trim((string) ($task->assigned_role ?? '')));
                        $roleLabelFallback = [
                        'ptgoff' => 'Petugas Office',
                        'ptgspu' => 'Petugas PU',
                        ];
                        $petugasName = $roleUserMap[$assignedRoleCode] ?? ($roleLabelFallback[$assignedRoleCode] ?? ($task->assigned_role ?? '-'));
                        @endphp
                        <tr>
                            <td class="text-sm">{{ $task->job_description }}</td>
                            <td class="text-sm">{{ $petugasName }}</td>
                            <td class="text-sm text-center" style="text-align: center !important;">
                                <span class="hrd-daily-status {{ $isCompleted ? 'completed' : 'not-completed' }}">
                                    {{ $isCompleted ? 'Selesai' : 'Tidak Selesai' }}
                                </span>
                            </td>
                            <td class="text-sm">{{ $last ? \Illuminate\Support\Carbon::parse($last)->format('d-m-Y H:i:s') : '-' }}</td>
                        </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card mt-4 hrd-history-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
                <div>
                    <div class="text-uppercase text-xs fw-bold" style="color: #0f172a;">Riwayat Pekerjaan Daily</div>
                    <div style="color: #64748b;">Riwayat pekerjaan daily 7 hari terakhir sampai hari sebelumnya</div>
                </div>
                <div class="hrd-history-meta">
                    <span class="hrd-history-chip">
                        <i class="fas fa-check-circle"></i>
                        {{ $historyCompletedCount }} Selesai
                    </span>
                    <span class="hrd-history-chip incomplete text-center" style="justify-content: center;">
                        <i class="fas fa-times-circle"></i>
                        {{ $historyNotCompletedCount }} Tidak Selesai
                    </span>
                </div>
            </div>

            {{-- Filter Section --}}
            <div class="hrd-history-filter mb-3">
                <form method="GET" action="{{ url('hrd/daily') }}" class="row">
                    <div class="col-md-3">
                        <label class="form-label">Petugas</label>
                        <select class="form-select" name="history_role">
                            <option value="">-- Semua Petugas --</option>
                            <option value="ptgoff" {{ $historyRole === 'ptgoff' ? 'selected' : '' }}>Petugas Office</option>
                            <option value="ptgspu" {{ $historyRole === 'ptgspu' ? 'selected' : '' }}>Petugas PU</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tanggal Mulai</label>
                        <input type="date" class="form-control" name="history_date_from" value="{{ $historyDateFrom ?? '' }}" />
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tanggal</label>
                        <input type="date" class="form-control" name="history_date_to" value="{{ $historyDateTo ?? '' }}" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">&nbsp;</label>
                        <div class="hrd-history-actions justify-content-start gap-2">
                            <button type="submit" class="btn btn-primary btn-sm" style="flex: 1; max-width: 120px;">
                                <i class="fas fa-search"></i> Filter
                            </button>
                            <a href="{{ url('hrd/daily') }}" class="btn btn-secondary btn-sm" style="flex: 1; max-width: 120px;">
                                <i class="fas fa-redo"></i> Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>

            <div class="hrd-history-table-wrap">
                @forelse ($historyDays as $day)
                <div class="hrd-history-day-card">
                    <div class="hrd-history-day-header">
                        <div>
                            <div class="text-uppercase text-xs fw-bold" style="color: #0f172a;">
                                {{ \Illuminate\Support\Carbon::parse($day->date)->format('d-m-Y') }}
                            </div>
                            <div class="text-sm" style="color: #64748b;">{{ $day->completed_count }}/{{ $day->total_count }} selesai</div>
                        </div>
                        <div>
                            <div class="hrd-history-day-stats">
                                <span class="hrd-history-chip">
                                    <i class="fas fa-check-circle"></i>
                                    {{ $day->completed_count }} Selesai
                                </span>
                                <span class="hrd-history-chip incomplete">
                                    <i class="fas fa-times-circle"></i>
                                    {{ $day->not_completed_count }} Tidak Selesai
                                </span>
                            </div>
                            <div class="hrd-history-progress-wrap">
                                <div class="hrd-history-progress">
                                    <div class="hrd-history-progress-fill" style="width: {{ $day->progress_percent }}%;"></div>
                                </div>
                                <span class="hrd-history-progress-label">{{ $day->progress_percent }}%</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0 hrd-history-table">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-sm">Deskripsi</th>
                                    <th class="text-sm">Petugas</th>
                                    <th class="text-sm">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($day->items as $history)
                                @php
                                $assignedRoleCode = strtolower(trim((string) ($history->assigned_role ?? '')));
                                $roleLabelFallback = [
                                'ptgoff' => 'Petugas Office',
                                'ptgspu' => 'Petugas PU',
                                ];
                                $petugasName = $roleUserMap[$assignedRoleCode] ?? ($roleLabelFallback[$assignedRoleCode] ?? ($history->assigned_role ?? '-'));
                                $isHistoryCompleted = $history->status === 'completed';
                                @endphp
                                <tr>
                                    <td class="text-sm">{{ $history->job_description }}</td>
                                    <td class="text-sm">{{ $petugasName }}</td>
                                    <td class="text-sm text-center">
                                        <span class="hrd-history-status {{ $isHistoryCompleted ? 'completed' : 'not-completed' }}">
                                            {{ $isHistoryCompleted ? 'Selesai' : 'Tidak Selesai' }}
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="3" class="text-center text-muted">Tidak ada tugas daily.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @empty
                <div class="pu-empty">Belum ada riwayat pekerjaan.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@else
@if ($dmenu != 'trhis')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-{{ $colomh > 1 ? '4' : '3' }}">
            <div class="row mb-2 mx-1">
                <div class="card" style="min-height: 650px;">
                    <div class="card-header">
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_header">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        {{-- retrieve table header --}}
                                        @foreach ($table_header_h as $header_h)
                                        <th>{{ $header_h->alias }}</th>
                                        @endforeach
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail_h as $detail_h)
                                    @php
                                    $primary = '';
                                    foreach ($table_primary_h as $p) {
                                    $primary == ''
                                    ? ($primary = $detail_h->{$p->field})
                                    : ($primary = $primary . ':' . $detail_h->{$p->field});
                                    }
                                    @endphp
                                    <tr>
                                        @foreach ($table_header_h as $field_h)
                                        @php
                                        $string = $field_h->field;
                                        @endphp
                                        {{-- field type join --}}
                                        @if ($field_h->type == 'join')
                                        <td
                                            class="text-sm font-weight-{{ $field_h->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field_h->query != '')
                                            @php
                                            $query =
                                            $field_h->query .
                                            "'" .
                                            $detail_h->$string .
                                            "'";
                                            $data_query = DB::select($query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5002</b><br />
                                            {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                            @endforeach
                                            @endif
                                        </td>
                                        {{-- field type enum --}}
                                        @elseif ($field_h->type == 'enum')
                                        <td
                                            class="text-sm font-weight-{{ $field_h->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field_h->query != '')
                                            @php
                                            $data_query = DB::select($field_h->query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5016</b><br />
                                            {{ $detail_h->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                            @endforeach
                                            @endif
                                        </td>
                                        @else
                                        <td
                                            class="text-sm font-weight-{{ $field_h->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{ $detail_h->$string }}
                                        </td>
                                        @endif
                                        @endforeach
                                        <td class="text-sm font-weight-normal">
                                            {{-- button detail --}}
                                            <button type="button" class="btn btn-primary mb-0 py-1 px-3"
                                                title="View Data"
                                                onclick="detail('{{ encrypt($primary) }}','{{ $gmenuid }}','{{ $dmenu }}','{{ $detail_h->$string }}')">
                                                <i class="fas fa-info-circle"></i> </i><span
                                                    class="font-weight-bold">
                                                    Detail</span>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-{{ $colomh > 1 ? '8' : '9' }}">
            <div class="row mx-1">
                <div class="card" style="min-height: 650px;">
                    <div class="card-header">
                        <h5 class="mb-0" id="label_detail">List Detail</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    {{-- alert --}}
                    @include('components.alert')
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_detail">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Action</th>
                                        {{-- retrieve table header --}}
                                        @foreach ($table_header_d as $header_d)
                                        <th>{{ $header_d->alias }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- retrieve table detail --}}
                                    @foreach ($table_detail_d as $detail)
                                    @php
                                    $primary = '';
                                    foreach ($table_primary_h as $h) {
                                    $primary == ''
                                    ? ($primary = $detail->{$h->field})
                                    : ($primary = $primary . ':' . $detail->{$h->field});
                                    }
                                    foreach ($table_primary_d as $p) {
                                    $primary == ''
                                    ? ($primary = $detail->{$p->field})
                                    : ($primary = $primary . ':' . $detail->{$p->field});
                                    }
                                    @endphp
                                    <tr {{ ($detail->isactive ?? $detail->is_active ?? '1') == '0' ? 'style=background-color:#ffe9ed;' : '' }}>
                                        <td class="text-sm font-weight-normal">
                                            <button type="submit" class="btn btn-primary mb-0 py-1 px-2"
                                                title="View Data"
                                                onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($primary)) }}'">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            {{-- check authorize edit --}}
                                            @if ($authorize->edit == '1')
                                            {{-- button edit --}}
                                            <button type="button" class="btn btn-warning mb-0 py-1 px-2"
                                                title="Edit Data"
                                                onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($primary)) }}'">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            @endif
                                            {{-- check authorize delete --}}
                                            @if ($authorize->delete == '1')
                                            <form
                                                onsubmit="return deleteData(event,'{{ $primary }}','Hapus')"
                                                action="{{ url($url_menu . '/' . encrypt($primary)) }}"
                                                method="POST" style="display: inline">
                                                @csrf
                                                @method('DELETE')
                                                {{-- button delete --}}
                                                <button type="submit" class="btn btn-danger mb-0 py-1 px-2"
                                                    title="Hapus Data">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                        </td>
                                        {{-- retrieve table detail --}}
                                        @foreach ($table_header_d as $field)
                                        @php
                                        $string = $field->field;
                                        @endphp
                                        {{-- field type enum --}}
                                        @if ($field->type == 'enum')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field->query != '')
                                            @php
                                            $data_query = DB::select($field->query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5130</b><br />
                                            {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                            @endforeach
                                            @endif
                                        </td>
                                        {{-- field type file --}}
                                        @elseif ($field->type == 'file')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($detail->$string)
                                            <a target="_blank"
                                                class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                </i>
                                                {{ $field->alias }}</a>
                                            @endif
                                        </td>
                                        {{-- field type image --}}
                                        @elseif($field->type == 'image')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            <span class="my-2 text-xs">
                                                <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                    alt="image" style="height: 35px;"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#imageModal{{ $field->field }}">
                                            </span>
                                            <span
                                                style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                            </span>
                                            <!-- Modal -->
                                            <div class="modal fade" id="imageModal{{ $field->field }}"
                                                tabindex="-1" role="dialog"
                                                aria-labelledby="imageModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered"
                                                    role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageModalLabel">
                                                                Preview Image
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                id="preview" alt="image"
                                                                class="w-100 border-radius-lg shadow-sm">
                                                        </div>
                                                        <div class="modal-footer">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        {{-- field type join --}}
                                        @elseif($field->type == 'join')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            @if ($field->query != '')
                                            @php
                                            $query =
                                            $field->query . "'" . $detail->$string . "'";
                                            $data_query = DB::select($query);
                                            @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5199</b><br />
                                            @if ($field->default != 'image')
                                            {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                            @else
                                            <span class="my-2 text-xs">
                                                <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                    alt="image" style="height: 40px;"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#imageModalJoin{{ $primary }}">
                                            </span>
                                            <span
                                                style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                            </span>
                                            <!-- Modal -->
                                            <div class="modal fade"
                                                id="imageModalJoin{{ $primary }}"
                                                tabindex="-1" role="dialog"
                                                aria-labelledby="imageModalJoinLabel"
                                                aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered"
                                                    role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title"
                                                                id="imageModalJoinLabel">
                                                                Preview Image
                                                            </h5>
                                                            <button type="button"
                                                                class="btn-close"
                                                                data-bs-dismiss="modal"
                                                                aria-label="Close">
                                                                <span
                                                                    aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                id="preview" alt="image"
                                                                class="w-100 border-radius-lg shadow-sm">
                                                        </div>
                                                        <div class="modal-footer">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                            @endforeach
                                            @endif
                                        </td>
                                        {{-- field type currency --}}
                                        @elseif ($field->type == 'currency')
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub) }}
                                        </td>
                                        @else
                                        <td
                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                            {{ $detail->$string }}
                                        </td>
                                        @endif
                                        @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endif
{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection
@push('js')
<script>
    let columnAbjad = '';
    $(document).ready(function() {
        let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
        let columnNames = '';

        for (let index = 0; index < numColumns; index++) {
            columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
            if (columnNames == 'Status' || columnNames == 'status') {
                columnAbjad = String.fromCharCode(65 + index);
            }
        }
    });
    //set table header into datatables
    $('#list_header').DataTable({
        "language": {
            "search": "Cari :",
            "lengthMenu": "Tampilkan _MENU_ baris",
            "zeroRecords": "Maaf - Data tidak ada",
            "info": "Data _START_ - _END_ dari _TOTAL_",
            "infoEmpty": "Tidak ada data",
            "infoFiltered": "(pencarian dari _MAX_ data)"
        },
        "pageLength": 15,
        responsive: true,
        dom: 'frtip'
    });
    //set table detail into datatables
    $('#list_detail').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "pageLength": 15,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [{
                            text: '<i class="fas fa-plus me-1 text-lg btn-add"> </i><span class="font-weight-bold"> Tambah'
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                            autoFilter: true,
                            sheetName: 'Exported data',
                            // title: 'Nama File Excel',
                            customize: function(xlsx) {
                                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                // Loop over the cells in column
                                sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                                    // Get the value
                                    let cell = row.querySelector('is t');
                                    if (cell && cell.textContent === 'Not Active') {
                                        row.setAttribute('s', '10'); //red background
                                    }
                                });
                            },
                            exportOptions: {
                                @push('js')
                                @if($dmenu != 'trreq' && $dmenu != 'trhrd')
                                <script>
                                let columnAbjad = '';
                                $(document).ready(function() {
                                    let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
                                    let columnNames = '';

                                    for (let index = 0; index < numColumns; index++) {
                                        columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                                        if (columnNames == 'Status' || columnNames == 'status') {
                                            columnAbjad = String.fromCharCode(65 + index);
                                        }
                                    }
                                });
                                //set table header into datatables
                                $('#list_header').DataTable({
                                    "language": {
                                        "search": "Cari :",
                                        "lengthMenu": "Tampilkan _MENU_ baris",
                                        "zeroRecords": "Maaf - Data tidak ada",
                                        "info": "Data _START_ - _END_ dari _TOTAL_",
                                        "infoEmpty": "Tidak ada data",
                                        "infoFiltered": "(pencarian dari _MAX_ data)"
                                    },
                                    "pageLength": 15,
                                    responsive: true,
                                    dom: 'frtip'
                                });
                                //set table detail into datatables
                                $('#list_detail').DataTable({
                                    "language": {
                                        "search": "Cari :",
                                        "lengthMenu": "Tampilkan _MENU_ baris",
                                        "zeroRecords": "Maaf - Data tidak ada",
                                        "info": "Data _START_ - _END_ dari _TOTAL_",
                                        "infoEmpty": "Tidak ada data",
                                        "infoFiltered": "(pencarian dari _MAX_ data)"
                                    },
                                    "pageLength": 15,
                                    responsive: true,
                                    dom: 'Bfrtip',
                                    buttons: [{
                                            text: '<i class="fas fa-plus me-1 text-lg btn-add"> </i><span class="font-weight-bold"> Tambah'
                                        },
                                        {
                                            extend: 'excelHtml5',
                                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                                            autoFilter: true,
                                            sheetName: 'Exported data',
                                            // title: 'Nama File Excel',
                                            customize: function(xlsx) {
                                                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                                // Loop over the cells in column
                                                sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                                                    // Get the value
                                                    let cell = row.querySelector('is t');
                                                    if (cell && cell.textContent === 'Not Active') {
                                                        row.setAttribute('s', '10'); //red background
                                                    }
                                                });
                                            },
                                            exportOptions: {
                                                columns: ':visible:not(:last-child)'
                                            },
                                        },
                                        {
                                            extend: 'pdfHtml5',
                                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                                            exportOptions: {
                                                columns: ':visible:not(:last-child)'
                                            },
                                        },
                                        {
                                            extend: 'print',
                                            text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                                            exportOptions: {
                                                columns: ':visible:not(:last-child)'
                                            },
                                        },
                                    ]
                                });
                                //set color button datatables
                                $('.dt-button').addClass('btn btn-secondary');
                                $('.dt-button').removeClass('dt-button');
                                //setting button add
                                var id = "{{ Session::has('idtrans') ? encrypt(Session::get('idtrans')) : '' }}";
                                var btnadd = $('.btn-add').parents('.btn-secondary');
                                btnadd.removeClass('btn-secondary');
                                btnadd.addClass('btn btn-primary');
                                btnadd.attr('onclick', "window.location='{{ URL::to($url_menu . '/add/') }}" + "/" + id +
                                    "'");
                                //check authorize button datatables
                                <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5450</b><br />
<br />
<b>Warning</b>:  Attempt to read property "add" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5450</b><br />
                                <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5451</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5451</b><br />
                                <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5452</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5452</b><br />
                                <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5453</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5453</b><br />
                                // function detail ajax
                                function detail(id, gmenu, dmenu) {
                                    $.ajax({
                                        url: "{{ url($url_menu) . '/ajax' }}",
                                        type: "GET",
                                        dataType: "JSON",
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        },
                                        data: {
                                            id: id,
                                            gmenu: gmenu,
                                            dmenu: dmenu
                                        },
                                        success: function(data) {
                                            // set title detail
                                            $('#label_detail').text('List Detail -> ' + data['ajaxid']);
                                            // reset datatables
                                            $('#list_detail').DataTable().destroy();
                                            $('#list_detail tbody').remove();
                                            // retrieve data into tabel
                                            $('#list_detail').append('<tbody></tbody>');
                                            var i = 1;
                                            var result = eval(data['table_detail_d_ajax']);
                                            //looping data detail
                                            for (var index in result) {
                                                var result1 = eval(data['table_primary_d_ajax']);
                                                var result2 = eval(data['table_header_d_ajax']);
                                                var primary = '';
                                                for (var index1 in result1) {
                                                    // initialized primary key
                                                    primary == '' ? (primary = result[index][result1[index1].field]) : (primary =
                                                        primary + ':' + result[index][result1[index1].field]);
                                                }
                                                // set variable columns
                                                var vtd = `
                                                                <td class="text-sm font-weight-normal">
                                                                    <button type="submit" class="btn btn-primary mb-0 py-1 px-2"
                                                                        title="View Data"
                                                                        onclick="window.location='{{ url($url_menu . '/show/') }}` + '/' + data[
                                                        'encrypt_primary'][
                                                        index
                                                    ] + `'">
                                                                        <i class="fas fa-eye"></i>
                                                                    </button>
                                                                    {{-- check authorize edit --}}
                                                                    @if ($authorize->edit == '1')
                                                                        {{-- button edit --}}
                                                                        <button type="button" class="btn btn-warning mb-0 py-1 px-2"
                                                                            title="Edit Data"
                                                                            onclick="window.location='{{ url($url_menu . '/edit/') }}` + '/' +
                                                    data[
                                                        'encrypt_primary'][
                                                        index
                                                    ] + `'">
                                                                            <i class="fas fa-edit"></i>
                                                                        </button>
                                                                    @endif
                                                                    {{-- check authorize delete --}}
                                                                    @if ($authorize->delete == '1')
                                                                        <form onsubmit="return deleteData(event,'` + primary + `','Hapus')"
                                                                            action="{{ url($url_menu . '/') }}` + '/' + data['encrypt_primary'][
                                                        index
                                                    ] + `"
                                                                            method="POST" style="display: inline">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="submit" class="btn btn-danger mb-0 py-1 px-2"
                                                                                title="Hapus Data">
                                                                                <i class="fas fa-trash"></i>
                                                                            </button>
                                                                        </form>
                                                                    @endif
                                                                </td>
                                                                `;
                                                for (var index2 in result2) {
                                                    var primary_color = result2[index2].primary == '1' ? 'bold text-dark' : 'normal';
                                                    var vtex = result[index][result2[index2].field];
                                                    if (result2[index2].type == 'enum') {
                                                        if (result2[index2].query != '') {
                                                            var data_enum = eval(data[result2[index2].field]);
                                                            for (var index3 in data_enum) {
                                                                if (result[index][result2[index2].field] == data_enum[index3].value) {
                                                                    vtex = data_enum[index3].name;
                                                                }
                                                            }
                                                        }
                                                    }
                                                    vtd += `
                                                            <td class="text-sm font-weight-` + primary_color + `">` + vtex + `</td>
                                                        `;
                                                }
                                                // set row data in table
                                                $('#list_detail tbody').append('<tr>' + vtd + '</tr>');
                                            }
                                            // reset datatables
                                            $('#list_detail').DataTable({
                                                "language": {
                                                    "search": "Cari :",
                                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                                    "zeroRecords": "Maaf - Data tidak ada",
                                                    "info": "Data _START_ - _END_ dari _TOTAL_",
                                                    "infoEmpty": "Tidak ada data",
                                                    "infoFiltered": "(pencarian dari _MAX_ data)"
                                                },
                                                "pageLength": 15,
                                                responsive: true,
                                                dom: 'Bfrtip',
                                                buttons: [{
                                                        text: '<i class="fas fa-plus me-1 text-lg btn-add"> </i><span class="font-weight-bold"> Tambah'
                                                    },
                                                    {
                                                        extend: 'excelHtml5',
                                                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                                                        autoFilter: true,
                                                        sheetName: 'Exported data',
                                                        // title: 'Nama File Excel',
                                                        customize: function(xlsx) {
                                                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                                            // Loop over the cells in column
                                                            sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                                                                // Get the value
                                                                let cell = row.querySelector('is t');
                                                                if (cell && cell.textContent === 'Not Active') {
                                                                    row.setAttribute('s', '10'); //red background
                                                                }
                                                            });
                                                        },
                                                        exportOptions: {
                                                            columns: ':visible:not(:last-child)'
                                                        },
                                                    },
                                                    {
                                                        extend: 'pdfHtml5',
                                                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                                                        exportOptions: {
                                                            columns: ':visible:not(:last-child)'
                                                        },
                                                    },
                                                    {
                                                        extend: 'print',
                                                        text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                                                        exportOptions: {
                                                            columns: ':visible:not(:last-child)'
                                                        },
                                                    },
                                                ]
                                            });
                                            //set color button datatables
                                            $('.dt-button').addClass('btn btn-secondary');
                                            $('.dt-button').removeClass('dt-button');
                                            //setting button add
                                            var id = "{{ Session::has('idtrans') ? encrypt(Session::get('idtrans')) : '' }}";
                                            var btnadd = $('.btn-add').parents('.btn-secondary');
                                            btnadd.removeClass('btn-secondary');
                                            btnadd.addClass('btn btn-primary');
                                            btnadd.attr('onclick', "window.location='{{ URL::to($url_menu . '/add/') }}" +
                                                "/" + id + "'");
                                            //check authorize button datatables
                                            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5613</b><br />
<br />
<b>Warning</b>:  Attempt to read property "add" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5613</b><br />
                                            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5614</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5614</b><br />
                                            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5615</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5615</b><br />
                                            <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5616</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5616</b><br />
                                        }
                                    })
                                }
</script>
@endif
@endpush
{
extend: 'print',
text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
    exportOptions: {
    columns: ':visible:not(:last-child)'
    },
    },
    ]
    }).draw();
    //set color button datatables
    $('.dt-button').addClass('btn btn-secondary');
    $('.dt-button').removeClass('dt-button');
    //setting button add
    var btnadd = $('.btn-add').parents('.btn-secondary');
    btnadd.removeClass('btn-secondary');
    btnadd.addClass('btn btn-primary');
    btnadd.attr('onclick', "window.location='{{ URL::to($url_menu . '/add/') }}" + "/" +
    id +
    "'");
    //check authorize button datatables
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5643</b><br />
<br />
<b>Warning</b>:  Attempt to read property "add" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5643</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5644</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5644</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5645</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5645</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5646</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/list.blade.php</b> on line <b>5646</b><br />
    },
    error: function(jqXHR, textStatus, errorThrown) {
    Swal.fire({
    title: 'Sorry!',
    text: 'Error Get data!',
    icon: 'error',
    confirmButtonColor: '#3085d6'
    });
    }
    });
    }
    //function delete
    function deleteData(event, name, msg) {
    event.preventDefault(); // Prevent default form submission
    Swal.fire({
    title: 'Konfirmasi',
    text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: `Ya, ${msg}`,
    cancelButtonText: 'Batal',
    confirmButtonColor: '#028284'
    }).then((result) => {
    if (result.isConfirmed) {
    // Find the closest form element and submit it manually
    event.target.closest('form').submit();
    }
    });
    }
    // function currency
    function currencyFormat(nominal, decimal = 0, prefix = 'Rp.') {
    return prefix + ' ' + parseFloat(nominal).toFixed(decimal).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
    </script>
    @endpush