@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('/trssua') }}" 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>

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

                            {{-- Referensi Standar --}}
                            <div class="mb-3 form-field" data-show="ua">
                                <label class="form-label text-sm font-weight-bold">Referensi Standar <span class="text-danger">*</span></label>
                                <input type="hidden" id="ua_referensi">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="ua_referensi_display" placeholder="Pilih referensi standar" readonly>
                                    <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 form-field" data-show="ua">
                                <label class="form-label text-sm font-weight-bold">Kategori Pelanggaran <span class="text-danger">*</span></label>
                                <input type="hidden" id="ua_kategori_pelanggaran">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="ua_kategori_display" placeholder="Pilih kategori pelanggaran" readonly required>
                                    <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 form-field" data-show="ua">
                                <label class="form-label text-sm font-weight-bold">Rank <span class="text-danger">*</span></label>
                                <input type="hidden" id="ua_rank">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="ua_rank_display" placeholder="Pilih rank" readonly>
                                    <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 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="5" 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="5" placeholder="Catatan tambahan (opsional)"></textarea>
                                </div>

                                {{-- 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/*">
                                    <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 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('/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>
                    </div>
                </form>
            </div>
        </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>
        .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; }
        #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 spFormRoot = document.getElementById('spForm');
        const isViewOnly = @json($isViewOnly);
        const spViewData = @json($spViewData);
        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForAdd = null;
        let atasanData = null;
        let referensiPickerTable = null;
        let kategoriPickerTable = null;
        let rankPickerTable = 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("/trssua/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 = '';
                }
            });
        }

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

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

        window.submitSpForm = function submitSpForm(statusPost) {
            if (statusPost && typeof statusPost !== 'string') {
                statusPost = 'draft';
            }
            if (!statusPost) {
                statusPost = 'draft';
            }
            if (statusPost === 'posted') {
                // Check if signature exists on canvas
                const tandaTangan = document.getElementById('tanda_tangan').value || '';
                const hasTandaTangan = tandaTangan && tandaTangan !== '' && tandaTangan !== '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();
            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 || '';

            const kategori = document.getElementById('ua_kategori_pelanggaran').value || '';
            const referensi = document.getElementById('ua_referensi').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 (!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; }

            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 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) {
                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('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);
            
            // Add master data fields
            if (referensi) formData.append('idreferensi', referensi);
            if (kategori) formData.append('idpelanggaran', kategori);
            if (rank) formData.append('idrank', rank);
            
            if (fotoBuktiInput && fotoBuktiInput.files && fotoBuktiInput.files.length > 0) {
                formData.append('foto_bukti', fotoBuktiInput.files[0]);
            }

            $.ajax({
                url: '{{ url("/trssua/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("/trssua") }}');
                    }
                },
                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("/trssua/cetakUnsafeAction") }}?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';
            });
        }

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

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

        // Preview foto bukti when adding
        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);
            }
        });

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

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

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

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