@extends('layouts.app')

@section('title', 'Logbook Harian Pemancar')

@section('page_header')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
    <div>
        <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
            <i class="fa-solid fa-book-bookmark text-primary"></i> Logbook Operasional Pemancar Radio
        </h4>
        <small class="text-muted">Pencatatan parameter harian, shift teknisi, dan riwayat telemetri pemancar</small>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-success" id="btnExportExcel">
            <i class="fa-solid fa-file-excel me-1"></i> Export Excel (.xlsx)
        </button>
        <button type="button" class="btn btn-outline-danger" id="btnExportPdf">
            <i class="fa-solid fa-file-pdf me-1"></i> Cetak PDF
        </button>
        <a href="{{ route('logs.create') }}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Tambah Log Baru
        </a>
    </div>
</div>
@endsection

@section('content')
<!-- Filter Card -->
<div class="card card-engineering mb-3">
    <div class="card-body p-3">
        <form id="filterForm" class="row g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label small fw-semibold text-secondary mb-1">PEMANCAR</label>
                <select name="filter_transmitter_id" id="filter_transmitter_id" class="form-select form-select-sm">
                    <option value="">Semua Pemancar (FM & AM)</option>
                    @foreach($transmitters as $tx)
                        <option value="{{ $tx->id }}">{{ $tx->name }} ({{ $tx->frequency }})</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label small fw-semibold text-secondary mb-1">NAMA PEGAWAI</label>
                @if(Auth::check() && Auth::user()->role === 'technician')
                    <input type="text" class="form-control form-select-sm bg-light text-dark fw-semibold" value="{{ Auth::user()->name }}" readonly>
                    <input type="hidden" name="filter_user_id" id="filter_user_id" value="{{ Auth::id() }}">
                @else
                    <select name="filter_user_id" id="filter_user_id" class="form-select form-select-sm">
                        <option value="">Semua Pegawai</option>
                        @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}">{{ $tech->name }}</option>
                        @endforeach
                    </select>
                @endif
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label small fw-semibold text-secondary mb-1">STATUS</label>
                <select name="filter_status" id="filter_status" class="form-select form-select-sm">
                    <option value="">Semua Status</option>
                    <option value="Normal">Normal</option>
                    <option value="Warning">Warning</option>
                    <option value="Critical">Critical</option>
                </select>
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label small fw-semibold text-secondary mb-1">DARI TANGGAL</label>
                <input type="date" name="filter_date_start" id="filter_date_start" class="form-control form-select-sm font-mono">
            </div>

            <div class="col-6 col-md-2">
                <label class="form-label small fw-semibold text-secondary mb-1">SAMPAI TANGGAL</label>
                <input type="date" name="filter_date_end" id="filter_date_end" class="form-control form-select-sm font-mono">
            </div>

            <div class="col-12 col-md-1 d-flex gap-1">
                <button type="button" class="btn btn-primary btn-sm w-100" id="btnFilter" title="Terapkan Filter">
                    <i class="fa-solid fa-filter"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetFilter" title="Reset Filter">
                    <i class="fa-solid fa-arrows-rotate"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- AJAX DataTable Card -->
<div class="card card-engineering">
    <div class="card-header">
        <div>
            <i class="fa-solid fa-table me-2 text-primary"></i>
            <strong>Daftar Entri Logbook Telemetri</strong>
        </div>
    </div>
    <div class="card-body p-3">
        <!-- Bulk Action Floating Bar -->
        <div id="bulkActionBar" class="alert alert-warning py-2 px-3 d-none align-items-center justify-content-between mb-3 border-warning shadow-sm">
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-check-double text-warning-emphasis fs-5"></i>
                <span class="text-dark small"><strong id="selectedLogsCount">0</strong> log terpilih untuk tindakan massal</span>
            </div>
            <button type="button" class="btn btn-danger btn-sm px-3 shadow-sm" id="btnExecuteBulkDelete">
                <i class="fa-solid fa-trash-can me-1"></i> Hapus Massal Data Terpilih
            </button>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle w-100" id="logsTable">
                <thead>
                    <tr>
                        <th style="width: 35px;" class="text-center">
                            <input type="checkbox" id="selectAllLogs" class="form-check-input" title="Pilih Semua di Halaman Ini">
                        </th>
                        <th style="width: 130px;">Waktu & Shift</th>
                        <th>Pemancar & Frekuensi</th>
                        <th>Shift</th>
                        <th class="text-end">Pfwd (W)</th>
                        <th class="text-end">Prefl (W)</th>
                        <th class="text-center">VSWR</th>
                        <th class="text-center">Suhu PA</th>
                        <th>Petugas Jaga</th>
                        <th class="text-center">Status</th>
                        <th class="text-center" style="width: 100px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Loaded dynamically via AJAX -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Detail Log -->
<div class="modal fade" id="detailLogModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title font-mono">
                    <i class="fa-solid fa-circle-info text-info me-2"></i> Rincian Parameter Logbook
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="detailModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="small text-muted mt-2">Memuat data logbook...</div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi / Pengaturan Cetak PDF -->
<div class="modal fade" id="modalExportPdf" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title font-mono fs-6">
                    <i class="fa-solid fa-file-pdf text-danger me-2"></i> Pengaturan Penandatangan Dokumen PDF
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-3">
                <div class="alert alert-light border small text-muted mb-3 py-2">
                    <i class="fa-solid fa-circle-info text-primary me-1"></i> Data logbook akan dicetak berdasarkan filter pemancar, tanggal, dan status yang aktif saat ini.
                </div>

                <!-- Petugas Jaga Shift -->
                <div class="mb-3">
                    <label class="form-label small fw-semibold text-secondary mb-1">
                        <i class="fa-solid fa-user-check text-primary me-1"></i> PETUGAS JAGA SHIFT (TANDA TANGAN KIRI)
                    </label>
                    @if(Auth::check() && Auth::user()->role === 'technician')
                        <div class="p-2 mb-2 rounded bg-light border d-flex align-items-center">
                            <div>
                                <i class="fa-solid fa-user-shield text-primary me-2"></i>
                                <span class="fw-bold text-dark">{{ Auth::user()->name }}</span>
                                @if(Auth::user()->nip)
                                    <span class="text-muted small ms-1 font-mono">(NIP. {{ Auth::user()->nip }})</span>
                                @endif
                            </div>
                        </div>
                        <input type="hidden" id="modal_pdf_user_id" value="{{ Auth::id() }}">
                        <div class="row g-2">
                            <div class="col-7">
                                <label class="form-label text-muted" style="font-size: 11px;">Nama Lengkap Petugas</label>
                                <input type="text" id="modal_pdf_petugas_nama" class="form-control form-control-sm bg-light fw-semibold text-dark" value="{{ Auth::user()->name }}" readonly>
                            </div>
                            <div class="col-5">
                                <label class="form-label text-muted" style="font-size: 11px;">NIP Petugas</label>
                                <input type="text" id="modal_pdf_petugas_nip" class="form-control form-control-sm font-mono bg-light text-dark" value="{{ Auth::user()->nip ?? '' }}" placeholder="NIP (opsional)" readonly>
                            </div>
                        </div>
                    @else
                        <select id="modal_pdf_user_id" class="form-select form-select-sm mb-2">
                            <option value="">-- Pilih Pegawai / Teknisi Jaga --</option>
                            @foreach($technicians as $tech)
                                <option value="{{ $tech->id }}" data-name="{{ $tech->name }}" data-nip="{{ $tech->nip }}">
                                    {{ $tech->name }} {{ $tech->nip ? '(NIP. '.$tech->nip.')' : '' }}
                                </option>
                            @endforeach
                        </select>
                        <div class="row g-2">
                            <div class="col-7">
                                <label class="form-label text-muted" style="font-size: 11px;">Nama Lengkap Petugas</label>
                                <input type="text" id="modal_pdf_petugas_nama" class="form-control form-control-sm" placeholder="Nama Petugas Jaga">
                            </div>
                            <div class="col-5">
                                <label class="form-label text-muted" style="font-size: 11px;">NIP Petugas</label>
                                <input type="text" id="modal_pdf_petugas_nip" class="form-control form-control-sm font-mono" placeholder="NIP (opsional)">
                            </div>
                        </div>
                    @endif
                </div>

                <hr class="my-3 text-secondary opacity-25">

                <!-- Kepala Seksi Teknik -->
                <div class="mb-2">
                    <label class="form-label small fw-semibold text-secondary mb-1">
                        <i class="fa-solid fa-user-tie text-success me-1"></i> KEPALA SEKSI TEKNIK (MENGETAHUI / KANAN)
                    </label>
                    <select id="modal_pdf_kasi_id" class="form-select form-select-sm mb-2">
                        @foreach($supervisors as $spv)
                            <option value="{{ $spv->id }}" data-name="{{ $spv->name }}" data-nip="{{ $spv->nip }}" {{ ($kasiDefault && $kasiDefault->id == $spv->id) ? 'selected' : '' }}>
                                {{ $spv->name }} {{ $spv->nip ? '(NIP. '.$spv->nip.')' : '' }}
                            </option>
                        @endforeach
                    </select>
                    <div class="row g-2">
                        <div class="col-7">
                            <label class="form-label text-muted" style="font-size: 11px;">Nama Kepala Seksi Teknik</label>
                            <input type="text" id="modal_pdf_kasi_nama" class="form-control form-control-sm" placeholder="Nama Ka. Seksi" value="{{ $kasiDefault->name ?? 'PURNOMO SHIDDIQ' }}">
                        </div>
                        <div class="col-5">
                            <label class="form-label text-muted" style="font-size: 11px;">NIP Ka. Seksi</label>
                            <input type="text" id="modal_pdf_kasi_nip" class="form-control form-control-sm font-mono" placeholder="NIP Ka. Seksi" value="{{ $kasiDefault->nip ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light p-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger btn-sm" id="btnDoExportPdf">
                    <i class="fa-solid fa-file-pdf me-1"></i> Cetak Dokumen PDF
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Initialize AJAX DataTable
        const table = $('#logsTable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            order: [[1, 'desc']],
            language: {
                search: "Cari data:",
                lengthMenu: "Tampilkan _MENU_ baris",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                infoEmpty: "Menampilkan 0 entri",
                infoFiltered: "(disaring dari _MAX_ total entri)",
                zeroRecords: "Tidak ada data logbook yang cocok",
                processing: "<i class='fa-solid fa-spinner fa-spin me-2'></i> Memuat data logbook...",
                paginate: {
                    first: "Awal",
                    last: "Akhir",
                    next: "&raquo;",
                    previous: "&laquo;"
                }
            },
            ajax: {
                url: "{{ route('logs.data') }}",
                data: function(d) {
                    d.transmitter_id = $('#filter_transmitter_id').val();
                    d.user_id = $('#filter_user_id').val();
                    d.status = $('#filter_status').val();
                    d.date_start = $('#filter_date_start').val();
                    d.date_end = $('#filter_date_end').val();
                }
            },
            columns: [
                { data: 'checkbox', name: 'id', orderable: false, searchable: false, className: 'text-center' },
                { data: 'recorded_at', name: 'recorded_at', className: 'font-mono small' },
                { data: 'transmitter_badge', name: 'transmitter_id' },
                { data: 'shift', name: 'shift', className: 'text-center' },
                { data: 'forward_power', name: 'forward_power', className: 'text-end font-mono' },
                { data: 'reflected_power', name: 'reflected_power', className: 'text-end font-mono' },
                { data: 'vswr', name: 'vswr', className: 'text-center' },
                { data: 'temperature', name: 'temperature_pa', className: 'text-center font-mono' },
                { data: 'user_name', name: 'user_id' },
                { data: 'status', name: 'status', className: 'text-center' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
            ]
        });

        // Function to update Bulk Action Bar visibility & counter
        function updateBulkActionBar() {
            const count = $('.log-row-checkbox:checked').length;
            $('#selectedLogsCount').text(count);
            if (count > 0) {
                $('#bulkActionBar').removeClass('d-none').addClass('d-flex');
            } else {
                $('#bulkActionBar').addClass('d-none').removeClass('d-flex');
            }
        }

        // Checkbox: Select All in current page
        $('#selectAllLogs').on('change', function() {
            const isChecked = $(this).is(':checked');
            $('.log-row-checkbox').prop('checked', isChecked);
            updateBulkActionBar();
        });

        // Checkbox: Individual row change
        $(document).on('change', '.log-row-checkbox', function() {
            const total = $('.log-row-checkbox').length;
            const checked = $('.log-row-checkbox:checked').length;
            $('#selectAllLogs').prop('checked', total > 0 && total === checked);
            updateBulkActionBar();
        });

        // DataTable Draw event: reset select all checkbox
        table.on('draw', function() {
            $('#selectAllLogs').prop('checked', false);
            updateBulkActionBar();
        });

        // Bulk Delete Action with SweetAlert2
        $('#btnExecuteBulkDelete').on('click', function() {
            const selectedIds = [];
            $('.log-row-checkbox:checked').each(function() {
                selectedIds.push($(this).val());
            });

            if (selectedIds.length === 0) {
                Swal.fire('Perhatian', 'Silakan pilih minimal satu logbook untuk dihapus.', 'info');
                return;
            }

            Swal.fire({
                title: 'Hapus Massal Logbook?',
                html: `Anda akan menghapus secara permanen <b>${selectedIds.length}</b> data telemetri logbook terpilih.<br><small class="text-danger">Tindakan ini tidak dapat dibatalkan!</small>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: `<i class="fa-solid fa-trash-can me-1"></i> Ya, Hapus (${selectedIds.length}) Data`,
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Menghapus Data...',
                        text: 'Sedang memproses penghapusan massal...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ route('logs.bulk-delete') }}",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            ids: selectedIds
                        },
                        success: function(res) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil Dihapus',
                                text: res.message,
                                timer: 2500,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });
                            $('#selectAllLogs').prop('checked', false);
                            updateBulkActionBar();
                            table.ajax.reload(null, false);
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data secara massal.';
                            Swal.fire('Gagal', msg, 'error');
                        }
                    });
                }
            });
        });

        // Filter Actions
        $('#btnFilter').on('click', function() {
            table.draw();
        });

        $('#btnResetFilter').on('click', function() {
            $('#filterForm')[0].reset();
            table.draw();
        });

        // Export with current filters
        $('#btnExportExcel').on('click', function() {
            const params = $.param({
                transmitter_id: $('#filter_transmitter_id').val(),
                user_id: $('#filter_user_id').val(),
                status: $('#filter_status').val(),
                date_start: $('#filter_date_start').val(),
                date_end: $('#filter_date_end').val(),
            });
            window.location.href = "{{ route('logs.export.excel') }}?" + params;
        });

        // Buka modal pengaturan tanda tangan PDF
        $('#btnExportPdf').on('click', function() {
            @if(Auth::check() && Auth::user()->role === 'technician')
                // Untuk Teknisi: Otomatis set identitas dari teknisi yang sedang login
                $('#modal_pdf_user_id').val('{{ Auth::id() }}');
                $('#modal_pdf_petugas_nama').val(@json(Auth::user()->name));
                $('#modal_pdf_petugas_nip').val(@json(Auth::user()->nip ?? ''));
            @else
                // Admin / Supervisor: Sinkronkan pilihan pegawai dengan filter aktif di tabel (jika ada)
                const currentFilterUser = $('#filter_user_id').val();
                if (currentFilterUser) {
                    $('#modal_pdf_user_id').val(currentFilterUser).trigger('change');
                } else if (!$('#modal_pdf_petugas_nama').val()) {
                    const defaultOption = $('#modal_pdf_user_id option[value!=""]:first');
                    if (defaultOption.length) {
                        $('#modal_pdf_user_id').val(defaultOption.val()).trigger('change');
                    }
                }
            @endif
            $('#modalExportPdf').modal('show');
        });

        // Event saat opsi Petugas Jaga diubah
        $('#modal_pdf_user_id').on('change', function() {
            const selected = $(this).find('option:selected');
            if (selected.val()) {
                $('#modal_pdf_petugas_nama').val(selected.data('name') || '');
                $('#modal_pdf_petugas_nip').val(selected.data('nip') || '');
            }
        });

        // Event saat opsi Kepala Seksi diubah
        $('#modal_pdf_kasi_id').on('change', function() {
            const selected = $(this).find('option:selected');
            if (selected.val()) {
                $('#modal_pdf_kasi_nama').val(selected.data('name') || '');
                $('#modal_pdf_kasi_nip').val(selected.data('nip') || '');
            }
        });

        // Eksekusi Unduh Dokumen PDF
        $('#btnDoExportPdf').on('click', function() {
            const params = $.param({
                transmitter_id: $('#filter_transmitter_id').val(),
                user_id: $('#filter_user_id').val(),
                status: $('#filter_status').val(),
                date_start: $('#filter_date_start').val(),
                date_end: $('#filter_date_end').val(),
                petugas_nama: $('#modal_pdf_petugas_nama').val(),
                petugas_nip: $('#modal_pdf_petugas_nip').val(),
                kasi_nama: $('#modal_pdf_kasi_nama').val(),
                kasi_nip: $('#modal_pdf_kasi_nip').val(),
            });
            $('#modalExportPdf').modal('hide');
            window.location.href = "{{ route('logs.export.pdf') }}?" + params;
        });

        // SweetAlert2 Delete Confirmation
        $(document).on('click', '.delete-log-btn', function() {
            const logId = $(this).data('id');
            const logName = $(this).data('name');

            Swal.fire({
                title: 'Hapus Log Ini?',
                text: `Apakah Anda yakin ingin menghapus catatan log tanggal ${logName}? Tindakan ini tidak dapat dibatalkan.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-trash me-1"></i> Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/logs/${logId}`,
                        type: 'DELETE',
                        success: function(res) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Terhapus',
                                text: res.message,
                                timer: 2000,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });
                            table.ajax.reload(null, false);
                        },
                        error: function() {
                            Swal.fire('Gagal', 'Terjadi kesalahan saat menghapus data.', 'error');
                        }
                    });
                }
            });
        });

        // View Log Detail Modal (AJAX)
        $(document).on('click', '.view-log-btn', function() {
            const logId = $(this).data('id');
            const modal = new bootstrap.Modal(document.getElementById('detailLogModal'));
            modal.show();

            $('#detailModalBody').html(`
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="small text-muted mt-2">Memuat rincian telemetri...</div>
                </div>
            `);

            $.get(`/logs/${logId}`, function(res) {
                if (res.success) {
                    const l = res.log;
                    $('#detailModalBody').html(`
                        <div class="row g-3">
                            <div class="col-12 d-flex justify-content-between align-items-center border-bottom pb-2">
                                <div>
                                    <h5 class="fw-bold mb-0 text-dark">${l.transmitter.name}</h5>
                                    <small class="text-primary font-mono fw-semibold">${l.transmitter.frequency} | ${l.transmitter.call_sign || 'No Callsign'}</small>
                                </div>
                                <span class="badge ${l.status === 'Normal' ? 'bg-success' : (l.status === 'Warning' ? 'bg-warning text-dark' : 'bg-danger')} fs-6">${l.status}</span>
                            </div>

                            <div class="col-md-6">
                                <div class="p-2 bg-light border rounded">
                                    <div class="text-muted small">WAKTU & PETUGAS</div>
                                    <div class="fw-bold font-mono">${res.recorded_formatted}</div>
                                    <div class="small text-secondary">Shift: <strong class="text-dark">${l.shift}</strong> | Petugas: <strong>${l.user.name}</strong></div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="p-2 bg-light border rounded">
                                    <div class="text-muted small">SUMBER DAYA & AUDIO STL</div>
                                    <div class="fw-bold">Catu Daya: ${l.power_source}</div>
                                    <div class="small text-secondary">Status STL: <strong>${l.stl_status}</strong> | Kondisi: ${l.audio_condition || 'Normal'}</div>
                                </div>
                            </div>

                            <div class="col-12">
                                <h6 class="fw-bold mt-2 text-dark"><i class="fa-solid fa-bolt me-1 text-warning"></i> Parameter RF & Amplifier (PA)</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered font-mono text-center mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Forward Power</th>
                                                <th>Reflected Power</th>
                                                <th>VSWR Antenna</th>
                                                <th>PA Voltage</th>
                                                <th>PA Current</th>
                                                <th>Suhu PA</th>
                                                <th>Suhu Ruang</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="fw-bold text-primary">${l.forward_power} W</td>
                                                <td>${l.reflected_power} W</td>
                                                <td class="fw-bold ${l.vswr > 1.3 ? 'text-danger' : 'text-success'}">${l.vswr}</td>
                                                <td>${l.pa_voltage ? l.pa_voltage + ' V' : '-'}</td>
                                                <td>${l.pa_current ? l.pa_current + ' A' : '-'}</td>
                                                <td class="fw-semibold text-danger">${l.temperature_pa ? l.temperature_pa + ' °C' : '-'}</td>
                                                <td>${l.temperature_room ? l.temperature_room + ' °C' : '-'}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="p-3 bg-light border rounded">
                                    <div class="text-muted small fw-semibold">CATATAN TEKNISI:</div>
                                    <p class="mb-0 text-dark small">${l.notes ? l.notes : '<em>Tidak ada catatan khusus.</em>'}</p>
                                </div>
                            </div>
                        </div>
                    `);
                }
            });
        });
    });
</script>
@endpush