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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Form Tambah 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) }}" enctype="multipart/form-data">

        @csrf

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

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

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


                <div class="row">

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

                        <label class="form-label">Departemen
                            <span class="text-danger">*</span>
                        </label>

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

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

                            @foreach ($departments as $d)
                            <option value="{{ $d->iddepartments }}" data-prefix="{{ $d->prefix }}"
                                data-kode="{{ $d->kode_utama }}">
                                {{ $d->department_label ?? \App\Helpers\DepartmentHelper::label($d) }}
                            </option>
                            @endforeach

                        </select>

                    </div>


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

                        <label class="form-label">Tanggal Audit
                            <span class="text-danger">*</span>
                        </label>

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

                    </div>


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

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

                        <input type="text" id="ncrNumber" class="form-control form-control-lg"
                            value="Belum digenerate" readonly>

                    </div>

                </div>


                <hr class="my-4">


                <div class="row">

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

                            @foreach ($standards as $iso)
                            <option value="{{ $iso->idstandards }}">
                                {{ $iso->code }} - {{ $iso->name }}
                            </option>
                            @endforeach

                    </select>

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

                        <label class="form-label">Standar ISO &amp; Klausul
                            <span class="text-danger">*</span>
                        </label>

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

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

                    </div>

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


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

                        <label class="form-label">Kategori
                            <span class="text-danger">*</span>
                        </label>

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

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

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

                        </select>

                    </div>




                </div>


                <hr class="my-4">


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


                <div class="row">

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

                        <label>Problem
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="problem" class="form-control" rows="4"></textarea>

                    </div>


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

                        <label>Location
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="location" class="form-control" rows="4"></textarea>

                    </div>


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

                        <label>Objective Evidence
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="evidence" class="form-control" rows="4"></textarea>

                    </div>


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

                        <label>Reference
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="reference" class="form-control" rows="4"></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
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="analysis" class="form-control" rows="4"></textarea>

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

                            <label class="form-check-label">
                                {{ $f->name }}

                            </label>

                        </div>
                        @endforeach

                    </div>


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

                        <label>Correction
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="correction" class="form-control" rows="4"></textarea>

                    </div>


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

                        <label>Corrective Action
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="corrective_action" class="form-control" rows="4"></textarea>

                    </div>

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

                        <label>Evaluasi Efektifitas
                            <span class="text-danger">*</span>
                        </label>

                        <textarea name="evaluation" class="form-control" rows="4"></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>

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


                <hr class="my-4">


                <div class="row">

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

                        <label>Auditor
                            <span class="text-danger">*</span>
                        </label>

                        <input type="text" name="auditor" class="form-control" value="TÜV Rheinland" required>
                    </div>


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

                        <label>Auditee
                            <span class="text-danger">*</span>
                        </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 }}">
                                    {{ $auditeeName }}
                                </option>
                            @endforeach
                        </select>

                    </div>


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

                        <label>Management Representative
                            <span class="text-danger">*</span>
                        </label>

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

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

                    </div>

                </div>


                <hr class="my-4">


                <h5 class="mb-3">Status NCR
                    <span class="text-danger">*</span>
                </h5>

                <div class="row">

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

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

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

                        </select>

                    </div>

                </div>


                <div class="d-flex mt-4">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-1"></i> Simpan
                    </button>

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


            </div>
        </div>

    </form>

</div>



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

    .upload-box {

        width: 80px;
        height: 80px;

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

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

        cursor: pointer;

        background: #f8f9fa;
        transition: 0.2s;
    }

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

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

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

    .file-item {

        display: flex;
        justify-content: space-between;

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

        border-radius: 8px;

        cursor: pointer;
        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;
    }

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

    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>
    let clauses = @json($clauses ?? []);
    const standards = @json($standards ?? []);
    const defaultMrId = @json((string) ($defaultMrId ?? ''));
    const auditeeEndpoint = @json(url('ncrext/getAuditeesByDepartment'));


    $(document).ready(function() {

        $('#clauseSelect').select2({

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

        });

        loadClauses();

        $('#mrSelect').select2({

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

        });

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

        $('#auditeeSelect').select2({

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

        });

        loadAuditeesByDepartment();

    });


    /*
    ================================
    PREVIEW NCR NUMBER
    ================================
    */

    function previewNcrNumber() {
        const output = document.getElementById("ncrNumber");
        const deptSelect = document.getElementById("departemenSelect");
        const tanggal = document.getElementById("tanggalAudit")?.value;
        const selectedDept = deptSelect?.selectedOptions[0];
        const kode = selectedDept?.dataset.kode;
        const prefix = selectedDept?.dataset.prefix;

        if (!output) {
            return;
        }

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

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

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

    document.getElementById("departemenSelect")?.addEventListener("change", previewNcrNumber);
    document.getElementById("departemenSelect")?.addEventListener("change", function() {
        loadAuditeesByDepartment();
    });
    document.getElementById("tanggalAudit")?.addEventListener("change", previewNcrNumber);

    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(selectedAuditeeId = 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 nextValue = selectedAuditeeId && data.some(auditee => String(auditee.id) === String(selectedAuditeeId))
                    ? selectedAuditeeId
                    : (data[0]?.id ?? '');

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


    /*
    ================================
    FILTER KLAUSUL BERDASARKAN ISO
    ================================
    */

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

    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}`;
                group.appendChild(opt);
            });
            select.appendChild(group);
        });

        $('#clauseSelect').val([]).trigger('change.select2');

    }

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


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

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

    let filesArray = [];

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


            deleteBtn.onclick = function() {

                filesArray.splice(index, 1);

                updateInputFiles();

                renderFileList();

            };

            list.appendChild(item);

        });

    }


    function updateInputFiles() {

        const dataTransfer = new DataTransfer();

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

        input.files = dataTransfer.files;

    }


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

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

            filesArray.push(file);

        });

        updateInputFiles();

        renderFileList();

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