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

@section('content')

    @php
        $user = session('user');

        $roleRaw = data_get($user, 'idroles', '');
        $role = strtolower(trim($roleRaw));

        $map = [
            1 => 'auditr',
            2 => 'audtee',
            3 => 'admins',
            4 => 'mr',
        ];

        if (is_numeric($roleRaw)) {
            $role = $map[$roleRaw] ?? '';
        } else {
            $roles = collect(explode(',', strtolower((string) $roleRaw)))
                ->map(fn ($role) => trim($role))
                ->filter()
                ->values();

            foreach (['admins', 'admin', 'mr', 'auditr', 'audtee'] as $candidateRole) {
                if ($roles->contains($candidateRole)) {
                    $role = $candidateRole;
                    break;
                }
            }
        }

        $isAuditor = $role == 'auditr';
        $isAuditee = $role == 'audtee';
        $isMr = $role == 'mr';
        $isAdmin = in_array($role, ['admin', 'admins', 'mr']);
    @endphp

    @include('layouts.navbars.auth.topnav', ['title' => 'Form Tambah NCR Internal'])

    <div class="card shadow-lg mx-4">
        <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">

        <form method="POST" action="{{ url($url_menu) }}" enctype="multipart/form-data" id="ncrInternalForm">

            @csrf



            <div class="card shadow-lg border-0 mb-4">
                <div class="card-body p-5">

                    <h4 class="mb-1">Form Tambah Temuan NCR</h4>

                    <p class="text-sm text-muted mb-4">
                        Diisi oleh auditor berdasarkan hasil audit
                    </p>

                    @include('components.alert')

                    @if ($isAuditor && ($deadline_passed ?? false))
                        <div class="deadline-alert" role="alert">
                            <div class="deadline-alert-icon">
                                <i class="fas fa-clock-rotate-left"></i>
                            </div>
                            <div class="deadline-alert-content">
                                <div class="deadline-alert-title">Belum Ada Jadwal Input NCR yang Dibuka</div>
                                <div class="deadline-alert-text">
                                    Tidak ada jadwal audit yang ditugaskan kepada Anda dan sedang berada dalam periode
                                    input NCR (<span>start_date</span> sampai <span>ncr_deadline</span>).
                                </div>
                            </div>
                            <span class="deadline-alert-badge">Ditutup</span>
                        </div>
                    @endif

                    <div class="row">

                        <div class="col-md-4 mb-3">

                            <label class="form-label">Departemen
                                @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            @if ($isAdmin || $isAuditor)
                                <select name="iddepartments" id="departemenSelect" class="form-control form-control-lg"
                                    required>
                                    <option value="">-- PILIH DEPARTEMEN --</option>
                                    @foreach ($departments as $d)
                                        <option value="{{ $d->iddepartments }}" data-prefix="{{ $d->prefix }}"
                                            data-kode="{{ $d->kode_utama }}">
                                            {{ $d->department_label ?? \App\Helpers\DepartmentHelper::label($d) }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                @php $myDeptData = $departments->first(); @endphp
                                <input type="text" class="form-control form-control-lg"
                                    value="{{ $myDeptData ? ($myDeptData->department_label ?? \App\Helpers\DepartmentHelper::label($myDeptData)) : '-' }}" readonly>
                                <input type="hidden" name="iddepartments" id="departemenSelect"
                                    value="{{ $myDeptData->iddepartments ?? '' }}"
                                    data-prefix="{{ $myDeptData->prefix ?? '' }}"
                                    data-kode="{{ $myDeptData->kode_utama ?? '' }}">
                            @endif

                        </div>


                        <div class="col-md-4 mb-3">

                            <label class="form-label">Tanggal Audit
                                  @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <input type="date" name="tanggal" id="tanggalAudit" class="form-control form-control-lg"
                                required>

                        </div>


                        <div class="col-md-4 mb-3">

                            <label class="form-label">No NCR</label>

                            <input type="text" id="ncrNumber" class="form-control form-control-lg"
                                value="Belum digenerate" placeholder="Digenerate dari list NCR" readonly>

                        </div>

                        <div class="col-md-4 mb-3 d-none" id="sessionSelectWrapper">

                            <label class="form-label">Jadwal / Sesi Audit
                                  @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <select name="idsession" id="sessionSelect" class="form-control form-control-lg">
                                <option value="">-- PILIH SESI AUDIT --</option>
                            </select>

                        </div>

                    </div>

                    <div id="scheduleAlertBox" class="schedule-note d-none mt-2" role="note"></div>


                    <hr class="my-4">


                    <div class="row">

                        <select name="idstandards[]" id="isoSelect" class="d-none" multiple required aria-hidden="true">
                                <option value="">-- PILIH ISO --</option>
                        </select>

                        <div class="col-md-12 mb-3">

                            <label class="form-label">Standar ISO &amp; Klausul
                                  @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <select name="idclauses[]" id="clauseSelect" class="form-control form-control-lg select2" data-load-state="idle"
                                multiple required>

                            </select>
                            <small class="text-muted">Cari ISO atau klausul, lalu pilih satu atau beberapa klausul.</small>

                        </div>

                        <div class="col-md-12 mb-3" id="smk3Wrapper" style="display:none">
                            <label class="form-label" for="smk3">SMK3</label>
                            <textarea name="smk3" id="smk3" class="form-control" rows="3" maxlength="1000"
                                placeholder="Tuliskan keterangan tambahan SMK3">{{ old('smk3') }}</textarea>
                        </div>


                        <div class="col-md-6 mb-3">

                            <label class="form-label">Kategori
                                  @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <select name="idcategories" class="form-control form-control-lg" required>

                                <option value="">-- PILIH KATEGORI --</option>

                                @foreach ($categories as $c)
                                    <option value="{{ $c->idcategories }}">
                                        {{ $c->name }}
                                    </option>
                                @endforeach

                            </select>

                        </div>


                

                    </div>


                    <hr class="my-4">


                    <h5 class="mb-3">PLOR</h5>


                    <div class="row">

                        <div class="col-md-6 mb-3">

                            <label>Problem
                                    @if ($isAdmin || $isAuditor)
                                        <span class="text-danger">*</span>
                                    @endif  
                            </label>
                            <textarea name="problem" class="form-control @if ($isAuditee) bg-light text-muted @endif"
                                rows="4" @if ($isAuditee) disabled @endif></textarea>
                        </div>


                        <div class="col-md-6 mb-3">

                            <label>Location
                                    @if ($isAdmin || $isAuditor)
                                        <span class="text-danger">*</span>
                                    @endif
                            </label>
                            <textarea name="location" class="form-control @if ($isAuditee) bg-light text-muted @endif"
                                rows="4" @if ($isAuditee) disabled @endif></textarea>

                        </div>


                        <div class="col-md-6 mb-3">

                            <label>Objective Evidence
                                    @if ($isAdmin || $isAuditor)
                                        <span class="text-danger">*</span>
                                    @endif
                            </label>

                            <textarea name="evidence" class="form-control" rows="4" @if ($isAuditee) disabled @endif></textarea>

                        </div>


                        <div class="col-md-6 mb-3">

                            <label>Reference
                                    @if ($isAdmin || $isAuditor)
                                        <span class="text-danger">*</span>
                                    @endif
                            </label>

                            <textarea name="reference" class="form-control" rows="4" @if ($isAuditee) disabled @endif></textarea>

                        </div>

                    </div>


                    <hr class="my-4">

                    <h5 class="mb-3">Tindak Lanjut Auditee</h5>

                    <div class="row">

                        <div class="col-md-6 mb-3">

                            <label>Analisa Penyebab
                                @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>
                            <textarea name="analysis" class="form-control @if ($isAuditor) bg-light text-muted @endif"
                                rows="4" @if ($isAuditor) disabled @endif></textarea>
                        </div>

                                <div class="col-md-6 mb-3">

                            <label class="form-label">Fishbone Root Cause
                                @if ($isAdmin)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            @foreach ($fishbones as $f)
                                <div class="form-check">

                                    <input class="form-check-input" type="checkbox" name="fishbone[]"
                                        value="{{ $f->code }}" @disabled($isAuditor)>

                                    <label class="form-check-label">

                                        {{ $f->name }}

                                    </label>

                                </div>
                            @endforeach

                        </div>


                        <div class="col-md-6 mb-3">

                            <label>Correction
                                @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <textarea name="correction" class="form-control" rows="4"
                                @if ($isAuditor) disabled @endif></textarea>

                        </div>


                        <div class="col-md-12 mb-3">

                            <label>Corrective Action
                                @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <textarea name="corrective_action" class="form-control" rows="4"
                                @if ($isAuditor) disabled @endif></textarea>

                        </div>

                        <div class="col-md-12 mb-3">

                            <label>Evaluasi Efektifitas
                                @if ($isAdmin || $isAuditor)
                                    <span class="text-danger">*</span>
                                @endif
                            </label>

                            <textarea name="evaluation" class="form-control" rows="4"
                                @if ($isAuditor) disabled @endif></textarea>

                        </div>

                    </div>

                    <h5 class="mb-3">Upload Bukti</h5>
                    <p class="text-muted small">File diunggah saat form disimpan. Untuk mengganti file, tandai file lama untuk dihapus lalu pilih file baru. Penghapusan dapat dibatalkan sebelum menyimpan.</p>

                    <div class="upload-wrapper">

                        <label for="buktiInput" class="upload-box">
                            <i class="fas fa-plus"></i>
                            <span>Upload</span>
                        </label>

                        <input type="file" name="bukti[]" id="buktiInput" multiple accept="image/*,.pdf" hidden>

                    </div>

                    <div id="file-list" class="file-list mt-3"></div>


                    <hr class="my-4">


                    <div class="row">

                        @if ($isAuditor || $isAdmin)
                            <div class="col-md-4 mb-3">
                                <label>Auditor
                                    @if ($isAdmin || $isAuditor)
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>

                                <select name="lead_auditor_id" id="leadAuditorSelect" class="form-control select2">
                                    <option value="">-- PILIH LEAD AUDITOR --</option>
                                </select>
                            </div>
                        @endif

                        @if ($isAuditee || $isAdmin)
                            <div class="col-md-4 mb-3">
                                <label>Auditee
                                    @if ($isAdmin || $isAuditee)
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>

                                <select name="auditee" id="auditeeSelect" class="form-control select2" required>
                                    <option value="">-- PILIH AUDITEE --</option>

                                    @foreach ($auditees as $a)
                                        <option value="{{ $a->id }}" data-dept="{{ $a->department_id }}">
                                            {{ $a->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        @if ($isAdmin)
                            <div class="col-md-4 mb-3">
                                <label>Management Representative
                                    @if ($isAdmin)
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>
                                <select name="mr" id="mrSelect" class="form-control select2">
                                    <option value="">-- PILIH MR --</option>

                                    @foreach ($mrs as $m)
                                        @php $mrName = trim($m->firstname . ' ' . $m->lastname); @endphp
                                        <option value="{{ $m->id }}"
                                            @if ((string) ($defaultMrId ?? '') === (string) $m->id) selected @endif>
                                            {{ $mrName }}{{ empty($m->signature_path) ? ' (Belum ada TTD)' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                    </div>


                    <hr class="my-4">




                    @if ($isAdmin)
                        <h5 class="mb-3">Status NCR</h5>

                        <div class="row">
                            <div class="col-md-4">

                                <select name="status" class="form-control form-control-lg">

                                    <option value="ENTRY">ENTRY</option>
                                    <option value="ON_PROGRESS">ON PROGRESS</option>
                                    <option value="IN_REVIEW">IN REVIEW</option>
                                    <option value="CLOSED">CLOSED</option>

                                </select>

                            </div>
                        </div>

                        <hr class="my-4">
                    @endif


                    <hr class="my-4">

                    <div class="d-flex mt-4">
                        @if ($isAuditor)
                            @php $deadlinePassed = $deadline_passed ?? false; @endphp
                            <button type="submit" name="action" value="posting"
                                class="btn btn-info me-2 {{ $deadlinePassed ? 'disabled' : '' }}"
                                {{ $deadlinePassed ? 'disabled' : '' }}
                                title="{{ $deadlinePassed ? 'Tidak dapat posting, batas waktu NCR sudah habis.' : '' }}">
                                <i class="fas fa-paper-plane me-1"></i> Posting
                            </button>
                            <button type="submit" name="action" value="draft"
                                class="btn btn-primary me-2 {{ $deadlinePassed ? 'disabled' : '' }}"
                                {{ $deadlinePassed ? 'disabled' : '' }}
                                title="{{ $deadlinePassed ? 'Tidak dapat menyimpan, batas waktu NCR sudah habis.' : '' }}">
                                <i class="fas fa-save me-1"></i> Simpan Draft
                            </button>
                        @else
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-save me-1"></i> Simpan
                            </button>
                        @endif

                        <a href="{{ url($url_menu) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </a>
                    </div>


                </div>
            </div>

        </form>

    </div>



    <style>
        .upload-wrapper {
            display: flex;
            gap: 15px;
        }

        .upload-box {

            width: 80px;
            height: 80px;

            border: 2px dashed #cfd4da;
            border-radius: 12px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            background: #f8f9fa;
            transition: 0.2s;
        }

        .upload-box:hover {
            border-color: #5e72e4;
            background: #eef2ff;
        }

        .upload-box i {
            font-size: 20px;
            color: #5e72e4;
        }

        .upload-box span {
            font-size: 11px;
        }

        .file-item {

            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: space-between;

            background: #f8f9fa;
            padding: 8px 10px;

            border-radius: 8px;

            cursor: pointer;
            margin-bottom: 5px;
        }

        .evidence-info { min-width: 0; flex: 1; }
        .evidence-name { overflow-wrap: anywhere; }
        .evidence-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .evidence-pending-delete { background: #fff3f3; border: 1px solid #f1b7bd; }
        .evidence-pending-delete .evidence-name { text-decoration: line-through; }

        .preview-modal {

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 9999;
        }

        .preview-modal img {
            max-width: 80%;
            max-height: 80%;
            border-radius: 8px;
        }

        .deadline-alert {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            border: 1px solid #f3c7d1;
            border-left: 4px solid #f5365c;
            border-radius: 12px;
            background: #fff6f8;
            color: #344767;
            padding: 14px 16px;
            margin-bottom: 24px;
        }

        .deadline-alert-icon {
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            border-radius: 8px;
            background: #fde6eb;
            color: #f5365c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .deadline-alert-content {
            flex: 1;
            min-width: 0;
        }

        .deadline-alert-title {
            font-weight: 700;
            font-size: 14px;
            line-height: 1.35;
            margin-bottom: 3px;
        }

        .deadline-alert-text {
            color: #67748e;
            font-size: 13px;
            line-height: 1.45;
        }

        .deadline-alert-text span {
            font-family: monospace;
            color: #344767;
        }

        .deadline-alert-badge {
            flex: 0 0 auto;
            border-radius: 999px;
            background: #fde6eb;
            color: #c81e46;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.4;
        }

        @media (max-width: 575.98px) {
            .deadline-alert {
                gap: 10px;
                padding: 12px;
            }

            .deadline-alert-badge {
                display: none;
            }
        }

        .schedule-note {
            border: 1px solid #d7dee3;
            border-left: 4px solid #8392ab;
            background: #f8f9fa;
            color: #344767;
            border-radius: 12px;
            padding: 12px 16px;
        }

        .schedule-note.note-warning {
            border-left-color: #f0ad4e;
            background: #fff8e8;
        }

        .schedule-note.note-info {
            border-left-color: #11cdef;
            background: #eefbff;
        }

        .schedule-note.note-danger {
            border-left-color: #f5365c;
            background: #fff1f3;
        }

        .schedule-note.note-neutral {
            border-left-color: #8392ab;
            background: #f8f9fa;
        }

        .schedule-note-sessions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .schedule-note-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid #d7dee3;
            border-radius: 999px;
            background: #fff;
            padding: 4px 10px;
            font-size: 12px;
            line-height: 1.4;
            color: #344767;
        }

    select.form-control,
    select.form-control-lg {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-color: #fff;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 1 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;

        padding-right: 35px;
    }

    input.form-control,
    textarea.form-control {
        background-image: none !important;
    }

    .select2-container--default .select2-selection--multiple {
        background-color: #fff !important;
        border: 1px solid #d2d6da !important;
        border-radius: 0.5rem !important;
        min-height: 46px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #5e72e4 !important;
        border: 1px solid #4054c8 !important;
        border-radius: 999px !important;
        color: #fff !important;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.4;
        margin-top: 8px !important;
        padding: 3px 10px 3px 28px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: #fff !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #fff !important;
        padding: 0 7px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: #f5365c !important;
        color: #fff !important;
    }


    </style>


    <script src="{{ asset('assets/js/ncr-clause-search.js') }}"></script>
    <script>
        const baseUrl = "{{ url($url_menu) }}";
        const isAuditor = @json($isAuditor);
        const isMr = @json($isMr);
        const usesMasterIsoClauses = @json($isAuditor || $isAdmin);
        const scheduleValidationEnabled = @json($isAuditor || $isAuditee || $isMr);
        const allStandards = @json($standards ?? []);
        const allClauses = @json($clauses ?? []);
        const defaultMrId = @json((string) ($defaultMrId ?? ''));
        const formElement = document.getElementById("ncrInternalForm");
        const scheduleAlertBox = document.getElementById("scheduleAlertBox");
        let currentAvailableSessions = [];
        let isoRequestVersion = 0;
        let clauseRequestVersion = 0;

        function buildActionUrl(action, params = {}) {
            const query = new URLSearchParams({
                action
            });

            Object.entries(params).forEach(([key, value]) => {
                if (Array.isArray(value)) {
                    value = value.filter(item => item !== null && item !== undefined && item !== '').join(',');
                }

                if (value !== null && value !== undefined && value !== '') {
                    query.append(key, value);
                }
            });

            return `${baseUrl}?${query.toString()}`;
        }

        function resetIsoSelect(placeholder = '-- PILIH ISO --') {
            isoRequestVersion++;
            const isoSelect = document.getElementById("isoSelect");
            isoSelect.innerHTML = `<option value="">${placeholder}</option>`;
            $('#isoSelect').val([]).trigger('change.select2');
        }

        function resetClauseSelect(placeholder = '-- PILIH ISO TERLEBIH DAHULU --') {
            clauseRequestVersion++;
            const clauseSelect = document.getElementById("clauseSelect");
            clauseSelect.innerHTML = '';
            clauseSelect.dataset.loadState = 'idle';
            clauseSelect.setAttribute('aria-busy', 'false');
            $('#clauseSelect').val([]).trigger('change');
            window.refreshNcrClauseResults(clauseSelect);
        }

        function setClauseLoadState(state) {
            const select = document.getElementById('clauseSelect');
            select.dataset.loadState = state;
            select.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false');
            window.refreshNcrClauseResults(select);
        }

        function resetLeadAuditorSelect(placeholder = '-- PILIH LEAD AUDITOR --') {
            const leadAuditorSelect = document.getElementById("leadAuditorSelect");

            if (!leadAuditorSelect) return;

            leadAuditorSelect.innerHTML = `<option value="">${placeholder}</option>`;
            leadAuditorSelect.value = "";
            $('#leadAuditorSelect').val('').trigger('change');
        }

        function resetAuditeeSelect(placeholder = '-- PILIH AUDITEE --') {
            const auditeeSelect = document.getElementById("auditeeSelect");

            if (!auditeeSelect) return;

            auditeeSelect.innerHTML = `<option value="">${placeholder}</option>`;
            auditeeSelect.value = "";
            $('#auditeeSelect').val('').trigger('change');
        }

        function resetSessionSelect(placeholder = '-- PILIH SESI AUDIT --') {
            const sessionSelect = document.getElementById("sessionSelect");
            const wrapper = document.getElementById("sessionSelectWrapper");

            if (!sessionSelect) return;

            sessionSelect.innerHTML = `<option value="">${placeholder}</option>`;
            sessionSelect.value = "";
            sessionSelect.removeAttribute("data-schedule-title");
            sessionSelect.removeAttribute("data-department-name");
            sessionSelect.removeAttribute("data-session-date");
            sessionSelect.removeAttribute("data-start-time");
            sessionSelect.removeAttribute("data-end-time");
            sessionSelect.removeAttribute("data-start-date");
            sessionSelect.removeAttribute("data-end-date");
            sessionSelect.removeAttribute("data-ncr-deadline");
            sessionSelect.removeAttribute("data-standard-summary");

            if (wrapper) {
                wrapper.classList.add('d-none');
            }

            sessionSelect.required = false;
        }

        function getAuditFilterValues() {
            return {
                dept: document.getElementById("departemenSelect")?.value ?? "",
                tanggal: document.getElementById("tanggalAudit")?.value ?? "",
                iso: $('#isoSelect').val() ?? [],
                idsession: document.getElementById("sessionSelect")?.value ?? "",
            };
        }

        function hasRequiredAuditContext() {
            const {
                dept,
                tanggal,
                idsession
            } = getAuditFilterValues();

            if (!dept) {
                return false;
            }

            if (scheduleValidationEnabled && !tanggal) {
                return false;
            }

            return true;
        }

        function escapeHtml(value) {
            return String(value ?? "")
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function formatSessionDateLabel(sessionDate) {
            if (!sessionDate) {
                return "-";
            }

            const date = new Date(`${sessionDate}T00:00:00`);

            if (Number.isNaN(date.getTime())) {
                return escapeHtml(sessionDate);
            }

            return date.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
            });
        }

        function formatDateInput(date) {
            const yyyy = date.getFullYear();
            const mm = String(date.getMonth() + 1).padStart(2, '0');
            const dd = String(date.getDate()).padStart(2, '0');

            return `${yyyy}-${mm}-${dd}`;
        }

        function todayString() {
            return formatDateInput(new Date());
        }

        function formatDateLabel(dateValue) {
            return formatSessionDateLabel(dateValue);
        }

        function getSelectedSessionMeta() {
            const sessionSelect = document.getElementById("sessionSelect");

            if (!sessionSelect || !sessionSelect.value) {
                return null;
            }

            return {
                idsession: sessionSelect.value,
                scheduleTitle: sessionSelect.dataset.scheduleTitle ?? "",
                departmentName: sessionSelect.dataset.departmentName ?? "",
                sessionDate: sessionSelect.dataset.sessionDate ?? "",
                startTime: sessionSelect.dataset.startTime ?? "",
                endTime: sessionSelect.dataset.endTime ?? "",
                startDate: sessionSelect.dataset.startDate ?? "",
                endDate: sessionSelect.dataset.endDate ?? "",
                ncrDeadline: sessionSelect.dataset.ncrDeadline ?? "",
                standardSummary: sessionSelect.dataset.standardSummary ?? "",
            };
        }

        function buildSessionLabel(session) {
            const date = formatSessionDateLabel(session.session_date);
            const time = `${(session.start_time ?? '-').slice(0, 5)} - ${(session.end_time ?? '-').slice(0, 5)}`;
            const standards = session.standard_summary ? ` | ISO: ${session.standard_summary}` : '';

            return `${session.schedule_title ?? 'Jadwal Audit'} | ${date} ${time}${standards}`;
        }

        function setSessionMeta(session) {
            const sessionSelect = document.getElementById("sessionSelect");

            if (!sessionSelect || !session) return;

            sessionSelect.value = session.idsession;
            sessionSelect.dataset.scheduleTitle = session.schedule_title ?? "";
            sessionSelect.dataset.departmentName = session.department_name ?? "";
            sessionSelect.dataset.sessionDate = session.session_date ?? "";
            sessionSelect.dataset.startTime = session.start_time ?? "";
            sessionSelect.dataset.endTime = session.end_time ?? "";
            sessionSelect.dataset.startDate = session.start_date ?? "";
            sessionSelect.dataset.endDate = session.end_date ?? "";
            sessionSelect.dataset.ncrDeadline = session.ncr_deadline ?? "";
            sessionSelect.dataset.standardSummary = session.standard_summary ?? "";
        }

        function applySessionDateWindow() {
            const tanggalAudit = document.getElementById("tanggalAudit");
            const meta = getSelectedSessionMeta();

            if (!tanggalAudit) return;

            if (!meta) {
                tanggalAudit.removeAttribute('min');
                tanggalAudit.removeAttribute('max');
                return;
            }

            const currentValue = tanggalAudit.value;

            tanggalAudit.removeAttribute('min');
            tanggalAudit.removeAttribute('max');

            if (!currentValue && meta.sessionDate) {
                tanggalAudit.value = meta.sessionDate;
            }
        }

        function renderAvailableSessions(sessions = []) {
            if (!sessions || sessions.length === 0) {
                return '';
            }

            const badges = sessions.slice(0, 6).map((session) => {
                return `<span class="schedule-note-badge">${escapeHtml(buildSessionLabel(session))}</span>`;
            }).join('');

            const more = sessions.length > 6
                ? `<span class="schedule-note-badge">+${sessions.length - 6} sesi lain</span>`
                : '';

            return `<div class="schedule-note-sessions">${badges}${more}</div>`;
        }

        function populateScheduleSessions(sessions = [], selectedSession = null, forceVisible = false) {
            const sessionSelect = document.getElementById("sessionSelect");
            const wrapper = document.getElementById("sessionSelectWrapper");

            if (!sessionSelect) return;

            resetSessionSelect();

            sessions.forEach((session) => {
                const option = document.createElement("option");
                option.value = session.idsession;
                option.textContent = buildSessionLabel(session);
                sessionSelect.appendChild(option);
            });

            const effectiveSession = selectedSession
                ?? (sessions.length === 1 ? sessions[0] : null);

            if (effectiveSession) {
                setSessionMeta(effectiveSession);
            }

            const shouldShow = forceVisible || sessions.length > 1;

            if (wrapper) {
                wrapper.classList.toggle('d-none', !shouldShow);
            }

            sessionSelect.required = shouldShow;
            applySessionDateWindow();
        }

        function renderScheduleAlert(type, title, message, session = null, availableSessions = []) {
            if (!scheduleAlertBox) return;

            scheduleAlertBox.className = `schedule-note note-${type} mt-2`;

            let detail = "";
            if (session) {
                detail = `
                    <div class="small mt-1">
                        Jadwal: <strong>${escapeHtml(session.schedule_title ?? "-")}</strong><br>
                        Departemen: <strong>${escapeHtml(session.department_name ?? "-")}</strong><br>
                        Periode input: <strong>${formatDateLabel(session.start_date)} - ${formatDateLabel(session.ncr_deadline || session.end_date)}</strong><br>
                        Deadline input: <strong>${formatDateLabel(session.ncr_deadline || session.end_date)}</strong>
                    </div>
                `;
            }

            const availableSessionsHtml = renderAvailableSessions(availableSessions);

            scheduleAlertBox.innerHTML =
                `<strong>${escapeHtml(title)}</strong><br>${escapeHtml(message)}${detail}${availableSessionsHtml}`;
            scheduleAlertBox.classList.remove('d-none');
        }

        function hideScheduleAlert() {
            if (!scheduleAlertBox) return;

            scheduleAlertBox.className = 'schedule-note d-none mt-2';
            scheduleAlertBox.innerHTML = '';
        }

        function syncSelect2DisabledState(elementId, disabled) {
            const element = document.getElementById(elementId);

            if (!element) return;

            $(element).prop('disabled', disabled).trigger('change.select2');
        }

        function setFormLocked(locked) {
            if (!formElement || !scheduleValidationEnabled) return;

            const controls = formElement.querySelectorAll('input, select, textarea, button');

            controls.forEach((control) => {
                if (!control.dataset.baseDisabled) {
                    control.dataset.baseDisabled = control.disabled ? '1' : '0';
                }

                const shouldSkip =
                    control.name === '_token' ||
                    control.type === 'hidden' ||
                    control.id === 'departemenSelect' ||
                    control.id === 'tanggalAudit' ||
                    control.id === 'sessionSelect';

                if (shouldSkip) {
                    return;
                }

                control.disabled = locked || control.dataset.baseDisabled === '1';
            });

            syncSelect2DisabledState('isoSelect', document.getElementById('isoSelect')?.disabled ?? locked);
            syncSelect2DisabledState('clauseSelect', document.getElementById('clauseSelect')?.disabled ?? locked);
            syncSelect2DisabledState('leadAuditorSelect', document.getElementById('leadAuditorSelect')?.disabled ?? locked);
        }

        async function validateScheduleContext() {
            if (!scheduleValidationEnabled) {
                return {
                    valid: true
                };
            }

            const {
                dept,
                tanggal,
                idsession
            } = getAuditFilterValues();

            if (!dept || !tanggal) {
                setFormLocked(true);
                renderScheduleAlert(
                    'neutral',
                    'Catatan Jadwal Audit',
                    'Form NCR akan aktif setelah departemen dan tanggal audit dipilih sesuai jadwal.'
                );
                return {
                    valid: false
                };
            }

            try {
                const response = await fetch(buildActionUrl("getSessionByFilter", {
                    dept,
                    tanggal,
                    idsession
                }));
                const data = await response.json();
                const matchingSessions = data.matching_sessions ?? [];

                if (!data.valid) {
                    populateScheduleSessions(matchingSessions, null, data.session_required ?? false);
                    setFormLocked(true);
                    renderScheduleAlert(
                        data.session_required ? 'neutral' : 'warning',
                        'Catatan Jadwal Audit',
                        data.message ?? 'Tanggal audit tidak sesuai dengan sesi audit pada jadwal.',
                        null,
                        matchingSessions.length ? matchingSessions : (data.available_sessions ?? [])
                    );
                    return data;
                }

                populateScheduleSessions(matchingSessions, data.session ?? null, data.session_required ?? false);
                setFormLocked(false);
                renderScheduleAlert(
                    'info',
                    'Catatan Jadwal Audit',
                    data.message ?? 'Tanggal audit sesuai dengan sesi audit dan periode input NCR masih aktif.',
                    data.session ?? null,
                    matchingSessions
                );

                return data;
            } catch (error) {
                setFormLocked(true);
                renderScheduleAlert(
                    'danger',
                    'Catatan Jadwal Audit',
                    'Sistem tidak dapat memvalidasi jadwal audit saat ini.'
                );
                return {
                    valid: false
                };
            }
        }

        async function loadAvailableScheduleDates() {
            if (!scheduleValidationEnabled) {
                return {
                    available_dates: [],
                    available_sessions: []
                };
            }

            const {
                dept
            } = getAuditFilterValues();

            if (!dept) {
                return {
                    available_dates: [],
                    available_sessions: []
                };
            }

            try {
                const response = await fetch(buildActionUrl("getAvailableScheduleDates", {
                    dept
                }));
                const data = await response.json();

                return data;
            } catch (error) {
                return {
                    available_dates: [],
                    available_sessions: []
                };
            }
        }

        function loadISO() {
            const {
                dept,
                tanggal,
                idsession
            } = getAuditFilterValues();

            if (usesMasterIsoClauses && !scheduleValidationEnabled) {
                const isoSelect = document.getElementById("isoSelect");
                resetIsoSelect();
                resetClauseSelect();

                allStandards.forEach(i => {
                    isoSelect.innerHTML += `<option value="${i.idstandards}">
                ${i.code} - ${i.name}
                </option>`;
                });

                $('#isoSelect').val(allStandards.map(i => String(i.idstandards)));
                $('#isoSelect').trigger('change');
                return;
            }

            if (!hasRequiredAuditContext() || (scheduleValidationEnabled && !idsession)) {
                resetIsoSelect(scheduleValidationEnabled ? '-- PILIH SESI AUDIT TERLEBIH DAHULU --' : '-- PILIH ISO --');
                resetClauseSelect();
                return;
            }

            resetIsoSelect();
            resetClauseSelect();
            setClauseLoadState('loading');
            const requestVersion = isoRequestVersion;
            fetch(buildActionUrl("getIsoByFilter", {
                    dept,
                    tanggal,
                    idsession
                }))
                .then(res => {
                    if (!res.ok) throw new Error('Gagal memuat standar ISO');
                    return res.json();
                })
                .then(data => {
                    if (requestVersion !== isoRequestVersion) return;
                    let isoSelect = document.getElementById("isoSelect");
                    isoSelect.innerHTML = '';
                    resetClauseSelect();

                    data.forEach(i => {
                        isoSelect.innerHTML += `<option value="${i.idstandards}">
                ${i.code} - ${i.name}
                </option>`;
                    });

                    $('#isoSelect').val(data.map(i => String(i.idstandards)));

                    $('#isoSelect').trigger('change');
                })
                .catch(() => {
                    if (requestVersion !== isoRequestVersion) return;
                    resetIsoSelect();
                    resetClauseSelect();
                    setClauseLoadState('error');
                });
        }


        function getClauseStandardId(clause) {
            return String(clause.idstandards ?? clause.idstandard ?? clause.id_standard ?? '');
        }

        function loadClause() {
            const {
                dept,
                tanggal,
                iso,
                idsession
            } = getAuditFilterValues();

            if (usesMasterIsoClauses && !scheduleValidationEnabled) {
                const clauseSelect = document.getElementById("clauseSelect");

                if (!iso || iso.length === 0) {
                    resetClauseSelect();
                    return;
                }

                clauseSelect.innerHTML = '';
                iso.map(String).forEach(standardId => {
                    const standard = allStandards.find(i => String(i.idstandards) === standardId);
                    const standardClauses = allClauses.filter(c => getClauseStandardId(c) === standardId);
                    if (!standardClauses.length) return;

                    const group = document.createElement('optgroup');
                    group.label = standard ? `ISO ${standard.code} - ${standard.name}` : 'Standar ISO';
                    standardClauses.forEach(c => {
                        const option = document.createElement('option');
                        option.value = c.idclauses;
                        option.dataset.standardId = standardId;
                        option.text = `ISO ${standard?.code ?? ''} - ${c.clause_number} ${c.clause_name}`;
                        group.appendChild(option);
                    });
                    clauseSelect.appendChild(group);
                });

                $('#clauseSelect').val([]).trigger('change');
                setClauseLoadState('ready');
                return;
            }

            if (!hasRequiredAuditContext() || (scheduleValidationEnabled && !idsession)) {
                resetClauseSelect();
                return;
            }

            if (!iso || iso.length === 0) {
                resetClauseSelect();
                setClauseLoadState('ready');
                return;
            }

            resetClauseSelect();
            setClauseLoadState('loading');
            const requestVersion = clauseRequestVersion;
            fetch(buildActionUrl("getClausesByFilter", {
                    dept,
                    iso,
                    tanggal,
                    idsession
                }))
                .then(res => {
                    if (!res.ok) throw new Error('Gagal memuat klausul');
                    return res.json();
                })
                .then(data => {
                    if (requestVersion !== clauseRequestVersion) return;
                    let clauseSelect = document.getElementById("clauseSelect");

                    clauseSelect.innerHTML = '';
                    iso.map(String).forEach(standardId => {
                        const standard = allStandards.find(i => String(i.idstandards) === standardId);
                        const standardClauses = data.filter(c => getClauseStandardId(c) === standardId);
                        if (!standardClauses.length) return;

                        const group = document.createElement('optgroup');
                        group.label = standard ? `ISO ${standard.code} - ${standard.name}` : 'Standar ISO';
                        standardClauses.forEach(c => {
                            const option = document.createElement('option');
                            option.value = c.idclauses;
                            option.dataset.standardId = standardId;
                            option.text = c.label
                                ? `ISO ${c.label}`
                                : `ISO ${standard?.code ?? ''} - ${c.clause_number} ${c.clause_name}`;
                            group.appendChild(option);
                        });
                        clauseSelect.appendChild(group);
                    });

                    $('#clauseSelect').val([]).trigger('change');
                    setClauseLoadState('ready');
                })
                .catch(() => {
                    if (requestVersion !== clauseRequestVersion) return;
                    resetClauseSelect('-- PILIH KLAUSUL --');
                    setClauseLoadState('error');
                });
        }
        /*
        ================================
        GENERATE NCR NUMBER
        ================================
        */



        function generateNCR() {
            let output = document.getElementById("ncrNumber");

            if (!output) {
                return;
            }

            const deptControl = document.getElementById("departemenSelect");
            const tanggal = document.getElementById("tanggalAudit")?.value;
            const selectedDept = deptControl?.tagName === 'SELECT'
                ? deptControl.selectedOptions[0]
                : deptControl;
            const kode = selectedDept?.dataset.kode;
            const prefix = selectedDept?.dataset.prefix;

            if (!kode || !prefix || !tanggal) {
                output.value = "Belum digenerate";
                return;
            }

            const monthMap = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];
            const auditDate = new Date(tanggal + "T00:00:00");
            const monthCode = monthMap[auditDate.getMonth()];
            const yearCode = String(auditDate.getFullYear()).slice(-2);

            output.value = `INT.${kode}.XXX.${prefix}.${monthCode}.${yearCode}`;
        }

        async function refreshAuditContext() {
            resetIsoSelect();
            resetClauseSelect();
            resetLeadAuditorSelect();

            generateNCR();

            if (!hasRequiredAuditContext()) {
                if (!scheduleValidationEnabled) {
                    hideScheduleAlert();
                } else if (!getAuditFilterValues().dept) {
                    setFormLocked(true);
                    renderScheduleAlert(
                        'neutral',
                        'Catatan Jadwal Audit',
                        'Pilih departemen terlebih dahulu untuk melihat jadwal audit yang tersedia.'
                    );
                } else if ((currentAvailableSessions ?? []).length === 0) {
                    setFormLocked(true);
                    renderScheduleAlert(
                        'warning',
                        'Catatan Jadwal Audit',
                        'Belum ada jadwal audit yang tersedia untuk departemen ini.',
                        null,
                        currentAvailableSessions ?? []
                    );
                } else {
                    setFormLocked(true);
                    renderScheduleAlert(
                        'neutral',
                        'Catatan Jadwal Audit',
                        'Silakan pilih tanggal audit sesuai tanggal sesi audit yang tersedia.',
                        null,
                        []
                    );
                }
                return;
            }

            const context = await validateScheduleContext();
            if (!context.valid) {
                return;
            }

            loadISO();

            if (document.getElementById("leadAuditorSelect")) {
                loadLeadAuditor();
            }
        }

        async function loadScheduleSessionsForDept() {
            resetSessionSelect();
            resetIsoSelect();
            resetClauseSelect();
            resetLeadAuditorSelect();
            generateNCR();
            currentAvailableSessions = [];

            const tanggalAudit = document.getElementById("tanggalAudit");
            if (tanggalAudit) {
                tanggalAudit.value = "";
                tanggalAudit.removeAttribute('min');
                tanggalAudit.removeAttribute('max');
            }

            const { dept } = getAuditFilterValues();

            if (!scheduleValidationEnabled) {
                hideScheduleAlert();
                setFormLocked(false);
                if (usesMasterIsoClauses) {
                    loadISO();
                    if (document.getElementById("leadAuditorSelect")) {
                        loadLeadAuditor();
                    }
                }
                return;
            }

            if (!dept) {
                setFormLocked(true);
                renderScheduleAlert(
                    'neutral',
                    'Catatan Jadwal Audit',
                    'Pilih departemen terlebih dahulu untuk melihat jadwal audit yang tersedia.'
                );
                return;
            }

            const data = await loadAvailableScheduleDates();
            currentAvailableSessions = data.available_sessions ?? [];

            if (currentAvailableSessions.length === 0) {
                setFormLocked(true);
                renderScheduleAlert(
                    'warning',
                    'Catatan Jadwal Audit',
                    'Belum ada jadwal audit yang masih dibuka untuk departemen ini.'
                );
                return;
            }

            setFormLocked(true);
            renderScheduleAlert(
                'neutral',
                'Catatan Jadwal Audit',
                'Silakan pilih tanggal audit sesuai tanggal sesi audit yang tersedia.',
                null,
                currentAvailableSessions
            );
        }



        /*
        ================================
        UPLOAD FILE MULTIPLE
        ================================
        */

        const input = document.getElementById("buktiInput");
        const list = document.getElementById("file-list");

        let filesArray = [];
        const excludedFiles = new Set();
        const evidenceUploaderFirstname = @json(auth()->user()->firstname ?? '-');

        function renderFileList() {

            list.innerHTML = "";

            filesArray.forEach((file, index) => {

                let item = document.createElement("div");

                const excluded = excludedFiles.has(file);
                item.className = 'file-item' + (excluded ? ' evidence-pending-delete' : '');

                item.innerHTML = `
                                <div class="evidence-info">
                                    <div class="font-weight-bold evidence-name"></div>
                                    <small class="text-muted">Upload by <span class="font-weight-bold evidence-uploader"></span></small>
                                    <small class="d-block evidence-status"></small>
                                </div>

                                <div class="evidence-actions">
                                <button type="button" class="btn btn-sm btn-info preview-btn" title="Lihat file">
                                <i class="fas fa-eye"></i>
                                </button>

                                <button type="button" class="btn btn-sm btn-danger delete-btn" title="Hapus file">
                                <i class="fas fa-trash"></i>
                                </button>
                                </div>
                                `;

                const previewBtn = item.querySelector(".preview-btn");
                const deleteBtn = item.querySelector(".delete-btn");
                item.querySelector('.evidence-name').textContent = file.name;
                item.querySelector('.evidence-uploader').textContent = evidenceUploaderFirstname;
                const status = item.querySelector('.evidence-status');
                status.textContent = excluded ? 'Tidak akan diunggah saat disimpan' : 'File baru · Belum disimpan';
                status.classList.add(excluded ? 'text-danger' : 'text-muted');
                if (excluded) {
                    deleteBtn.textContent = 'Batalkan';
                    deleteBtn.title = 'Batalkan penghapusan';
                }


                previewBtn.onclick = function() {

                    let modal = document.createElement("div");
                    modal.className = "preview-modal";

                    if (file.type.startsWith("image")) {

                        let img = document.createElement("img");
                        img.src = URL.createObjectURL(file);
                        modal.appendChild(img);

                    } else if (file.type === "application/pdf") {

                        let iframe = document.createElement("iframe");
                        iframe.src = URL.createObjectURL(file);
                        iframe.style.width = "80%";
                        iframe.style.height = "80%";
                        iframe.style.background = "#fff";

                        modal.appendChild(iframe);

                    } else {
                        alert("File tidak bisa dipreview");
                        return;
                    }

                    modal.onclick = function() {
                        modal.remove();
                    }

                    document.body.appendChild(modal);
                };


                deleteBtn.onclick = function() {

                    if (excludedFiles.has(file)) {
                        excludedFiles.delete(file);
                    } else {
                        excludedFiles.add(file);
                    }

                    updateInputFiles();

                    renderFileList();

                };

                list.appendChild(item);

            });

        }


        function updateInputFiles() {

            const dataTransfer = new DataTransfer();

            filesArray.forEach(file => {
                if (!excludedFiles.has(file)) dataTransfer.items.add(file);
            });

            input.files = dataTransfer.files;

        }


        input.addEventListener("change", function() {

            Array.from(this.files).forEach(file => {

                filesArray.push(file);

            });

            updateInputFiles();

            renderFileList();

        });

        // ================= INIT =================

        document.addEventListener("DOMContentLoaded", function() {

            const departemenSelect = document.getElementById("departemenSelect");
            const tanggalAudit = document.getElementById("tanggalAudit");
            const isoSelect = document.getElementById("isoSelect");
            const sessionSelect = document.getElementById("sessionSelect");

            if (scheduleValidationEnabled) {
                setFormLocked(true);
                renderScheduleAlert(
                    'neutral',
                    'Catatan Jadwal Audit',
                    'Pilih departemen terlebih dahulu untuk melihat jadwal audit yang tersedia.'
                );
            } else {
                hideScheduleAlert();
            }

            departemenSelect.addEventListener("change", function() {

                loadAuditeesByDepartment();
                loadScheduleSessionsForDept();

            });
            tanggalAudit.addEventListener("change", function() {
                resetSessionSelect();
                refreshAuditContext();
            });

            if (sessionSelect) {
                sessionSelect.addEventListener("change", function() {
                    const selected = (currentAvailableSessions ?? []).find((session) => {
                        return String(session.idsession) === String(sessionSelect.value);
                    });

                    if (selected) {
                        setSessionMeta(selected);
                    }

                    resetIsoSelect();
                    resetClauseSelect();
                    resetLeadAuditorSelect();
                    refreshAuditContext();
                });
            }

            if (departemenSelect.value) {
                loadAuditeesByDepartment();
                loadScheduleSessionsForDept();
            }

            $('#isoSelect').on('change', loadClause);

            if (usesMasterIsoClauses && !scheduleValidationEnabled) {
                loadISO();
            }

        });

        /* ================= SELECT2 INIT ================= */
        $(document).ready(function() {

            if ($('#clauseSelect').length) {
                $('#clauseSelect').select2({
                    placeholder: "Cari Klausul...",
                    matcher: window.matchNcrClause,
                    minimumInputLength: 0,
                    language: { noResults: () => window.ncrClauseMessage(document.getElementById('clauseSelect')) },
                    width: '100%'
                });
            }

            if ($('#leadAuditorSelect').length) {
                $('#leadAuditorSelect').select2({
                    placeholder: "Pilih Lead Auditor...",
                    width: '100%'
                });
            }

            if ($('#auditeeSelect').length) {
                $('#auditeeSelect').select2({
                    placeholder: "Pilih Auditee...",
                    width: '100%'
                });
            }

            if ($('#mrSelect').length) {
                $('#mrSelect').select2({
                    placeholder: "Pilih Management Representative...",
                    width: '100%'
                });

                if (defaultMrId) {
                    $('#mrSelect').val(defaultMrId).trigger('change.select2');
                }
            }

            $('#clauseSelect').on('change', function() {
                const standardIds = $(this).find('option:selected').map(function() {
                    return this.dataset.standardId;
                }).get().filter(Boolean);
                $('#isoSelect').val([...new Set(standardIds)]);
            });



        });


        function loadLeadAuditor() {

            const select = document.getElementById("leadAuditorSelect");

            if (!select) return;

            const {
                dept,
                tanggal,
                idsession
            } = getAuditFilterValues();

            if (!hasRequiredAuditContext() || (scheduleValidationEnabled && !idsession)) {
                resetLeadAuditorSelect();
                return;
            }

            fetch(buildActionUrl("getLeadAuditorByDept", {
                    dept,
                    tanggal,
                    idsession
                }))
                .then(res => res.json())
                .then(data => {

                    resetLeadAuditorSelect();

                    data.forEach(a => {

                        let opt = document.createElement("option");

                        opt.value = a.idauditor;
                        opt.text = a.name;

                        select.appendChild(opt);

                    });

                    $('#leadAuditorSelect').val('').trigger('change');

                })
                .catch(() => {
                    resetLeadAuditorSelect();
                });

        }

        function loadAuditeesByDepartment(selectedAuditeeId = null) {
            const select = document.getElementById("auditeeSelect");
            const dept = document.getElementById("departemenSelect")?.value;

            if (!select) return;

            if (!dept) {
                resetAuditeeSelect();
                return;
            }

            resetAuditeeSelect('Memuat PIC...');

            fetch(buildActionUrl("getAuditeesByDepartment", { dept }))
                .then(res => res.json())
                .then(data => {
                    resetAuditeeSelect(data.length ? '-- PILIH AUDITEE --' : 'Belum ada PIC departemen');

                    data.forEach(auditee => {
                        const option = document.createElement("option");
                        option.value = auditee.id;
                        option.dataset.dept = auditee.department_id ?? dept;
                        option.text = auditee.name;
                        select.appendChild(option);
                    });

                    const nextValue = selectedAuditeeId && data.some(auditee => String(auditee.id) === String(selectedAuditeeId))
                        ? selectedAuditeeId
                        : (data[0]?.id ?? '');

                    $('#auditeeSelect').val(nextValue ? String(nextValue) : '').trigger('change');
                })
                .catch(() => {
                    resetAuditeeSelect('Gagal memuat PIC');
                });
        }

    </script>
    <script src="{{ asset('assets/js/ncr-single-standard.js') }}"></script>
@endsection