@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card mx-4 shadow-lg">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu) }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card sec-card mb-4">
                    <div class="card-body">
                        <p class="text-uppercase mb-1 text-sm">Edit Penilaian</p>
                        <div class="text-muted mb-3 text-xs">
                            Periode Aktif:
                            <strong>{{ date('d M Y', strtotime($period->start_date)) }} -
                                {{ date('d M Y', strtotime($period->end_date)) }}</strong>
                        </div>
                        <hr class="horizontal dark my-3">
                        @include('components.alert')

                        @php
                            $isLocked = strtolower($period->status ?? '') === 'locked';
                        @endphp
                        @if ($hasLateUnlock ?? false)
                            <div class="alert alert-warning d-flex align-items-center py-3" role="alert">
                                <i class="fas fa-clock me-2"></i>
                                <div>
                                    <strong>PENGISIAN TERLAMBAT</strong><br>
                                    Periode ini sudah terkunci, tetapi Anda diberi akses untuk mengisi evaluasi yang
                                    tertinggal.<br>
                                    <small class="text-muted">Dibuka oleh: {{ $lateUnlockInfo->unlocked_by ?? 'Admin' }}
                                        pada
                                        {{ isset($lateUnlockInfo->unlocked_at) ? \Carbon\Carbon::parse($lateUnlockInfo->unlocked_at)->format('d M Y H:i') : '-' }}</small>
                                </div>
                            </div>
                        @elseif ($isLocked)
                            <div class="alert alert-secondary d-flex align-items-center py-2" role="alert">
                                <i class="fas fa-lock me-2"></i>
                                <div>
                                    Periode ini <strong>terkunci</strong>. Data penilaian ditampilkan dalam mode baca saja.
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-control-label">Karyawan</label>
                                <input type="text" class="form-control" value="{{ $employee->full_name }}" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-control-label">Posisi</label>
                                @php
                                    $currentPosition = $positionsData->last()['position_name'] ?? 'N/A';
                                @endphp
                                <input type="text" class="form-control" value="{{ $currentPosition }}" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sec-card">
                    <div class="card-body">
                        <p class="text-uppercase fw-bold mb-3 text-sm">PENILAIAN STANDAR PA</p>

                        <form id="form-eval"
                            action="{{ route('evalpa.store', ['emp' => $employee->employee_nik, 'per' => $period->id]) }}"
                            method="POST">
                            @csrf
                            @method('PUT')

                            <input type="hidden" name="employee_nik" value="{{ $employee->employee_nik }}">
                            <input type="hidden" name="period_id" value="{{ $period->id }}">

                            @if ($isMultiPosition)
                                @php
                                    $latestAssignmentId = $positionsData->last()['id_for_tab'];
                                @endphp
                                {{-- Flex container for position tabs (left) and month tabs (right) --}}
                                <div class="d-flex align-items-end gap-3 flex-wrap flex-md-nowrap">
                                    {{-- Position tabs (left side, scrollable) --}}
                                    <div class="position-tabs-wrapper" style="overflow-x: auto; flex-shrink: 0; max-width: 60%;">
                                        <ul class="nav nav-tabs flex-nowrap" id="positionTab" role="tablist" style="white-space: nowrap;">
                                            @foreach ($positionsData as $index => $pos)
                                                <li class="nav-item" role="presentation">
                                                    <button
                                                        class="nav-link {{ $index === $positionsData->count() - 1 ? 'active' : '' }}"
                                                        id="tab-{{ $pos['id_for_tab'] }}" data-bs-toggle="tab"
                                                        data-bs-target="#content-{{ $pos['id_for_tab'] }}" type="button"
                                                        role="tab" aria-controls="content-{{ $pos['id_for_tab'] }}"
                                                        aria-selected="{{ $index === $positionsData->count() - 1 ? 'true' : 'false' }}"
                                                        data-position-id="{{ $pos['id_for_tab'] }}">
                                                        {{ $pos['position_name'] }}
                                                        <small
                                                            class="text-muted ms-2">({{ date('M Y', strtotime($pos['effective_from'])) }}
                                                            -
                                                            {{ $pos['effective_to'] ? date('M Y', strtotime($pos['effective_to'])) : 'Sekarang' }})</small>
                                                    </button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                    {{-- Month tabs (right side) - one set per position, toggled via JS --}}
                                    <div class="month-tabs-wrapper ms-auto" style="flex-shrink: 0;">
                                        @foreach ($positionsData as $index => $pos)
                                            @php
                                                // Compute standardsDiffer for this position
                                                $_posStd = $pos['standardItems'];
                                                $_posRatings = $pos['ratingsByItem'];
                                                $_effFrom = \Carbon\Carbon::parse($pos['effective_from'])->startOfMonth();
                                                $_effTo = $pos['effective_to'] ? \Carbon\Carbon::parse($pos['effective_to'])->startOfMonth() : null;
                                                $_evalIds = $pos['evaluatedMonthIds'];
                                                $_relMonths = $calendarMonths->filter(function($m) use ($restMonths, $_effFrom, $_effTo, $_evalIds) {
                                                    if (in_array($m->id, $restMonths)) return false;
                                                    $monthDate = \Carbon\Carbon::create($m->year, $m->month)->startOfMonth();
                                                    $inRange = $monthDate->greaterThanOrEqualTo($_effFrom) && ($_effTo === null || $monthDate->lessThanOrEqualTo($_effTo));
                                                    return $inRange || in_array($m->id, $_evalIds);
                                                });
                                                $_mfp = collect();
                                                foreach ($_relMonths as $m) {
                                                    $_items = $_posStd->get($m->id) ?? collect();
                                                    $_fp = $_items->sortBy('name')->map(function ($item) use ($_posRatings) {
                                                        $r = $_posRatings->get($item->id) ?? collect();
                                                        return $item->name . '::' . $r->pluck('label')->implode('|');
                                                    })->implode(';;');
                                                    $_mfp->put($m->id, $_fp);
                                                }
                                                $_posDiffer = $_mfp->unique()->count() > 1;
                                            @endphp
                                            @if ($_posDiffer)
                                                @php
                                                    // Group months by fingerprint for tab labels
                                                    $_grouped = $_mfp->mapToGroups(fn($fp, $monthId) => [$fp => $monthId]);
                                                    $_gIdx = 0;
                                                    $_tabGroups = collect();
                                                    foreach ($_grouped as $_fp => $_monthIds) {
                                                        $_gMonths = $_relMonths->filter(fn($m) => $_monthIds->contains($m->id));
                                                        $_gLabel = $_gMonths->map(fn($m) => \Carbon\Carbon::create($m->year, $m->month)->translatedFormat('M Y'))->implode(' & ');
                                                        $_gTabId = 'mgrp-' . $pos['id_for_tab'] . '-' . $_gIdx;
                                                        $_tabGroups->push(['label' => $_gLabel, 'tabId' => $_gTabId, 'months' => $_gMonths]);
                                                        $_gIdx++;
                                                    }
                                                @endphp
                                                <ul class="nav nav-tabs month-tab-nav flex-nowrap"
                                                    id="monthTabNav-{{ $pos['id_for_tab'] }}"
                                                    data-for-position="{{ $pos['id_for_tab'] }}"
                                                    role="tablist"
                                                    style="white-space: nowrap; {{ $index === $positionsData->count() - 1 ? '' : 'display: none;' }}">
                                                    @foreach ($_tabGroups as $tg)
                                                        @php
                                                            $allEvald = $tg['months']->every(fn($m) => in_array($m->id, $pos['evaluatedMonthIds']));
                                                        @endphp
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link {{ $loop->first ? 'active' : '' }} {{ $allEvald ? 'text-success' : '' }}"
                                                                data-bs-toggle="tab"
                                                                data-bs-target="#{{ $tg['tabId'] }}"
                                                                type="button" role="tab">
                                                                {{ $tg['label'] }}
                                                                @if ($allEvald)
                                                                    <i class="fas fa-check-circle ms-1 text-success" style="font-size: 0.7em;"></i>
                                                                @endif
                                                            </button>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <div class="tab-content" id="positionTabContent">
                            @endif

                            @php
                                $hasAnyStandardItem = false;
                            @endphp

                            @foreach ($positionsData as $index => $pos)
                                @php
                                    // Logic untuk menentukan apakah harus menggunakan wrapper tab atau tidak
                                    $isTabActive = $isMultiPosition ? $index === $positionsData->count() - 1 : true;
                                    $contentWrapperClass = $isMultiPosition
                                        ? 'tab-pane fade ' . ($isTabActive ? 'show active' : '')
                                        : '';
                                    $contentWrapperId = $isMultiPosition ? 'content-' . $pos['id_for_tab'] : '';

                                    // Extract data for the current position block
                                    $standardItems = $pos['standardItems'];
                                    $uniqueItems = $pos['uniqueItems'];
                                    $ratingsByItem = $pos['ratingsByItem'];
                                    $existing = $pos['existing'] ?? [];
                                    $existingWeights = $pos['existingWeights'] ?? [];
                                    $evaluatedMonthIds = $pos['evaluatedMonthIds'];

                                    // Filter calendar months: bukan bulan cuti DAN dalam masa berlaku posisi
                                    $posEffFrom = \Carbon\Carbon::parse($pos['effective_from'])->startOfMonth();
                                    $posEffTo = $pos['effective_to'] ? \Carbon\Carbon::parse($pos['effective_to'])->startOfMonth() : null;
                                    $relevantMonths = $calendarMonths->filter(function ($m) use ($restMonths, $posEffFrom, $posEffTo, $evaluatedMonthIds) {
                                        if (in_array($m->id, $restMonths)) return false;
                                        $monthDate = \Carbon\Carbon::create($m->year, $m->month)->startOfMonth();
                                        $inRange = $monthDate->greaterThanOrEqualTo($posEffFrom) && ($posEffTo === null || $monthDate->lessThanOrEqualTo($posEffTo));
                                        // Show if within effective range OR already evaluated
                                        return $inRange || in_array($m->id, $evaluatedMonthIds);
                                    });

                                    // Filter uniqueItems agar hanya menampilkan standar yang ada di bulan-bulan relevan
                                    $filteredUniqueItems = $uniqueItems->filter(function ($uniqueItem) use (
                                        $relevantMonths,
                                        $standardItems,
                                    ) {
                                        return $relevantMonths->some(function ($m) use ($uniqueItem, $standardItems) {
                                            return $standardItems->get($m->id)?->contains('name', $uniqueItem->name);
                                        });
                                    });

                                    if ($filteredUniqueItems->isNotEmpty()) {
                                        $hasAnyStandardItem = true;
                                    }
                                @endphp

                                <div
                                    @if ($isMultiPosition) class="{{ $contentWrapperClass }}" id="{{ $contentWrapperId }}" role="tabpanel" aria-labelledby="tab-{{ $pos['id_for_tab'] }}" @endif>

                                    {{-- Notifikasi bulan yang sudah dinilai (dikunci) --}}
                                    @php
                                        $evaluatedMonths = collect();
                                        foreach ($relevantMonths as $m) {
                                            if (in_array($m->id, $evaluatedMonthIds)) {
                                                $evaluatedMonths->push(
                                                    \Carbon\Carbon::create($m->year, $m->month)->translatedFormat(
                                                        'F Y',
                                                    ),
                                                );
                                            }
                                        }
                                    @endphp

                                    @if ($evaluatedMonths->isNotEmpty())
                                        <div style="background-color: #00b7bd4f; border-color: #00b7bd; padding: 0.5rem 1rem; border-radius: 0.5rem;"
                                            class="eval-lock-banner d-flex align-items-center mb-3 mt-3">
                                            <i class="fas fa-lock me-2"></i>
                                            <div>
                                                Penilaian untuk bulan {{ $evaluatedMonths->join(', ', ' dan ') }} sudah
                                                dilakukan.
                                            </div>
                                        </div>
                                    @endif
                                    @php
                                        // Detect if standards differ across months
                                        // Group months by fingerprint (item names + ratings)
                                        $monthFingerprints = collect();
                                        foreach ($relevantMonths as $m) {
                                            $itemsForM = $standardItems->get($m->id) ?? collect();
                                            $fingerprint = $itemsForM->sortBy('name')->map(function ($item) use ($ratingsByItem) {
                                                $ratings = $ratingsByItem->get($item->id) ?? collect();
                                                return $item->name . '::' . $ratings->pluck('label')->implode('|');
                                            })->implode(';;');
                                            $monthFingerprints->put($m->id, $fingerprint);
                                        }
                                        $standardsDiffer = $monthFingerprints->unique()->count() > 1;

                                        // Group months by fingerprint
                                        $monthGroups = collect();
                                        if ($standardsDiffer) {
                                            $grouped = $monthFingerprints->mapToGroups(fn($fp, $monthId) => [$fp => $monthId]);
                                            $groupIndex = 0;
                                            foreach ($grouped as $fp => $monthIds) {
                                                $groupMonths = $relevantMonths->filter(fn($m) => $monthIds->contains($m->id));
                                                $groupLabel = $groupMonths->map(fn($m) => \Carbon\Carbon::create($m->year, $m->month)->translatedFormat('M Y'))->implode(' & ');
                                                $groupTabId = 'mgrp-' . ($pos['id_for_tab'] ?? 0) . '-' . $groupIndex;
                                                $monthGroups->push([
                                                    'label' => $groupLabel,
                                                    'tabId' => $groupTabId,
                                                    'months' => $groupMonths,
                                                    'monthIds' => $monthIds,
                                                ]);
                                                $groupIndex++;
                                            }
                                        }
                                    @endphp

                                    @if ($standardsDiffer)
                                        {{-- ===== GROUPED MONTH TABS: groups of months with same standards ===== --}}
                                        @unless ($isMultiPosition)
                                            {{-- Single position: show month group tabs inline --}}
                                            <ul class="nav nav-tabs mt-3" role="tablist">
                                                @foreach ($monthGroups as $gIdx => $group)
                                                    <li class="nav-item" role="presentation">
                                                        @php
                                                            $allEvald = $group['months']->every(fn($m) => in_array($m->id, $evaluatedMonthIds));
                                                        @endphp
                                                        <button class="nav-link {{ $gIdx === 0 ? 'active' : '' }} {{ $allEvald ? 'text-success' : '' }}"
                                                            data-bs-toggle="tab"
                                                            data-bs-target="#{{ $group['tabId'] }}"
                                                            type="button" role="tab">
                                                            {{ $group['label'] }}
                                                            @if ($allEvald)
                                                                <i class="fas fa-check-circle ms-1 text-success" style="font-size: 0.7em;"></i>
                                                            @endif
                                                        </button>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endunless
                                        <div class="tab-content mt-3">
                                            @foreach ($monthGroups as $gIdx => $group)
                                                <div class="tab-pane fade {{ $gIdx === 0 ? 'show active' : '' }}"
                                                    id="{{ $group['tabId'] }}" role="tabpanel">

                                                    @if ($group['months']->count() === 1)
                                                        {{-- Single month in this group: simple table --}}
                                                        @php
                                                            $m = $group['months']->first();
                                                            $itemsForThisMonth = ($standardItems->get($m->id) ?? collect())->sortBy('seq');
                                                            $isRestMonth = in_array($m->id, $restMonths);
                                                            $currentMonth = now()->startOfMonth();
                                                        @endphp
                                                        <div class="table-responsive">
                                                            <table class="table-bordered table-striped evalpa-table mt-3 table">
                                                                <thead class="thead-light">
                                                                    <tr style="background-color: #00b7bd4f;">
                                                                        <th class="text-center align-middle" style="width: 5%;">No</th>
                                                                        <th class="text-center align-middle" style="width: 30%;">Standar</th>
                                                                        <th class="text-center align-middle" style="width: 10%;">Bobot</th>
                                                                        <th class="text-center align-middle" style="width: 10%;">Nilai</th>
                                                                        <th class="text-center align-middle" style="width: 45%;">Deskripsi Penilaian</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @if ($isRestMonth)
                                                                        <tr>
                                                                            <td colspan="5" class="text-center py-3">
                                                                                <span class="fw-bold text-muted">Bulan Cuti</span>
                                                                            </td>
                                                                        </tr>
                                                                    @else
                                                                        @php $mCounter = 1; @endphp
                                                                        @foreach ($itemsForThisMonth as $item)
                                                                            @php
                                                                                $defaultWeight = $item->weight ?? 0;
                                                                                $finalWeight = $defaultWeight;
                                                                                if (is_array($existingWeights) && isset($existingWeights[$m->id]) && is_array($existingWeights[$m->id]) && isset($existingWeights[$m->id][$item->id])) {
                                                                                    $finalWeight = $existingWeights[$m->id][$item->id];
                                                                                }
                                                                                $isMonthEvaluated = isset($existing[$m->id][$item->id]);
                                                                                $isStandardUsed = $defaultWeight > 0;
                                                                                $monthDate = \Carbon\Carbon::create($m->year, $m->month)->startOfMonth();
                                                                                $isStandardEditableWindow = (!$isLocked || ($hasLateUnlock ?? false)) && $monthDate->lessThanOrEqualTo($currentMonth);
                                                                                $isDisabled = $isMonthEvaluated || !$isStandardEditableWindow || !$isStandardUsed;
                                                                                $isWeightModified = $finalWeight != $defaultWeight;
                                                                                $isInactive = $finalWeight == 0;
                                                                                $ratingsForItem = $ratingsByItem->get($item->id) ?? collect();
                                                                            @endphp
                                                                            <tr class="{{ $isInactive ? 'table-secondary' : '' }}">
                                                                                <td class="text-center">{{ $mCounter++ }}</td>
                                                                                <td>
                                                                                    {{ $item->name }}
                                                                                    @if ($isInactive)
                                                                                        <small class="badge bg-secondary ms-2"><i class="fas fa-pause"></i> Nonaktif</small>
                                                                                    @endif
                                                                                </td>
                                                                                <td class="text-center align-middle">
                                                                                    <div class="position-relative">
                                                                                        <input type="number" name="bobot[{{ $m->id }}][{{ $item->id }}]" value="{{ $finalWeight }}"
                                                                                            class="form-control bobot-input {{ $isWeightModified ? 'border-warning' : '' }} {{ $isInactive ? 'border-secondary bg-light' : '' }} p-1 text-center"
                                                                                            data-month-id="{{ $m->id }}" data-default-weight="{{ $defaultWeight }}"
                                                                                            min="0" max="100" step="any" {{ $isDisabled || $isInactive ? 'disabled' : '' }}>
                                                                                        @if ($isWeightModified && !$isDisabled && !$isInactive)
                                                                                            <div class="d-flex align-items-center justify-content-center" style="margin-top: 2px;">
                                                                                                <small class="text-warning me-1" style="font-size: 10px;"><i class="fas fa-exclamation-triangle"></i> Terganti</small>
                                                                                                <button type="button" class="btn btn-sm btn-outline-secondary reset-weight-btn mb-0"
                                                                                                    data-month-id="{{ $m->id }}" data-item-id="{{ $item->id }}" data-default-weight="{{ $defaultWeight }}"
                                                                                                    style="font-size: 8px; padding: 1px 4px;"><i class="fas fa-undo"></i></button>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </td>
                                                                                <td class="align-middle">
                                                                                    <div class="d-flex flex-column align-items-center gap-1">
                                                                                        @foreach ($ratingsForItem as $opt)
                                                                                            <div class="form-check m-0">
                                                                                                <input class="form-check-input rating-input" type="radio"
                                                                                                    name="nilai[{{ $m->id }}][{{ $item->id }}]"
                                                                                                    id="nilai-{{ $m->id }}-{{ $item->id }}-{{ $opt->score }}"
                                                                                                    value="{{ $opt->score }}" data-month-id="{{ $m->id }}" data-item-id="{{ $item->id }}"
                                                                                                    {{ ($existing[$m->id][$item->id] ?? '') == $opt->score ? 'checked' : '' }}
                                                                                                    {{ $isDisabled || $isInactive ? 'disabled' : '' }}>
                                                                                                <label class="form-check-label {{ $isInactive ? 'text-muted' : '' }}"
                                                                                                    for="nilai-{{ $m->id }}-{{ $item->id }}-{{ $opt->score }}">{{ $opt->score }}</label>
                                                                                            </div>
                                                                                        @endforeach
                                                                                    </div>
                                                                                </td>
                                                                                <td>
                                                                                    <ul class="mb-0 ps-3">
                                                                                        @forelse ($ratingsForItem as $opt)
                                                                                            <p class="mb-0.5"><strong>{{ $opt->score }}</strong> = {{ $opt->label }}</p>
                                                                                        @empty
                                                                                            <p class="text-muted">Deskripsi tidak tersedia.</p>
                                                                                        @endforelse
                                                                                    </ul>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                    @endif
                                                                </tbody>
                                                                <tfoot>
                                                                    <tr class="fw-bold" style="background-color: #f0f2f5;">
                                                                        <td colspan="2" class="text-end">Total Bobot</td>
                                                                        <td class="text-center align-middle">
                                                                            <span id="total-bobot-badge-{{ $m->id }}" class="badge"></span>
                                                                        </td>
                                                                        <td colspan="2"></td>
                                                                    </tr>
                                                                </tfoot>
                                                            </table>
                                                        </div>
                                                    @else
                                                        {{-- Multiple months with same standards: multi-column table --}}
                                                        @php
                                                            $grpMonths = $group['months'];
                                                            // Use first month's items as the unique list (since they share standards)
                                                            $firstGrpMonth = $grpMonths->first();
                                                            $grpUniqueItems = ($standardItems->get($firstGrpMonth->id) ?? collect())->sortBy('seq');
                                                            $currentMonth = now()->startOfMonth();
                                                        @endphp
                                                        <div class="table-responsive">
                                                            <table class="table-bordered table-striped evalpa-table mt-3 table">
                                                                <thead class="thead-light">
                                                                    <tr style="background-color: #00b7bd4f;">
                                                                        <th rowspan="2" class="text-center align-middle" style="width: 7%;">No</th>
                                                                        <th rowspan="2" class="text-center align-middle" style="width: 25%;">Standar</th>
                                                                        @foreach ($grpMonths as $gm)
                                                                            <th colspan="2" class="text-center" style="width: {{ 40 / $grpMonths->count() }}%;">
                                                                                {{ \Carbon\Carbon::create($gm->year, $gm->month)->translatedFormat('M Y') }}
                                                                            </th>
                                                                        @endforeach
                                                                        <th rowspan="2" class="text-center align-middle" style="width: 28%;">Deskripsi Penilaian</th>
                                                                    </tr>
                                                                    <tr style="background-color: #00b7bd4f;">
                                                                        @foreach ($grpMonths as $gm)
                                                                            <th class="text-center">Bobot</th>
                                                                            <th class="text-center">Nilai</th>
                                                                        @endforeach
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @php $gCounter = 1; @endphp
                                                                    @foreach ($grpUniqueItems as $uniqueItem)
                                                                        @php
                                                                            $hasInactiveEntries = false;
                                                                            foreach ($grpMonths as $gm) {
                                                                                $itm = $standardItems->get($gm->id)?->firstWhere('name', $uniqueItem->name);
                                                                                if ($itm) {
                                                                                    $fw = $itm->weight ?? 0;
                                                                                    if (is_array($existingWeights) && isset($existingWeights[$gm->id][$itm->id])) {
                                                                                        $fw = $existingWeights[$gm->id][$itm->id];
                                                                                    }
                                                                                    if ($fw == 0) { $hasInactiveEntries = true; break; }
                                                                                }
                                                                            }
                                                                        @endphp
                                                                        <tr class="{{ $hasInactiveEntries ? 'table-secondary' : '' }}">
                                                                            <td class="text-center">{{ $gCounter++ }}</td>
                                                                            <td>
                                                                                {{ $uniqueItem->name }}
                                                                                @if ($hasInactiveEntries)
                                                                                    <small class="badge bg-secondary ms-2"><i class="fas fa-pause"></i> Nonaktif</small>
                                                                                @endif
                                                                            </td>
                                                                            @foreach ($grpMonths as $gm)
                                                                                @php
                                                                                    $itemForMonth = $standardItems->get($gm->id)?->firstWhere('name', $uniqueItem->name);
                                                                                    $defaultWeight = $itemForMonth->weight ?? 0;
                                                                                    $finalWeight = $defaultWeight;
                                                                                    if ($itemForMonth && is_array($existingWeights) && isset($existingWeights[$gm->id]) && is_array($existingWeights[$gm->id]) && isset($existingWeights[$gm->id][$itemForMonth->id])) {
                                                                                        $finalWeight = $existingWeights[$gm->id][$itemForMonth->id];
                                                                                    }
                                                                                    $isMonthEvaluated = $itemForMonth && isset($existing[$gm->id][$itemForMonth->id]);
                                                                                    $isStandardUsed = $itemForMonth && $defaultWeight > 0;
                                                                                    $monthDate = \Carbon\Carbon::create($gm->year, $gm->month)->startOfMonth();
                                                                                    $isStandardEditableWindow = (!$isLocked || ($hasLateUnlock ?? false)) && $monthDate->lessThanOrEqualTo($currentMonth);
                                                                                    $isDisabled = $isMonthEvaluated || !$isStandardEditableWindow || !$isStandardUsed;
                                                                                    $isWeightModified = $itemForMonth && ($finalWeight != $defaultWeight);
                                                                                    $isInactive = $finalWeight == 0;
                                                                                @endphp
                                                                                <td class="text-center align-middle">
                                                                                    @if ($itemForMonth)
                                                                                        <div class="position-relative">
                                                                                            <input type="number" name="bobot[{{ $gm->id }}][{{ $itemForMonth->id }}]" value="{{ $finalWeight }}"
                                                                                                class="form-control bobot-input {{ $isWeightModified ? 'border-warning' : '' }} {{ $isInactive ? 'border-secondary bg-light' : '' }} p-1 text-center"
                                                                                                data-month-id="{{ $gm->id }}" data-default-weight="{{ $defaultWeight }}"
                                                                                                min="0" max="100" step="any" {{ $isDisabled || $isInactive ? 'disabled' : '' }}>
                                                                                            @if ($isWeightModified && !$isDisabled && !$isInactive)
                                                                                                <div class="d-flex align-items-center justify-content-center" style="margin-top: 2px;">
                                                                                                    <small class="text-warning me-1" style="font-size: 10px;"><i class="fas fa-exclamation-triangle"></i> Terganti</small>
                                                                                                    <button type="button" class="btn btn-sm btn-outline-secondary reset-weight-btn mb-0"
                                                                                                        data-month-id="{{ $gm->id }}" data-item-id="{{ $itemForMonth->id }}" data-default-weight="{{ $defaultWeight }}"
                                                                                                        style="font-size: 8px; padding: 1px 4px;"><i class="fas fa-undo"></i></button>
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>
                                                                                    @else
                                                                                        <span class="text-muted">-</span>
                                                                                    @endif
                                                                                </td>
                                                                                <td class="align-middle">
                                                                                    @if ($itemForMonth)
                                                                                        <div class="d-flex flex-column align-items-center gap-1">
                                                                                            @foreach ($ratingsByItem->get($itemForMonth->id) ?? [] as $opt)
                                                                                                <div class="form-check m-0">
                                                                                                    <input class="form-check-input rating-input" type="radio"
                                                                                                        name="nilai[{{ $gm->id }}][{{ $itemForMonth->id }}]"
                                                                                                        id="nilai-{{ $gm->id }}-{{ $itemForMonth->id }}-{{ $opt->score }}"
                                                                                                        value="{{ $opt->score }}" data-month-id="{{ $gm->id }}" data-item-id="{{ $itemForMonth->id }}"
                                                                                                        {{ ($existing[$gm->id][$itemForMonth->id] ?? '') == $opt->score ? 'checked' : '' }}
                                                                                                        {{ $isDisabled || $isInactive ? 'disabled' : '' }}>
                                                                                                    <label class="form-check-label {{ $isInactive ? 'text-muted' : '' }}"
                                                                                                        for="nilai-{{ $gm->id }}-{{ $itemForMonth->id }}-{{ $opt->score }}">{{ $opt->score }}</label>
                                                                                                </div>
                                                                                            @endforeach
                                                                                        </div>
                                                                                    @else
                                                                                        <span class="text-muted">-</span>
                                                                                    @endif
                                                                                </td>
                                                                            @endforeach
                                                                            <td>
                                                                                @php
                                                                                    $firstItem = $standardItems->get($firstGrpMonth->id)?->firstWhere('name', $uniqueItem->name);
                                                                                    $ratings = $firstItem ? ($ratingsByItem->get($firstItem->id) ?? collect()) : collect();
                                                                                @endphp
                                                                                <ul class="mb-0 ps-3">
                                                                                    @forelse ($ratings as $opt)
                                                                                        <p class="mb-0.5"><strong>{{ $opt->score }}</strong> = {{ $opt->label }}</p>
                                                                                    @empty
                                                                                        <p class="text-muted">Deskripsi tidak tersedia.</p>
                                                                                    @endforelse
                                                                                </ul>
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                                <tfoot>
                                                                    <tr class="fw-bold" style="background-color: #f0f2f5;">
                                                                        <td colspan="2" class="text-end">Total Bobot</td>
                                                                        @foreach ($grpMonths as $gm)
                                                                            <td class="text-center align-middle">
                                                                                <span id="total-bobot-badge-{{ $gm->id }}" class="badge"></span>
                                                                            </td>
                                                                            <td></td>
                                                                        @endforeach
                                                                        <td></td>
                                                                    </tr>
                                                                </tfoot>
                                                            </table>
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        {{-- ===== UNIFIED TABLE MODE: standards same across months ===== --}}
                                        <div class="table-responsive">
                                        <table class="table-bordered table-striped evalpa-table mt-3 table">
                                            <thead class="thead-light">
                                                <tr style="background-color: #00b7bd4f;">
                                                    <th rowspan="2" class="text-center align-middle" style="width: 7%;">
                                                        No</th>
                                                    <th rowspan="2" class="text-center align-middle"
                                                        style="width: 29.5%;">
                                                        Standar</th>
                                                    @foreach ($relevantMonths as $m)
                                                        @php
                                                            $isRestMonth = in_array($m->id, $restMonths);
                                                        @endphp
                                                        @if ($isRestMonth)
                                                            <th colspan="2" class="bg-danger-light text-center"
                                                                style="width: 15%;">
                                                                {{ \Carbon\Carbon::create($m->year, $m->month)->translatedFormat('M Y') }}
                                                            </th>
                                                        @else
                                                            <th colspan="2" class="text-center" style="width: 15%;">
                                                                {{ \Carbon\Carbon::create($m->year, $m->month)->translatedFormat('M Y') }}
                                                            </th>
                                                        @endif
                                                    @endforeach
                                                    <th rowspan="2" class="text-center align-middle"
                                                        style="width: 29.5%;">
                                                        Deskripsi Penilaian</th>
                                                </tr>
                                                <tr style="background-color: #00b7bd4f;">
                                                    @foreach ($relevantMonths as $m)
                                                        <th class="text-center" style="width: 15%;">Bobot</th>
                                                        <th class="text-center" style="width: 15%;">Nilai</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $counter = 1;
                                                    $currentMonth = now()->startOfMonth();
                                                @endphp
                                                @foreach ($filteredUniqueItems as $uniqueItem)
                                                    @php
                                                        // Check if this item has any inactive (0 weight) entries for visual styling
                                                        $hasInactiveEntries = false;
                                                        foreach ($relevantMonths as $m) {
                                                            $itemForMonth = $standardItems
                                                                ->get($m->id)
                                                                ?->firstWhere('name', $uniqueItem->name);
                                                            if ($itemForMonth) {
                                                                $finalWeight = $itemForMonth->weight ?? 0;
                                                                if (
                                                                    is_array($existingWeights) &&
                                                                    isset($existingWeights[$m->id]) &&
                                                                    is_array($existingWeights[$m->id]) &&
                                                                    isset($existingWeights[$m->id][$itemForMonth->id])
                                                                ) {
                                                                    $finalWeight =
                                                                        $existingWeights[$m->id][$itemForMonth->id];
                                                                }
                                                                if ($finalWeight == 0) {
                                                                    $hasInactiveEntries = true;
                                                                    break;
                                                                }
                                                            }
                                                        }
                                                    @endphp
                                                    <tr class="{{ $hasInactiveEntries ? 'table-secondary' : '' }}">
                                                        <td class="text-center" style="width: 5%;">{{ $counter++ }}</td>
                                                        <td style="width: 35%;">
                                                            {{ $uniqueItem->name }}
                                                            @if ($hasInactiveEntries)
                                                                <small class="badge bg-secondary ms-2">
                                                                    <i class="fas fa-pause"></i> Nonaktif
                                                                </small>
                                                            @endif
                                                        </td>
                                                        @foreach ($relevantMonths as $m)
                                                            @php
                                                                $itemForMonth = $standardItems
                                                                    ->get($m->id)
                                                                    ?->firstWhere('name', $uniqueItem->name);
                                                                $defaultWeight = $itemForMonth->weight ?? 0;
                                                                $finalWeight = $defaultWeight; // Default fallback
                                                                if (
                                                                    $itemForMonth &&
                                                                    is_array($existingWeights) &&
                                                                    isset($existingWeights[$m->id]) &&
                                                                    is_array($existingWeights[$m->id]) &&
                                                                    isset($existingWeights[$m->id][$itemForMonth->id])
                                                                ) {
                                                                    $finalWeight =
                                                                        $existingWeights[$m->id][$itemForMonth->id];
                                                                }

                                                                $isMonthEvaluated =
                                                                    $itemForMonth &&
                                                                    isset($existing[$m->id][$itemForMonth->id]);
                                                                $isStandardUsed = $itemForMonth && $defaultWeight > 0;
                                                                $monthDate = \Carbon\Carbon::create(
                                                                    $m->year,
                                                                    $m->month,
                                                                )->startOfMonth();
                                                                $isStandardEditableWindow =
                                                                    (!$isLocked || ($hasLateUnlock ?? false)) &&
                                                                    $monthDate->lessThanOrEqualTo($currentMonth);
                                                                $isDisabled =
                                                                    $isMonthEvaluated ||
                                                                    !$isStandardEditableWindow ||
                                                                    !$isStandardUsed;
                                                                $isRestMonth = in_array($m->id, $restMonths);
                                                            @endphp
                                                            @if ($isRestMonth)
                                                                <td colspan="2" class="text-center align-middle"
                                                                    style="width: 15%;">
                                                                    <span class="fw-bold">Cuti</span>
                                                                    @if ($itemForMonth)
                                                                        <input type="hidden"
                                                                            name="bobot[{{ $m->id }}][{{ $itemForMonth->id }}]"
                                                                            value="0">
                                                                        <input type="hidden"
                                                                            name="nilai[{{ $m->id }}][{{ $itemForMonth->id }}]"
                                                                            value="0">
                                                                    @endif
                                                                </td>
                                                            @else
                                                                <td class="text-center align-middle" style="width: 7.5%;">
                                                                    @if ($itemForMonth)
                                                                        @php
                                                                            $isWeightModified =
                                                                                $finalWeight != $defaultWeight;
                                                                            $isInactive = $finalWeight == 0;
                                                                        @endphp
                                                                        <div class="position-relative">
                                                                            <input type="number"
                                                                                name="bobot[{{ $m->id }}][{{ $itemForMonth->id }}]"
                                                                                value="{{ $finalWeight }}"
                                                                                class="form-control bobot-input {{ $isWeightModified ? 'border-warning' : '' }} {{ $isInactive ? 'border-secondary bg-light' : '' }} p-1 text-center"
                                                                                data-month-id="{{ $m->id }}"
                                                                                data-default-weight="{{ $defaultWeight }}"
                                                                                min="0" max="100"
                                                                                step="any"
                                                                                {{ $isDisabled || $isInactive ? 'disabled' : '' }}
                                                                                title="{{ $isInactive ? 'Nonaktif (0%)' : ($isWeightModified ? 'Weight modified from default: ' . $defaultWeight . '%' : 'Default weight: ' . $defaultWeight . '%') }}">
                                                                            @if ($isInactive && !$isDisabled)
                                                                                <div class="d-flex align-items-center justify-content-center"
                                                                                    style="margin-top: 2px;">
                                                                                    <small class="text-secondary me-1"
                                                                                        style="font-size: 10px;">
                                                                                        <i class="fas fa-pause"></i>
                                                                                        Nonaktif
                                                                                    </small>
                                                                                </div>
                                                                            @elseif ($isWeightModified && !$isDisabled)
                                                                                <div class="d-flex align-items-center justify-content-center"
                                                                                    style="margin-top: 2px;">
                                                                                    <small class="text-warning me-1"
                                                                                        style="font-size: 10px;">
                                                                                        <i
                                                                                            class="fas fa-exclamation-triangle"></i>
                                                                                        Terganti
                                                                                    </small>
                                                                                    <button type="button"
                                                                                        class="btn btn-sm btn-outline-secondary reset-weight-btn mb-0"
                                                                                        data-month-id="{{ $m->id }}"
                                                                                        data-item-id="{{ $itemForMonth->id }}"
                                                                                        data-default-weight="{{ $defaultWeight }}"
                                                                                        style="font-size: 8px; padding: 1px 4px;"
                                                                                        title="Reset to default weight ({{ $defaultWeight }}%)">
                                                                                        <i class="fas fa-undo"></i>
                                                                                    </button>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    @else
                                                                        <span class="text-muted">-</span>
                                                                    @endif
                                                                </td>
                                                                <td class="align-middle" style="width: 7.5%;">
                                                                    @if ($itemForMonth)
                                                                        @php
                                                                            $isInactive = $finalWeight == 0;
                                                                        @endphp
                                                                        <div
                                                                            class="d-flex flex-column align-items-center gap-1">
                                                                            @foreach ($ratingsByItem->get($itemForMonth->id) ?? [] as $opt)
                                                                                <div class="form-check m-0">
                                                                                    <input
                                                                                        class="form-check-input rating-input"
                                                                                        type="radio"
                                                                                        name="nilai[{{ $m->id }}][{{ $itemForMonth->id }}]"
                                                                                        id="nilai-{{ $m->id }}-{{ $itemForMonth->id }}-{{ $opt->score }}"
                                                                                        value="{{ $opt->score }}"
                                                                                        data-month-id="{{ $m->id }}"
                                                                                        data-item-id="{{ $itemForMonth->id }}"
                                                                                        {{ ($existing[$m->id][$itemForMonth->id] ?? '') == $opt->score ? 'checked' : '' }}
                                                                                        {{ $isDisabled || $isInactive ? 'disabled' : '' }}>
                                                                                    <label
                                                                                        class="form-check-label {{ $isInactive ? 'text-muted' : '' }}"
                                                                                        for="nilai-{{ $m->id }}-{{ $itemForMonth->id }}-{{ $opt->score }}">
                                                                                        {{ $opt->score }}
                                                                                    </label>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    @else
                                                                        <span class="text-muted">-</span>
                                                                    @endif
                                                                </td>
                                                            @endif
                                                        @endforeach
                                                        <td style="width: 40%;">
                                                            @php
                                                                // Use first month's ratings since they're all the same
                                                                $firstMonthItem = null;
                                                                foreach ($relevantMonths as $m) {
                                                                    $firstMonthItem = $standardItems->get($m->id)?->firstWhere('name', $uniqueItem->name);
                                                                    if ($firstMonthItem) break;
                                                                }
                                                                $ratings = $firstMonthItem ? ($ratingsByItem->get($firstMonthItem->id) ?? collect()) : collect();
                                                            @endphp
                                                            <ul class="mb-0 ps-3">
                                                                @if ($ratings->isNotEmpty())
                                                                    @foreach ($ratings as $opt)
                                                                        <p class="mb-0.5">
                                                                            <strong>{{ $opt->score }}</strong> =
                                                                            {{ $opt->label }}
                                                                        </p>
                                                                    @endforeach
                                                                @else
                                                                    <p class="text-muted">Deskripsi tidak tersedia.</p>
                                                                @endif
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr class="fw-bold" style="background-color: #f0f2f5;">
                                                    <td colspan="2" class="text-end">Total Bobot</td>
                                                    @foreach ($relevantMonths as $m)
                                                        @php
                                                            $isRestMonth = in_array($m->id, $restMonths);
                                                        @endphp
                                                        @if ($isRestMonth)
                                                            <td colspan="2" class="text-center align-middle">
                                                                <span class="badge bg-secondary">0%</span>
                                                            </td>
                                                        @else
                                                            <td class="text-center align-middle">
                                                                {{-- This span will be updated by JavaScript --}}
                                                                <span id="total-bobot-badge-{{ $m->id }}"
                                                                    class="badge"></span>
                                                            </td>
                                                            <td></td>
                                                        @endif
                                                    @endforeach
                                                    <td></td> {{-- Empty cell for the 'Deskripsi Penilaian' column --}}
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    @endif
                                </div>
                            @endforeach

                            @if ($isMultiPosition)
                    </div> {{-- Tutup tab-content --}}
                    @endif

                    <div class="d-flex justify-content-end mt-4 gap-2">
                        @php
                            $hasAnyEvaluated = $positionsData->some(fn($p) => !empty($p['evaluatedMonthIds']));
                        @endphp
                        @if ($hasAnyEvaluated && !$isLocked)
                            <button type="button" id="btn-edit-eval" class="btn btn-outline-warning">
                                <i class="fas fa-lock-open me-1"></i> Edit Penilaian
                            </button>
                        @endif
                        <!-- <button type="submit" class="btn btn-primary" {{ $isLocked ? 'disabled' : '' }}>
                            <i class="fas fa-save me-1"></i> Simpan Penilaian
                        </button> -->
                        @if ($hasAnyStandardItem)
                            <button type="submit" class="btn btn-primary" {{ $isLocked ? 'disabled' : '' }}>
                                <i class="fas fa-save me-1"></i> Simpan Penilaian
                            </button>
                        @endif
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@push('js')
    <style>
        /* Fixed table layout to prevent horizontal scrolling and ensure proper text wrapping */
        .table-responsive {
            overflow-x: auto;
        }

        .evalpa-table {
            table-layout: fixed;
            width: 100%;
        }

        .evalpa-table td,
        .evalpa-table th {
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            white-space: normal;
        }

        /* Ensure the "Standar" column (2nd column) wraps text properly */
        .evalpa-table td:nth-child(2),
        .evalpa-table th:nth-child(2) {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Ensure the "Deskripsi Penilaian" column (last column) wraps text properly */
        .evalpa-table td:last-child,
        .evalpa-table th:last-child {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Ensure list items in description column wrap properly */
        .evalpa-table td:last-child ul {
            padding-left: 1rem;
            margin-bottom: 0;
        }

        .evalpa-table td:last-child p {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Center alignment for specific columns */
        .evalpa-table td:nth-child(1),
        .evalpa-table th:nth-child(1) {
            text-align: center;
        }

        /* Adjust column widths to prevent "Bobot" and "Nilai" from breaking */
        .evalpa-table th:nth-child(1),
        .evalpa-table td:nth-child(1) {
            width: 4%;
            min-width: 50px;
        }

        /* Standar column - make smaller */
        .evalpa-table th:nth-child(2),
        .evalpa-table td:nth-child(2) {
            width: 20%;
            min-width: 150px;
        }

        /* Month columns (Bobot and Nilai) - give more space */
        .evalpa-table thead th[colspan="2"] {
            min-width: 140px;
        }

        .evalpa-table thead th:not([rowspan]):not([colspan]) {
            min-width: 70px;
            white-space: nowrap;
        }

        /* Deskripsi Penilaian column - make smaller */
        .evalpa-table th:last-child,
        .evalpa-table td:last-child {
            width: 25%;
            min-width: 200px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Lock handling: disable all inputs if period is locked (unless late unlock is active)
            const isLocked = {{ $isLocked ? 'true' : 'false' }};
            const hasLateUnlock = {{ $hasLateUnlock ?? false ? 'true' : 'false' }};
            const missingMonthIds = @json($missingMonthIds ?? []);

            if (isLocked && !hasLateUnlock) {
                // Fully locked - disable everything
                const formEl = document.getElementById('form-eval');
                if (formEl) {
                    formEl.querySelectorAll('input, select, textarea').forEach(el => {
                        // Keep hidden inputs enabled so backend still receives IDs
                        if (el.type !== 'hidden') {
                            el.disabled = true;
                        }
                    });
                    const submitBtn = formEl.querySelector('button[type="submit"]');
                    if (submitBtn) submitBtn.disabled = true;
                }
            } else if (isLocked && hasLateUnlock) {
                // Late unlock active - enable only missing months
                const formEl = document.getElementById('form-eval');
                if (formEl) {
                    const missingMonthSet = new Set(missingMonthIds.map(id => String(id)));

                    // First, disable all inputs except hidden
                    formEl.querySelectorAll('input, select, textarea').forEach(el => {
                        if (el.type !== 'hidden') {
                            el.disabled = true;
                        }
                    });

                    // Then, enable inputs for missing months only
                    formEl.querySelectorAll('.bobot-input, .rating-input').forEach(el => {
                        const monthId = el.getAttribute('data-month-id');
                        if (missingMonthSet.has(String(monthId))) {
                            el.disabled = false;
                        }
                    });

                    // Enable submit button
                    const submitBtn = formEl.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.textContent = ' Simpan Penilaian Terlambat';
                        submitBtn.innerHTML = '<i class="fas fa-save me-1"></i> Simpan Penilaian Terlambat';
                    }

                    // Add "TERLAMBAT" badge to missing month tabs
                    missingMonthIds.forEach(monthId => {
                        const tabButton = document.querySelector(
                            `button[data-bs-target="#month-${monthId}"]`);
                        if (tabButton && !tabButton.querySelector('.badge-late')) {
                            const badge = document.createElement('span');
                            badge.className = 'badge bg-danger text-white ms-2 badge-late';
                            badge.textContent = 'TERLAMBAT';
                            tabButton.appendChild(badge);
                        }
                    });
                }
            }

            const successMsg = @json(session('success'));
            const errorMsg = @json(session('error'));
            const errorsAll = @json($errors->all());

            const showSwal = (title, text, icon) => {
                if (!window.Swal) return alert(text);
                Swal.fire({
                    title,
                    text,
                    icon,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#028284',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showCloseButton: true
                });
            };

            if (successMsg) showSwal('Berhasil!', successMsg, 'success');
            if (errorMsg) showSwal('Gagal', errorMsg, 'error');
            if (errorsAll && errorsAll.length) showSwal('Validasi Gagal', errorsAll.join(' • '), 'warning');

            const form = document.getElementById('form-eval');
            if (form) form.addEventListener('submit', function(e) {
                // Validate that all standards with weight > 0 have ratings for each month
                if (!validateMonthlyEvaluations()) {
                    e.preventDefault();
                    return false;
                }

                const btn = form.querySelector('button[type="submit"]');
                if (btn && !btn.disabled) {
                    btn.disabled = true;
                    btn.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Menyimpan...';
                }
            });

            // Reset weight button functionality
            const attachResetButtonListeners = () => {
                const resetButtons = document.querySelectorAll('.reset-weight-btn');
                resetButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const monthId = this.getAttribute('data-month-id');
                        const itemId = this.getAttribute('data-item-id');
                        const defaultWeight = this.getAttribute('data-default-weight');

                        const input = document.querySelector(
                            `input[name="bobot[${monthId}][${itemId}]"]`);
                        if (input) {
                            input.value = defaultWeight;
                            input.classList.remove('border-warning');

                            // Remove the modified indicator and reset button
                            const container = input.closest('.position-relative');
                            const modifiedIndicator = container.querySelector('.d-flex');
                            if (modifiedIndicator) {
                                modifiedIndicator.remove();
                            }

                            // Update totals
                            updateBobotTotals();
                        }
                    });
                });
            };

            // Initial setup
            attachResetButtonListeners();

            // Function to calculate and update totals with badge styling
            const updateBobotTotals = () => {
                const monthIds = {!! json_encode($calendarMonths->pluck('id')) !!};

                monthIds.forEach(monthId => {
                    // Get only the weight inputs specifically for this month (not all inputs with data-month-id)
                    const bobotInputs = document.querySelectorAll(`input[name*="bobot[${monthId}]"]`);
                    let total = 0;
                    let debugInfo = []; // For debugging

                    bobotInputs.forEach(input => {
                        // Only count inputs that are specifically for weight (bobot), not rating (nilai)
                        if (input.name.includes('bobot') && !input.disabled) {
                            const value = parseFloat(input.value) || 0;
                            total += value;
                            debugInfo.push(`Active: ${input.name} = ${value}`);
                        } else if (input.name.includes('bobot') && input.disabled) {
                            // For disabled inputs (locked months), include their values
                            const value = parseFloat(input.value) || 0;
                            // Check if this is not a "Cuti" (rest) month
                            const isRestMonth = input.closest('td').textContent.includes(
                                'Cuti');
                            if (!isRestMonth) {
                                total += value;
                                debugInfo.push(`Disabled: ${input.name} = ${value}`);
                            }
                        }
                    });

                    // Debug logging (remove this after fixing)
                    if (debugInfo.length > 0) {
                        console.log(`Month ${monthId} total calculation:`, debugInfo,
                            `Total: ${total}`);
                    }

                    const totalBadge = document.getElementById(`total-bobot-badge-${monthId}`);
                    if (totalBadge) {
                        totalBadge.textContent = `${total.toFixed(2)}%`;
                        // Reset classes first
                        totalBadge.classList.remove('bg-success', 'bg-danger', 'bg-secondary');
                        totalBadge.innerHTML = ''; // Clear previous content

                        if (Math.abs(total - 100) < 0.01) { // Check for close to 100
                            totalBadge.classList.add('bg-success');
                            totalBadge.innerHTML =
                                `<i class="fas fa-check me-1"></i> ${total.toFixed(2)}%`;
                        } else if (total === 0) {
                            totalBadge.classList.add('bg-secondary');
                            totalBadge.innerHTML = `${total.toFixed(2)}%`;
                        } else {
                            totalBadge.classList.add('bg-danger');
                            totalBadge.innerHTML =
                                `<i class="fas fa-exclamation-triangle me-1"></i> ${total.toFixed(2)}%`;
                        }
                    }
                });
            };

            // Initial calculation on page load for all active tabs
            updateBobotTotals();

            // Initial highlighting check
            setTimeout(() => {
                highlightIncompleteEvaluations();
            }, 100);

            // Update totals whenever any bobot input changes
            const allBobotInputs = document.querySelectorAll('.bobot-input');
            allBobotInputs.forEach(input => {
                // Handle comma-to-dot conversion for Indonesian locale
                input.addEventListener('keydown', function(e) {
                    if (e.key === ',') {
                        e.preventDefault();
                        const start = this.selectionStart;
                        const end = this.selectionEnd;
                        const val = this.value;
                        // Only add dot if there isn't one already
                        if (!val.includes('.')) {
                            this.value = val.substring(0, start) + '.' + val.substring(end);
                            this.setSelectionRange(start + 1, start + 1);
                            this.dispatchEvent(new Event('input'));
                        }
                    }
                });
                input.addEventListener('input', function() {
                    updateBobotTotals();
                    checkWeightModification(this);
                    handleWeightActiveStatusChange(this); // Handle active/inactive status
                });
            });

            // Add event listeners for rating inputs to provide real-time validation feedback
            const allRatingInputs = document.querySelectorAll('.rating-input');
            allRatingInputs.forEach(input => {
                input.addEventListener('change', function() {
                    highlightIncompleteEvaluations();
                });
            });

            // Function to highlight incomplete evaluations in real-time
            const highlightIncompleteEvaluations = () => {
                const monthIds = {!! json_encode($calendarMonths->pluck('id')) !!};

                monthIds.forEach(monthId => {
                    // Get only weight inputs for this month (not rating inputs)
                    const weightInputs = document.querySelectorAll(`input[name*="bobot[${monthId}]"]`);
                    // Get only rating inputs for this month
                    const ratingInputs = document.querySelectorAll(`input[name*="nilai[${monthId}]"]`);

                    // Check if any rating is selected for this month
                    const hasAnyRating = Array.from(ratingInputs).some(input => input.checked);

                    if (hasAnyRating) {
                        // Check each standard item for this month
                        weightInputs.forEach(weightInput => {
                            if (!weightInput.disabled) {
                                const weight = parseFloat(weightInput.value) || 0;
                                if (weight >
                                    0) { // Only highlight missing ratings for active items
                                    // Extract item ID
                                    const nameMatch = weightInput.name.match(
                                        /bobot\[(\d+)\]\[(\d+)\]/);
                                    if (nameMatch) {
                                        const itemId = nameMatch[2];

                                        // Check if this standard has an enabled rating selected
                                        const hasRating = Array.from(ratingInputs)
                                            .some(ratingInput =>
                                                ratingInput.name.includes(`[${itemId}]`) &&
                                                ratingInput.checked
                                            );
                                    }
                                }
                            }
                        });
                    }
                });
            };

            // Function to check if weight is modified and show/hide reset button
            const checkWeightModification = (input) => {
                const defaultWeight = parseFloat(input.getAttribute('data-default-weight'));
                const currentWeight = parseFloat(input.value);
                const container = input.closest('.position-relative');

                if (Math.abs(currentWeight - defaultWeight) > 0.01 && !input.disabled) {
                    // Weight is modified - add warning border and show reset button
                    input.classList.add('border-warning');

                    // Check if indicator already exists
                    let indicator = container.querySelector('.d-flex');
                    if (!indicator) {
                        const monthId = input.getAttribute('data-month-id');
                        const itemId = input.name.match(/\[(\d+)\]$/)[1]; // Extract item ID from name

                        indicator = document.createElement('div');
                        indicator.className = 'd-flex align-items-center justify-content-center';
                        indicator.style.marginTop = '2px';
                        indicator.innerHTML = `
                            <small class="text-warning me-1" style="font-size: 10px;">
                                <i class="fas fa-exclamation-triangle"></i> Terganti
                            </small>
                            <button type="button"
                                class="btn btn-sm mb-0 btn-outline-secondary reset-weight-btn"
                                data-month-id="${monthId}"
                                data-item-id="${itemId}"
                                data-default-weight="${defaultWeight}"
                                style="font-size: 8px; padding: 1px 4px;"
                                title="Reset to default weight (${defaultWeight}%)">
                                <i class="fas fa-undo"></i>
                            </button>
                        `;
                        container.appendChild(indicator);

                        // Attach event listener to the new reset button
                        const resetBtn = indicator.querySelector('.reset-weight-btn');
                        resetBtn.addEventListener('click', function() {
                            input.value = defaultWeight;
                            input.classList.remove('border-warning');
                            indicator.remove();
                            updateBobotTotals();
                        });
                    }
                } else {
                    // Weight is not modified - remove warning border and reset button
                    input.classList.remove('border-warning');
                    const indicator = container.querySelector('.d-flex');
                    if (indicator) {
                        indicator.remove();
                    }
                }
            };

            // If there are tabs, ensure totals are updated when switching tabs
            const positionTabs = document.getElementById('positionTab');
            if (positionTabs) {
                positionTabs.addEventListener('shown.bs.tab', function(event) {
                    updateBobotTotals();
                });
            }

            // Function to validate monthly evaluations
            const validateMonthlyEvaluations = () => {
                const monthIds = {!! json_encode($calendarMonths->pluck('id')) !!};
                let validationErrors = [];

                monthIds.forEach(monthId => {
                    // Get all weight inputs for this month
                    const weightInputs = document.querySelectorAll(`input[name*="bobot[${monthId}]"]`);
                    // Get all rating inputs for this month
                    const ratingInputs = document.querySelectorAll(`input[name*="nilai[${monthId}]"]`);

                    // Check if any rating is selected for this month
                    const hasAnyRating = Array.from(ratingInputs).some(input => input.checked);

                    if (hasAnyRating) {
                        // If there's any rating for this month, validate all standards with weight > 0
                        const monthName = getMonthName(monthId);
                        let incompleteStandards = [];

                        // Group by standard item - only validate active items (weight > 0)
                        const standardItems = {};
                        weightInputs.forEach(weightInput => {
                            if (!weightInput.disabled) {
                                const weight = parseFloat(weightInput.value) || 0;
                                if (weight > 0) { // Only validate active items
                                    // Extract standard item info
                                    const nameMatch = weightInput.name.match(
                                        /bobot\[(\d+)\]\[(\d+)\]/);
                                    if (nameMatch) {
                                        const itemId = nameMatch[2];
                                        const standardName = weightInput.closest('tr')
                                            .querySelector('td:nth-child(2)').textContent
                                            .trim();

                                        // Check if this standard already has any rating saved
                                        const hasRating = Array.from(ratingInputs)
                                            .some(ratingInput =>
                                                ratingInput.name.includes(`[${itemId}]`) &&
                                                ratingInput.checked
                                            );

                                        if (!hasRating) {
                                            incompleteStandards.push(standardName);
                                        }
                                    }
                                }
                            }
                        });

                        if (incompleteStandards.length > 0) {
                            validationErrors.push({
                                month: monthName,
                                standards: incompleteStandards
                            });
                        }
                    }
                });

                if (validationErrors.length > 0) {
                    let errorMessage = 'Penilaian tidak lengkap:\n\n';
                    validationErrors.forEach(error => {
                        errorMessage += `Bulan ${error.month}:\n`;
                        error.standards.forEach(standard => {
                            errorMessage += `• ${standard}\n`;
                        });
                        errorMessage += '\n';
                    });
                    errorMessage +=
                        'Mohon lengkapi penilaian untuk semua standar yang memiliki bobot > 0 pada bulan yang sudah dimulai evaluasinya.';

                    if (window.Swal) {
                        Swal.fire({
                            title: 'Validasi Gagal',
                            text: errorMessage,
                            icon: 'warning',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#028284',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showCloseButton: true
                        });
                    } else {
                        alert(errorMessage);
                    }
                    return false;
                }

                return true;
            };

            // Function to handle weight changes that affect active/inactive status
            const handleWeightActiveStatusChange = (weightInput) => {
                const weight = parseFloat(weightInput.value) || 0;
                const isInactive = weight === 0;
                const monthId = weightInput.getAttribute('data-month-id');
                const nameMatch = weightInput.name.match(/bobot\[(\d+)\]\[(\d+)\]/);

                if (nameMatch) {
                    const itemId = nameMatch[2];
                    const row = weightInput.closest('tr');
                    const ratingInputs = row.querySelectorAll(`input[name*="nilai[${monthId}][${itemId}]"]`);

                    // Update visual styling
                    if (isInactive) {
                        weightInput.classList.add('border-secondary', 'bg-light');
                        weightInput.title = 'Nonaktif (0%)';

                        // Disable and uncheck rating inputs for inactive items
                        ratingInputs.forEach(ratingInput => {
                            ratingInput.disabled = true;
                            ratingInput.checked = false;
                            const label = ratingInput.nextElementSibling;
                            if (label) label.classList.add('text-muted');
                        });

                        // Update help text
                        const helpText = row.querySelector('small');
                        if (helpText) {
                            helpText.innerHTML = '<i class="fas fa-pause"></i> Nonaktif (bobot 0%)';
                            helpText.className = 'text-muted d-block mt-1 text-center';
                            helpText.style.fontSize = '10px';
                        }
                    } else {
                        weightInput.classList.remove('border-secondary', 'bg-light');

                        // Re-enable rating inputs
                        if (!weightInput.disabled) {
                            ratingInputs.forEach(ratingInput => {
                                ratingInput.disabled = false;
                                const label = ratingInput.nextElementSibling;
                                if (label) label.classList.remove('text-muted');
                            });
                        }
                    }

                    // Refresh evaluation highlighting
                    highlightIncompleteEvaluations();
                }
            };

            // Helper function to get month name
            const getMonthName = (monthId) => {
                const monthNames = {!! json_encode(
                    $calendarMonths->mapWithKeys(function ($month) {
                        return [$month->id => \Carbon\Carbon::create($month->year, $month->month)->translatedFormat('F Y')];
                    }),
                ) !!};
                return monthNames[monthId] || 'Unknown';
            };

            // Toggle month tabs when position tabs change
            document.querySelectorAll('#positionTab button[data-position-id]').forEach(btn => {
                btn.addEventListener('shown.bs.tab', function() {
                    const posId = this.getAttribute('data-position-id');
                    document.querySelectorAll('.month-tab-nav').forEach(nav => {
                        nav.style.display = nav.getAttribute('data-for-position') === posId ? '' : 'none';
                    });
                });
            });

            // ===== EDIT (UNLOCK) evaluated months =====
            const btnEdit = document.getElementById('btn-edit-eval');
            if (btnEdit) {
                btnEdit.addEventListener('click', function() {
                    if (this.classList.contains('btn-outline-warning')) {
                        // Edit mode -> Unlock
                        const confirmFn = window.Swal
                            ? () => Swal.fire({
                                title: 'Edit Penilaian?',
                                text: 'Penilaian yang sudah tersimpan akan dibuka kembali untuk diedit. Pastikan Anda menyimpan ulang setelah melakukan perubahan.',
                                icon: 'question',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Buka Kunci',
                                cancelButtonText: 'Batal',
                                confirmButtonColor: '#028284',
                                cancelButtonColor: '#6c757d',
                            }).then(result => { if (result.isConfirmed) unlockEvaluations(); })
                            : () => { if (confirm('Buka kunci penilaian yang sudah tersimpan?')) unlockEvaluations(); };
                        confirmFn();
                    } else {
                        // Cancel mode -> Lock (Reload)
                        const confirmCancel = window.Swal
                            ? () => Swal.fire({
                                title: 'Batal Edit?',
                                text: 'Semua perubahan yang belum disimpan akan hilang. Kembali ke mode terkunci?',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Batalkan',
                                cancelButtonText: 'Lanjut Edit',
                                confirmButtonColor: '#dc3545',
                                cancelButtonColor: '#6c757d',
                            }).then(result => { if (result.isConfirmed) window.location.reload(); })
                            : () => { if (confirm('Batal edit dan buang perubahan?')) window.location.reload(); };
                        confirmCancel();
                    }
                });
            }

            const unlockEvaluations = () => {
                const form = document.getElementById('form-eval');
                if (!form) return;

                // Enable all disabled bobot and rating inputs
                form.querySelectorAll('.bobot-input:disabled, .rating-input:disabled').forEach(el => {
                    el.disabled = false;
                    // Remove muted styling on labels
                    const label = el.nextElementSibling;
                    if (label) label.classList.remove('text-muted');

                    // Attach comma-to-dot and input handlers to newly enabled bobot inputs
                    if (el.classList.contains('bobot-input')) {
                        el.addEventListener('keydown', function(e) {
                            if (e.key === ',') {
                                e.preventDefault();
                                const start = this.selectionStart;
                                const end = this.selectionEnd;
                                const val = this.value;
                                if (!val.includes('.')) {
                                    this.value = val.substring(0, start) + '.' + val.substring(end);
                                    this.setSelectionRange(start + 1, start + 1);
                                    this.dispatchEvent(new Event('input'));
                                }
                            }
                        });
                        el.addEventListener('input', function() {
                            updateBobotTotals();
                            checkWeightModification(this);
                            handleWeightActiveStatusChange(this);
                        });
                    }
                });

                // Update lock notification banners
                document.querySelectorAll('.eval-lock-banner').forEach(banner => {
                    banner.style.backgroundColor = '#fff3cd';
                    banner.innerHTML = `
                        <i class="fas fa-lock-open me-2"></i>
                        <div><strong>Mode Edit</strong> — Penilaian dibuka untuk diedit. Jangan lupa klik <strong>Simpan Penilaian</strong> setelah selesai.</div>
                    `;
                });

                // Change Edit button to Cancel button
                btnEdit.classList.remove('btn-outline-warning');
                btnEdit.classList.add('btn-outline-danger');
                btnEdit.innerHTML = '<i class="fas fa-times me-1"></i> Batal Edit';
                
                // Ensure submit is enabled
                const submitBtn = form.querySelector('button[type="submit"]');
                if (submitBtn) submitBtn.disabled = false;

                // Recalculate totals
                updateBobotTotals();

                if (window.Swal) {
                    Swal.fire({
                        title: 'Penilaian Dibuka',
                        text: 'Silakan edit nilai dan bobot, lalu klik Simpan Penilaian.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false,
                    });
                }
            };
        });
    </script>
@endpush