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

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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css">

    @php
        $idEnc = $idEnc ?? ($idencrypt ?? null);

        $printUrl = $idEnc ? rtrim(url('trperl'), '/') . '/print/' . rawurlencode($idEnc) : null;

        $detailUrl = $idEnc ? rtrim(url('trperl'), '/') . '/show/' . rawurlencode($idEnc) : null;
    @endphp

    <style>
        .permit-page {
            min-height: calc(100vh - 120px);
        }

        .permit-toolbar-card,
        .permit-assessment-card,
        .permit-preview-card {
            border: 0;
            border-radius: 18px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
            overflow: hidden;
        }

        .permit-card-header {
            background: linear-gradient(135deg, #028284, #1c8c90);
            color: #fff;
            padding: 14px 18px;
        }

        .permit-card-header h5 {
            margin: 0;
            color: #fff;
            font-weight: 700;
        }

        .permit-card-header small {
            color: rgba(255, 255, 255, .85);
        }

        .permit-preview-sticky {
            position: sticky;
            top: 90px;
        }

        .permit-preview-body {
            position: relative;
            background: #f8f9fa;
            min-height: 620px;
        }

        .permit-preview-loading {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #67748e;
            font-weight: 600;
            background: #f8f9fa;
            z-index: 1;
        }

        .permit-preview-frame {
            position: relative;
            z-index: 2;
            width: 100%;
            height: calc(100vh - 180px);
            min-height: 620px;
            border: 0;
            background: #f8f9fa;
        }

        .assessment-section-title {
            color: #1c8c90;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #1c8c90;
        }

        .criteria-row {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            background: #fff;
        }

        .criteria-row:hover {
            background: #f8ffff;
            border-color: #1c8c90;
        }

        .result-box {
            background: #f8ffff;
            border: 1px solid #1c8c90;
            border-radius: 12px;
            padding: 14px;
        }

        .upload-preview-img {
            width: 100%;
            max-height: 140px;
            min-height: 110px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid #dee2e6;
            cursor: pointer;
            background: #f8f9fa;
        }

        @media (max-width: 991.98px) {
            .permit-preview-sticky {
                position: static;
            }

            .permit-preview-frame,
            .permit-preview-body {
                height: 520px;
                min-height: 520px;
            }
        }

        .multiple-upload-area {
            min-height: 200px;
            padding: 18px;
            border: 2px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
            transition: all .2s ease;
        }

        .multiple-upload-area:hover {
            border-color: #028284;
            background: #f3ffff;
        }

        .multiple-upload-area.drag-active {
            border-color: #028284;
            background: #eaffff;
        }

        .upload-placeholder {
            padding: 55px 15px;
        }

        .add-photo-card {
            width: 100%;
            min-height: 185px;
            padding: 18px;
            border: 2px dashed #9ecfd0;
            border-radius: 12px;
            background: #f5ffff;
            color: #028284;
            cursor: pointer;
            transition: all .2s ease;
        }

        .add-photo-card:hover {
            border-color: #028284;
            background: #eaffff;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(2, 130, 132, .15);
        }

        .add-photo-card small {
            display: block;
            margin-top: 4px;
            color: #67748e;
        }

        .foto-preview-card {
            position: relative;
            overflow: hidden;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
        }

        .foto-preview-card img {
            width: 100%;
            height: 135px;
            object-fit: cover;
        }

        .foto-preview-remove {
            position: absolute;
            top: 7px;
            right: 7px;
            z-index: 3;
            display: flex;
            width: 30px;
            height: 30px;
            padding: 0;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 50%;
            color: #fff;
            background: rgba(220, 53, 69, .92);
        }

        .foto-preview-info {
            padding: 8px 10px;
        }

        .foto-preview-name {
            display: block;
            overflow: hidden;
            color: #344767;
            font-size: 12px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .foto-preview-size {
            display: block;
            color: #8392ab;
            font-size: 11px;
        }
    </style>

    <div class="card shadow-lg mx-4 permit-toolbar-card">
        <div class="card-body p-3">
            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                <i class="fas fa-circle-left me-1"></i>
                <span class="font-weight-bold">Kembali</span>
            </button>
        </div>
    </div>

    <div class="container-fluid py-4 permit-page">
        <form role="form" method="POST" action="{{ route('penilaian.permit') }}" enctype="multipart/form-data"
            id="permitAssessmentForm">
            @csrf

            <input type="hidden" name="form_mode" value="penilaian">
            <input type="hidden" name="nomor_surat" value="{{ $list->id }}">
            <input type="hidden" name="id_permit" value="{{ $list->id }}">
            <div class="row g-4">

                {{-- KIRI: FORM PENILAIAN --}}
                <div class="col-lg-5 col-xl-5">
                    <div class="card permit-assessment-card">
                        <div class="permit-card-header d-flex justify-content-between align-items-start gap-3 flex-wrap">
                            <div>
                                <h5>
                                    <i class="fas fa-clipboard-check me-2"></i>
                                    Penilaian Permit
                                </h5>

                                <small>
                                    {{ $list->id }} - {{ $list->uraian_pekerjaan }}
                                </small>
                            </div>

                            <button type="button" class="btn btn-sm btn-light btn-history-header mb-0"
                                id="btnAmbilHistoryVendor" data-url="{{ route('trnila.history.vendor', $list->id) }}">
                                <i class="fas fa-history me-1"></i>
                                Ambil History
                            </button>
                        </div>

                        <div class="card-body">

                            {{-- KUALIFIKASI --}}
                            <div class="assessment-section-title">
                                1. Kualifikasi Penilaian
                            </div>
                            @foreach ($mst_feedback_criteria as $index => $criteria)
                                @php
                                    $isWajib = (int) ($criteria->wajib ?? 1) === 1;
                                @endphp

                                <div class="criteria-row">
                                    <label
                                        class="form-label fw-bold mb-2 d-flex justify-content-between align-items-start gap-2">
                                        <span>
                                            {{ $index + 1 }}. {{ $criteria->nama_kualifikasi }}
                                        </span>

                                        @if ($isWajib)
                                            <span class="badge bg-danger">Wajib</span>
                                        @else
                                            <span class="badge bg-secondary">Opsional</span>
                                        @endif
                                    </label>

                                    <select class="form-select score-select" name="score_{{ $criteria->id }}"
                                        data-criteria-id="{{ $criteria->id }}" data-wajib="{{ $isWajib ? '1' : '0' }}"
                                        {{ $isWajib ? 'required' : '' }}>

                                        @if ($isWajib)
                                            <option value="" data-score="0" data-label="" data-description="">
                                                [Pilih Score Penilaian]
                                            </option>
                                        @else
                                            <option value="" data-score="0" data-label="NA"
                                                data-description="NA - Kriteria ini tidak wajib dan tidak masuk perhitungan."
                                                selected>
                                                NA - Tidak Dinilai
                                            </option>
                                        @endif

                                        @foreach ($mst_feedback_scores[$criteria->id] ?? collect() as $score)
                                            <option value="{{ $score->id }}" data-score="{{ $score->score }}"
                                                data-label="{{ $score->desc }}" data-description="{{ $score->desc }}">
                                                ({{ $score->score }})
                                                - {{ $score->desc }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <small class="text-muted score-description d-block mt-2"></small>
                                </div>
                            @endforeach

                            <input type="hidden" id="total_value" name="total_value">
                            <input type="hidden" id="average_value" name="average_value">
                            <input type="hidden" id="indikator_value" name="indikator_value">

                            <div class="result-box mt-4 mb-4" id="resultBox">
                                <label class="form-label fw-bold" style="color:#1c8c90;">Hasil Penilaian</label>
                                <input type="text" id="total_penilaian" class="form-control text-center fw-bold"
                                    readonly>
                            </div>

                            <hr>

                            {{-- SANKSI --}}
                            <div class="assessment-section-title">2. Sanksi Kontraktor</div>

                            <div class="mb-4">
                                <label for="sanksi_kontraktor" class="form-label">Sanksi Kontraktor</label>

                                {{-- <select id="sanksi_kontraktor" name="sanksi_kontraktor" class="form-select">
                                    <option value="">[Pilih Sanksi Untuk Kontraktor]</option>

                                    @foreach ($sanksiOptions as $sanksi)
                                        <option value="{{ $sanksi->value }}">
                                            {{ $sanksi->name }}
                                        </option>
                                    @endforeach
                                </select> --}}
                                <select id="sanksi_kontraktor" name="sanksi_kontraktor" class="form-select">
                                    @foreach ($sanksiOptions as $sanksi)
                                        <option value="{{ $sanksi->value }}" @selected((string) old('sanksi_kontraktor', '0') === (string) $sanksi->value)>
                                            {{ $sanksi->name }}
                                        </option>
                                    @endforeach
                                </select>

                                <small class="text-muted d-block mt-2">
                                    Pilih sanksi berdasarkan hasil penilaian dan temuan selama permit berjalan.
                                </small>
                            </div>

                            <hr>

                            {{-- INSIDEN --}}
                            <div class="assessment-section-title">3. Insiden Kerja</div>

                            <div class="mb-4">
                                <label for="kecelakaan_kerja" class="form-label">
                                    Apakah ada Insiden Kerja di Permit ini?
                                </label>

                                {{-- <select id="kecelakaan_kerja" name="kecelakaan_kerja" class="form-select">
                                    <option value="">[Pilih Opsi]</option>
                                    <option value="1">Iya</option>
                                    <option value="0">Tidak ada</option>
                                </select> --}}
                                <select id="kecelakaan_kerja" name="kecelakaan_kerja" class="form-select">
                                    <option value="1" @selected(old('kecelakaan_kerja') === '1')>Iya</option>
                                    <option value="0" @selected(old('kecelakaan_kerja', '0') === '0')>Tidak ada</option>
                                </select>
                            </div>

                            <div class="row mb-4" id="additionalFields" style="display: none;">
                                <div class="col-md-12 mb-3">
                                    <label for="total_pekerja_terdampak" class="form-label">
                                        Total Pekerja Terdampak
                                    </label>
                                    <input type="number" id="total_pekerja_terdampak" name="total_pekerja_terdampak"
                                        class="form-control" min="0" step="1"
                                        value="{{ old('total_pekerja_terdampak', 0) }}"
                                        placeholder="Tulis angka jumlah terdampak">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="pekerja_luka_ringan" class="form-label">
                                        Pekerja Luka Ringan
                                    </label>
                                    <input type="number" id="pekerja_luka_ringan" name="pekerja_luka_ringan"
                                        class="form-control" min="0" step="1"
                                        value="{{ old('pekerja_luka_ringan', 0) }}" placeholder="Jumlah">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="pekerja_luka_berat" class="form-label">
                                        Pekerja Luka Berat
                                    </label>
                                    <input type="number" id="pekerja_luka_berat" name="pekerja_luka_berat"
                                        class="form-control" min="0" step="1"
                                        value="{{ old('pekerja_luka_berat', 0) }}" placeholder="Jumlah">
                                </div>
                            </div>

                            <hr>

                            {{-- FOTO PENDUKUNG --}}
                            <div class="assessment-section-title">
                                4. Foto Pendukung
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-bold">
                                    Upload Foto Pendukung
                                </label>

                                <div class="multiple-upload-area" id="multipleUploadArea">

                                    {{-- Tampilan ketika belum ada foto --}}
                                    <div class="upload-placeholder text-center" id="uploadPlaceholder">
                                        <i class="fas fa-cloud-arrow-up fa-2x text-primary mb-2"></i>

                                        <div class="fw-bold text-dark">
                                            Klik untuk memilih beberapa foto
                                        </div>

                                        <small class="text-muted d-block mb-3">
                                            Bisa memilih lebih dari satu foto sekaligus
                                        </small>

                                        <button type="button" class="btn btn-sm btn-primary" id="btnAddPhotoEmpty">
                                            <i class="fas fa-plus me-1"></i>
                                            Tambah Foto
                                        </button>
                                    </div>

                                    {{-- Preview foto baru --}}
                                    <div class="row g-3" id="fotoPreviewContainer"></div>

                                    {{-- Tombol tambah setelah sudah ada foto --}}
                                    <div class="row g-3 mt-1 d-none" id="addPhotoCardWrapper">
                                        <div class="col-md-4 col-sm-6">
                                            <button type="button" class="add-photo-card" id="btnAddPhoto">

                                                <i class="fas fa-plus-circle fa-2x mb-2"></i>

                                                <span class="fw-bold d-block">
                                                    Tambah Foto
                                                </span>

                                                <small>
                                                    Klik untuk memilih foto tambahan
                                                </small>
                                            </button>
                                        </div>
                                    </div>

                                    <input type="file" id="foto_pendukung" name="foto_pendukung[]" class="d-none"
                                        accept="image/png,image/jpeg,image/jpg" multiple>
                                </div>

                                <div class="d-flex justify-content-between align-items-center mt-2">
                                    <small class="text-primary">
                                        Maksimal ukuran:
                                        <b>2048 KB per foto</b>
                                    </small>

                                    <small class="text-primary">
                                        Format:
                                        <b>PNG, JPG, JPEG</b>
                                    </small>
                                </div>
                            </div>
                            <div class="text-end mt-4">
                                <button type="button" class="btn btn-primary mb-0" onclick="showConfirmationModal()">
                                    <i class="fas fa-floppy-disk me-1"></i>
                                    <span class="font-weight-bold">Simpan Penilaian</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- KANAN: PREVIEW PDF --}}
                <div class="col-lg-7 col-xl-7">
                    <div class="permit-preview-sticky">
                        <div class="card permit-preview-card">
                            <div class="permit-card-header d-flex justify-content-between align-items-center">
                                <div>
                                    <h5>
                                        <i class="fas fa-file-pdf me-2"></i>
                                        Preview Detail Permit
                                    </h5>
                                    {{-- <small>User bisa cek ulang detail permit dari PDF ini</small> --}}
                                </div>

                                @if ($detailUrl)
                                    <a href="{{ $detailUrl }}" target="_blank" rel="noopener noreferrer"
                                        class="btn btn-sm btn-light">
                                        <i class="fas fa-eye me-1"></i>
                                        Detail
                                    </a>
                                @endif
                            </div>

                            @if ($printUrl)
                                <div class="permit-preview-body">
                                    <div class="permit-preview-loading" id="permitPreviewLoading">
                                        Memuat preview PDF...
                                    </div>

                                    <iframe id="permitPreviewFrame" class="permit-preview-frame"
                                        src="{{ $printUrl }}?mode=preview">
                                    </iframe>
                                </div>
                            @else
                                <div class="p-4 text-center text-danger">
                                    ID preview permit tidak ditemukan.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- MODAL KONFIRMASI --}}
            <div class="modal fade" id="KonfirmasiUlang" tabindex="-1" aria-labelledby="KonfirmasiUlangLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="KonfirmasiUlangLabel">Konfirmasi</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body text-center">
                            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>

                            <p>
                                Apakah anda yakin ingin menyimpan penilaian permit ini
                                <b>"{{ $list->id }} - {{ $list->uraian_pekerjaan }}"</b>?
                            </p>

                            <br>

                            <p>
                                <span class="fw-bold text-danger">
                                    Pastikan sudah benar dan telah dicek kembali !!
                                </span>
                            </p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batalkan</button>
                            <button type="submit" class="btn btn-primary" id="btnConfirmSubmit">
                                Iya, saya yakin
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        function hidePermitPreviewLoading() {
            const loading = document.getElementById('permitPreviewLoading');

            if (loading) {
                loading.style.display = 'none';
            }
        }

        function showConfirmationModal() {
            const form = document.getElementById('permitAssessmentForm');

            if (!form) {
                return;
            }

            // Cek required HTML, termasuk kualifikasi wajib
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }

            const modal = new bootstrap.Modal(document.getElementById('KonfirmasiUlang'));
            modal.show();
        }

        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('permitAssessmentForm');

            if (form) {
                form.addEventListener('submit', function() {
                    console.log('FORM SUBMIT KE:', form.action);

                    const btn = document.getElementById('btnConfirmSubmit');
                    if (btn) {
                        btn.disabled = true;
                        btn.innerHTML = `
                    <span class="spinner-border spinner-border-sm me-1"></span>
                    Menyimpan...
                `;
                    }
                });
            }

            initScoreCalculation();
            initIncidentFields();
            initMultipleImageUpload();
            initHistoryVendorButton();
        });

        function initHistoryVendorButton() {
            const button = document.getElementById('btnAmbilHistoryVendor');

            if (!button) {
                return;
            }

            button.addEventListener('click', function(event) {
                event.preventDefault();

                // Langsung cek history dulu, bukan munculin konfirmasi dulu
                applyHistoryVendor(button);
            });
        }

        async function applyHistoryVendor(button) {
            const url = button.dataset.url;

            if (!url) {
                Swal.fire({
                    icon: 'error',
                    title: 'URL history tidak ditemukan',
                    confirmButtonColor: '#028284'
                });

                return;
            }

            const originalHtml = button.innerHTML;

            button.disabled = true;
            button.innerHTML = `
                <span class="spinner-border spinner-border-sm me-1"></span>
                Mengecek...
            `;

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const result = await response.json();

                // Kalau belum ada history, langsung masuk catch warning
                if (!response.ok || !result.status) {
                    const error = new Error(result.message ||
                        'Vendor ini belum memiliki history penilaian sebelumnya.');
                    error.statusCode = response.status;
                    throw error;
                }

                const details = result.details || {};
                const history = result.history || {};

                if (Object.keys(details).length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum ada detail history',
                        text: 'History penilaian ditemukan, tetapi detail score belum tersedia.',
                        confirmButtonColor: '#028284'
                    });

                    return;
                }

                // Baru setelah history ada, tampilkan konfirmasi
                const confirmResult = await Swal.fire({
                    icon: 'question',
                    title: 'Gunakan penilaian sebelumnya?',
                    html: `
                            <div class="text-start">
                                <div class="mb-2">
                                    Sistem menemukan history penilaian terakhir vendor ini.
                                </div>
                                <div><b>Permit history:</b> ${history.id_permit_history || '-'}</div>
                                <div><b>Pekerjaan:</b> ${history.uraian_pekerjaan || '-'}</div>
                                <div class="mt-2">
                                    Skor akan diisi otomatis, tapi masih bisa Anda ubah sebelum disimpan.
                                </div>
                            </div>
                        `,
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Gunakan',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true
                });

                if (!confirmResult.isConfirmed) {
                    return;
                }

                let applied = 0;
                let skipped = 0;

                Object.entries(details).forEach(function([criteriaId, detail]) {
                    const select = document.querySelector(`select[name="score_${criteriaId}"]`);

                    if (!select) {
                        skipped++;
                        return;
                    }

                    const isWajib = select.dataset.wajib === '1';

                    const isHistoryNa =
                        detail.status_penilaian === 'NA' ||
                        detail.score_id === null ||
                        detail.score_id === '';

                    const selectedValue = isHistoryNa ? '' : String(detail.score_id);

                    // Kalau kriteria sekarang wajib tapi history lama NA, jangan dikosongkan
                    if (isWajib && selectedValue === '') {
                        skipped++;
                        return;
                    }

                    const optionExists = Array.from(select.options).some(function(option) {
                        return option.value === selectedValue;
                    });

                    if (!optionExists) {
                        skipped++;
                        return;
                    }

                    select.value = selectedValue;

                    select.dispatchEvent(new Event('change', {
                        bubbles: true
                    }));

                    applied++;
                });

                Swal.fire({
                    icon: 'success',
                    title: 'History berhasil dipakai',
                    html: `
                        <div class="text-start">
                            <div><b>Permit history:</b> ${history.id_permit_history || '-'}</div>
                            <div><b>Pekerjaan:</b> ${history.uraian_pekerjaan || '-'}</div>
                            <div><b>Score diterapkan:</b> ${applied}</div>
                            ${skipped > 0 ? `<div><b>Dilewati:</b> ${skipped}</div>` : ''}
                        </div>
                    `,
                    confirmButtonColor: '#028284'
                });

            } catch (error) {
                const isNotFound =
                    error.statusCode === 404 ||
                    (error.message || '').toLowerCase().includes('history');

                Swal.fire({
                    icon: 'warning',
                    title: isNotFound ?
                        'Belum ada history penilaian' : 'History tidak bisa diambil',
                    text: isNotFound ?
                        'Vendor ini belum memiliki history penilaian sebelumnya. Silakan isi skor penilaian secara manual.' :
                        error.message,
                    confirmButtonColor: '#028284'
                });
            } finally {
                button.disabled = false;
                button.innerHTML = originalHtml;
            }
        }

        function initScoreCalculation() {
            const selects = document.querySelectorAll('.score-select');
            const totalPenilaianInput = document.getElementById('total_penilaian');
            const totalValueInput = document.getElementById('total_value');
            const averageValueInput = document.getElementById('average_value');
            const indikatorValueInput = document.getElementById('indikator_value');
            const resultBox = document.getElementById('resultBox');

            if (!selects.length || !totalPenilaianInput) return;

            selects.forEach(select => {
                select.addEventListener('change', function() {
                    showScoreDescription(this);
                    calculateTotalAndAverage();
                });

                showScoreDescription(select);
            });

            calculateTotalAndAverage();

            function showScoreDescription(select) {
                const selectedOption = select.options[select.selectedIndex];
                const description = selectedOption.dataset.description || '';
                const wrapper = select.closest('.criteria-row');
                const descEl = wrapper ? wrapper.querySelector('.score-description') : null;

                if (descEl) {
                    descEl.textContent = description;
                }
            }

            function calculateTotalAndAverage() {
                let total = 0;
                let count = 0;

                selects.forEach(select => {
                    const selectedOption = select.options[select.selectedIndex];
                    const score = parseInt(selectedOption.dataset.score || 0);

                    // score 0 = NA, jadi tidak masuk hitungan
                    if (score > 0) {
                        total += score;
                        count++;
                    }
                });

                // Rata-rata score biasa, contoh 90 / 9 = 10
                const averageScore = count > 0 ? (total / count).toFixed(2) : '0.00';

                // Nilai persen, contoh 90 / (9 x 10) x 100 = 100
                const nilaiPersen = count > 0 ?
                    ((total / (count * 10)) * 100).toFixed(2) :
                    '0.00';

                const nilaiPersenNumber = parseFloat(nilaiPersen);

                let indikator = '-';

                let backgroundColor = '#f8f9fa';
                let boxBackgroundColor = '#f8ffff';
                let borderColor = '#1c8c90';
                let textColor = '#67748e';

                if (nilaiPersenNumber >= 70 && nilaiPersenNumber <= 100) {
                    indikator = 'BAIK';

                    // Hijau soft
                    backgroundColor = '#effbef';
                    boxBackgroundColor = '#e7f8e9';
                    borderColor = '#8bcf96';
                    textColor = '#237a37';

                } else if (
                    nilaiPersenNumber >= 49 &&
                    nilaiPersenNumber < 70
                ) {
                    indikator = 'SEDANG';

                    // Kuning soft
                    backgroundColor = '#fffbea';
                    boxBackgroundColor = '#fff6cc';
                    borderColor = '#e5c95b';
                    textColor = '#826b00';

                } else if (
                    nilaiPersenNumber >= 10 &&
                    nilaiPersenNumber < 49
                ) {
                    indikator = 'TIDAK BAIK';

                    // Merah soft
                    backgroundColor = '#fff1f1';
                    boxBackgroundColor = '#ffe6e6';
                    borderColor = '#eca0a0';
                    textColor = '#b42318';
                }

                totalPenilaianInput.value =
                    `Total: ${total}, Dinilai: ${count}, Nilai: ${nilaiPersen}%, Kualifikasi: ${indikator}`;

                totalPenilaianInput.style.cssText = `
                    background-color: ${backgroundColor};
                    border: 1px solid ${borderColor};
                    color: ${textColor};
                    font-weight: bold;
                    text-align: center;
                    transition: all 0.3s ease;
                `;

                if (resultBox) {
                    resultBox.style.backgroundColor = boxBackgroundColor;
                    resultBox.style.borderColor = borderColor;
                    resultBox.style.transition = 'all 0.3s ease';

                    const resultLabel = resultBox.querySelector('label');

                    if (resultLabel) {
                        resultLabel.style.color = textColor;
                    }
                }
                totalValueInput.value = total;

                // ini simpan nilai persen, jadi hasilnya bisa 100
                averageValueInput.value = nilaiPersen;

                indikatorValueInput.value = indikator;
            }
        }

        function initIncidentFields() {
            const kecelakaanKerjaSelect = document.getElementById('kecelakaan_kerja');
            const additionalFields = document.getElementById('additionalFields');

            if (!kecelakaanKerjaSelect || !additionalFields) return;

            const inputs = additionalFields.querySelectorAll('input[type="number"]');

            function toggleIncidentFields() {
                const hasIncident = kecelakaanKerjaSelect.value === '1';

                additionalFields.style.display = hasIncident ? 'flex' : 'none';

                inputs.forEach(input => {
                    if (!hasIncident) {
                        input.value = 0;
                    } else if (input.value === '') {
                        input.value = 0;
                    }
                });
            }

            kecelakaanKerjaSelect.addEventListener('change', toggleIncidentFields);

            toggleIncidentFields();
        }
        let selectedFiles = [];

        function initMultipleImageUpload() {
            const input = document.getElementById('foto_pendukung');
            const uploadArea = document.getElementById('multipleUploadArea');
            const btnAddPhoto = document.getElementById('btnAddPhoto');
            const btnAddPhotoEmpty = document.getElementById('btnAddPhotoEmpty');

            if (!input || !uploadArea) {
                return;
            }

            if (btnAddPhoto) {
                btnAddPhoto.addEventListener('click', function(event) {
                    event.preventDefault();
                    event.stopPropagation();

                    input.click();
                });
            }

            if (btnAddPhotoEmpty) {
                btnAddPhotoEmpty.addEventListener('click', function(event) {
                    event.preventDefault();
                    event.stopPropagation();

                    input.click();
                });
            }

            uploadArea.addEventListener('dragover', function(event) {
                event.preventDefault();
                uploadArea.classList.add('drag-active');
            });

            uploadArea.addEventListener('dragleave', function() {
                uploadArea.classList.remove('drag-active');
            });

            uploadArea.addEventListener('drop', function(event) {
                event.preventDefault();
                uploadArea.classList.remove('drag-active');

                addFiles(Array.from(event.dataTransfer.files || []));
            });

            input.addEventListener('change', function() {
                addFiles(Array.from(this.files || []));
            });

            updateUploadDisplay();
        }

        function addFiles(files) {
            const allowedTypes = [
                'image/png',
                'image/jpeg',
                'image/jpg'
            ];

            const maxSize = 2048 * 1024;

            files.forEach(function(file) {
                if (!allowedTypes.includes(file.type)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Format file tidak sesuai',
                        text: `${file.name} bukan file PNG, JPG, atau JPEG.`,
                        confirmButtonColor: '#028284'
                    });

                    return;
                }

                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Ukuran file terlalu besar',
                        text: `${file.name} melebihi batas maksimal 2048 KB.`,
                        confirmButtonColor: '#028284'
                    });

                    return;
                }

                const duplicate = selectedFiles.some(function(existingFile) {
                    return existingFile.name === file.name &&
                        existingFile.size === file.size &&
                        existingFile.lastModified === file.lastModified;
                });

                if (!duplicate) {
                    selectedFiles.push(file);
                }
            });

            syncInputFiles();
            renderPreview();
            updateUploadDisplay();
        }

        function syncInputFiles() {
            const input = document.getElementById('foto_pendukung');

            if (!input) {
                return;
            }

            const dataTransfer = new DataTransfer();

            selectedFiles.forEach(function(file) {
                dataTransfer.items.add(file);
            });

            input.files = dataTransfer.files;
        }

        function renderPreview() {
            const container = document.getElementById('fotoPreviewContainer');

            if (!container) {
                return;
            }

            container.innerHTML = '';

            selectedFiles.forEach(function(file, index) {
                const objectUrl = URL.createObjectURL(file);
                const fileSizeKb = (file.size / 1024).toFixed(1);

                const col = document.createElement('div');
                col.className = 'col-md-4 col-sm-6';

                col.innerHTML = `
            <div class="foto-preview-card">
                <button type="button"
                    class="foto-preview-remove"
                    data-index="${index}"
                    title="Hapus foto">
                    <i class="fas fa-times"></i>
                </button>

                <img src="${objectUrl}"
                    alt="${escapeHtml(file.name)}">

                <div class="foto-preview-info">
                    <span class="foto-preview-name">
                        ${escapeHtml(file.name)}
                    </span>

                    <span class="foto-preview-size">
                        ${fileSizeKb} KB
                    </span>
                </div>
            </div>
        `;

                container.appendChild(col);
            });

            container
                .querySelectorAll('.foto-preview-remove')
                .forEach(function(button) {
                    button.addEventListener('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();

                        const index = Number(this.dataset.index);

                        selectedFiles.splice(index, 1);

                        syncInputFiles();
                        renderPreview();
                        updateUploadDisplay();
                    });
                });
        }

        function updateUploadDisplay() {
            const placeholder = document.getElementById('uploadPlaceholder');
            const addPhotoCardWrapper =
                document.getElementById('addPhotoCardWrapper');

            const hasPhotos = selectedFiles.length > 0;

            if (placeholder) {
                placeholder.style.display = hasPhotos ? 'none' : 'block';
            }

            if (addPhotoCardWrapper) {
                addPhotoCardWrapper.classList.toggle('d-none', !hasPhotos);
            }
        }

        function escapeHtml(value) {
            const div = document.createElement('div');
            div.textContent = value;

            return div.innerHTML;
        }
    </script>
@endpush