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

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

    @php
        $printUrl = !empty($idPermitEnc) ? rtrim(url('trperl'), '/') . '/print/' . rawurlencode($idPermitEnc) : null;

        $detailUrl = !empty($idPermitEnc) ? rtrim(url('trperl'), '/') . '/show/' . rawurlencode($idPermitEnc) : 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;
        }

        @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: 170px;
            padding: 18px;
            border: 2px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
            cursor: pointer;
            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: 30px 15px;
        }

        .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;
            cursor: zoom-in;
        }

        .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-remove:hover {
            background: #dc3545;
        }

        .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;
        }

        .add-photo-card {
            width: 100%;
            min-height: 190px;
            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;
        }
    </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>
    @if ($errors->any())
        <div class="alert alert-danger mx-4">
            <strong>Validasi gagal:</strong>

            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('message'))
        <div class="alert alert-{{ session('class') === 'success' ? 'success' : 'danger' }} mx-4">
            {{ session('message') }}
        </div>
    @endif

    <div class="container-fluid py-4 permit-page">
        <form method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}" enctype="multipart/form-data"
            id="permitAssessmentForm">
            @csrf
            @method('PUT')

            <input type="hidden" name="id_penilaian" value="{{ $list->id_penilaian }}">

            <input type="hidden" name="id_permit" value="{{ $list->id_permit }}">

            <div class="row g-4">
                <div class="col-lg-5 col-xl-5">
                    <div class="card permit-assessment-card">
                        <div class="permit-card-header">
                            <h5>
                                <i class="fas fa-clipboard-check me-2"></i>
                                Edit Penilaian Permit
                            </h5>

                            <small>
                                Permit #{{ $list->id_permit }}
                                - {{ $list->uraian_pekerjaan }}
                            </small>
                        </div>

                        <div class="card-body">
                            <div class="assessment-section-title">
                                1. Kualifikasi Penilaian
                            </div>

                            @foreach ($mst_feedback_criteria as $index => $criteria)
                                @php
                                    $isWajib = (int) ($criteria->wajib ?? 1) === 1;

                                    $selectedScore = old(
                                        'score_' . $criteria->id,
                                        $selectedScores[$criteria->id] ?? null,
                                    );
                                @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-description=""
                                                @selected(empty($selectedScore))>
                                                [Pilih Score Penilaian]
                                            </option>
                                        @else
                                            <option value="" data-score="0"
                                                data-description="NA - Kriteria ini tidak wajib dan tidak masuk perhitungan."
                                                @selected(empty($selectedScore))>
                                                NA - Tidak Dinilai
                                            </option>
                                        @endif

                                        @foreach ($mst_feedback_scores[$criteria->id] ?? collect() as $score)
                                            <option value="{{ $score->id }}" data-score="{{ $score->score }}"
                                                data-description="{{ $score->desc }}" @selected((string) $selectedScore === (string) $score->id)>
                                                ({{ $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"
                                value="{{ old('total_value', $list->total_score ?? 0) }}">

                            <input type="hidden" id="total_dinilai" name="total_dinilai"
                                value="{{ old('total_dinilai', $list->total_dinilai ?? 0) }}">

                            <input type="hidden" id="average" name="average"
                                value="{{ old('average', $list->average ?? 0) }}">

                            <input type="hidden" id="nilai_persen" name="nilai_persen"
                                value="{{ old('nilai_persen', $list->nilai_persen ?? 0) }}">

                            <input type="hidden" id="akreditasi" name="akreditasi"
                                value="{{ old('akreditasi', $list->akreditasi ?? '') }}">
                            <div class="result-box mt-4 mb-4">
                                <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>

                            <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 }}" @selected((string) old('sanksi_kontraktor', $list->sanksi_kontraktor ?? '') === (string) $sanksi->value)>
                                            {{ $sanksi->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <hr>

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

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

                                <select id="ada_kecelakaan" name="ada_kecelakaan" class="form-select" required>
                                    <option value="">
                                        [Pilih Opsi]
                                    </option>

                                    <option value="1" @selected((string) old('ada_kecelakaan', $list->ada_kecelakaan ?? '') === '1')>
                                        Iya
                                    </option>

                                    <option value="0" @selected((string) old('ada_kecelakaan', $list->ada_kecelakaan ?? '') === '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"
                                        value="{{ old('total_pekerja_terdampak', $list->total_pekerja_terdampak ?? 0) }}">
                                </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"
                                        value="{{ old('pekerja_luka_ringan', $list->pekerja_luka_ringan ?? 0) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="pekerja_luka_serius" class="form-label">
                                        Pekerja Luka Berat
                                    </label>

                                    <input type="number" id="pekerja_luka_serius" name="pekerja_luka_serius"
                                        class="form-control" min="0"
                                        value="{{ old('pekerja_luka_serius', $list->pekerja_luka_serius ?? 0) }}">
                                </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">

                                    <div class="row g-3" id="photoGrid">
                                        {{-- Foto lama --}}
                                        @foreach ($fotoPenilaian as $index => $foto)
                                            @php
                                                $fotoUrl =
                                                    str_starts_with($foto->file_path, 'http://') ||
                                                    str_starts_with($foto->file_path, 'https://')
                                                        ? $foto->file_path
                                                        : asset('storage/' . ltrim($foto->file_path, '/'));
                                            @endphp

                                            <div class="col-md-4 col-sm-6 existing-photo-item"
                                                id="existing-photo-{{ $foto->id }}">

                                                <div class="foto-preview-card">
                                                    <button type="button" class="foto-preview-remove"
                                                        onclick="markOldPhotoForDelete(
                                                            '{{ $foto->id }}',
                                                            'existing-photo-{{ $foto->id }}',
                                                            event
                                                        )"
                                                        title="Hapus foto">
                                                        <i class="fas fa-times"></i>
                                                    </button>

                                                    <img src="{{ $fotoUrl }}"
                                                        alt="Foto Pendukung {{ $index + 1 }}"
                                                        onclick="openPhotoModal(
                                                            @js($fotoUrl),
                                                            @js('Foto Pendukung ' . ($index + 1))
                                                        )">

                                                    <div class="foto-preview-info">
                                                        <span class="foto-preview-name">
                                                            Foto Pendukung {{ $index + 1 }}
                                                        </span>

                                                        <span class="foto-preview-size text-success">
                                                            Foto tersimpan
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                        {{-- Tombol tambah foto --}}
                                        <div class="col-md-4 col-sm-6" id="addPhotoCardCol">
                                            <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>

                                <small class="text-muted d-block mt-2">
                                    Foto lama tetap tersimpan selama tidak dihapus.
                                    Foto baru akan ditambahkan saat update.
                                </small>
                            </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">
                                        Update Penilaian
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="photoPreviewModal" tabindex="-1" aria-labelledby="photoPreviewModalLabel"
                    aria-hidden="true">

                    <div class="modal-dialog modal-xl modal-dialog-centered">
                        <div class="modal-content border-0">
                            <div class="modal-header">
                                <h5 class="modal-title" id="photoPreviewModalLabel">
                                    Foto Pendukung
                                </h5>

                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup">
                                </button>
                            </div>

                            <div class="modal-body text-center p-3">
                                <img id="photoPreviewModalImage" src="" alt="Preview Foto Pendukung"
                                    class="img-fluid border-radius-lg"
                                    style="max-height:78vh; width:100%; object-fit:contain;">
                            </div>

                            <div class="modal-footer">
                                <a id="photoPreviewOpenNewTab" href="#" target="_blank" rel="noopener noreferrer"
                                    class="btn btn-primary">
                                    <i class="fas fa-up-right-from-square me-1"></i>
                                    Buka Gambar
                                </a>

                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    Tutup
                                </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>

            <div class="modal fade" id="KonfirmasiUlang" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                Konfirmasi Update
                            </h5>

                            <button type="button" class="btn-close" data-bs-dismiss="modal"></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 memperbarui
                                penilaian permit

                                <b>
                                    "Permit #{{ $list->id_permit }}
                                    - {{ $list->uraian_pekerjaan }}"
                                </b>?
                            </p>

                            <p class="fw-bold text-danger">
                                Pastikan seluruh data sudah benar.
                            </p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Batalkan
                            </button>

                            <button type="button" class="btn btn-primary" id="btnConfirmSubmit">
                                Iya, Update Penilaian
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initPermitPreview();
            initScoreCalculation();
            initIncidentFields();
            initMultipleImageUpload();
            initFormSubmit();
        });

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

            if (!form) {
                return;
            }

            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }

            const modalElement = document.getElementById('KonfirmasiUlang');

            if (!modalElement) {
                return;
            }

            bootstrap.Modal
                .getOrCreateInstance(modalElement)
                .show();
        }

        function initPermitPreview() {
            const frame =
                document.getElementById('permitPreviewFrame');

            const loading =
                document.getElementById('permitPreviewLoading');

            if (!frame || !loading) {
                return;
            }

            frame.addEventListener('load', function() {
                loading.style.display = 'none';
            });
        }

        let isUpdatingPenilaian = false;

        function initFormSubmit() {
            const form = document.getElementById('permitAssessmentForm');
            const button = document.getElementById('btnConfirmSubmit');

            if (!form || !button) {
                return;
            }

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

                // Kalau sudah proses, cegah klik ulang
                if (isUpdatingPenilaian) {
                    return;
                }

                // Validasi form dulu
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                isUpdatingPenilaian = true;

                button.disabled = true;
                button.classList.add('disabled');

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

                // Submit form
                if (typeof form.requestSubmit === 'function') {
                    form.requestSubmit();
                } else {
                    form.submit();
                }
            });
        }

        function initScoreCalculation() {
            const selects = document.querySelectorAll('.score-select');

            const resultInput = document.getElementById('total_penilaian');
            const totalInput = document.getElementById('total_value');
            const totalDinilaiInput = document.getElementById('total_dinilai');
            const averageInput = document.getElementById('average');
            const nilaiPersenInput = document.getElementById('nilai_persen');
            const indikatorInput = document.getElementById('akreditasi');

            if (
                !selects.length ||
                !resultInput ||
                !totalInput ||
                !totalDinilaiInput ||
                !averageInput ||
                !nilaiPersenInput ||
                !indikatorInput
            ) {
                return;
            }

            function showScoreDescription(select) {
                const selectedOption = select.options[select.selectedIndex];

                const description = selectedOption ?
                    selectedOption.dataset.description || '' :
                    '';

                const wrapper = select.closest('.criteria-row');

                const descriptionElement = wrapper ?
                    wrapper.querySelector('.score-description') :
                    null;

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

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

                selects.forEach(function(select) {
                    const selectedOption = select.options[select.selectedIndex];

                    const score = selectedOption ?
                        parseFloat(selectedOption.dataset.score || 0) :
                        0;

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

                // average score 0 - 10
                const averageScore = count > 0 ?
                    (total / count).toFixed(2) :
                    '0.00';

                // nilai persen 0 - 100
                const nilaiPersen = count > 0 ?
                    ((total / (count * 10)) * 100).toFixed(2) :
                    '0.00';

                const nilaiPersenNumber = parseFloat(nilaiPersen);

                let indikator = '-';
                let indikatorStyle = 'color: #67748e;';

                if (nilaiPersenNumber >= 70 && nilaiPersenNumber <= 100) {
                    indikator = 'BAIK';
                    indikatorStyle = 'color: green;';
                } else if (nilaiPersenNumber >= 49 && nilaiPersenNumber < 70) {
                    indikator = 'SEDANG';
                    indikatorStyle = 'color: #d69e00;';
                } else if (nilaiPersenNumber >= 10 && nilaiPersenNumber < 49) {
                    indikator = 'TIDAK BAIK';
                    indikatorStyle = 'color: red;';
                }

                resultInput.value =
                    `Total: ${total}, ` +
                    `Dinilai: ${count}, ` +
                    `Rata-rata: ${averageScore}, ` +
                    `Nilai: ${nilaiPersen}%, ` +
                    `Kualifikasi: ${indikator}`;

                resultInput.style =
                    `background-color: #f8f9fa; border: 1px solid #1c8c90; font-weight: bold; text-align: center; ${indikatorStyle}`;

                totalInput.value = total;
                totalDinilaiInput.value = count;
                averageInput.value = averageScore;
                nilaiPersenInput.value = nilaiPersen;
                indikatorInput.value = indikator;
            }

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

                showScoreDescription(select);
            });

            calculateTotalAndAverage();
        }

        function initIncidentFields() {
            const incidentSelect =
                document.getElementById('ada_kecelakaan');

            const additionalFields =
                document.getElementById('additionalFields');

            if (!incidentSelect || !additionalFields) {
                return;
            }

            const inputs =
                additionalFields.querySelectorAll('input');

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

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

                inputs.forEach(function(input) {
                    input.disabled = !hasIncident;
                });
            }

            incidentSelect.addEventListener(
                'change',
                toggleIncidentFields
            );

            toggleIncidentFields();
        }

        let selectedNewPhotos = [];
        const existingPhotoCount = {{ $fotoPenilaian->count() }};

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

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

            if (addPhotoButton) {
                addPhotoButton.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');

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

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

        function addNewPhotos(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 = selectedNewPhotos.some(function(existingFile) {
                    return existingFile.name === file.name &&
                        existingFile.size === file.size &&
                        existingFile.lastModified === file.lastModified;
                });

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

            syncNewPhotoInput();
            renderNewPhotoPreview();
        }

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

            if (!input) {
                return;
            }

            const dataTransfer = new DataTransfer();

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

            input.files = dataTransfer.files;
        }


        function renderNewPhotoPreview() {
            const photoGrid = document.getElementById('photoGrid');
            const addPhotoCardCol = document.getElementById('addPhotoCardCol');

            if (!photoGrid || !addPhotoCardCol) {
                return;
            }

            // Hapus preview foto baru lama
            photoGrid.querySelectorAll('.new-photo-item').forEach(function(item) {
                item.remove();
            });

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

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

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

                <img src="${objectUrl}"
                    alt="Foto Pendukung ${photoNumber}"
                    onclick="openPhotoModal('${objectUrl}', 'Foto Pendukung ${photoNumber}')">

                <div class="foto-preview-info">
                    <span class="foto-preview-name">
                        Foto Pendukung ${photoNumber}
                    </span>

                    <span class="foto-preview-size text-primary">
                        Foto baru • ${fileSizeKb} KB
                    </span>
                </div>
            </div>
        `;

                // Masukkan sebelum tombol Tambah Foto
                addPhotoCardCol.before(col);
            });

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

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

                        selectedNewPhotos.splice(index, 1);

                        syncNewPhotoInput();
                        renderNewPhotoPreview();
                    });
                });
        }

        function markOldPhotoForDelete(photoId, elementId, event) {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }

            const form = document.getElementById('permitAssessmentForm');
            const element = document.getElementById(elementId);

            if (!form || !element) {
                return;
            }

            Swal.fire({
                icon: 'warning',
                title: 'Hapus foto ini?',
                text: 'Foto akan dihapus setelah data penilaian diperbarui.',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                reverseButtons: true
            }).then(function(result) {
                if (!result.isConfirmed) {
                    return;
                }

                const existingInput = form.querySelector(
                    `input[name="deleted_photo_ids[]"][value="${photoId}"]`
                );

                if (!existingInput) {
                    const hiddenInput = document.createElement('input');

                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'deleted_photo_ids[]';
                    hiddenInput.value = photoId;

                    form.appendChild(hiddenInput);
                }

                element.remove();
            });
        }

        function openPhotoModal(imageUrl, imageTitle) {
            const modalElement = document.getElementById('photoPreviewModal');
            const modalImage = document.getElementById('photoPreviewModalImage');
            const modalTitle = document.getElementById('photoPreviewModalLabel');
            const openNewTabButton = document.getElementById('photoPreviewOpenNewTab');

            if (!modalElement || !modalImage) {
                return;
            }

            modalImage.src = imageUrl;

            if (modalTitle) {
                modalTitle.textContent = imageTitle || 'Foto Pendukung';
            }

            if (openNewTabButton) {
                openNewTabButton.href = imageUrl;
            }

            bootstrap.Modal
                .getOrCreateInstance(modalElement)
                .show();
        }

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

            div.textContent = value;

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