@extends('layouts.app')

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

    @php
        $isViewOnly = !empty($view_only);
        $spViewData = $sp_form_data ?? ($sp ?? []);
    @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">
                            {{ $isViewOnly ? 'Informasi Surat' : 'Form Tambah Unsafe Action' }}
                        </h6>
                        <p class="text-sm mb-0 text-secondary">
                            {{ $isViewOnly ? 'Data Unsafe Action' : 'Lengkapi data unsafe action' }}
                        </p>
                    </div>
                    @if($isViewOnly && !empty($spViewData['id']))
                    <div class="d-flex gap-2">
                        <a href="{{ $back_url ?? url('/trstdk') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </a>
                        <button type="button" class="btn btn-primary btn-sm" onclick="previewSuratPDF({{ $spViewData['id'] }})">
                            <i class="fas fa-file-pdf me-1"></i> Preview Surat PDF
                        </button>
                    </div>
                    @endif
                </div>

                @if($isViewOnly)
                <div class="alert alert-info mb-3" role="alert">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Mode View Only:</strong> Data di bawah ini hanya untuk ditampilkan dan tidak dapat diedit.
                </div>
                @endif

                <form id="spForm" onsubmit="event.preventDefault(); submitSpForm('draft');" enctype="multipart/form-data">
                    {{-- CONTAINER UTAMA --}}
                    <div id="main_form_fields">
                        <div class="row">
                            {{-- ===== KOLOM KIRI ===== --}}
                            <div class="col-md-6">
                                {{-- Nama Karyawan --}}
                                <div class="mb-3 form-field" data-show="all">
                                    <label for="karyawan_pick" class="form-label text-sm font-weight-bold">
                                        Nama Karyawan <span class="text-danger">*</span>
                                    </label>
                                    <input type="hidden" id="nik_pick">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly required>
                                        <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 dari logged-in user) --}}
                                <div class="mb-3 form-field" data-show="all" id="nama_atasan_field">
                                    <label for="nama_atasan_display" class="form-label text-sm font-weight-bold">Nama Atasan <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="nama_atasan_display" readonly placeholder="Otomatis akan terisi setelah memilih karyawan" style="background-color: #f8f9fa;">
                                    <input type="hidden" id="ua_nama_atasan" name="ua_nama_atasan">
                                </div>

                                {{-- Jenis Pelanggaran --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_idpelanggaran_field">
                                    <label for="pelanggaran_pick" class="form-label text-sm font-weight-bold">
                                        Jenis Pelanggaran <span class="text-danger">*</span>
                                    </label>
                                    <input type="hidden" id="ua_idpelanggaran">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="pelanggaran_pick" placeholder="Pilih jenis pelanggaran" readonly required>
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openPelanggaranModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Hari/Tanggal Pelanggaran --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_hari_tanggal_field">
                                    <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">
                                </div>

                                {{-- Lokasi --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_lokasi_field">
                                    <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" placeholder="Contoh: Area Produksi Line 1">
                                </div>
                                {{-- Deskripsi Pelanggaran --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_deskripsi_pelanggaran_field">
                                    <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="3" placeholder="Jelaskan detail pelanggaran yang terjadi"></textarea>
                                </div>

                                {{-- Catatan/Komentar --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_catatan_komentar_field">
                                    <label class="form-label text-sm font-weight-bold">Catatan/Komentar</label>
                                    <textarea class="form-control sp-field-control" id="ua_catatan_komentar" rows="3" placeholder="Catatan tambahan (opsional)"></textarea>
                                </div>
                            </div>

                            {{-- ===== KOLOM KANAN ===== --}}
                            <div class="col-md-6">
                                

                                {{-- Upload Foto Bukti --}}
                                <div class="mb-3 form-field" data-show="ua" id="ua_foto_bukti_field">
                                    <label class="form-label text-sm font-weight-bold">Upload Foto Bukti</label>
                                    <input type="file" class="form-control sp-field-control" id="ua_foto_bukti" accept="image/*" onchange="previewFotoBukti(this)">
                                    <small class="text-muted">Format: JPG, PNG, JPEG (Max: 2MB)</small>
                                    <div id="foto_bukti_preview" class="mt-2" style="display: none;">
                                        <img id="foto_bukti_preview_img" src="#" alt="Preview Foto Bukti" style="max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                </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 onchange="toggleSignatureCanvas('langsung')">
                                            <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" onchange="toggleSignatureCanvas('tidak')">
                                            <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>
                                        <div class="mt-2 d-flex gap-2">
                                            <button type="button" class="btn btn-sm btn-secondary" onclick="clearSignature()">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" id="spFormActionRow">
                            <div class="col-md-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <a href="{{ url('/trstdk') }}" 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>
                    </div>
                </form>
            </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>

    {{-- MODAL PELANGGARAN PICKER --}}
    <div class="modal fade" id="pelanggaranPickerModal" 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 Jenis 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="pelanggaranPickerSearch" placeholder="Cari..." oninput="filterPelanggaranPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterPelanggaranPicker()">
                                <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="pelanggaranPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th>Kode</th>
                                    <th>Nama Pelanggaran</th>
                                    <th>Deskripsi</th>
                                </tr>
                            </thead>
                            <tbody id="pelanggaranPickerBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .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; }
        #spForm .sp-field-control { width: 100%; }
        #spForm textarea.sp-field-control { resize: vertical; }
        .hover-row:hover { background-color: #f8f9fa; }
    </style>

    <script>
        const spFormRoot = document.getElementById('spForm');
        const isViewOnly = @json($isViewOnly);
        const spViewData = @json($spViewData);
        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForAdd = null;
        let atasanData = null;
        let pelanggaranPickerData = @json($violation_options);
        let pelanggaranPickerTable = null;

        $(document).ready(function() {
            if (isViewOnly) {
                populateViewOnlyForm(spViewData || {});
            }
        });

        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("/trstdk/get-atasan-by-department") }}',
                method: 'GET',
                data: { nik: nik },
                success: function(response) {
                    if (response.success && response.data) {
                        atasanData = 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 = '';
                }
            });
        }

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

        function loadKaryawanPickerData() {
            $.ajax({
                url: '{{ url("/trstdk/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;
            selectedKaryawanForAdd = karyawan;
            document.getElementById('nik_pick').value = karyawan.nik || '';
            document.getElementById('karyawan_pick').value = `${karyawan.nik || ''} - ${karyawan.nama || ''} - ${karyawan.departemen || ''}`;

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

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

        // ===== PELANGGARAN PICKER =====
        function openPelanggaranModal() {
            document.getElementById('pelanggaranPickerSearch').value = '';
            renderPelanggaranPickerRows(pelanggaranPickerData);
            initPelanggaranPickerTable();
            new bootstrap.Modal(document.getElementById('pelanggaranPickerModal')).show();
        }

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

        function initPelanggaranPickerTable() {
            if (pelanggaranPickerTable) { pelanggaranPickerTable.destroy(); pelanggaranPickerTable = null; }
            pelanggaranPickerTable = $('#pelanggaranPickerTable').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: [[2, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
            });
        }

        function filterPelanggaranPicker() {
            const keyword = document.getElementById('pelanggaranPickerSearch').value.trim();
            if (pelanggaranPickerTable) pelanggaranPickerTable.search(keyword).draw();
        }

        function selectPelanggaranFromModal(index) {
            const pelanggaran = pelanggaranPickerData[index];
            if (!pelanggaran) return;
            document.getElementById('ua_idpelanggaran').value = pelanggaran.idpelanggaran || '';
            const kodeStr = pelanggaran.kode ? '[' + pelanggaran.kode + '] ' : '';
            document.getElementById('pelanggaran_pick').value = kodeStr + (pelanggaran.nama || '');
            bootstrap.Modal.getInstance(document.getElementById('pelanggaranPickerModal')).hide();
        }

        function previewFotoBukti(input) {
            const previewDiv = document.getElementById('foto_bukti_preview');
            const previewImg = document.getElementById('foto_bukti_preview_img');
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    previewDiv.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                previewDiv.style.display = 'none';
                previewImg.src = '#';
            }
        }

        let signatureCanvas = null;
        let signatureCtx = null;
        let isDrawing = false;

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

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

            signatureCanvas.addEventListener('mousedown', startDrawing);
            signatureCanvas.addEventListener('mousemove', draw);
            signatureCanvas.addEventListener('mouseup', stopDrawing);
            signatureCanvas.addEventListener('mouseleave', stopDrawing);
            
            signatureCanvas.addEventListener('touchstart', handleTouchStart);
            signatureCanvas.addEventListener('touchmove', handleTouchMove);
            signatureCanvas.addEventListener('touchend', stopDrawing);
        }

        function startDrawing(e) {
            isDrawing = true;
            const rect = signatureCanvas.getBoundingClientRect();
            signatureCtx.beginPath();
            signatureCtx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
        }

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

        function stopDrawing() {
            if (isDrawing) {
                isDrawing = false;
                signatureCtx.closePath();
                // Update hidden input with signature data
                const signatureData = signatureCanvas.toDataURL('image/png');
                document.getElementById('tanda_tangan').value = signatureData;
            }
        }

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

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

        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');
            const tandaTanganInput = document.getElementById('tanda_tangan');
            
            if (option === 'tidak') {
                // Hide canvas and clear signature
                signatureContainer.style.display = 'none';
                tandaTanganInput.value = '';
                if (signatureCanvas && signatureCtx) {
                    signatureCtx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height);
                }
            } else {
                // Show canvas
                signatureContainer.style.display = 'block';
            }
        }

        // Initialize signature canvas when document is ready
        $(document).ready(function() {
            if (!isViewOnly) {
                initSignatureCanvas();
            }
        });

        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 sebagai draft?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Simpan sebagai Draft',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmit(statusPost);
                    }
                });
            } else {
                Swal.fire({
                    title: 'Konfirmasi Posting',
                    text: "Apakah Anda yakin ingin memposting surat ini?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Post',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        doSubmit(statusPost);
                    }
                });
            }
        }

        function doSubmit(statusPost) {
            const nik = document.getElementById('nik_pick').value.trim();
            if (!nik || !selectedKaryawanForAdd) { showWarn('Karyawan', 'Silakan pilih karyawan.'); return; }

            const namaAtasan = document.getElementById('ua_nama_atasan').value.trim();
            if (!namaAtasan) { showWarn('Nama Atasan', 'Gagal memuat data atasan. Silakan refresh halaman.'); return; }

            const uaHariTanggal = document.getElementById('ua_hari_tanggal').value || '';
            const uaLokasi = document.getElementById('ua_lokasi').value || '';
            const uaDeskripsi = document.getElementById('ua_deskripsi_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; }

            const fotoBuktiInput = document.getElementById('ua_foto_bukti');
            if (fotoBuktiInput && fotoBuktiInput.files && fotoBuktiInput.files.length > 0) {
                const file = fotoBuktiInput.files[0];
                const maxSize = 2 * 1024 * 1024;
                if (file.size > maxSize) {
                    showWarn('Ukuran File', 'Ukuran foto bukti maksimal 2MB.');
                    return;
                }
                const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
                if (!allowedTypes.includes(file.type)) {
                    showWarn('Format File', 'Format foto bukti harus JPG, PNG, atau JPEG.');
                    return;
                }
            }

            const idpelanggaran = document.getElementById('ua_idpelanggaran').value || '';
            if (!idpelanggaran) { showWarn('Jenis Pelanggaran', 'Jenis Pelanggaran wajib diisi.'); return; }

            // Validate signature selection
            const ttdOption = document.querySelector('input[name="ttd_option"]:checked');
            if (!ttdOption) { showWarn('Tanda Tangan', 'Silakan pilih opsi tanda tangan (langsung/tidak).'); return; }

            const tandaTangan = document.getElementById('tanda_tangan').value || '';
            
            // If "langsung" is selected, signature canvas must be filled
            if (ttdOption.value === 'langsung' && !tandaTangan) {
                showWarn('Tanda Tangan', 'Silakan tanda tangan di canvas sebelum menyimpan.');
                return;
            }
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('jenis_surat', 'Unsafe Action');
            formData.append('nik', nik);
            formData.append('nama', selectedKaryawanForAdd.nama || '');
            formData.append('departemen', selectedKaryawanForAdd.departemen || '');
            formData.append('ua_nama_atasan', namaAtasan);
            formData.append('idpelanggaran', idpelanggaran);
            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('tanda_tangan', tandaTangan);
            formData.append('status_post', statusPost);
            
            if (fotoBuktiInput && fotoBuktiInput.files && fotoBuktiInput.files.length > 0) {
                formData.append('foto_bukti', fotoBuktiInput.files[0]);
            }

            $.ajax({
                url: '{{ url("/trstdk/store") }}',
                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 disimpan', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trstdk") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menyimpan unsafe action');
                }
            });
        }

        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 previewSuratPDF(id) {
            if (!id) return;
            window.open('{{ url("/trstdk/cetaksp") }}?id=' + id, '_blank');
        }

        /** Populate view-only form */
        function populateViewOnlyForm(data) {
            document.getElementById('nik_pick').value = data.nik || '';
            document.getElementById('karyawan_pick').value = data.nik ? `${data.nik} - ${data.nama||''}` : (data.nama||'-');
            document.getElementById('nama_atasan_display').value = data.nama_atasan||'-';
            document.getElementById('ua_nama_atasan').value = data.nama_atasan||'';
            document.getElementById('ua_hari_tanggal').value = data.ua_hari_tanggal||'';
            document.getElementById('ua_lokasi').value = data.ua_lokasi||'';
            document.getElementById('ua_deskripsi_pelanggaran').value = data.ua_deskripsi_pelanggaran||'';
            document.getElementById('ua_catatan_komentar').value = data.ua_catatan_komentar||'';

            // Tampilkan foto bukti jika ada
            const fotoBuktiField = document.getElementById('ua_foto_bukti_field');
            if (fotoBuktiField && data.foto_bukti) {
                const existingPreview = fotoBuktiField.querySelector('.foto-bukti-preview');
                if (existingPreview) existingPreview.remove();
                
                const preview = document.createElement('div');
                preview.className = 'foto-bukti-preview mt-2';
                preview.innerHTML = `<img src="{{ asset('storage') }}/${data.foto_bukti}" alt="Foto Bukti" style="max-width: 300px; max-height: 300px; border: 1px solid #ddd; border-radius: 4px;">`;
                fotoBuktiField.appendChild(preview);
                
                // Sembunyikan input file untuk view mode
                const fileInput = document.getElementById('ua_foto_bukti');
                if (fileInput) fileInput.style.display = 'none';
            }

            // Disable semua field untuk view mode
            document.querySelectorAll('#spForm input, #spForm select, #spForm textarea, #spForm button').forEach(el => {
                if (el.type === 'hidden') return;
                if (el.matches('button')) { el.disabled = true; el.style.display = 'none'; return; }
                el.disabled = true; el.style.cursor = 'not-allowed'; el.style.backgroundColor = '#f8f9fa';
            });
        }
    </script>
@endsection