@extends('base.layout')
@section('content')
<style>
    .rekap-toolbar {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        padding-bottom: 10px;
    }
    .rekap-table-wrap {
        max-height: 65vh;
        overflow: auto;
        border: 1px solid #dee2e6;
    }
    #penerimaansamplereport thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8f9fa;
    }
    .status-print-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .status-print-badge.pending {
        background: #e9ecef;
        color: #495057;
    }
    .status-print-badge.done {
        background: #d4edda;
        color: #155724;
    }
    tr.printed-row {
        background-color: #f8f9fa;
    }
</style>
<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box ribbon-box">
                    <div class="ribbon ribbon-danger">Rekapitulasi Penerimaan Sample {{$tanggal}}</div>
                    <p></p>
                    <div class="table-responsive">
                        <div class="rekap-toolbar">
                            <button type="button" class="btn btn-primary" id="btnexport"><i class="fa fa-file-excel-o"></i> Export</button>
                            <select id="printOrientation" class="btn btn-default">
                                <option value="landscape">Landscape</option>
                                <option value="portrait">Portrait</option>
                            </select>
                            <select id="sortStatus" class="btn btn-default">
                                <option value="default">Sort Status (Default)</option>
                                <option value="asc">Sort Status A-Z</option>
                                <option value="desc">Sort Status Z-A</option>
                            </select>
                            <select id="filterStatus" class="btn btn-default">
                                <option value="">Filter Status: Semua</option>
                            </select>
                            <button type="button" class="btn btn-success" id="btnprintselected"><i class="fa fa-print"></i> Cetak Terpilih</button>
                        </div>

                        <div class="rekap-table-wrap">
                            <table class="table table-bordered table-striped" id="penerimaansamplereport">
                                <thead>
                                    <tr>
                                        <th style="width: 40px; text-align:center;">
                                            <input type="checkbox" id="checkAllRows">
                                        </th>
                                        <th>Keterangan Cetak</th>
                                        <th>No.RM</th>
                                        <th>Nama</th>
                                        <th>No.Sample</th>
                                        <th>Asal Pasien</th>
                                        <th>Daftar</th>
                                        <th>Order</th>
                                        <th>Kode</th>
                                        <th>Spesimen</th>
                                        <th>Status</th>
                                        <th>Tanggal Terima</th>
                                        <th>Petugas</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($detail as $r)
                                        @php
                                            $isPrinted = !empty($r['ppdsjunior2']) && $r['ppdsjunior2'] != '0';
                                            $statusValue = trim((string)($r['status'] ?? '-'));
                                            $petugas = '';
                                            if ($r['nmppdsmiddle2'] != '') {
                                                $petugas = $r['nmppdsmiddle2'];
                                            }
                                            if ($r['nmppdsjunior2'] != '') {
                                                $petugas = trim($petugas.' '.$r['nmppdsjunior2']);
                                            }
                                        @endphp
                                        <tr data-id="{{ $r['id'] }}" data-status="{{ strtolower($statusValue) }}" data-order="{{ $loop->index }}" class="{{ $isPrinted ? 'printed-row' : '' }}">
                                            <td style="text-align:center;">
                                                <input type="checkbox" class="row-check" {{ $isPrinted ? 'disabled' : '' }}>
                                            </td>
                                            <td class="print-status-cell">
                                                @if($isPrinted)
                                                    <span class="status-print-badge done">Sudah Dicetak</span>
                                                @else
                                                    <span class="status-print-badge pending">Belum Dicetak</span>
                                                @endif
                                            </td>
                                            <td>{{ $r['noregister'] }}</td>
                                            <td>{{ $r['nmpasien'] }}</td>
                                            <td>{{ $r['nofoto'] }}</td>
                                            <td>{{ $r['asalpasien'] }}</td>
                                            <td>{{ $r['daftar'] }}</td>
                                            <td>{{ $r['reques'] }}</td>
                                            <td>{{ $r['kd_spesimen'] }}</td>
                                            <td>{{ $r['nm_spesimen'] }}</td>
                                            <td>{{ $statusValue }}</td>
                                            <td>{{ $r['tgldraft'] }}</td>
                                            <td class="petugas-cell">{{ $petugas }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
@endsection
@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        var table = document.getElementById('penerimaansamplereport');
        var tableBody = table ? table.querySelector('tbody') : null;
        var checkAllRows = document.getElementById('checkAllRows');
        var printOrientation = document.getElementById('printOrientation');
        var sortStatus = document.getElementById('sortStatus');
        var filterStatus = document.getElementById('filterStatus');
        var token = document.getElementById('token').value;
        var markPrintedUrl = @json(route('markRekapPenerimaanSamplePrinted'));
        var appName = @json(config('global.namaapps'));
        var appDomain = @json(config('global.domainapps'));
        var appSubDomain = @json(config('global.subdomainapps'));
        var appSubSubDomain = @json(config('global.subsubdomainapps'));
        var appAddress = @json(config('global.addressapps'));
        var petugasCetak = @json(Session('nama'));

        function getEnabledVisibleChecks() {
            return table ? table.querySelectorAll('tbody tr:not([style*="display: none"]) .row-check:not(:disabled)') : [];
        }

        function updateCheckAllState() {
            if (!checkAllRows) {
                return;
            }
            var rowChecks = getEnabledVisibleChecks();
            var checkedCount = 0;
            rowChecks.forEach(function(cb) {
                if (cb.checked) {
                    checkedCount++;
                }
            });
            checkAllRows.checked = rowChecks.length > 0 && rowChecks.length === checkedCount;
        }

        function initStatusFilterOptions() {
            if (!table || !filterStatus) {
                return;
            }
            var statusSet = new Set();
            table.querySelectorAll('tbody tr').forEach(function(row) {
                var statusText = (row.children[10] ? row.children[10].innerText : '').trim();
                if (statusText !== '') {
                    statusSet.add(statusText);
                }
            });

            Array.from(statusSet).sort().forEach(function(status) {
                var opt = document.createElement('option');
                opt.value = status.toLowerCase();
                opt.textContent = 'Status: ' + status;
                filterStatus.appendChild(opt);
            });
        }

        function applyStatusSortFilter() {
            if (!tableBody) {
                return;
            }

            var rows = Array.from(tableBody.querySelectorAll('tr'));
            var sortMode = sortStatus ? sortStatus.value : 'default';
            var selectedStatus = filterStatus ? filterStatus.value : '';

            rows.sort(function(a, b) {
                if (sortMode === 'asc') {
                    return (a.dataset.status || '').localeCompare(b.dataset.status || '');
                }
                if (sortMode === 'desc') {
                    return (b.dataset.status || '').localeCompare(a.dataset.status || '');
                }
                return parseInt(a.dataset.order || '0', 10) - parseInt(b.dataset.order || '0', 10);
            });

            rows.forEach(function(row) {
                tableBody.appendChild(row);
                var rowStatus = row.dataset.status || '';
                var show = selectedStatus === '' || rowStatus === selectedStatus;
                row.style.display = show ? '' : 'none';
                if (!show) {
                    var cb = row.querySelector('.row-check');
                    if (cb) {
                        cb.checked = false;
                    }
                }
            });

            if (checkAllRows) {
                checkAllRows.checked = false;
            }
            updateCheckAllState();
        }

        if (checkAllRows && table) {
            checkAllRows.addEventListener('change', function() {
                getEnabledVisibleChecks().forEach(function(cb) {
                    cb.checked = checkAllRows.checked;
                });
            });

            table.addEventListener('change', function(e) {
                if (e.target && e.target.classList.contains('row-check')) {
                    updateCheckAllState();
                }
            });
        }

        if (sortStatus) {
            sortStatus.addEventListener('change', applyStatusSortFilter);
        }

        if (filterStatus) {
            filterStatus.addEventListener('change', applyStatusSortFilter);
        }

        initStatusFilterOptions();
        applyStatusSortFilter();

        document.getElementById('btnexport').addEventListener('click', function() {
            if (table) {
                var wb = XLSX.utils.table_to_book(table, { sheet: "Report" });
                XLSX.writeFile(wb, "Rekap_Penerimaan_Sample_{{$tanggal}}.xlsx");
            }
        });

        document.getElementById('btnprintselected').addEventListener('click', function() {
            if (!table) {
                return;
            }

            var selectedRows = table.querySelectorAll('tbody tr');
            var printedRows = [];
            var selectedIds = [];
            var selectedRowElements = [];

            selectedRows.forEach(function(row) {
                if (row.style.display === 'none') {
                    return;
                }
                var rowCheck = row.querySelector('.row-check');
                if (rowCheck && rowCheck.checked) {
                    var cells = row.querySelectorAll('td');
                    var rowId = parseInt(row.getAttribute('data-id'), 10);
                    if (!isNaN(rowId)) {
                        selectedIds.push(rowId);
                        selectedRowElements.push(row);
                    }
                    printedRows.push([
                        cells[2] ? cells[2].innerText : '',
                        cells[3] ? cells[3].innerText : '',
                        cells[4] ? cells[4].innerText : '',
                        cells[5] ? cells[5].innerText : '',
                        cells[6] ? cells[6].innerText : '',
                        cells[7] ? cells[7].innerText : '',
                        cells[8] ? cells[8].innerText : '',
                        cells[9] ? cells[9].innerText : '',
                        cells[10] ? cells[10].innerText : '',
                        cells[11] ? cells[11].innerText : '',
                        cells[12] ? cells[12].innerText : ''
                    ]);
                }
            });

            if (printedRows.length === 0 || selectedIds.length === 0) {
                alert('Pilih minimal satu baris untuk dicetak.');
                return;
            }

            $.post(markPrintedUrl, { ids: selectedIds, _token: token }, function(resp) {
                if (!resp || resp.status !== 'success') {
                    alert((resp && resp.message) ? resp.message : 'Gagal memperbarui status cetak.');
                    return;
                }

                var affectedIds = Array.isArray(resp.affected_ids) ? resp.affected_ids : [];
                var affectedMap = {};
                affectedIds.forEach(function(id) {
                    affectedMap[String(id)] = true;
                });

                selectedRowElements.forEach(function(row) {
                    var id = row.getAttribute('data-id');
                    if (affectedMap[id]) {
                        row.classList.add('printed-row');
                        var rowCheck = row.querySelector('.row-check');
                        if (rowCheck) {
                            rowCheck.checked = false;
                            rowCheck.disabled = true;
                        }
                        var statusCell = row.querySelector('.print-status-cell');
                        if (statusCell) {
                            statusCell.innerHTML = '<span class="status-print-badge done">Sudah Dicetak</span>';
                        }
                        var petugasCell = row.querySelector('.petugas-cell');
                        if (petugasCell && (!petugasCell.innerText || petugasCell.innerText.trim() === '')) {
                            petugasCell.innerText = resp.printed_by || petugasCetak || '-';
                        }
                    }
                });

                if (checkAllRows) {
                    checkAllRows.checked = false;
                }
                updateCheckAllState();

                var now = new Date();
                var orientation = printOrientation ? printOrientation.value : 'landscape';
                var tanggalCetak = now.toLocaleString('id-ID', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });

                var printWindow = window.open('', '_blank');
                if (!printWindow) {
                    alert('Pop-up diblokir browser. Izinkan pop-up untuk mencetak.');
                    return;
                }

                var rowsHtml = '';
                printedRows.forEach(function(rowData) {
                    rowsHtml += '<tr>';
                    rowData.forEach(function(value) {
                        rowsHtml += '<td>' + value + '</td>';
                    });
                    rowsHtml += '</tr>';
                });

                var html = ''
                    + '<!DOCTYPE html>'
                    + '<html><head><title>Cetak Rekap Penerimaan Sample</title>'
                    + '<style>'
                    + '@page { size: A4 ' + orientation + '; margin: 10mm; }'
                    + 'body { font-family: Arial, sans-serif; margin: 0; color: #111; }'
                    + '.header { text-align: center; margin-bottom: 8px; }'
                    + '.header h2 { margin: 0; font-size: 16px; }'
                    + '.header .line { margin: 2px 0; font-size: 12px; }'
                    + '.meta { display: flex; justify-content: space-between; margin: 8px 0 10px; font-size: 11px; }'
                    + '.title { text-align: center; font-weight: 700; margin-bottom: 8px; font-size: 12px; }'
                    + 'table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }'
                    + 'th, td { border: 1px solid #000; padding: 3px; word-break: break-word; vertical-align: top; }'
                    + 'th { background: #f1f1f1; }'
                    + '</style></head><body>'
                    + '<div class="header">'
                    + '<h2>' + (appName || '') + '</h2>'
                    + '<div class="line">' + (appDomain || '') + '</div>'
                    + '<div class="line">' + (appSubDomain || '') + ', ' + (appSubSubDomain || '') + '</div>'
                    + '<div class="line">' + (appAddress || '') + '</div>'
                    + '</div>'
                    + '<div class="title">Rekapitulasi Penerimaan Sample {{$tanggal}}</div>'
                    + '<div class="meta">'
                    + '<div>Tanggal Cetak: ' + tanggalCetak + '</div>'
                    + '<div>Petugas: ' + (petugasCetak || '-') + '</div>'
                    + '</div>'
                    + '<table>'
                    + '<thead><tr>'
                    + '<th>No.RM</th>'
                    + '<th>Nama</th>'
                    + '<th>No.Sample</th>'
                    + '<th>Asal Pasien</th>'
                    + '<th>Daftar</th>'
                    + '<th>Order</th>'
                    + '<th>Kode</th>'
                    + '<th>Spesimen</th>'
                    + '<th>Status</th>'
                    + '<th>Tanggal Terima</th>'
                    + '<th>Petugas</th>'
                    + '</tr></thead>'
                    + '<tbody>' + rowsHtml + '</tbody>'
                    + '</table>'
                    + '<script>window.onload = function(){ window.print(); window.close(); };<\/script>'
                    + '</body></html>';

                printWindow.document.open();
                printWindow.document.write(html);
                printWindow.document.close();
            }).fail(function(xhr) {
                var err = 'Gagal memperbarui status cetak.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    err = xhr.responseJSON.message;
                }
                alert(err);
            });
        });
    });
</script>
@endpush