@extends('layouts.app')

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

    @php
        $historyIdRaw = (int) ($history['id'] ?? 0);
        $historyIdEncrypted = \App\Helpers\Function_Helper::encryptUrlId($historyIdRaw);
        $violationType = $history['violation_type'] ?? '';
        $isUnsafeAction = $violationType === 'UA' || strtolower(str_replace([' ', '-', '_'], '', $violationType)) === 'unsafeaction';
        $jenisSurat = $isUnsafeAction ? 'Unsafe Action' : '';
    @endphp

    <div class="container-fluid py-3">
        <div class="card shadow-sm">
            <div class="card-body">
            <div class="mb-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h6 class="mb-0 text-dark font-weight-bold">Edit Unsafe Action</h6>
                    <p class="text-sm mb-0 text-secondary">Ubah data unsafe action</p>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ url('/trssua') }}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>Kembali
                    </a>
                </div>
            </div>

            <form id="spForm" onsubmit="event.preventDefault(); submitSpForm('draft');">
                <div class="row">
                    {{-- ===== KOLOM KIRI ===== --}}
                    <div class="col-md-6">
                        {{-- Nama Karyawan --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Nama Karyawan</label>
                            <input type="hidden" id="nik_pick" value="{{ $history['nik'] ?? '' }}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ $history['nik'] ?? '' }} - {{ $history['nama'] ?? '' }} - {{ $history['departemen'] ?? '' }}">
                                <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Nama Atasan (auto-fill, readonly) --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Nama Atasan</label>
                            <input type="text" class="form-control" id="nama_atasan_display" readonly placeholder="Memuat data atasan..." style="background-color: #f8f9fa;" value="{{ $history['ua_nama_atasan'] ?? '' }}">
                            <input type="hidden" id="ua_nama_atasan" name="ua_nama_atasan" value="{{ $history['ua_nama_atasan'] ?? '' }}">
                        </div>

                        {{-- Hari/Tanggal Pelanggaran --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Hari/Tanggal Pelanggaran <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control sp-field-control" id="ua_hari_tanggal" value="{{ $history['tanggal_kejadian'] ?? '' }}">
                        </div>

                        {{-- Lokasi --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Lokasi <span class="text-danger">*</span></label>
                            <input type="text" class="form-control sp-field-control" id="ua_lokasi" value="{{ $history['lokasi'] ?? '' }}" placeholder="Contoh: Area Produksi Line 1">
                        </div>

                        {{-- Referensi Standar --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Referensi Standar <span class="text-danger">*</span></label>
                            <input type="hidden" id="ua_referensi" value="{{ $history['idreferensi'] ?? '' }}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="ua_referensi_display" placeholder="Pilih referensi standar" readonly value="{{ $referensiNama ?? '' }}">
                                <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openReferensiModal()">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Kategori Pelanggaran --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Kategori Pelanggaran <span class="text-danger">*</span></label>
                            
                            <input type="hidden" id="ua_kategori_pelanggaran" value="{{ $history['idpelanggaran'] ?? '' }}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="ua_kategori_display" placeholder="Pilih kategori pelanggaran" readonly required value="{{ $kategoriNama ?? '' }}">
                                <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKategoriModal()">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Rank --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Rank <span class="text-danger">*</span></label>
                            <input type="hidden" id="ua_rank" value="{{ $history['idrank'] ?? '' }}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="ua_rank_display" placeholder="Pilih rank" readonly value="{{ $rankNama ?? '' }}">
                                <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openRankModal()">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- ===== KOLOM KANAN ===== --}}
                    <div class="col-md-6">
                        {{-- Deskripsi Pelanggaran --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Deskripsi Pelanggaran <span class="text-danger">*</span></label>
                            <textarea class="form-control sp-field-control" id="ua_deskripsi_pelanggaran" rows="5" placeholder="Jelaskan detail pelanggaran yang occurred">{{ $history['deskripsi_pelanggaran'] ?? '' }}</textarea>
                        </div>

                        {{-- Catatan/Komentar --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Catatan/Komentar</label>
                            <textarea class="form-control sp-field-control" id="ua_catatan_komentar" rows="5" placeholder="Catatan tambahan (opsional)">{{ $history['catatan'] ?? '' }}</textarea>
                        </div>

                        {{-- Upload Foto Bukti --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Upload Foto Bukti</label>
                            <div id="fotoBuktiExisting" style="display: {{ !empty($history['foto_bukti']) ? 'block' : 'none' }};">
                                <img src="{{ asset('storage') }}/{{ $history['foto_bukti'] ?? '' }}" alt="Foto Bukti" style="max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">
                                <br>
                                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="removeFotoBukti()">
                                    <i class="fas fa-trash me-1"></i>Hapus Foto
                                </button>
                            </div>
                            <input type="file" class="form-control sp-field-control" id="ua_foto_bukti" accept="image/*" style="display: {{ !empty($history['foto_bukti']) ? 'none' : 'block' }};">
                            <small class="text-muted">Format: JPG, PNG, JPEG (Max: 2MB)</small>
                        </div>

                        {{-- Tanda Tangan Karyawan --}}
                        <div class="mb-3">
                            <label class="form-label text-sm font-weight-bold">Tanda Tangan Karyawan</label>
                            <div class="mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ttd_option" id="ttd_langsung_edit" value="langsung" checked onchange="toggleSignatureCanvasEdit('langsung')">
                                    <label class="form-check-label" for="ttd_langsung_edit">
                                        Karyawan langsung tanda tangan
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ttd_option" id="ttd_tidak_edit" value="tidak" onchange="toggleSignatureCanvasEdit('tidak')">
                                    <label class="form-check-label" for="ttd_tidak_edit">
                                        Karyawan tidak langsung tanda tangan
                                    </label>
                                </div>
                            </div>
                            <div id="signatureContainerEdit" class="border rounded p-2 bg-white">
                                <canvas id="signatureCanvasEdit" width="400" height="200" style="border: 1px solid #ccc; width: 100%; max-width: 400px; height: 200px; background-color: #fff;"></canvas>
                                <div class="mt-2 d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="clearSignatureEdit()">Clear</button>
                                </div>
                                <input type="hidden" id="tanda_tangan" name="tanda_tangan">
                                <small class="text-muted">Silakan tanda tangan di area di atas</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="row mt-3">
                    <div class="col-md-12">
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="{{ url('/trssua') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Kembali
                            </a>
                            <button type="button" class="btn btn-primary" onclick="submitSpForm('draft')">
                                <i class="fas fa-save me-2"></i>Simpan
                            </button>
                            <button type="button" class="btn btn-success" onclick="submitSpForm('posted')">
                                <i class="fas fa-paper-plane me-2"></i>Post
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- MODAL REFERENSI PICKER --}}
    <div class="modal fade" id="referensiPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">Pilih Referensi Standar</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="referensiPickerSearch" placeholder="Cari..." oninput="filterReferensiPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterReferensiPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="referensiPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>Kode Document</th>
                                    <th>Jenis Document</th>
                                    <th>Prosedur Departemen</th>
                                    <th>Nama Document</th>
                                </tr>
                            </thead>
                            <tbody id="referensiPickerBody">
                                @foreach($referensi_options as $ref)
                                @php
                                    $refText = sprintf('( %s - %s - %s )', $ref->kode_doc ?? '-', $ref->prosedur_departemen ?? '-', $ref->nama ?? '-');
                                @endphp
                                <tr style="cursor:pointer;" onclick="selectReferensi({{ $ref->id }}, '{{ addslashes($refText) }}')" class="hover-row">
                                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectReferensi({{ $ref->id }}, '{{ addslashes($refText) }}')">Pilih</button></td>
                                    <td>{{ $ref->kode_doc ?? '-' }}</td>
                                    <td>{{ $ref->jenis_doc ?? '-' }}</td>
                                    <td>{{ $ref->prosedur_departemen ?? '-' }}</td>
                                    <td>{{ $ref->nama }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL KATEGORI PICKER --}}
    <div class="modal fade" id="kategoriPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">Pilih Kategori Pelanggaran</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="kategoriPickerSearch" placeholder="Cari..." oninput="filterKategoriPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterKategoriPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="kategoriPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>Kategori Pelanggaran</th>
                                    <th>Deskripsi</th>
                                </tr>
                            </thead>
                            <tbody id="kategoriPickerBody">
                                @foreach($violation_options as $violation)
                                <tr style="cursor:pointer;" onclick="selectKategori({{ $violation->idpelanggaran }}, '{{ addslashes($violation->nama) }}')" class="hover-row">
                                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKategori({{ $violation->idpelanggaran }}, '{{ addslashes($violation->nama) }}')">Pilih</button></td>
                                    <td>{{ $violation->nama }}</td>
                                    <td>{{ $violation->deskripsi ?? '-' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL RANK PICKER --}}
    <div class="modal fade" id="rankPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">Pilih Rank</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="rankPickerSearch" placeholder="Cari..." oninput="filterRankPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterRankPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="rankPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>Nama Rank</th>
                                    <th>Deskripsi</th>
                                </tr>
                            </thead>
                            <tbody id="rankPickerBody">
                                @foreach($rank_options as $rank)
                                <tr style="cursor:pointer;" onclick="selectRank({{ $rank->id }}, '{{ addslashes($rank->nama) }}')" class="hover-row">
                                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectRank({{ $rank->id }}, '{{ addslashes($rank->nama) }}')">Pilih</button></td>
                                    <td>{{ $rank->nama }}</td>
                                    <td>{{ $rank->deskripsi ?? '-' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL KARYAWAN PICKER --}}
    <div class="modal fade" id="karyawanPickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                        <h5 class="modal-title mb-0">List Data Karyawan</h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-end mb-3">
                        <div class="input-group picker-search-wrap">
                            <input type="text" class="form-control" id="karyawanPickerSearch" placeholder="Cari..." oninput="filterKaryawanPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterKaryawanPicker()">
                                <i class="fas fa-search me-1"></i>Cari
                            </button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="karyawanPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>NIK</th>
                                    <th>Nama</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="karyawanPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        #spForm .sp-field-control { width: 100%; }
        #spForm textarea.sp-field-control { resize: vertical; }
        .input-group > .form-control { height: calc(1.5em + 1rem + 2px); }
        .input-group > .input-group-text { height: calc(1.5em + 1rem + 2px); }
        .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
        .hover-row:hover { background-color: #f8f9fa; }
        #referensiPickerTable td, #kategoriPickerTable td, #rankPickerTable td, #karyawanPickerTable td { padding: 3px 8px; }
        #referensiPickerTable tbody tr, #kategoriPickerTable tbody tr, #rankPickerTable tbody tr, #karyawanPickerTable tbody tr { vertical-align: middle; }
        #referensiPickerTable, #kategoriPickerTable, #rankPickerTable, #karyawanPickerTable { font-size: 0.875rem; }
    </style>

    <script>
        const historyId = @json($historyIdEncrypted);
        const isUnsafeAction = {{ $isUnsafeAction ? 'true' : 'false' }};
        const existingSignature = @json($history['tanda_tangan'] ?? '');

        $(document).ready(function() {
            // Don't auto-load atasan on page load since it's already populated from server
            // loadAtasanByDepartment will be called when user changes karyawan
            
            // Initialize signature canvas
            initSignatureCanvasEdit();
            
            // Check existing signature and set radio button accordingly
            if (existingSignature) {
                // If signature exists, select "langsung" and show canvas
                $('input[name="ttd_option"][value="langsung"]').prop('checked', true);
                $('#signatureContainerEdit').show();
                
                // Load existing signature onto canvas
                const img = new Image();
                img.onload = function() {
                    signatureCtxEdit.drawImage(img, 0, 0, signatureCanvasEdit.width, signatureCanvasEdit.height);
                    // Update the hidden input with the existing signature
                    document.getElementById('tanda_tangan').value = existingSignature;
                };
                img.src = existingSignature;
            } else {
                // If no signature, select "tidak" and hide canvas
                $('input[name="ttd_option"][value="tidak"]').prop('checked', true);
                $('#signatureContainerEdit').hide();
            }
        });

        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForEdit = null;

        window.openKaryawanModal = function() {
            document.getElementById('karyawanPickerSearch').value = '';
            loadKaryawanPickerData();
            new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
        }

        function loadKaryawanPickerData() {
            $.ajax({
                url: '{{ url("/trssua/getkaryawan") }}',
                method: 'GET',
                data: { query: '' },
                success: function(response) {
                    if (response.success) {
                        if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                        renderKaryawanPickerRows(response.data || []);
                        initKaryawanPickerTable();
                    }
                }
            });
        }

        function renderKaryawanPickerRows(data) {
            karyawanPickerData = data;
            const tbody = document.getElementById('karyawanPickerBody');
            if (!data.length) { tbody.innerHTML = '<tr><td colspan="4" class="text-center">Tidak ada data</td></tr>'; return; }
            let html = '';
            data.forEach((k, idx) => {
                html += `<tr style="cursor:pointer;" onclick="selectKaryawanFromModal(${idx})" class="hover-row">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                    <td>${escapeHtml(k.nik||'-')}</td>
                    <td>${escapeHtml(k.nama||'-')}</td>
                    <td>${escapeHtml(k.departemen||'-')}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        }

        function initKaryawanPickerTable() {
            if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
            karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                language: { zeroRecords: 'Maaf - Data tidak ada', info: 'Showing _START_ to _END_ of _TOTAL_ entries', infoEmpty: 'Showing 0 to 0 of 0 entries', infoFiltered: '(filtered from _MAX_ total entries)', paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' } },
                pageLength: 10, lengthChange: false, searching: true, ordering: true, order: [[1, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
            });
        }

        function filterKaryawanPicker() {
            const keyword = document.getElementById('karyawanPickerSearch').value.trim();
            if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
        }

        function selectKaryawanFromModal(index) {
            const karyawan = karyawanPickerData[index];
            if (!karyawan) return;
            selectedKaryawanForEdit = karyawan;
            document.getElementById('nik_pick').value = karyawan.nik || '';
            document.getElementById('karyawan_pick').value = `${karyawan.nik || ''} - ${karyawan.nama || ''} - ${karyawan.departemen || ''}`;

            // Show loading state
            const atasanDisplay = document.getElementById('nama_atasan_display');
            const atasanHidden = document.getElementById('ua_nama_atasan');
            if (atasanDisplay) {
                atasanDisplay.value = 'Memuat data atasan...';
            }
            if (atasanHidden) {
                atasanHidden.value = '';
            }

            // Load atasan based on selected karyawan's department (jabatan 3/4)
            loadAtasanByDepartment(karyawan.nik);

            bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal')).hide();
        }

        function escapeHtml(value) {
            return String(value||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"').replace(/'/g,'&#039;');
        }

        function loadAtasanByDepartment(nik) {
            const atasanDisplay = document.getElementById('nama_atasan_display');
            const atasanHidden = document.getElementById('ua_nama_atasan');
            
            if (atasanDisplay) atasanDisplay.value = 'Memuat data atasan...';
            
            $.ajax({
                url: '{{ url("/trssua/get-atasan-by-department") }}',
                method: 'GET',
                data: { nik: nik },
                success: function(response) {
                    if (response.success && response.data) {
                        if (atasanDisplay) atasanDisplay.value = response.data.nama || '';
                        if (atasanHidden) atasanHidden.value = response.data.nama || '';
                    } else {
                        if (atasanDisplay) {
                            atasanDisplay.value = '';
                            atasanDisplay.placeholder = response.message || 'Gagal memuat data atasan';
                        }
                        if (atasanHidden) atasanHidden.value = '';
                    }
                },
                error: function() {
                    if (atasanDisplay) {
                        atasanDisplay.value = '';
                        atasanDisplay.placeholder = 'Gagal memuat data atasan';
                    }
                    if (atasanHidden) atasanHidden.value = '';
                }
            });
        }

        window.submitSpForm = function submitSpForm(statusPost) {
            if (statusPost && typeof statusPost !== 'string') {
                statusPost = 'draft';
            }
            if (!statusPost) {
                statusPost = 'draft';
            }
            if (statusPost === 'draft') {
                Swal.fire({
                    title: 'Konfirmasi Penyimpanan',
                    text: "Apakah Anda yakin ingin menyimpan perubahan data ini?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Simpan',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmit('draft', null);
                    }
                });
                return;
            }

            if (statusPost === 'posted') {
                // Check if signature exists (either from existing database or drawn on canvas)
                const tandaTangan = document.getElementById('tanda_tangan').value || '';
                const existingSignature = @json($history['tanda_tangan'] ?? '');
                const hasTandaTangan = (tandaTangan && tandaTangan !== '' && tandaTangan !== 'null') || 
                                       (existingSignature && existingSignature !== '' && existingSignature !== 'null');
                
                let title, text, icon;
                if (hasTandaTangan) {
                    title = 'Konfirmasi Posting';
                    text = 'Apakah Anda yakin ingin memposting surat ini? Data ini sudah memiliki tanda tangan. Apabila diposting, status akan menjadi Selesai dan tidak dapat diedit lagi.';
                    icon = 'warning';
                } else {
                    title = 'Konfirmasi Posting';
                    text = `Apakah Anda yakin ingin memposting surat ini? Data tidak memiliki tanda tangan dan akan masuk ke menu persetujuan pelanggaran dengan status menunggu pengiriman email ke karyawan.`;
                    icon = 'question';
                }

                Swal.fire({
                    title: title,
                    text: text,
                    icon: icon,
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Post',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmit('posted', null);
                    }
                });
                return;
            }

            doSubmit(statusPost, null);
        }

        function doSubmit(statusPost, dptTujuan) {
            const nik = document.getElementById('nik_pick').value.trim();
            const uaHariTanggal = document.getElementById('ua_hari_tanggal').value || '';
            const uaLokasi = document.getElementById('ua_lokasi').value || '';
            const uaDeskripsi = document.getElementById('ua_deskripsi_pelanggaran').value || '';
            const referensi = document.getElementById('ua_referensi').value || '';
            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            const rank = document.getElementById('ua_rank').value || '';
            const namaAtasan = document.getElementById('nama_atasan_display')?.value || document.getElementById('ua_nama_atasan')?.value || '';
            
            if (!nik) { showWarn('NIK', 'NIK karyawan wajib diisi.'); return; }
            if (!uaHariTanggal) { showWarn('Hari/Tanggal', 'Hari/Tanggal Pelanggaran wajib diisi.'); return; }
            if (!uaLokasi) { showWarn('Lokasi', 'Lokasi wajib diisi.'); return; }
            if (!referensi) { showWarn('Referensi Standar', 'Referensi Standar wajib dipilih.'); return; }
            if (!kategori) { showWarn('Kategori Pelanggaran', 'Kategori Pelanggaran wajib diisi.'); return; }
            if (!rank) { showWarn('Rank', 'Rank wajib dipilih.'); return; }
            if (!uaDeskripsi) { showWarn('Deskripsi', 'Deskripsi Pelanggaran wajib diisi.'); return; }
            if (!namaAtasan) { showWarn('Nama Atasan', 'Nama atasan harus diisi. Silakan refresh halaman.'); return; }

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', historyId);
            formData.append('history_key', historyId);
            formData.append('nik', nik);
            formData.append('ua_hari_tanggal', uaHariTanggal);
            formData.append('ua_lokasi', uaLokasi);
            formData.append('ua_deskripsi_pelanggaran', uaDeskripsi);
            formData.append('ua_catatan_komentar', document.getElementById('ua_catatan_komentar').value || '');
            formData.append('ua_nama_atasan', namaAtasan);
            formData.append('status_post', statusPost);
            
            // Add master data fields
            if (referensi) formData.append('idreferensi', referensi);
            if (kategori) formData.append('idpelanggaran', kategori);
            if (rank) formData.append('idrank', rank);
            
            // Add signature data
            const ttdOption = document.querySelector('input[name="ttd_option"]:checked');
            const tandaTangan = document.getElementById('tanda_tangan').value || '';
            
            // If "langsung" is selected, signature canvas must be filled
            if (ttdOption && ttdOption.value === 'langsung' && !tandaTangan && !existingSignature) {
                showWarn('Tanda Tangan', 'Silakan tanda tangan di canvas sebelum menyimpan.');
                return;
            }
            
            formData.append('tanda_tangan', tandaTangan);
            
            const removeInput = document.getElementById('remove_foto_bukti');
            if (removeInput) {
                formData.append('remove_foto_bukti', removeInput.value);
            }
            
            const fotoBuktiInput = document.getElementById('ua_foto_bukti');
            if (fotoBuktiInput && fotoBuktiInput.files && fotoBuktiInput.files.length > 0) {
                formData.append('foto_bukti', fotoBuktiInput.files[0]);
            }

            $.ajax({
                url: '{{ url("/trssua/update") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({ icon:'success', title:'Berhasil', text: response.message||'Unsafe Action berhasil diperbarui', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trssua") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menyimpan perubahan');
                }
            });
        }

        function showWarn(title, text) {
            Swal.fire({ icon:'warning', title, text, confirmButtonColor:'#028284' });
        }

        function showError(text) {
            Swal.fire({ icon:'error', title:'Error', text, confirmButtonColor:'#028284' });
        }

        // Preview foto bukti when editing
        document.getElementById('ua_foto_bukti')?.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const fotoBuktiField = document.getElementById('ua_foto_bukti_field');
            
            // Remove existing preview if any
            const existingPreview = fotoBuktiField.querySelector('.foto-bukti-preview');
            if (existingPreview) existingPreview.remove();
            
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.createElement('div');
                    preview.className = 'foto-bukti-preview mt-2';
                    preview.innerHTML = `<img src="${e.target.result}" alt="Preview Foto Bukti" style="max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">`;
                    fotoBuktiField.appendChild(preview);
                };
                reader.readAsDataURL(file);
            }
        });

        let signatureCanvasEdit = null;
        let signatureCtxEdit = null;
        let isDrawingEdit = false;

        function initSignatureCanvasEdit() {
            signatureCanvasEdit = document.getElementById('signatureCanvasEdit');
            if (!signatureCanvasEdit) return;
            
            signatureCtxEdit = signatureCanvasEdit.getContext('2d');
            signatureCtxEdit.strokeStyle = '#000';
            signatureCtxEdit.lineWidth = 2;
            signatureCtxEdit.lineCap = 'round';
            signatureCtxEdit.lineJoin = 'round';

            signatureCanvasEdit.addEventListener('mousedown', startDrawingEdit);
            signatureCanvasEdit.addEventListener('mousemove', drawEdit);
            signatureCanvasEdit.addEventListener('mouseup', stopDrawingEdit);
            signatureCanvasEdit.addEventListener('mouseleave', stopDrawingEdit);
            
            signatureCanvasEdit.addEventListener('touchstart', handleTouchStartEdit);
            signatureCanvasEdit.addEventListener('touchmove', handleTouchMoveEdit);
            signatureCanvasEdit.addEventListener('touchend', stopDrawingEdit);
        }

        function startDrawingEdit(e) {
            isDrawingEdit = true;
            const rect = signatureCanvasEdit.getBoundingClientRect();
            signatureCtxEdit.beginPath();
            signatureCtxEdit.moveTo(e.clientX - rect.left, e.clientY - rect.top);
        }

        function drawEdit(e) {
            if (!isDrawingEdit) return;
            const rect = signatureCanvasEdit.getBoundingClientRect();
            signatureCtxEdit.lineTo(e.clientX - rect.left, e.clientY - rect.top);
            signatureCtxEdit.stroke();
        }

        function stopDrawingEdit() {
            if (isDrawingEdit) {
                isDrawingEdit = false;
                signatureCtxEdit.closePath();
                // Update hidden input with signature data
                const signatureData = signatureCanvasEdit.toDataURL('image/png');
                document.getElementById('tanda_tangan').value = signatureData;
            }
        }

        function handleTouchStartEdit(e) {
            e.preventDefault();
            const touch = e.touches[0];
            const rect = signatureCanvasEdit.getBoundingClientRect();
            isDrawingEdit = true;
            signatureCtxEdit.beginPath();
            signatureCtxEdit.moveTo(touch.clientX - rect.left, touch.clientY - rect.top);
        }

        function handleTouchMoveEdit(e) {
            e.preventDefault();
            if (!isDrawingEdit) return;
            const touch = e.touches[0];
            const rect = signatureCanvasEdit.getBoundingClientRect();
            signatureCtxEdit.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
            signatureCtxEdit.stroke();
        }

        function clearSignatureEdit() {
            if (signatureCanvasEdit && signatureCtxEdit) {
                signatureCtxEdit.clearRect(0, 0, signatureCanvasEdit.width, signatureCanvasEdit.height);
                document.getElementById('tanda_tangan').value = '';
            }
        }

        function toggleSignatureCanvasEdit(option) {
            const signatureContainer = document.getElementById('signatureContainerEdit');
            const tandaTanganInput = document.getElementById('tanda_tangan');
            
            if (option === 'tidak') {
                // Hide canvas and clear signature
                signatureContainer.style.display = 'none';
                tandaTanganInput.value = '';
                if (signatureCanvasEdit && signatureCtxEdit) {
                    signatureCtxEdit.clearRect(0, 0, signatureCanvasEdit.width, signatureCanvasEdit.height);
                }
            } else {
                // Show canvas
                signatureContainer.style.display = 'block';
            }
        }

        function removeFotoBukti() {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Foto bukti akan dihapus!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show file input and hide preview
                    document.getElementById('fotoBuktiExisting').style.display = 'none';
                    document.getElementById('ua_foto_bukti').style.display = 'block';
                    
                    // Set hidden input to mark for deletion
                    let removeInput = document.getElementById('remove_foto_bukti');
                    if (!removeInput) {
                        removeInput = document.createElement('input');
                        removeInput.type = 'hidden';
                        removeInput.id = 'remove_foto_bukti';
                        removeInput.name = 'remove_foto_bukti';
                        document.getElementById('spForm').appendChild(removeInput);
                    }
                    removeInput.value = '1';
                }
            });
        }

        let rankPickerTable = null;
        
        window.openRankModal = function() {
            if (!rankPickerTable) {
                rankPickerTable = $('#rankPickerTable').DataTable({
                    language: {
                        zeroRecords: 'Maaf - Data tidak ada',
                        info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                        infoEmpty: 'Showing 0 to 0 of 0 entries',
                        infoFiltered: '(filtered from _MAX_ total entries)',
                        paginate: {
                            previous: '<i class="fas fa-angle-left"></i>',
                            next: '<i class="fas fa-angle-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    order: [[1, 'asc']],
                    responsive: true,
                    pagingType: 'simple_numbers',
                    dom: 'tip'
                });
            }
            new bootstrap.Modal(document.getElementById('rankPickerModal')).show();
        }

        function selectRank(id, nama) {
            document.getElementById('ua_rank').value = id;
            document.getElementById('ua_rank_display').value = nama;
            bootstrap.Modal.getInstance(document.getElementById('rankPickerModal')).hide();
        }

        let referensiPickerTable = null;
        
        window.openReferensiModal = function() {
            if (!referensiPickerTable) {
                referensiPickerTable = $('#referensiPickerTable').DataTable({
                    language: {
                        zeroRecords: 'Maaf - Data tidak ada',
                        info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                        infoEmpty: 'Showing 0 to 0 of 0 entries',
                        infoFiltered: '(filtered from _MAX_ total entries)',
                        paginate: {
                            previous: '<i class="fas fa-angle-left"></i>',
                            next: '<i class="fas fa-angle-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    order: [[1, 'asc']],
                    responsive: true,
                    pagingType: 'simple_numbers',
                    dom: 'tip'
                });
            }
            new bootstrap.Modal(document.getElementById('referensiPickerModal')).show();
        }

        function selectReferensi(id, nama) {
            document.getElementById('ua_referensi').value = id;
            document.getElementById('ua_referensi_display').value = nama;
            bootstrap.Modal.getInstance(document.getElementById('referensiPickerModal')).hide();
        }

        let kategoriPickerTable = null;
        
        window.openKategoriModal = function() {
            if (!kategoriPickerTable) {
                kategoriPickerTable = $('#kategoriPickerTable').DataTable({
                    language: {
                        zeroRecords: 'Maaf - Data tidak ada',
                        info: 'Showing _START_ to _END_ of _TOTAL_ entries',
                        infoEmpty: 'Showing 0 to 0 of 0 entries',
                        infoFiltered: '(filtered from _MAX_ total entries)',
                        paginate: {
                            previous: '<i class="fas fa-angle-left"></i>',
                            next: '<i class="fas fa-angle-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthChange: false,
                    searching: true,
                    ordering: true,
                    order: [[1, 'asc']],
                    responsive: true,
                    pagingType: 'simple_numbers',
                    dom: 'tip'
                });
            }
            new bootstrap.Modal(document.getElementById('kategoriPickerModal')).show();
        }

        function selectKategori(id, nama) {
            document.getElementById('ua_kategori_pelanggaran').value = id;
            document.getElementById('ua_kategori_display').value = nama;
            bootstrap.Modal.getInstance(document.getElementById('kategoriPickerModal')).hide();
        }

        function filterReferensiPicker() {
            const keyword = document.getElementById('referensiPickerSearch').value.trim();
            if (referensiPickerTable) referensiPickerTable.search(keyword).draw();
        }

        function filterKategoriPicker() {
            const keyword = document.getElementById('kategoriPickerSearch').value.trim();
            if (kategoriPickerTable) kategoriPickerTable.search(keyword).draw();
        }

        function filterRankPicker() {
            const keyword = document.getElementById('rankPickerSearch').value.trim();
            if (rankPickerTable) rankPickerTable.search(keyword).draw();
        }
    </script>
    </div>
@endsection