<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="min-w-0">
                <h2 class="font-bold text-base sm:text-lg text-white leading-tight">Daftar Pemeriksaan</h2>
                <p class="text-teal-100 text-xs mt-0.5">Riwayat seluruh data pemeriksaan kesehatan</p>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                <a href="<?php echo e(route('petugas.pemeriksaan.manual.create')); ?>"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-teal-400/80 hover:bg-teal-300/80 border border-teal-300/50 text-white text-xs sm:text-sm font-medium rounded-lg transition duration-150 shadow-sm">
                    <i class="fas fa-plus text-xs"></i>
                    <span>Pemeriksaan Manual</span>
                </a>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <?php $__env->startPush('styles'); ?>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    
    <style>
        /* DataTables Custom Styling */
        .dataTables_wrapper {
            @apply text-gray-700 dark:text-gray-300 mt-4;
        }
        
        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            @apply border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg focus:border-teal-500 focus:ring-teal-500 transition-all;
        }

        .dataTables_wrapper .dataTables_filter input {
            @apply px-4 py-2 pl-10 shadow-sm;
        }
        
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            @apply px-3 py-2 rounded-lg border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-slate-700 transition-all mx-1;
        }
        
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            @apply bg-teal-500 text-white border-teal-500 hover:bg-teal-600 dark:hover:bg-teal-600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            @apply opacity-50 cursor-not-allowed;
        }
        
        #pemeriksaanTable tbody tr {
            transition: all 0.2s ease;
        }
        
        #pemeriksaanTable tbody tr:hover {
            @apply bg-teal-50 dark:bg-slate-700;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(20, 184, 166, 0.1);
        }
        
        .dark #pemeriksaanTable tbody tr:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Loading spinner */
        .dataTables_processing {
            @apply bg-white dark:bg-slate-800 rounded-lg shadow-lg p-4;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                @apply mb-4;
            }
        }

        /* Search icon */
        .dataTables_filter {
            position: relative;
        }

        .dataTables_filter::before {
            content: "\f002";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }
    </style>
    <?php $__env->stopPush(); ?>

    <div class="py-6 px-4 sm:px-0">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-5">

            
            <?php if(session('success')): ?>
            <div class="flex items-center gap-3 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800/40 rounded-xl text-sm text-green-700 dark:text-green-300">
                <i class="fas fa-check-circle text-green-500 flex-shrink-0"></i>
                <?php echo e(session('success')); ?>

            </div>
            <?php endif; ?>
            <?php if(session('error')): ?>
            <div class="flex items-center gap-3 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/40 rounded-xl text-sm text-red-700 dark:text-red-300">
                <i class="fas fa-exclamation-circle text-red-500 flex-shrink-0"></i>
                <?php echo e(session('error')); ?>

            </div>
            <?php endif; ?>

            
            <?php
                $summaryCards = [
                    ['label'=>'Total',        'count'=> \App\Models\PemeriksaanKesehatan::count(),                                       'icon'=>'fa-clipboard-list',       'color'=>'teal',   'key'=>null],
                    ['label'=>'Normal',       'count'=> \App\Models\PemeriksaanKesehatan::where('kategori_suhu','NORMAL')->count(),       'icon'=>'fa-check-circle',         'color'=>'green',  'key'=>'NORMAL'],
                    ['label'=>'Subfebris',    'count'=> \App\Models\PemeriksaanKesehatan::where('kategori_suhu','SUBFEBRIS')->count(),    'icon'=>'fa-thermometer-half',     'color'=>'yellow', 'key'=>'SUBFEBRIS'],
                    ['label'=>'Demam Ringan', 'count'=> \App\Models\PemeriksaanKesehatan::where('kategori_suhu','DEMAM_RINGAN')->count(), 'icon'=>'fa-fire',                 'color'=>'orange', 'key'=>'DEMAM_RINGAN'],
                    ['label'=>'Demam Sedang', 'count'=> \App\Models\PemeriksaanKesehatan::where('kategori_suhu','DEMAM_SEDANG')->count(), 'icon'=>'fa-fire-alt',             'color'=>'red',    'key'=>'DEMAM_SEDANG'],
                    ['label'=>'Demam Tinggi', 'count'=> \App\Models\PemeriksaanKesehatan::where('kategori_suhu','DEMAM_TINGGI')->count(), 'icon'=>'fa-exclamation-triangle', 'color'=>'red',    'key'=>'DEMAM_TINGGI'],
                ];
                $colorCard = [
                    'teal'   => ['bg'=>'bg-teal-50 dark:bg-teal-900/20',    'border'=>'border-teal-100 dark:border-teal-800/40',    'icon'=>'bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400',    'num'=>'text-teal-700 dark:text-teal-300'],
                    'green'  => ['bg'=>'bg-green-50 dark:bg-green-900/20',  'border'=>'border-green-100 dark:border-green-800/40',  'icon'=>'bg-green-100 dark:bg-green-900/40 text-green-600 dark:text-green-400', 'num'=>'text-green-700 dark:text-green-300'],
                    'yellow' => ['bg'=>'bg-yellow-50 dark:bg-yellow-900/20','border'=>'border-yellow-100 dark:border-yellow-800/40','icon'=>'bg-yellow-100 dark:bg-yellow-900/40 text-yellow-600 dark:text-yellow-400','num'=>'text-yellow-700 dark:text-yellow-300'],
                    'orange' => ['bg'=>'bg-orange-50 dark:bg-orange-900/20','border'=>'border-orange-100 dark:border-orange-800/40','icon'=>'bg-orange-100 dark:bg-orange-900/40 text-orange-600 dark:text-orange-400','num'=>'text-orange-700 dark:text-orange-300'],
                    'red'    => ['bg'=>'bg-red-50 dark:bg-red-900/20',      'border'=>'border-red-100 dark:border-red-800/40',      'icon'=>'bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400',        'num'=>'text-red-700 dark:text-red-300'],
                ];
            ?>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
                <?php $__currentLoopData = $summaryCards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php $c = $colorCard[$card['color']]; $active = request('kategori_suhu') == $card['key'] && $card['key']; ?>
                <button type="button" onclick="$('#kategoriFilter').val('<?php echo e($card['key']); ?>').trigger('change')"
                   class="flex flex-col items-center gap-2 p-3 rounded-xl border <?php echo e($c['bg']); ?> <?php echo e($c['border']); ?> hover:shadow-sm transition <?php echo e($active ? 'ring-2 ring-current ring-offset-1' : ''); ?>">
                    <div class="w-9 h-9 rounded-lg <?php echo e($c['icon']); ?> flex items-center justify-center">
                        <i class="fas <?php echo e($card['icon']); ?> text-sm"></i>
                    </div>
                    <div class="text-center">
                        <p class="text-xl font-bold <?php echo e($c['num']); ?>"><?php echo e($card['count']); ?></p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 leading-tight"><?php echo e($card['label']); ?></p>
                    </div>
                </button>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <!-- Main Card -->
            <div class="bg-white dark:bg-slate-800 overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-4 sm:p-6">
                    
                    <!-- Filters Card -->
                    <div class="mb-4 sm:mb-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-slate-700 dark:to-slate-800 p-4 sm:p-5 rounded-xl border border-gray-200 dark:border-slate-600 shadow-sm">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                            <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center">
                                <i class="fas fa-filter mr-2 text-teal-500 text-sm sm:text-base"></i>
                                Filter Data
                            </h3>
                            <span id="filterBadge" class="hidden px-3 py-1.5 bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 rounded-full text-xs font-medium">
                                <i class="fas fa-check mr-1.5"></i> Filter Aktif
                            </span>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                            <!-- Kategori Suhu Filter -->
                            <div>
                                <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 sm:mb-2">
                                    <i class="fas fa-thermometer-half mr-1.5 text-teal-500 text-xs sm:text-sm"></i>
                                    Kategori Suhu
                                </label>
                                <select id="kategoriFilter" 
                                        class="w-full text-xs sm:text-sm border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg shadow-sm focus:border-teal-500 focus:ring-teal-500 transition-all duration-200 px-3 py-2">
                                    <option value="">Semua Kategori</option>
                                    <?php $__currentLoopData = ['HIPOTERMIA','NORMAL','SUBFEBRIS','DEMAM_RINGAN','DEMAM_SEDANG','DEMAM_TINGGI']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($k); ?>"><?php echo e(str_replace('_',' ',$k)); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>

                            <!-- Dari Tanggal Filter -->
                            <div>
                                <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 sm:mb-2">
                                    <i class="fas fa-calendar-alt mr-1.5 text-teal-500 text-xs sm:text-sm"></i>
                                    Dari Tanggal
                                </label>
                                <input type="date" id="tanggalMulaiFilter"
                                       class="w-full text-xs sm:text-sm border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg shadow-sm focus:border-teal-500 focus:ring-teal-500 transition-all duration-200 px-3 py-2">
                            </div>

                            <!-- Sampai Tanggal Filter -->
                            <div>
                                <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5 sm:mb-2">
                                    <i class="fas fa-calendar-check mr-1.5 text-teal-500 text-xs sm:text-sm"></i>
                                    Sampai Tanggal
                                </label>
                                <input type="date" id="tanggalSelesaiFilter"
                                       class="w-full text-xs sm:text-sm border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white rounded-lg shadow-sm focus:border-teal-500 focus:ring-teal-500 transition-all duration-200 px-3 py-2">
                            </div>

                            <!-- Reset Button -->
                            <div class="flex items-end">
                                <button id="btnResetFilter" 
                                        class="w-full px-4 py-2.5 text-xs sm:text-sm bg-gradient-to-r from-gray-200 to-gray-300 dark:from-slate-600 dark:to-slate-700 text-gray-700 dark:text-gray-300 rounded-lg hover:from-gray-300 hover:to-gray-400 dark:hover:from-slate-500 dark:hover:to-slate-600 transition-all duration-200 flex items-center justify-center font-medium shadow-sm hover:shadow-md transform hover:-translate-y-0.5">
                                    <i class="fas fa-redo mr-2"></i> Reset Filter
                                </button>
                            </div>
                        </div>
                    </div>
                <div class="overflow-x-auto">
                    <table id="pemeriksaanTable" class="w-full table-auto display responsive nowrap" style="width:100%">
                        <thead class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-slate-700 dark:to-slate-800">
                            <tr>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Kode
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Pasien
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Suhu
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Kategori
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Waktu
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Waktu TS
                                </th>
                                <th class="px-3 sm:px-4 py-3 text-left text-xs font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider whitespace-nowrap">
                                    Aksi
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                            <!-- Data akan diisi oleh DataTables ajax -->
                        </tbody>
                    </table>
                </div>

                <!-- Info Stats -->
                <div class="mt-4 sm:mt-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 text-xs sm:text-sm text-gray-600 dark:text-gray-400">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-teal-500 mr-2 text-xs sm:text-sm"></i>
                        <span id="tableInfo" class="font-medium">Memuat data...</span>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    
    <script>
        $(document).ready(function() {
            let table = $('#pemeriksaanTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "<?php echo e(route('petugas.pemeriksaan.datatables')); ?>",
                    type: 'GET',
                    data: function (d) {
                        d.kategori_suhu = $('#kategoriFilter').val();
                        d.tanggal_mulai = $('#tanggalMulaiFilter').val();
                        d.tanggal_selesai = $('#tanggalSelesaiFilter').val();
                    }
                },
                columns: [
                    { data: 'kode', name: 'kode_pemeriksaan', className: 'text-xs sm:text-sm align-middle', responsivePriority: 3 },
                    { data: 'pasien', name: 'pasien_id', className: 'text-xs sm:text-sm align-middle', responsivePriority: 1 },
                    { data: 'suhu', name: 'suhu_tubuh', className: 'text-xs sm:text-sm align-middle', responsivePriority: 4 },
                    { data: 'kategori', name: 'kategori_suhu', className: 'text-xs sm:text-sm align-middle', responsivePriority: 5 },
                    { data: 'waktu', name: 'waktu_pemeriksaan', className: 'text-xs sm:text-sm align-middle overflow-hidden', orderData: [5], responsivePriority: 2 },
                    { data: 'waktu_ts', name: 'waktu_ts', visible: false }, // Kolom hidden untuk sorting waktu
                    { data: 'aksi', name: 'aksi', orderable: false, searchable: false, className: 'align-middle', responsivePriority: 1 }
                ],
                language: {
                    processing: '<div class="flex items-center justify-center"><i class="fas fa-spinner fa-spin mr-2 text-teal-500"></i> <span class="font-medium">Memuat data...</span></div>',
                    lengthMenu: "Tampilkan _MENU_ data per halaman",
                    zeroRecords: '<div class="text-center py-8"><i class="fas fa-inbox text-gray-400 text-4xl mb-3"></i><p class="text-gray-600 dark:text-gray-400 font-medium">Data tidak ditemukan</p><p class="text-sm text-gray-500">Coba ubah filter atau kata kunci pencarian</p></div>',
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    search: "",
                    searchPlaceholder: "Cari nama, no. RM, kode...",
                    paginate: {
                        first: '<i class="fas fa-angle-double-left"></i>',
                        last: '<i class="fas fa-angle-double-right"></i>',
                        next: '<i class="fas fa-chevron-right"></i>',
                        previous: '<i class="fas fa-chevron-left"></i>'
                    }
                },
                pageLength: 10,
                lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
                order: [[4, 'desc']], // Sort by Waktu descending by default
                dom: '<"flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-3"lf>rt<"flex flex-col sm:flex-row justify-between items-center mt-4 gap-3"ip>',
                drawCallback: function() {
                    const info = this.api().page.info();
                    $('#tableInfo').text(`Menampilkan ${info.start + 1} sampai ${info.end} dari ${info.recordsTotal} data`);
                },
                initComplete: function() {
                    // Style search input
                    $('.dataTables_filter input')
                        .addClass('px-4 py-2 pl-10 border rounded-lg w-full sm:w-64 text-xs sm:text-sm')
                        .attr('placeholder', 'Cari nama, no. RM, kode...');
                    
                    // Style length select
                    $('.dataTables_length select')
                        .addClass('px-3 py-2 border rounded-lg text-xs sm:text-sm dropdown-appearance');
                }
            });

            // Filter actions - Auto redraw on change
            $('#kategoriFilter, #tanggalMulaiFilter, #tanggalSelesaiFilter').on('change', function() {
                // Check if any filter is active
                var isActive = $('#kategoriFilter').val() || $('#tanggalMulaiFilter').val() || $('#tanggalSelesaiFilter').val();
                if (isActive) {
                    $('#filterBadge').removeClass('hidden').addClass('inline-flex');
                } else {
                    $('#filterBadge').addClass('hidden').removeClass('inline-flex');
                }
                table.draw();
            });

            $('#btnResetFilter').on('click', function() {
                $('#kategoriFilter').val('');
                $('#tanggalMulaiFilter').val('');
                $('#tanggalSelesaiFilter').val('');
                $('#filterBadge').addClass('hidden').removeClass('inline-flex');
                table.draw();
            });
        });
    </script>
    <?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\KESEHATAN\resources\views/petugas/pemeriksaan/index.blade.php ENDPATH**/ ?>