@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);
    @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">Proses Unsafe Action</h6>
                    <p class="text-sm mb-0 text-secondary">Proses data unsafe action</p>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ url('/trspua') }}" 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('approve');">
                <div class="row">
                    {{-- ===== KOLOM KIRI ===== --}}
                    <div class="col-md-6">
                        {{-- Nama Karyawan (READ ONLY - no search button) --}}
                        <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'] ?? '' }}">
                            <input type="text" class="form-control" id="karyawan_pick" readonly value="{{ $history['nik'] ?? '' }} - {{ $history['nama'] ?? '' }} - {{ $history['departemen'] ?? '' }}" style="background-color: #f8f9fa;">
                        </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</label>
                                <input type="hidden" id="ua_referensi" value="{{ $history['idreferensi'] ?? '' }}">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="ua_referensi_display" readonly placeholder="Pilih referensi standar" 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" readonly required placeholder="Pilih kategori pelanggaran" 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</label>
                            <input type="hidden" id="ua_rank" value="{{ $history['idrank'] ?? '' }}">
                            <div class="input-group">
                                <input type="text" class="form-control" id="ua_rank_display" readonly placeholder="Pilih rank" 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 form-field" data-show="ua" id="ua_tanda_tangan_field">
                            <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" value="langsung" checked disabled>
                                    <label class="form-check-label" for="ttd_langsung">
                                        Karyawan langsung tanda tangan
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ttd_option" id="ttd_tidak" value="tidak" disabled>
                                    <label class="form-check-label" for="ttd_tidak">
                                        Karyawan tidak langsung tanda tangan
                                    </label>
                                </div>
                            </div>
                            <div id="signatureContainer" class="border rounded p-2 bg-white">
                                <canvas id="signatureCanvas" width="400" height="200" style="border: 1px solid #ccc; width: 100%; max-width: 400px; height: 200px; background-color: #fff;"></canvas>
                                <input type="hidden" id="tanda_tangan" name="tanda_tangan" value="{{ $history['tanda_tangan'] ?? '' }}">
                                <br>
                                <small class="text-muted">Tanda tangan karyawan ditampilkan untuk info</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('/trspua') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Kembali
                            </a>
                            <button type="button" class="btn btn-danger" onclick="rejectSpForm()">
                                <i class="fas fa-times me-2"></i>Tolak
                            </button>
                            <button type="button" class="btn btn-success" onclick="submitSpForm('approve')">
                                <i class="fas fa-check me-2"></i>Approve
                            </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>

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

        $(document).ready(function() {
            const nik = document.getElementById('nik_pick').value.trim();
            if (nik) {
                // loadAtasanByDepartment(nik);
            }
        });

        

        let referensiPickerTable = null;
        let kategoriPickerTable = null;
        let rankPickerTable = null;
        let signatureCanvas = null;
        let signatureCtx = null;
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        // Initialize signature canvas
        $(document).ready(function() {
            initSignatureCanvas();
            
            // Check existing signature and set radio button accordingly
            const existingSignature = '{{ $history['tanda_tangan'] ?? '' }}';
            if (existingSignature) {
                // If signature exists, select "langsung" and show canvas
                $('input[name="ttd_option"][value="langsung"]').prop('checked', true);
                $('#signatureContainer').show();
                
                // Load existing signature onto canvas
                const img = new Image();
                img.onload = function() {
                    signatureCtx.drawImage(img, 0, 0, signatureCanvas.width, signatureCanvas.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);
                $('#signatureContainer').hide();
            }
        });

        function initSignatureCanvas() {
            signatureCanvas = document.getElementById('signatureCanvas');
            if (!signatureCanvas) return;
            
            signatureCtx = signatureCanvas.getContext('2d');
            signatureCtx.strokeStyle = '#000';
            signatureCtx.lineWidth = 2;
            signatureCtx.lineCap = 'round';
            signatureCtx.lineJoin = 'round';
        }

        function startDrawing(e) {
            isDrawing = true;
            const rect = signatureCanvas.getBoundingClientRect();
            lastX = e.clientX - rect.left;
            lastY = e.clientY - rect.top;
        }

        function draw(e) {
            if (!isDrawing) return;
            const rect = signatureCanvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            signatureCtx.beginPath();
            signatureCtx.moveTo(lastX, lastY);
            signatureCtx.lineTo(x, y);
            signatureCtx.stroke();
            
            lastX = x;
            lastY = y;
        }

        function handleTouchStart(e) {
            e.preventDefault();
            const touch = e.touches[0];
            const rect = signatureCanvas.getBoundingClientRect();
            isDrawing = true;
            lastX = touch.clientX - rect.left;
            lastY = touch.clientY - rect.top;
        }

        function handleTouchMove(e) {
            e.preventDefault();
            if (!isDrawing) return;
            const touch = e.touches[0];
            const rect = signatureCanvas.getBoundingClientRect();
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            
            signatureCtx.beginPath();
            signatureCtx.moveTo(lastX, lastY);
            signatureCtx.lineTo(x, y);
            signatureCtx.stroke();
            
            lastX = x;
            lastY = y;
        }

        function stopDrawing() {
            if (isDrawing) {
                isDrawing = false;
                // Save signature to hidden input
                const signatureData = signatureCanvas.toDataURL('image/png');
                document.getElementById('tanda_tangan').value = signatureData;
            }
        }

        function clearSignature() {
            if (signatureCanvas && signatureCtx) {
                signatureCtx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height);
                document.getElementById('tanda_tangan').value = '';
            }
        }

        function toggleSignatureCanvas(option) {
            const signatureContainer = document.getElementById('signatureContainer');
            if (signatureContainer) {
                if (option === 'langsung') {
                    signatureContainer.style.display = 'block';
                } else {
                    signatureContainer.style.display = 'none';
                    clearSignature();
                }
            }
        }

        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 filterReferensiPicker() {
            const keyword = document.getElementById('referensiPickerSearch').value.trim();
            if (referensiPickerTable) referensiPickerTable.search(keyword).draw();
        }

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

        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 filterKategoriPicker() {
            const keyword = document.getElementById('kategoriPickerSearch').value.trim();
            if (kategoriPickerTable) kategoriPickerTable.search(keyword).draw();
        }

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

        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 filterRankPicker() {
            const keyword = document.getElementById('rankPickerSearch').value.trim();
            if (rankPickerTable) rankPickerTable.search(keyword).draw();
        }

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

        function rejectSpForm() {
            // Validasi field wajib diisi sebelum menolak
            const uaHariTanggal = document.getElementById('ua_hari_tanggal').value || '';
            const uaLokasi = document.getElementById('ua_lokasi').value || '';
            const uaDeskripsi = document.getElementById('ua_deskripsi_pelanggaran').value || '';
            const namaAtasan = document.getElementById('ua_nama_atasan').value.trim();
            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            
            if (!uaHariTanggal) { showWarn('Hari/Tanggal', 'Hari/Tanggal Pelanggaran wajib diisi.'); return; }
            if (!uaLokasi) { showWarn('Lokasi', 'Lokasi wajib diisi.'); return; }
            if (!uaDeskripsi) { showWarn('Deskripsi', 'Deskripsi Pelanggaran wajib diisi.'); return; }
            if (!namaAtasan) { showWarn('Nama Atasan', 'Nama atasan harus diisi. Silakan refresh halaman.'); return; }
            if (!kategori) { showWarn('Kategori Pelanggaran', 'Kategori Pelanggaran wajib diisi.'); return; }
            
            // Step 1: SweetAlert input untuk catatan penolakan
            Swal.fire({
                title: 'Catatan Penolakan',
                text: 'Silakan isi catatan alasan penolakan',
                input: 'textarea',
                inputPlaceholder: 'Tuliskan alasan penolakan...',
                inputAttributes: {
                    'required': 'required'
                },
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Lanjutkan',
                cancelButtonText: 'Batal',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return 'Catatan penolakan harus diisi!';
                    }
                }
            }).then((firstResult) => {
                if (firstResult.isConfirmed && firstResult.value) {
                    const catatanTolak = firstResult.value.trim();

                    // Step 2: Konfirmasi akhir
                    Swal.fire({
                        title: 'Konfirmasi Penolakan',
                        html: `Apakah Anda yakin ingin <strong>menolak</strong> surat unsafe action ini?<br><br><strong>Alasan:</strong><br>${catatanTolak}`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Tolak!',
                        cancelButtonText: 'Batal'
                    }).then((secondResult) => {
                        if (secondResult.isConfirmed) {
                            doRejectForm(catatanTolak);
                        }
                    });
                }
            });
        }

        function doRejectForm(catatanTolak) {
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', historyId);
            formData.append('history_key', historyId);
            formData.append('ua_hari_tanggal', document.getElementById('ua_hari_tanggal').value || '');
            formData.append('ua_lokasi', document.getElementById('ua_lokasi').value || '');
            formData.append('ua_deskripsi_pelanggaran', document.getElementById('ua_deskripsi_pelanggaran').value || '');
            formData.append('ua_catatan_komentar', document.getElementById('ua_catatan_komentar').value || '');
            formData.append('ua_nama_atasan', document.getElementById('ua_nama_atasan').value.trim());
            formData.append('action_type', 'reject');
            formData.append('alasan', catatanTolak);
            formData.append('tanda_tangan', document.getElementById('tanda_tangan')?.value || '');

            const referensi = document.getElementById('ua_referensi').value || '';
            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            const rank = document.getElementById('ua_rank').value || '';

            if (referensi) formData.append('idreferensi', referensi);
            if (kategori) formData.append('idpelanggaran', kategori);
            if (rank) formData.append('idrank', rank);

            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("/trspua/process-update") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({ icon:'success', title:'Berhasil', text: 'Unsafe Action berhasil ditolak', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trspua") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menolak unsafe action');
                }
            });
        }

        window.submitSpForm = function submitSpForm(actionType) {
            if (actionType && typeof actionType !== 'string') {
                actionType = 'approve';
            }
            if (!actionType) {
                actionType = 'approve';
            }
            const uaHariTanggal = document.getElementById('ua_hari_tanggal').value || '';
            const uaLokasi = document.getElementById('ua_lokasi').value || '';
            const uaDeskripsi = document.getElementById('ua_deskripsi_pelanggaran').value || '';
            const namaAtasan = document.getElementById('ua_nama_atasan').value.trim();
            const referensi = document.getElementById('ua_referensi').value || '';
            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            const rank = document.getElementById('ua_rank').value || '';
            
            if (!uaHariTanggal) { showWarn('Hari/Tanggal', 'Hari/Tanggal Pelanggaran wajib diisi.'); return; }
            if (!uaLokasi) { showWarn('Lokasi', 'Lokasi wajib diisi.'); return; }
            if (!uaDeskripsi) { showWarn('Deskripsi', 'Deskripsi Pelanggaran wajib diisi.'); return; }
            if (!namaAtasan) { showWarn('Nama Atasan', 'Nama atasan harus diisi. Silakan refresh halaman.'); return; }
            if (!kategori) { showWarn('Kategori Pelanggaran', 'Kategori Pelanggaran wajib diisi.'); return; }
            
            // Referensi dan Rank wajib diisi hanya untuk approve, tidak untuk reject
            if (actionType !== 'reject') {
                if (!referensi) { showWarn('Referensi Standar', 'Referensi Standar wajib dipilih.'); return; }
                if (!rank) { showWarn('Rank', 'Rank wajib dipilih.'); return; }
            }
            
            // If action is approve, show confirmation dialog first
            if (actionType === 'approve') {
                const existingSignature = '{{ $history['tanda_tangan'] ?? '' }}';
                const nextStatus = existingSignature ? 'selesai' : 'menunggu_ttd_karyawan';
                const statusText = existingSignature 
                    ? 'Setelah disetujui, status surat akan menjadi <strong>Selesai</strong>.' 
                    : 'Setelah disetujui, status surat akan menjadi <strong>Disetujui</strong>, selanjutnya tekan tombol kirim email untuk meminta tanda tangan ke karyawan.';
                
                Swal.fire({
                    title: 'Konfirmasi Approve',
                    html: `Apakah Anda yakin ingin menyetujui data ini?<br><br>${statusText}`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Setujui!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmitForm(actionType);
                    }
                });
                return;
            }

            doSubmitForm(actionType);
        }

        function doSubmitForm(actionType) {
            const uaHariTanggal = document.getElementById('ua_hari_tanggal').value || '';
            const uaLokasi = document.getElementById('ua_lokasi').value || '';
            const uaDeskripsi = document.getElementById('ua_deskripsi_pelanggaran').value || '';
            const namaAtasan = document.getElementById('ua_nama_atasan').value.trim();
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', historyId);
            formData.append('history_key', historyId);
            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('action_type', actionType);
            formData.append('tanda_tangan', document.getElementById('tanda_tangan')?.value || '');

            const referensi = document.getElementById('ua_referensi').value || '';
            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            const rank = document.getElementById('ua_rank').value || '';

            if (referensi) formData.append('idreferensi', referensi);
            if (kategori) formData.append('idpelanggaran', kategori);
            if (rank) formData.append('idrank', rank);

            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("/trspua/process-update") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        const existingSignature = '{{ $history['tanda_tangan'] ?? '' }}';
                        const successText = existingSignature 
                            ? 'Unsafe Action berhasil disetujui. Status menjadi Selesai.'
                            : 'Unsafe Action berhasil disetujui. Status menjadi disetujui, kirim email ke karyawan untuk meminta tanda tangan karyawan.';
                        Swal.fire({ icon:'success', title:'Berhasil', text: response.message || successText, confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trspua") }}');
                    }
                },
                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' });
        }

        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) {
                    document.getElementById('fotoBuktiExisting').style.display = 'none';
                    document.getElementById('ua_foto_bukti').style.display = 'block';
                    
                    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';
                }
            });
        }

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

        function loadKaryawanPickerData() {
            $.ajax({
                url: '{{ url("/trspua/getkaryawan") }}',
                method: 'GET',
                data: { query: '' },
                success: function(response) {
                    if (response.success) {
                        // Handle karyawan data if needed
                    }
                }
            });
        }
    </script>
    </div>
@endsection