@extends('layouts.app')

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

    @php
        $historyId = (int) ($history['id'] ?? 0);
        $historyEncId = $historyId > 0 ? \App\Helpers\Function_Helper::encryptUrlId($historyId) : '';
        $stValue = old('surat_teguran_level', $history['surat_teguran_level'] ?? '');
        $spValue = old('surat_peringatan_level', $history['surat_peringatan_level'] ?? '');
        $keteranganValue = old('keterangan_hrd', $history['keterangan_hrd'] ?? '');
        
        $jenisSurat = 'Surat Peringatan';
        if (!empty($stValue) && $stValue !== 'NONE' && $stValue !== '') {
            $jenisSurat = 'Surat Teguran';
        } elseif (!empty($spValue) && $spValue !== 'NONE' && $spValue !== '') {
            $jenisSurat = 'Surat Peringatan';
        }
        $letterType = $jenisSurat === 'Surat Teguran' ? 'st' : 'sp';
    @endphp

    <form id="spForm" onsubmit="submitHistoryEditForm(event)">
        <input type="hidden" id="history_key" name="history_key" value="{{ $historyEncId }}">
        <div class="container-fluid py-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="mb-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <h6 class="mb-0 text-dark font-weight-bold">Edit Riwayat Surat</h6>
                            <p class="text-sm mb-0 text-secondary">Ubah data surat, lalu simpan perubahan</p>
                        </div>
                    </div>

                    

                    {{-- CONTAINER UTAMA --}}
                    <div id="main_form_fields">
                        <div class="row">
                                {{-- Jenis Surat --}}
                                <div class="col-md-6">
                                    <div class="mb-3">
                                    <label for="jenis_surat" class="form-label text-sm font-weight-bold">Jenis Surat</label>
                                    <input type="text" class="form-control sp-field-control" value="{{ $jenisSurat }}" readonly>
                                    <input type="hidden" id="jenis_surat" name="jenis_surat" value="{{ $jenisSurat }}">
                                </div>
                                {{-- Nama Karyawan --}}
                                <div class="mb-3 form-field" data-show="all">
                                    <label class="form-label text-sm font-weight-bold">Karyawan</label>
                                    <input type="text" class="form-control sp-field-control" value="{{ $history['nik'] ?? '-' }} - {{ $history['nama'] ?? '-' }} - {{ $history['departemen'] ?? '-' }}" readonly>
                                    <input type="hidden" id="nik_pick" name="nik_pick" value="{{ $history['nik'] ?? '' }}">
                                </div>

                                {{-- Head Of Department --}}
                                <div class="mb-3 form-field" data-show="all">
                                    <label 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" value="{{ $history['atasan_nama'] ?? '-' }}" readonly>
                                </div>

                                {{-- Tanggal Surat --}}
                                <div class="mb-3 form-field" data-show="st,sp">
                                    <label class="form-label text-sm font-weight-bold">Tanggal Surat</label>
                                    <input type="date" id="tanggal_surat" class="form-control sp-field-control" value="{{ $history['tanggal_surat'] ?? '' }}">
                                </div>

                                
                            </div>

                            {{-- ===== KOLOM KANAN ===== --}}
                            <div class="col-md-6">
                                {{-- Nomor Surat --}}
                                <div class="mb-3 form-field" data-show="st,sp">
                                    <label class="form-label text-sm font-weight-bold">Nomor Surat</label>
                                    <input type="text" class="form-control sp-field-control" id="nomor_surat_display" value="{{ $history['nomor_surat'] ?? '-' }}" readonly>
                                </div>

                                {{-- Level ST --}}
                                <div class="mb-3 form-field" data-show="st" id="st_level_field">
                                    <label for="surat_teguran_level" class="form-label text-sm font-weight-bold">Level Surat Teguran</label>
                                    <select id="surat_teguran_level" class="form-select sp-field-control">
                                        <option value="">Pilih Level</option>
                                        <option value="ST 1" {{ (string) $stValue === 'ST 1' ? 'selected' : '' }}>Surat Teguran 1</option>
                                        <option value="ST 2" {{ (string) $stValue === 'ST 2' ? 'selected' : '' }}>Surat Teguran 2</option>
                                        <option value="ST 3" {{ (string) $stValue === 'ST 3' ? 'selected' : '' }}>Surat Teguran 3</option>
                                    </select>
                                </div>

                                {{-- Level SP --}}
                                <div class="mb-3 form-field" data-show="sp" id="sp_level_field">
                                    <label for="surat_peringatan_level" class="form-label text-sm font-weight-bold">Level Surat Peringatan</label>
                                    <select id="surat_peringatan_level" class="form-select sp-field-control" onchange="togglePKBField()">
                                        <option value="">Pilih Level</option>
                                        <option value="SP 1" {{ (string) $spValue === 'SP 1' ? 'selected' : '' }}>Surat Peringatan 1</option>
                                        <option value="SP 2" {{ (string) $spValue === 'SP 2' ? 'selected' : '' }}>Surat Peringatan 2</option>
                                        <option value="SP 3" {{ (string) $spValue === 'SP 3' ? 'selected' : '' }}>Surat Peringatan 3</option>
                                    </select>
                                </div>

                                {{-- PKB --}}
                                <div class="mb-3 form-field" data-show="sp" id="pkb_field" style="display: {{ $letterType === 'sp' ? 'block' : 'none' }};">
                                    <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"
                                            value="{{ $history['pkb_label'] ?? '' }}"
                                        >

                                        <input
                                            type="hidden"
                                            id="idpkb"
                                            name="idpkb"
                                            value="{{ $history['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 --}}
                                <div class="mb-3 form-field" data-show="st,sp">
                                    <label for="keterangan_hrd" class="form-label text-sm font-weight-bold">Keterangan HRD</label>
                                    <textarea id="keterangan_hrd" class="form-control sp-field-control" rows="3" placeholder="Isi keterangan HRD">{{ $keteranganValue }}</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 Perubahan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

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

    <style>
        .input-group > .form-control { height: calc(1.5em + 1rem + 2px); }
        .input-group > .input-group-text { height: calc(1.5em + 1rem + 2px); }
        .picker-search-wrap { max-width: 360px; width: 100%; flex-wrap: nowrap; align-items: stretch; }
        #spForm .sp-field-control { width: 100%; }
        #spForm textarea.sp-field-control { resize: vertical; }
        .hover-row:hover { background-color: #f8f9fa; }
    </style>

    <script>
        // Initialize editData from PHP
        const editData = {!! json_encode([
            'jenis_surat' => $jenisSurat ?? '',
            'nik' => $history['nik'] ?? '',
            'nama' => $history['nama'] ?? '',
            'departemen' => $history['departemen'] ?? '',
            'atasan_nama' => $history['atasan_nama'] ?? '',
            'tanggal_surat' => $history['tanggal_surat'] ?? '',
            'nomor_surat' => $history['nomor_surat'] ?? '',
            'surat_teguran_level' => $history['surat_teguran_level'] ?? '',
            'surat_peringatan_level' => $history['surat_peringatan_level'] ?? '',
            'idpkb' => $history['idpkb'] ?? '',
            'pkb_label' => $history['pkb_label'] ?? '',
            'violation_label' => $history['violation_label'] ?? '',
            'keterangan_hrd' => $history['keterangan_hrd'] ?? '',
        ]) !!};

        let pkbPickerData = [];
        let pkbPickerTable = null;
        let selectedKaryawan = null;

        $(document).ready(function() {
            if (editData.jenis_surat) {
                showFieldsForLetterType(editData.jenis_surat);
            }
            populateEditForm(editData);
            restrictTanggalSurat();
        });

        function populateEditForm(data) {
            if (!data || Object.keys(data).length === 0) return;
            const jenisSuratEl = document.getElementById('jenis_surat');
            if (jenisSuratEl && data.jenis_surat) {
                jenisSuratEl.value = data.jenis_surat;
            }
            if (data.jenis_surat) {
                showFieldsForLetterType(data.jenis_surat);
            }
            const nikEl = document.getElementById('nik_pick');
            if (nikEl && data.nik) {
                nikEl.value = data.nik;
                selectedKaryawan = { nik: data.nik, nama: data.nama, departemen: data.departemen };
                // Fetch HOD data when karyawan is loaded
                fetchAtasanData(data.nik);
            }
            const tglEl = document.getElementById('tanggal_surat');
            if (tglEl && data.tanggal_surat) {
                tglEl.value = data.tanggal_surat;
            }
            const nomorEl = document.getElementById('nomor_surat_display');
            if (nomorEl && data.nomor_surat) {
                nomorEl.value = data.nomor_surat;
            }
            const stEl = document.getElementById('surat_teguran_level');
            if (stEl && data.surat_teguran_level) {
                stEl.value = data.surat_teguran_level;
            }
            const spEl = document.getElementById('surat_peringatan_level');
            if (spEl && data.surat_peringatan_level) {
                spEl.value = data.surat_peringatan_level;
            }
            const idpkbEl = document.getElementById('idpkb');
            if (idpkbEl && data.idpkb) {
                idpkbEl.value = data.idpkb;
            }
            const pkbDisplayEl = document.getElementById('pkb_display');
            if (pkbDisplayEl && data.pkb_label) {
                pkbDisplayEl.value = data.pkb_label;
            }
            const keteranganEl = document.getElementById('keterangan_hrd');
            if (keteranganEl && data.keterangan_hrd) {
                keteranganEl.value = data.keterangan_hrd;
            }
        }

        function showFieldsForLetterType(jenisSurat) {
            const typesMap = {
                'Surat Teguran': ['st'],
                'Surat Peringatan': ['sp'],
            };
            const activeTypes = typesMap[jenisSurat] || [];
            $('.form-field').hide();
            $('.form-field').each(function() {
                const showAttr = $(this).data('show') || '';
                const showTypes = showAttr.split(',').map(t => t.trim());
                const shouldShow = activeTypes.some(t => showTypes.includes(t)) || showTypes.includes('all');
                if (shouldShow) {
                    $(this).show();
                }
            });
            if (jenisSurat === 'Surat Peringatan') {
                $('#pkb_field').show();
            }
        }

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

        function togglePKBField() {
            const spLevel = document.getElementById('surat_peringatan_level').value;
            const pkbField = document.getElementById('pkb_field');
            if (pkbField) {
                pkbField.style.display = (spLevel && spLevel !== '') ? 'block' : 'none';
                if (!spLevel) { 
                    document.getElementById('idpkb').value = ''; 
                    document.getElementById('pkb_display').value = ''; 
                }
            }
        }

        function fetchAtasanData(nik) {
            if (!nik) {
                document.getElementById('nama_atasan_display').value = '';
                return;
            }
            
            document.getElementById('nama_atasan_display').value = 'Mengambil data...';
            
            $.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 atasanEl = document.getElementById('nama_atasan_display');
                    if (nama) {
                        atasanEl.value = nama;
                    } else {
                        atasanEl.value = '';
                    }
                },
                error: function() {
                    document.getElementById('nama_atasan_display').value = '';
                }
            });
        }

        // Restrict tanggal surat to same month/year as nomor surat
        function restrictTanggalSurat() {
            const nomorSurat = '{{ $history['nomor_surat'] ?? '' }}';
            const tanggalInput = document.getElementById('tanggal_surat');
            const originalDate = '{{ $history['tanggal_surat'] ?? '' }}';
            
            if (!nomorSurat || !tanggalInput) return;
            
            // Parse format: XXX.NNN.SP.MM.YY where MM can be letter (A=Jan, B=Feb, ..., L=Dec) or number, YY is 2-digit year
            const parts = nomorSurat.split('.');
            if (parts.length >= 5) {
                const yearCode = parts[4]; // 5th part is 2-digit year (e.g., "26")
                const monthCode = parts[3]; // 4th part is month letter (e.g., "H")
                
                // Convert 2-digit year to 4-digit year
                const year = yearCode.length === 2 ? '20' + yearCode : yearCode;
                
                // Convert letter month to number (A=1, B=2, ..., L=12, or handle numeric)
                let monthNumber;
                if (monthCode.length === 1 && /^[A-L]$/i.test(monthCode)) {
                    // Letter format: A=1, B=2, ..., L=12
                    monthNumber = monthCode.toUpperCase().charCodeAt(0) - 64; // A=65, so 65-64=1
                } else {
                    // Numeric format
                    monthNumber = parseInt(monthCode);
                }
                
                // Calculate last day of month
                const lastDay = new Date(year, monthNumber, 0).getDate();
                
                // Set min and max date
                const minDate = `${year}-${String(monthNumber).padStart(2, '0')}-01`;
                const maxDate = `${year}-${String(monthNumber).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
                
                tanggalInput.min = minDate;
                tanggalInput.max = maxDate;
                
                // Reset if outside range on load
                if (tanggalInput.value && (tanggalInput.value < minDate || tanggalInput.value > maxDate)) {
                    tanggalInput.value = originalDate || minDate;
                }
                
                // Add validation on change
                tanggalInput.addEventListener('change', function() {
                    if (!this.value) return;
                    
                    const selectedDate = new Date(this.value + 'T00:00:00');
                    const selectedMonth = String(selectedDate.getMonth() + 1).padStart(2, '0');
                    const selectedYear = String(selectedDate.getFullYear());
                    const expectedMonth = String(monthNumber).padStart(2, '0');
                    
                    console.log('Date validation:', { selectedMonth, selectedYear, expectedMonth, year, value: this.value });
                    
                    if (selectedMonth !== expectedMonth || selectedYear !== year) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Perhatian',
                            text: 'Bulan yang dipilih tidak dalam rentang nomor surat, silahkan pilih bulan yang sesuai atau buat surat ulang',
                            confirmButtonColor: '#028284'
                        });
                        
                        // Reset to original database date
                        this.value = originalDate || minDate;
                    }
                });
            }
        }

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

        function submitHistoryEditForm(event) {
            event.preventDefault();
            const historyKey = document.getElementById('history_key').value;
            const suratTeguranLevel = document.getElementById('surat_teguran_level').value;
            const suratPeringatanLevel = document.getElementById('surat_peringatan_level').value;
            const idpkb = document.getElementById('idpkb').value;
            const keterangan = document.getElementById('keterangan_hrd').value.trim();
            const jenisSurat = document.getElementById('jenis_surat').value;

            if (jenisSurat === 'Surat Teguran' && !suratTeguranLevel) {
                Swal.fire({ icon:'warning', title:'Perhatian', text:'Pilih level surat teguran', confirmButtonColor:'#028284' });
                return;
            }
            if (jenisSurat === 'Surat Peringatan' && !suratPeringatanLevel) {
                Swal.fire({ icon:'warning', title:'Perhatian', text:'Pilih level surat peringatan', confirmButtonColor:'#028284' });
                return;
            }
            if (jenisSurat === 'Surat Peringatan' && !idpkb) {
                Swal.fire({ icon:'warning', title:'Perhatian', text:'Pilih PKB', confirmButtonColor:'#028284' });
                return;
            }
            if (!keterangan) {
                Swal.fire({ icon:'warning', title:'Perhatian', text:'Keterangan HRD wajib diisi', confirmButtonColor:'#028284' });
                return;
            }

            let postData = {
                _token: '{{ csrf_token() }}',
                id: historyKey,
                history_key: historyKey,
                surat_teguran_level: suratTeguranLevel,
                surat_peringatan_level: suratPeringatanLevel,
                idpkb: idpkb,
                keterangan_hrd: keterangan,
            };

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

        function showError(text) {
            Swal.fire({ icon:'error', title:'Error', text, confirmButtonColor:'#028284' });
        }
    </script>
@endsection