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

@section('content')
@php
$role = $role ?? '';
$isViewMode = $viewMode ?? false;

$isAuditor = $role == 'auditr';
$isAuditee = $role == 'audtee';
$isAdmin = in_array($role, ['admin', 'admins', 'mr']);
$currentAuditorName = $ncr->auditor_name ?: $ncr->actual_submitter_name;
$ncrStatus = strtoupper(trim($ncr->status ?? ''));
$canEditClassification = !$isViewMode && ($isAdmin || ($isAuditor && $ncrStatus === 'ENTRY'));
@endphp

@php
$usernameCreate = explode(' ', $last_user->user_create)[0] ?? null;
$usernameUpdate = explode(' ', $last_user->user_update)[0] ?? null;

$creator = DB::table('users as u')
->leftJoin('sys_roles as r', 'r.idroles', '=', 'u.idroles')
->where('u.username', $usernameCreate)
->select('u.firstname','u.lastname','r.name as role_name')
->first();

$updater = DB::table('users as u')
->leftJoin('sys_roles as r', 'r.idroles', '=', 'u.idroles')
->where('u.username', $usernameUpdate)
->select('u.firstname','u.lastname','r.name as role_name')
->first();

$creatorRole = $roleMap[$creator->idroles ?? ''] ?? $creator->idroles ?? '';
$updaterRole = $roleMap[$updater->idroles ?? ''] ?? $updater->idroles ?? '';
@endphp

@include('layouts.navbars.auth.topnav', ['title' => $isViewMode ? 'View NCR Internal' : 'Edit 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">

    @include('components.alert')

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

        @csrf
        @method('PUT')

        <input type="hidden" name="id" value="{{ encrypt($ncr->idncr) }}">

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

                <h4 class="mb-1">{{ $isViewMode ? 'Detail Temuan NCR' : 'Edit Temuan NCR' }}</h4>

                <p class="text-sm text-muted mb-4">
                    {{ $isViewMode ? 'Data hasil audit (hanya dapat dilihat)' : 'Update data hasil audit' }}
                </p>

                <div class="audit-info-box mb-4">

                    <div class="audit-item">
                        <b>Created:</b>
                        {{ $creator->firstname ?? '-' }} {{ $creator->lastname ?? '' }}
                        <span class="text-muted">({{ $creator->role_name ?? '-' }})</span>
                    </div>

                    <div class="audit-item">
                        <b>Last Update:</b>
                        {{ $updater->firstname ?? '-' }} {{ $updater->lastname ?? '' }}
                        <span class="text-muted">({{ $updater->role_name ?? '-' }})</span>
                    </div>

                    <div class="audit-item">
                        <b>Time:</b>
                        {{ isset($last_user->updated_at) ? date('d M Y H:i', strtotime($last_user->updated_at)) : '-' }}
                    </div>

                </div>


                <div class="row">

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

                        <label class="form-label">Departemen</label>
                        @if ($isAdmin)
                        <select name="iddepartments" id="departemenSelect" class="form-control form-control-lg">
                            @foreach ($departments as $d)
                            <option value="{{ $d->iddepartments }}"
                                @if ($ncr->iddepartments == $d->iddepartments) selected @endif>
                                {{ $d->department_label ?? \App\Helpers\DepartmentHelper::label($d) }}
                            </option>
                            @endforeach
                        </select>
                        @else
                        <input type="hidden" name="iddepartments" value="{{ $ncr->iddepartments }}">

                        <input type="text" class="form-control bg-light text-muted"
                            value="{{ $ncr->department_label ?? $ncr->department }}" readonly>
                        @endif

                    </div>


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

                        <label class="form-label">Tanggal Audit</label>

                        <input type="hidden" name="tanggal" value="{{ $ncr->audit_date }}">

                        <input type="text" class="form-control bg-light text-muted"
                            value="{{ date('d-m-Y', strtotime($ncr->audit_date)) }}" readonly>

                    </div>


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

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

                        <input type="text" id="ncrNumber" value="{{ \App\Helpers\NcrAuditHelper::displayReportNumber($ncr, 'internal') }}"
                            class="form-control form-control-lg" placeholder="Belum digenerate" readonly>

                    </div>

                </div>


                <hr class="my-4">


                <div class="row">

                    <select name="idstandards[]" id="isoSelect" class="d-none" multiple
                        aria-hidden="true" @disabled(!$canEditClassification)>

                            @foreach ($standards as $iso)
                            <option value="{{ $iso->idstandards }}"
                                @if (in_array((int) $iso->idstandards, $selected_standard_ids ?? [])) selected @endif>

                                {{ $iso->code }} - {{ $iso->name }}

                            </option>
                            @endforeach

                    </select>

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

                        <label class="form-label">Standar ISO &amp; Klausul</label>

                        <select name="idclauses[]" id="clauseSelect" class="form-control form-control-lg select2"
                            multiple
                            @disabled(!$canEditClassification)>

                        </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"
                            @disabled(!$canEditClassification)>{{ old('smk3', $ncr->smk3 ?? '') }}</textarea>
                    </div>


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

                        <label class="form-label">Kategori</label>

                        <select name="idcategories" class="form-control form-control-lg"
                            @disabled(!$canEditClassification)>

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

                            @foreach ($categories as $c)
                            <option value="{{ $c->idcategories }}"
                                @if ($c->idcategories == $ncr->idcategories) selected @endif>

                                {{ $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</label>

                        <textarea name="problem" class="form-control" rows="4" @if ($isAuditee) readonly @endif>{{ $finding->problem }}</textarea>

                    </div>


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

                        <label>Location</label>

                        <textarea name="location" class="form-control" rows="4" @if ($isAuditee) readonly @endif>{{ $finding->location }} </textarea>

                    </div>


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

                        <label>Objective Evidence</label>

                        <textarea name="evidence" class="form-control" rows="4" @if ($isAuditee) readonly @endif>{{ $finding->objective }}</textarea>

                    </div>


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

                        <label>Reference</label>

                        <textarea name="reference" class="form-control" rows="4" @if ($isAuditee) readonly @endif>{{ $finding->reference }}</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 || $isAuditee)
                                <span class="text-danger">*</span>
                            @endif
                        </label>

                        <textarea name="analysis" class="form-control" rows="4" @if ($isAuditor) readonly @endif>{{ $finding->analysis }}</textarea>

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

                        <label class="form-label">Fishbone Root Cause
                            @if ($isAdmin || $isAuditee)
                                <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 }}" @if (in_array($f->code, $fishbone_selected)) checked @endif
                                @disabled($isAuditor || $isViewMode)>

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

                                {{ $f->name }}

                            </label>

                        </div>
                        @endforeach

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>


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

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

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

                    </div>

                </div>


                <h5 class="mb-3">Upload Bukti</h5>
                <p class="text-muted small">Penambahan dan penghapusan bukti disimpan setelah klik Update. Untuk mengganti file, hapus file lama lalu pilih file baru.</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>


                <!-- FILE LAMA -->
                <div id="old-file-list" class="file-list mt-3">

                    @if (isset($evidences))
                    @foreach ($evidences as $i => $img)
                    <div class="file-item">

                        <div class="evidence-info">
                            <div class="font-weight-bold evidence-name">{{ $img->file_name }}</div>
                            <small class="text-muted">Upload by <span class="font-weight-bold">{{ $img->uploader_firstname ?: '-' }}</span></small>
                            <small class="evidence-pending-label text-danger d-block" hidden>Akan dihapus setelah Update</small>
                        </div>

                        <div class="evidence-actions">
                            <button type="button" class="btn btn-sm btn-info btn-preview"
                                data-url="{{ asset('storage/' . $img->file_path) }}">

                                <i class="fas fa-eye"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger btn-delete-evidence"
                                title="Hapus bukti"
                                data-id="{{ $img->idevidences }}">

                                <i class="fas fa-trash"></i>
                            </button>

                        </div>

                    </div>
                    @endforeach
                    @endif

                </div>


                <!-- FILE BARU -->
                <div id="new-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</label>
                        <select name="lead_auditor_id"
                            id="leadAuditorSelect"
                            class="form-control select2"
                            @if(!empty($ncr->lead_auditor_id) && $ncr->status != 'ENTRY') disabled @endif>

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

                            @foreach($auditors as $a)
                            <option value="{{ $a->idauditor }}"
                                @selected($ncr->lead_auditor_id == $a->idauditor)>
                                {{ $a->name }}
                            </option>
                            @endforeach
                        </select>

                        @if(!empty($ncr->lead_auditor_id) && $ncr->status != 'ENTRY')
                        <input type="hidden" name="lead_auditor_id" value="{{ $ncr->lead_auditor_id }}">
                        @endif
                    </div>
                    @elseif(!empty($currentAuditorName))
                    <div class="col-md-4 mb-3">
                        <label>Auditor</label>
                        <input type="text" class="form-control bg-light text-muted" value="{{ $currentAuditorName }}" readonly>
                    </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)
                            @php $name = $a->name ?? trim(($a->firstname ?? '') . ' ' . ($a->lastname ?? '')); @endphp
                            <option value="{{ $a->id }}"
                                @selected($ncr->auditee_name == $name)>
                                {{ $name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @elseif(!empty($ncr->auditee_name))
                    <div class="col-md-4 mb-3">
                        <label>Auditee</label>
                        <input type="text" class="form-control bg-light text-muted" value="{{ $ncr->auditee_name }}" readonly>
                    </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 $name = $m->firstname . ' ' . $m->lastname; @endphp
                            <option value="{{ $m->id }}"
                                @selected($ncr->mr_user_id == $m->id)>
                                {{ $name }}{{ empty($m->signature_path) ? ' (Belum ada TTD)' : '' }}
                            </option>
                            @endforeach
                        </select>
                        @if(empty($ncr->mr_user_id) && !empty($ncr->mr_name))
                            <small class="text-muted">MR tersimpan saat ini: {{ $ncr->mr_name }}</small>
                        @endif
                    </div>
                    @elseif(!empty($ncr->mr_name))
                    <div class="col-md-4 mb-3">
                        <label>Management Representative</label>
                        <input type="text" class="form-control bg-light text-muted" value="{{ $ncr->mr_name }}" readonly>
                    </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" @if ($ncr->status == 'ENTRY') selected @endif>ENTRY
                            </option>
                            <option value="ON_PROGRESS" @if ($ncr->status == 'ON_PROGRESS') selected @endif>ON
                                PROGRESS</option>
                            <option value="IN_REVIEW" @if ($ncr->status == 'IN_REVIEW') selected @endif>IN REVIEW
                            </option>
                            <option value="CLOSED" @if ($ncr->status == 'CLOSED') selected @endif>CLOSED
                            </option>

                        </select>

                    </div>
                </div>
                @endif




                <div class="d-flex mt-4">
                    @if (!$isViewMode)
                    @if ($isAuditor)
                    <button type="submit" name="action" value="posting" class="btn btn-info me-2">
                        <i class="fas fa-paper-plane me-1"></i> Posting
                    </button>
                    <button type="submit" name="action" value="draft" class="btn btn-primary me-2">
                        <i class="fas fa-save me-1"></i> Simpan Draft
                    </button>
                    @elseif($isAuditee)
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-1"></i> Simpan
                    </button>
                    @elseif($isAdmin)
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-1"></i> Update
                    </button>
                    @endif
                    @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>

@if ($isViewMode)
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('ncrInternalDetailForm');
        if (!form) return;

        form.querySelectorAll('input, select, textarea').forEach(control => control.disabled = true);
        form.querySelectorAll('.upload-wrapper, .btn-delete-evidence, button[type="submit"]').forEach(element => {
            element.style.display = 'none';
        });
    });
</script>
@endif



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

    .file-item {
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: space-between;
        background: #f8f9fa;
        padding: 8px 10px;
        border-radius: 8px;
        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; }
    .evidence-pending-label[hidden] { display: none !important; }

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

    .select2-container--default .select2-selection--single[aria-disabled="true"] {
        background-color: #e9ecef !important;
        color: #6c757d !important;
        cursor: not-allowed !important;
        border: 1px solid #d2d6da !important;
    }

    .select2-container--default .select2-selection--single[aria-disabled="true"] .select2-selection__rendered {
        color: #6c757d !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 clauses = @json($clauses ?? []);
    const standards = @json($standards ?? []);

    let selectedClauses = @json($selected_clause_ids ?? []);
    let selectedStandards = @json($selected_standard_ids ?? []);
    const selectedAuditeeName = @json((string) ($ncr->auditee_name ?? ''));
    const auditeeEndpoint = @json(url('ncrint/getAuditeesByDepartment'));


    $(document).ready(function() {

        if ($('#clauseSelect').length) {
            $('#clauseSelect').select2({
                placeholder: "Cari Klausul...",
                matcher: window.matchNcrClause,
                minimumInputLength: 0,
                language: { noResults: () => 'Klausul tidak ditemukan pada pilihan yang tersedia.' },
                width: '100%'
            })
        }

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

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

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

        loadClauses()
        loadAuditeesByDepartment(selectedAuditeeName)

    })

    document.getElementById('departemenSelect')?.addEventListener('change', function() {
        loadAuditeesByDepartment()
    })

    function getSelectedDepartmentId() {
        return document.getElementById('departemenSelect')?.value ||
            document.querySelector('[name="iddepartments"]')?.value ||
            ''
    }

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

        if (!select) return

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

    function loadAuditeesByDepartment(preferredAuditeeName = null) {
        const select = document.getElementById('auditeeSelect')
        const dept = getSelectedDepartmentId()

        if (!select) return

        if (!dept) {
            resetAuditeeSelect()
            return
        }

        resetAuditeeSelect('Memuat PIC...')

        fetch(`${auditeeEndpoint}?dept=${encodeURIComponent(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.text = auditee.name
                    select.appendChild(option)
                })

                const selectedAuditee = preferredAuditeeName
                    ? data.find(auditee => String(auditee.name) === String(preferredAuditeeName))
                    : null
                const nextValue = selectedAuditee
                    ? selectedAuditee.id
                    : (data[0]?.id ?? '')

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


    function loadClauses() {

        let select = document.getElementById('clauseSelect')

        select.innerHTML = ''
        const selectedIds = new Set(selectedClauses.map(String))
        const clausesByStandard = new Map()
        clauses.forEach(clause => {
            const key = String(clause.idstandards)
            if (!clausesByStandard.has(key)) clausesByStandard.set(key, [])
            clausesByStandard.get(key).push(clause)
        })
        const fragment = document.createDocumentFragment()
        standards.forEach(function(standard) {
            const standardClauses = clausesByStandard.get(String(standard.idstandards)) || []
            if (!standardClauses.length) return

            const group = document.createElement('optgroup')
            group.label = `ISO ${standard.code} - ${standard.name}`
            standardClauses.forEach(function(c) {
                const opt = document.createElement('option')
                opt.value = c.idclauses
                opt.dataset.standardId = String(c.idstandards)
                opt.text = `ISO ${standard.code} - ${c.clause_number} ${c.clause_name}`
                opt.selected = selectedIds.has(String(c.idclauses))
                group.appendChild(opt)
            })
            fragment.appendChild(group)
        })
        select.appendChild(fragment)

        $('#clauseSelect').trigger('change.select2').trigger('change')

    }


    $('#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 previewFile(url) {

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


        let ext = url.split('.').pop().toLowerCase();

        if (['jpg', 'jpeg', 'png'].includes(ext)) {

            let img = document.createElement("img");
            img.src = url;
            modal.appendChild(img);

        } else if (ext === 'pdf') {

            let iframe = document.createElement("iframe");
            iframe.src = url;
            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);
    }

    function deleteEvidence(id, btn) {
        const item = btn.closest('.file-item');
        const pendingInput = item.querySelector('input[name="deleted_evidence_ids[]"]');

        if (pendingInput) {
            pendingInput.remove();
            item.classList.remove('evidence-pending-delete');
            item.querySelector('.evidence-pending-label').hidden = true;
            btn.innerHTML = '<i class="fas fa-trash"></i>';
            btn.title = 'Hapus bukti';
            return;
        }

        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'deleted_evidence_ids[]';
        hiddenInput.value = id;
        item.appendChild(hiddenInput);
        item.classList.add('evidence-pending-delete');
        item.querySelector('.evidence-pending-label').hidden = false;
        btn.textContent = 'Batalkan';
        btn.title = 'Batalkan penghapusan';
    }
    /*
    ==============================
    UPLOAD FILE BARU (EDIT)
    ==============================
    */


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

    let filesArray = [];

    if (input) {

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

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

                filesArray.push(file);

            });

            renderFileList();

        });

    }


    function renderFileList() {

        list.innerHTML = "";

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

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

            item.className = "file-item";

            item.innerHTML = `

                <div class="evidence-info">
                    <div class="font-weight-bold evidence-name"></div>
                    <small class="text-muted">File baru · Disimpan setelah Update</small>
                </div>

                <div>

                <button type="button" class="btn btn-sm btn-info preview-btn">
                <i class="fas fa-eye"></i>
                </button>

                <button type="button" class="btn btn-sm btn-danger delete-btn">
                <i class="fas fa-trash"></i>
                </button>

                </div>
                `;

            const previewBtn = item.querySelector(".preview-btn");
            item.querySelector('.evidence-name').textContent = file.name;

            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);
            };
            const deleteBtn = item.querySelector(".delete-btn");

            deleteBtn.onclick = function() {

                filesArray.splice(index, 1);

                updateInputFiles();

                renderFileList();

            };

            list.appendChild(item);

        });

        updateInputFiles();

    }


    /*
    UPDATE FILE INPUT
    */

    function updateInputFiles() {

        const dataTransfer = new DataTransfer();

        filesArray.forEach(file => {
            dataTransfer.items.add(file);
        });

        input.files = dataTransfer.files;

    }

    /*
    PREVIEW DAN DELETE BUKTI
    */


    document.addEventListener("click", function(e) {

        // PREVIEW
        if (e.target.closest(".btn-preview")) {
            let btn = e.target.closest(".btn-preview");
            let url = btn.getAttribute("data-url");
            previewFile(url);
        }

        // DELETE
        if (e.target.closest(".btn-delete-evidence")) {
            let btn = e.target.closest(".btn-delete-evidence");
            let id = btn.getAttribute("data-id");
            deleteEvidence(id, btn);
        }

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

@endsection