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

@section('content')
    @php $isViewMode = $viewMode ?? false; @endphp
    @include('layouts.navbars.auth.topnav', ['title' => $isViewMode ? 'View NCR External' : 'Edit NCR External'])

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

    <div class="container-fluid py-4">

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

            @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="row">

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

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

                            <select name="iddepartments" id="departemenSelect" class="form-control form-control-lg">

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

                                @foreach ($departments as $d)
                                    <option value="{{ $d->iddepartments }}" data-prefix="{{ $d->prefix }}"
                                        data-kode="{{ $d->kode_utama }}" @if ($ncr->iddepartments == $d->iddepartments) selected @endif>

                                        {{ $d->department_label ?? \App\Helpers\DepartmentHelper::label($d) }}

                                    </option>
                                @endforeach

                            </select>

                        </div>


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

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

                            <input type="date" name="tanggal" id="tanggalAudit" value="{{ $ncr->audit_date }}"
                                class="form-control form-control-lg">

                        </div>


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

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

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

                        </div>

                    </div>


                    <hr class="my-4">


                    <div class="row">

                        <select name="idstandards[]" id="isoSelect" class="d-none" multiple aria-hidden="true">

                                @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>

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

                        </div>

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

                                <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 class="col-md-6 mb-3">

                            <label class="form-label">Fishbone Root Cause</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>

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

                                        {{ $f->name }}

                                    </label>

                                </div>
                            @endforeach

                        </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">{{ $finding->problem }}</textarea>

                        </div>


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

                            <label>Location</label>

                            <textarea name="location" class="form-control" rows="4">{{ $finding->location }}</textarea>

                        </div>


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

                            <label>Objective Evidence</label>

                            <textarea name="evidence" class="form-control" rows="4">{{ $finding->objective }}</textarea>

                        </div>


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

                            <label>Reference</label>

                            <textarea name="reference" class="form-control" rows="4">{{ $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</label>

                            <textarea name="analysis" class="form-control" rows="4">{{ $finding->analysis }}</textarea>

                        </div>


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

                            <label>Correction</label>

                            <textarea name="correction" class="form-control" rows="4">{{ $finding->correction }}</textarea>

                        </div>


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

                            <label>Corrective Action</label>

                            <textarea name="corrective_action" class="form-control" rows="4">{{ $finding->corrective_action }}</textarea>

                        </div>


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

                            <label>Evaluasi Efektifitas</label>

                            <textarea name="evaluation" class="form-control" rows="4">{{ $finding->evaluation }}</textarea>

                        </div>

                    </div>


                    <h5 class="mb-3">Upload Bukti</h5>

                    <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">

                                    <span>{{ $i + 1 }}. {{ $img->file_name }}</span>

                                    <div>
                                    <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"
                                        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">

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

                            <label>Auditor</label>

                            <input type="text" name="auditor" class="form-control"
                                value="{{ $ncr->auditor_name }}">

                        </div>


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

                            <label>Auditee</label>

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

                                @foreach ($auditees as $a)
                                    @php $auditeeName = $a->name ?? trim(($a->firstname ?? '') . ' ' . ($a->lastname ?? '')); @endphp
                                    <option value="{{ $a->id }}"
                                        @selected($ncr->auditee_name == $auditeeName)>
                                        {{ $auditeeName }}
                                    </option>
                                @endforeach
                            </select>
                            @if (empty($ncr->auditee_user_id) && !empty($ncr->auditee_name))
                                <small class="text-muted">Auditee tersimpan saat ini: {{ $ncr->auditee_name }}</small>
                            @endif

                        </div>


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

                            <label>Management Representative</label>

                            <select name="mr" id="mrSelect" class="form-control select2">
                                <option value="">-- PILIH MR --</option>

                                @foreach ($mrs as $m)
                                    @php $mrName = trim($m->firstname . ' ' . $m->lastname); @endphp
                                    <option value="{{ $m->id }}" @selected($ncr->mr_user_id == $m->id)>
                                        {{ $mrName }}{{ 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>

                    </div>


                    <hr class="my-4">


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


                    <hr class="my-4">


                    <div class="d-flex mt-4">
                        @if (!$isViewMode)
                        <button type="submit" class="btn btn-success me-2">
                            <i class="fas fa-save me-1"></i> Update
                        </button>
                        @endif

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


                </div>
            </div>
        </form>
    </div>

    @if ($isViewMode)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('ncrExternalDetailForm');
                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;
            justify-content: space-between;
            background: #f8f9fa;
            padding: 8px 10px;
            border-radius: 8px;
            margin-bottom: 5px;
        }

        .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;
        }
        /* KHUSUS SELECT / DROPDOWN */
select.form-control,
select.form-control-lg {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: #fff;

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

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

    padding-right: 35px;
}

/* AGAR TEXTAREA DAN INPUT TIDAK IKUT ADA IKON */
textarea.form-control,
input.form-control {
    background-image: none !important;
}

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

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

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

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

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



    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
       let 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('ncrext/getAuditeesByDepartment'));


        $(document).ready(function() {

            $('#clauseSelect').select2({

                placeholder: "Cari Klausul...",
                width: '100%'

            })

            $('#mrSelect').select2({

                placeholder: "Pilih Management Representative...",
                width: '100%'

            })

            $('#auditeeSelect').select2({

                placeholder: "Pilih Auditee...",
                width: '100%'

            })

            loadClauses()
            loadAuditeesByDepartment(selectedAuditeeName)

        })

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

        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 = document.getElementById('departemenSelect')?.value

            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 = ''
            standards.forEach(function(standard) {
                const standardClauses = clauses.filter(c => getClauseStandardId(c) === 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 = getClauseStandardId(c)
                    opt.text = `ISO ${standard.code} - ${c.clause_number} ${c.clause_name}`
                    opt.selected = selectedClauses.map(String).includes(String(c.idclauses))
                    group.appendChild(opt)
                })
                select.appendChild(group)
            })

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

        }

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

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

            Swal.fire({

                title: 'Hapus Bukti?',
                text: 'File akan dihapus',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonText: 'Batal',
                confirmButtonText: 'Hapus'

            }).then((result) => {

                if (result.isConfirmed) {

                    fetch("{{ url($url_menu . '/deleteEvidence') }}/" + id)

                        .then(res => res.json())

                        .then(data => {

                            if (data.status) {

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: 'Bukti berhasil dihapus',
                                    timer: 1200,
                                    showConfirmButton: false
                                })

                                 btn.closest(".file-item").remove();

                                setTimeout(() => {
                                    location.reload()
                                }, 1200)

                            } else {

                                Swal.fire("Gagal", "File tidak ditemukan", "error")

                            }

                        })

                }

            })

        }
        /*
        ==============================
        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);

                });
                updateInputFiles();
                renderFileList();

            });

        }


        function renderFileList() {

            list.innerHTML = "";

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

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

                item.className = "file-item";

                item.innerHTML = `

                <span>${index+1}. ${file.name}</span>

                <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");

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

            });

        

        }


        /*
        UPDATE FILE INPUT
        */

        function updateInputFiles() {

            const dataTransfer = new DataTransfer();

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

            input.files = dataTransfer.files;

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

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

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

        });


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

@endsection