@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? ''])
    @php
        $isViewOnly = !empty($view_only);
        $spViewData = $sp_form_data ?? ($sp ?? []);
        $spViewEncId = !empty($spViewData['id']) ? \App\Helpers\Function_Helper::encryptUrlId($spViewData['id']) : '';
    @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 Surat' }}
                    </h6>
                    <p class="text-sm mb-0 text-secondary">
                        {{ $isViewOnly ? 'Data Surat Teguran / Peringatan' : 'Pilih jenis surat, lengkapi data, lalu simpan' }}
                    </p>
                </div>
                    @if($isViewOnly && !empty($spViewData['id']))
                    <div class="d-flex gap-2">
                        <a href="{{ $back_url ?? url('/trssp') }}" 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('{{ $spViewEncId }}')">
                            <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="submitSpForm(event)">
                    {{-- Jenis Surat - Pilihan Utama (div sendiri) --}}
                    <div class="row" id="letter_type_selection">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="jenis_surat" class="form-label text-sm font-weight-bold">Jenis Surat <span class="text-danger">*</span></label>
                                    <select id="jenis_surat" name="jenis_surat" class="form-select sp-field-control" required onchange="handleJenisSuratChange()">
                                        <option value="">Pilih Jenis Surat</option>
                                        <option value="Surat Teguran">Surat Teguran</option>
                                        <option value="Surat Peringatan">Surat Peringatan</option>
                                    </select>
                            </div>
                        </div>
                    </div>

                    {{-- CONTAINER UTAMA - Semua field dalam satu container --}}
                    <div id="main_form_fields" style="display:none;">
                        {{-- Kolom kiri & kanan dalam satu row --}}
                        <div class="row">
                            {{-- ===== KOLOM KIRI ===== --}}
                            <div class="col-md-6">
                                {{-- Nama Karyawan (ST, SP, UA) --}}
                                <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>

                                {{-- Head Of Department (ST, SP) --}}
                                <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">Head Of Department</label>
                                    <input type="text" class="form-control sp-field-control" id="nama_atasan_display" readonly placeholder="Pilih karyawan terlebih dahulu" style="background-color: #f8f9fa; cursor: not-allowed;">
                                </div>

                                {{-- Tanggal Surat (ST, SP) --}}
                                <div class="mb-3 form-field" data-show="st,sp" id="tanggal_surat_field">
                                    <label for="tanggal_surat" class="form-label text-sm font-weight-bold">
                                        Tanggal Surat <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" class="form-control sp-field-control" id="tanggal_surat" value="{{ date('Y-m-d') }}">
                                </div>

                                {{-- Jenis Pelanggaran (ST, SP) - Modal Picker --}}
                                <!-- <div class="mb-3 form-field" data-show="st,sp" id="violation_type_field_stsp">
                                    <label for="idpelanggaran_display" class="form-label text-sm font-weight-bold">Jenis Pelanggaran <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="idpelanggaran_display" readonly placeholder="Pilih jenis pelanggaran">
                                        <input type="hidden" id="idpelanggaran" name="idpelanggaran">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openPelanggaranModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div> -->
                                 {{-- Nomor Surat (ST, SP) --}}
                                <div class="mb-3 form-field" data-show="st,sp" id="nomor_surat_field">
                                    <label for="nomor_surat_display" class="form-label text-sm font-weight-bold">Nomor Surat</label>
                                    <input type="text" class="form-control sp-field-control" id="nomor_surat_display" readonly placeholder="Pilih tanggal surat terlebih dahulu" style="background-color: #f8f9fa;">
                                </div>
                            </div>

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

                                {{-- Level ST (ST only) --}}
                                <div class="mb-3 form-field" data-show="st" id="st_level_field">
                                    <label for="st_level" class="form-label text-sm font-weight-bold">Level Surat Teguran <span class="text-danger">*</span></label>
                                    <select id="st_level" class="form-select sp-field-control">
                                        <option value="">Pilih Level</option>
                                        <option value="ST 1">Surat Teguran 1</option>
                                        <option value="ST 2">Surat Teguran 2</option>
                                        <option value="ST 3">Surat Teguran 3</option>
                                    </select>
                                </div>

                                {{-- Level SP (SP only) --}}
                                <div class="mb-3 form-field" data-show="sp" id="sp_level_field">
                                    <label for="sp_level_new" class="form-label text-sm font-weight-bold">Level Surat Peringatan <span class="text-danger">*</span></label>
                                    <select id="sp_level_new" class="form-select sp-field-control">
                                        <option value="">Pilih Level</option>
                                        <option value="SP 1">Surat Peringatan 1</option>
                                        <option value="SP 2">Surat Peringatan 2</option>
                                        <option value="SP 3">Surat Peringatan 3</option>
                                    </select>
                                </div>

                                {{-- PKB (SP only) --}}
                                <div class="mb-3 form-field" data-show="sp" id="pkb_field">
                                    <label for="pkb_display" class="form-label text-sm font-weight-bold">PKB <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" id="pkb_display" class="form-control" readonly placeholder="Pilih PKB yang sesuai dengan pelanggaran">
                                        <input type="hidden" id="idpkb" name="idpkb">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openPkbPicker()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>

                                {{-- Keterangan HRD (ST, SP) --}}
                                <div class="mb-3 form-field" data-show="st,sp" id="keterangan_hrd_field">
                                    <label for="keterangan_hrd" class="form-label text-sm font-weight-bold">
                                        Keterangan HRD <span class="text-danger">*</span>
                                    </label>
                                    <textarea class="form-control sp-field-control" id="keterangan_hrd" rows="3" placeholder="Isi keterangan HRD"></textarea>
                                </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('/trssp') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>Kembali
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Simpan Surat
                                    </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 PKB PICKER --}}
    <div class="modal fade" id="pkbPickerModal" 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 PKB (Peraturan Kerja Bersama)</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="pkbPickerSearch" placeholder="Cari pasal, ayat, atau isi aturan..." oninput="filterPkbPicker()">
                            <button class="btn btn-primary picker-search-btn" type="button" onclick="filterPkbPicker()">
                                <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="pkbPickerTable">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th style="width: 80px;">Action</th>
                                    <th style="width: 100px;">Pasal</th>
                                    <th style="width: 120px;">Ayat/Huruf</th>
                                    <th>Isi Aturan</th>
                                    <th style="width: 150px;">Kategori</th>
                                </tr>
                            </thead>
                            <tbody id="pkbPickerBody"></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 jenis pelanggaran..." 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 style="width: 100px;">Kode</th>
                                    <th>Nama Pelanggaran</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>

    @php
        $violationOptionJs = ($violation_options ?? collect())->map(function ($item) {
            return ['value' => $item->kode, 'label' => $item->nama];
        })->values()->all();
    @endphp
    <script>
        const spFormRoot = document.getElementById('spForm');
        const isViewOnly = @json($isViewOnly);
        const spViewData = @json($spViewData);
        let karyawanPickerTable = null;
        let karyawanPickerData = [];
        let selectedKaryawanForAdd = null;
        let pkbPickerData = [];
        let pkbPickerTable = null;
        const violationOptions = @json($violationOptionJs);

        // Pelanggaran picker state
        let pelanggaranPickerData = [];
        let pelanggaranPickerTable = null;
        let activePelanggaranTarget = 'stsp';


        $(document).ready(function() {
            if (isViewOnly) {
                populateViewOnlyForm(spViewData || {});
                return;
            }
            
            // Initially hide semua form field dan action row
            $('#main_form_fields').hide();
            $('.form-field').hide();
            $('#spFormActionRow').hide();
            
        });

        /**
         * Function untuk menampilkan/menyembunyikan field berdasarkan jenis surat
         * @param {string} jenisSurat - 'Surat Teguran', 'Surat Peringatan'
         */
        function showFieldsForLetterType(jenisSurat) {
            const typesMap = {
                'Surat Teguran': ['st'],
                'Surat Peringatan': ['sp']
            };
            
            const activeTypes = typesMap[jenisSurat] || [];
            
            // Sembunyikan semua field dulu
            $('.form-field').hide();
            
            // Tampilkan field yang sesuai
            $('.form-field').each(function() {
                const showAttr = $(this).data('show') || '';
                const showTypes = showAttr.split(',').map(t => t.trim());
                
                // Cek apakah activeTypes ada di showTypes
                const shouldShow = activeTypes.some(t => showTypes.includes(t)) || showTypes.includes('all');
                
                if (shouldShow) {
                    $(this).show();
                }
            });
        }

        /**
         * Function untuk membersihkan nilai semua field
         */
        function clearAllFields() {
            // Reset semua nilai field
            $('#sp_level_new').val('');
            $('#st_level').val('');
            $('#idpkb').val('');
            $('#pkb_display').val('');
            $('#idpelanggaran').val('');
            $('#idpelanggaran_display').val('');
            $('#keterangan_hrd').val('');
            
            // Reset tanggal surat required
            const tgl = document.getElementById('tanggal_surat');
            if (tgl) tgl.required = false;
        }

        function handleJenisSuratChange() {
            const jenisSurat = document.getElementById('jenis_surat')?.value;
            
            if (!jenisSurat) {
                $('#main_form_fields, #spFormActionRow').hide();
                return;
            }
            
            // Tampilkan container utama
            $('#main_form_fields').show();
            $('#spFormActionRow').show();
            
            // Bersihkan nilai field sebelumnya
            clearAllFields();
            
            // Tampilkan field sesuai jenis surat
            showFieldsForLetterType(jenisSurat);
            
            // Set required untuk tanggal surat
            const tgl = document.getElementById('tanggal_surat');
            if (tgl) {
                tgl.required = (jenisSurat === 'Surat Teguran' || jenisSurat === 'Surat Peringatan');
            }
            
            // Generate nomor surat untuk ST/SP
            if (jenisSurat === 'Surat Teguran' || jenisSurat === 'Surat Peringatan') {
                previewNomorSurat();
            }

            const keteranganHrd = document.getElementById('keterangan_hrd');

            if (keteranganHrd) {
                if (jenisSurat === 'Surat Peringatan') {
                    keteranganHrd.rows = 5;
                } else if (jenisSurat === 'Surat Teguran') {
                    keteranganHrd.rows = 9;
                }
            }
        }

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

        function loadKaryawanPickerData() {
            $.ajax({
                url: '{{ url("/trssp/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 || ''}`;

            const jenisSuratVal = document.getElementById('jenis_surat')?.value || '';

            // Head of Department
            fetchAtasanData(karyawan.nik);


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

        function fetchAtasanData(nik) {
            if (!nik) {
                const el = document.getElementById('nama_atasan_display');
                if (el) { el.value = ''; el.removeAttribute('readonly'); }
                return;
            }
            const el = document.getElementById('nama_atasan_display');
            if (el) { el.value = 'Mengambil data...'; el.setAttribute('readonly','readonly'); }
            $.ajax({
                url: '{{ url("/trssp/getatasan") }}',
                method: 'GET',
                data: { nik: nik },
                success: function(response) {
                    const nama = response.success && response.data ? response.data.atasan_nama : null;
                    const el = document.getElementById('nama_atasan_display');
                    if (!el) return;
                    if (nama) {
                        el.value = nama; el.setAttribute('readonly','readonly');
                    } else {
                        el.value = ''; el.removeAttribute('readonly');
                        el.placeholder = 'Head of Department tidak ditemukan, isi manual';
                    }
                },
                error: function() {
                    const el = document.getElementById('nama_atasan_display');
                    if (el) { el.value = ''; el.removeAttribute('readonly'); el.placeholder = 'Gagal mengambil data'; }
                }
            });
        }


        function previewNomorSurat() {
            const tgl = document.getElementById('tanggal_surat')?.value;
            const display = document.getElementById('nomor_surat_display');
            if (!display) return;
            if (!tgl) { display.value = ''; display.placeholder = 'Pilih tanggal surat terlebih dahulu'; return; }
            
            // Tentukan prefix berdasarkan jenis surat yang dipilih
            const jenisSuratSelect = document.getElementById('jenis_surat');
            let prefix = 'SP'; // default
            if (jenisSuratSelect) {
                const jenisSurat = jenisSuratSelect.value;
                if (jenisSurat === 'Surat Teguran') {
                    prefix = 'ST';
                } else if (jenisSurat === 'Surat Peringatan') {
                    prefix = 'SP';
                }
            }
            
            display.value = 'Generating...';
            $.ajax({
                url: '{{ url("/trssp/preview-nomor-surat") }}',
                method: 'GET',
                data: { tanggal_surat: tgl, jenis_surat: prefix },
                success: function(r) { display.value = r.success && r.nomor_surat ? r.nomor_surat : ''; if (!display.value) display.placeholder = 'Gagal generate'; },
                error: function() { display.value = ''; display.placeholder = 'Gagal generate'; }
            });
        }

        function openPkbPicker() {
            const modal = new bootstrap.Modal(document.getElementById('pkbPickerModal'));
            modal.show();
            if (pkbPickerData.length === 0) {
                $('#pkbPickerBody').html('<tr><td colspan="5" class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Memuat data PKB...</p></td></tr>');
                fetch('/trssp/get-pkb-options').then(r=>r.json()).then(d => {
                    if (d.success && d.options) { pkbPickerData = d.options; renderPkbPickerRows(pkbPickerData); initPkbPickerTable(); }
                    else $('#pkbPickerBody').html('<tr><td colspan="5" class="text-center text-danger">Gagal memuat data</td></tr>');
                }).catch(() => $('#pkbPickerBody').html('<tr><td colspan="5" class="text-center text-danger">Gagal memuat data</td></tr>'));
            } else if (!pkbPickerTable) initPkbPickerTable();
        }

        function renderPkbPickerRows(data) {
            pkbPickerData = data;
            const tbody = document.getElementById('pkbPickerBody');
            if (!data || !data.length) { tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">Tidak ada data</td></tr>'; return; }
            let html = '';
            data.forEach(item => {
                const parts = (item.label||'').split(' - ');
                const m = parts[0].match(/Pasal ([^,]+), Ayat ([^,]+)/);
                html += `<tr class="hover-row" style="cursor:pointer;" onclick="selectPkb(${item.id}, '${escapeHtml(item.label).replace(/'/g,"\\'")}')">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation();selectPkb(${item.id},'${escapeHtml(item.label).replace(/'/g,"\\'")}')"><i class="fas fa-check"></i> Pilih</button></td>
                    <td class="text-sm">${escapeHtml(m?m[1]:'')}</td>
                    <td class="text-sm">${escapeHtml(m?m[2]:'')}</td>
                    <td class="text-sm">${escapeHtml(parts[1]||'')}</td>
                    <td class="text-sm">${escapeHtml(item.kategori||'-')}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        }

        function initPkbPickerTable() {
            if (pkbPickerTable) { pkbPickerTable.destroy(); pkbPickerTable = null; }
            pkbPickerTable = $('#pkbPickerTable').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 filterPkbPicker() {
            if (pkbPickerTable) pkbPickerTable.search(document.getElementById('pkbPickerSearch').value.trim()).draw();
        }

        function selectPkb(id, label) {
            document.getElementById('idpkb').value = id;
            document.getElementById('pkb_display').value = label;
            bootstrap.Modal.getInstance(document.getElementById('pkbPickerModal'))?.hide();
        }

        // === PELANGGARAN PICKER FUNCTIONS ===
        function openPelanggaranModal(target) {
            activePelanggaranTarget = target || 'stsp';
            const searchEl = document.getElementById('pelanggaranPickerSearch');
            if (searchEl) searchEl.value = '';
            
            const modal = new bootstrap.Modal(document.getElementById('pelanggaranPickerModal'));
            modal.show();
            
            if (pelanggaranPickerData.length === 0) {
                $('#pelanggaranPickerBody').html('<tr><td colspan="3" class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Memuat data pelanggaran...</p></td></tr>');
                fetch('/trssp/get-pelanggaran-options').then(r=>r.json()).then(d => {
                    if (d.success && d.data) { 
                        pelanggaranPickerData = d.data; 
                        renderPelanggaranPickerRows(pelanggaranPickerData); 
                        initPelanggaranPickerTable(); 
                    }
                    else $('#pelanggaranPickerBody').html('<tr><td colspan="3" class="text-center text-danger">Gagal memuat data</td></tr>');
                }).catch(() => $('#pelanggaranPickerBody').html('<tr><td colspan="3" class="text-center text-danger">Gagal memuat data</td></tr>'));
            } else if (!pelanggaranPickerTable) {
                initPelanggaranPickerTable();
            }
        }

        function renderPelanggaranPickerRows(data) {
            pelanggaranPickerData = data;
            const tbody = document.getElementById('pelanggaranPickerBody');
            if (!data || !data.length) { tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Tidak ada data</td></tr>'; return; }
            let html = '';
            data.forEach(item => {
                html += `<tr class="hover-row" style="cursor:pointer;" onclick="selectPelanggaran(${item.id}, '${escapeHtml(item.nama).replace(/'/g,"\\'")}')">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation();selectPelanggaran(${item.id},'${escapeHtml(item.nama).replace(/'/g,"\\'")}')"><i class="fas fa-check"></i> Pilih</button></td>
                    <td class="text-sm">${escapeHtml(item.kode||'-')}</td>
                    <td class="text-sm">${escapeHtml(item.nama||'-')}</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: [[1, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
            });
        }

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

        function selectPelanggaran(id, nama) {
            document.getElementById('idpelanggaran').value = id;
            document.getElementById('idpelanggaran_display').value = nama;
            bootstrap.Modal.getInstance(document.getElementById('pelanggaranPickerModal'))?.hide();
        }

        // === RANK PICKER FUNCTIONS ===
        function openRankModal() {
            const searchEl = document.getElementById('rankPickerSearch');
            if (searchEl) searchEl.value = '';
            
            const modal = new bootstrap.Modal(document.getElementById('rankPickerModal'));
            modal.show();
            
            if (rankPickerData.length === 0) {
                $('#rankPickerBody').html('<tr><td colspan="2" class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Memuat data rank...</p></td></tr>');
                fetch('/trssp/get-rank-options').then(r=>r.json()).then(d => {
                    if (d.success && d.data) { 
                        rankPickerData = d.data; 
                        renderRankPickerRows(rankPickerData); 
                        initRankPickerTable(); 
                    }
                    else $('#rankPickerBody').html('<tr><td colspan="2" class="text-center text-danger">Gagal memuat data</td></tr>');
                }).catch(() => $('#rankPickerBody').html('<tr><td colspan="2" class="text-center text-danger">Gagal memuat data</td></tr>'));
            } else if (!rankPickerTable) {
                initRankPickerTable();
            }
        }

        function renderRankPickerRows(data) {
            rankPickerData = data;
            const tbody = document.getElementById('rankPickerBody');
            if (!data || !data.length) { tbody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">Tidak ada data</td></tr>'; return; }
            let html = '';
            data.forEach(item => {
                html += `<tr class="hover-row" style="cursor:pointer;" onclick="selectRank(${item.id}, '${escapeHtml(item.nama).replace(/'/g,"\\'")}')">
                    <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation();selectRank(${item.id},'${escapeHtml(item.nama).replace(/'/g,"\\'")}')"><i class="fas fa-check"></i> Pilih</button></td>
                    <td class="text-sm">${escapeHtml(item.nama||'-')}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        }

        function initRankPickerTable() {
            if (rankPickerTable) { rankPickerTable.destroy(); rankPickerTable = null; }
            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'
            });
        }

        function filterRankPicker() {
            if (rankPickerTable) rankPickerTable.search(document.getElementById('rankPickerSearch').value.trim()).draw();
        }


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

        /** Submit form */
        function submitSpForm(event) {
            event.preventDefault();
            const jenisSuratEl = document.getElementById('jenis_surat');
            const jenisSurat = jenisSuratEl ? jenisSuratEl.value : '';
            if (!jenisSurat) { showWarn('Pilih Jenis Surat', 'Silakan pilih jenis surat terlebih dahulu.'); return; }

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

            const nomorSuratEl = document.getElementById('nomor_surat_display');
            const tanggalSuratEl = document.getElementById('tanggal_surat');
            let formData = {
                jenis_surat: jenisSurat,
                idpelanggaran: '',
                st_level: '',
                sp_level_new: '',
                idpkb: '',
                keterangan_hrd: '',
                tanggal_surat: tanggalSuratEl ? tanggalSuratEl.value : '',
                nomor_surat: nomorSuratEl ? nomorSuratEl.value : '',
            };

            if (!formData.tanggal_surat) { showWarn('Tanggal Surat', 'Tanggal surat wajib diisi.'); return; }
            if (jenisSurat === 'Surat Teguran') {
                const stEl = document.getElementById('st_level');
                const st = stEl ? stEl.value : '';
                if (!st) { showWarn('Level ST', 'Pilih level Surat Teguran.'); return; }
                formData.st_level = st;
            } else {
                const spEl = document.getElementById('sp_level_new');
                const sp = spEl ? spEl.value : '';
                if (!sp) { showWarn('Level SP', 'Pilih level Surat Peringatan.'); return; }
                formData.sp_level_new = sp;
                const idpkbEl = document.getElementById('idpkb');
                if (!idpkbEl || !idpkbEl.value) { showWarn('PKB', 'Pilih PKB untuk Surat Peringatan.'); return; }
                formData.idpkb = idpkbEl.value;
            }
            
            // // Get idpelanggaran from hidden field
            // const idpelanggaranEl = document.getElementById('idpelanggaran');
            // const idpelanggaran = idpelanggaranEl ? idpelanggaranEl.value : '';
            // if (!idpelanggaran) { showWarn('Jenis Pelanggaran', 'Pilih jenis pelanggaran.'); return; }
            // formData.idpelanggaran = idpelanggaran;
            
            const keteranganHrdEl = document.getElementById('keterangan_hrd');
            const keterangan = keteranganHrdEl ? keteranganHrdEl.value.trim() : '';
            if (!keterangan) { showWarn('Keterangan HRD', 'Keterangan HRD wajib diisi.'); return; }
            formData.keterangan_hrd = keterangan;

            // Kirim AJAX
            const postData = {
                _token: '{{ csrf_token() }}',
                jenis_surat: jenisSurat,
                nik: nik,
                tanggal_surat: formData.tanggal_surat,
                nomor_surat: formData.nomor_surat,
                idpelanggaran: formData.idpelanggaran || '',
                surat_teguran_level: formData.st_level,
                surat_peringatan_level: formData.sp_level_new,
                idpkb: formData.idpkb,
                keterangan_hrd: formData.keterangan_hrd,
                status: 'pending'
            };

            $.ajax({
                url: '{{ url("/trssp/store") }}',
                method: 'POST',
                data: postData,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({ icon:'success', title:'Berhasil', text: response.message||'Surat berhasil disimpan', confirmButtonColor:'#028284' })
                            .then(() => window.location.href='{{ url("/trssp") }}');
                    }
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.message || 'Gagal menyimpan surat');
                }
            });
        }

        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("/trssp/cetaksp") }}?id=' + id, '_blank');
        }

        /** Populate view-only form */
        function populateViewOnlyForm(data) {
            let jenisSurat = '';
            if (data.surat_teguran_level && data.surat_teguran_level !== 'NONE' && data.surat_teguran_level !== '') {
                jenisSurat = 'Surat Teguran';
            } else if (data.surat_peringatan_level && data.surat_peringatan_level !== 'NONE' && data.surat_peringatan_level !== '') {
                jenisSurat = 'Surat Peringatan';
            }
            
            // Set jenis surat
            if (jenisSurat) {
                const jenisSuratEl = document.getElementById('jenis_surat');
                if (jenisSuratEl) jenisSuratEl.value = jenisSurat;
            }
            
            // Show all form fields and action buttons
            $('#main_form_fields').show();
            $('#spFormActionRow').show();
            
            // Show all fields for view mode
            $('.form-field').show();
            
            // Populate values
            document.getElementById('nik_pick').value = data.nik || '';
            document.getElementById('karyawan_pick').value = data.nik ? `${data.nik} - ${data.nama||''}` : (data.nama||'-');
            if (document.getElementById('departemen_display')) document.getElementById('departemen_display').value = data.departemen||'-';
            if (document.getElementById('nama_atasan_display')) document.getElementById('nama_atasan_display').value = data.nama_atasan||'-';
            document.getElementById('tanggal_surat').value = data.tanggal_surat||'';
            document.getElementById('nomor_surat_display').value = data.nomor_surat||'-';
            if (document.getElementById('st_level')) document.getElementById('st_level').value = data.surat_teguran_level||'';
            if (document.getElementById('sp_level_new')) document.getElementById('sp_level_new').value = data.surat_peringatan_level||'';
            if (document.getElementById('pkb_display')) document.getElementById('pkb_display').value = data.pkb_label||'-';
            if (document.getElementById('idpkb')) document.getElementById('idpkb').value = data.idpkb||'';
            if (document.getElementById('keterangan_hrd')) document.getElementById('keterangan_hrd').value = data.keterangan_hrd||'';
            if (document.getElementById('idpelanggaran')) document.getElementById('idpelanggaran').value = data.idpelanggaran||'';
            if (document.getElementById('idpelanggaran_display')) document.getElementById('idpelanggaran_display').value = data.violation_label||data.jenis_pelanggaran||'';

            const supervisorEl = document.getElementById('nama_supervisor_display');
            if (supervisorEl) supervisorEl.value = data.supervisor_name || data.nama_supervisor || '';

            // 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';
            });
            document.getElementById('jenis_surat').disabled = true;
        }

        document.addEventListener('DOMContentLoaded', function() {
            if (!isViewOnly) {
                // Initial setup done already in ready()
            }
            // Make tanggal_surat change trigger preview
            const tglSurat = document.getElementById('tanggal_surat');
            if (tglSurat) {
                tglSurat.addEventListener('change', previewNomorSurat);
            }
        });
    </script>
@endsection