@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

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

    <div class="container-fluid py-3">
        <div class="card shadow-sm">
            <div class="card-body p-3">
                <h4 class="text-dark font-weight-bold mb-3">List Rekap Data Missing</h4>
                <hr class="horizontal dark mt-0">

                <div class="mb-2">
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>
                        Kembali
                    </button>
                </div>

                <div id="missingExportButtons" class="d-flex gap-2 flex-wrap mb-2"></div>

                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0" id="list_{{ $dmenu }}">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>No</th>
                                <th>Tanggal</th>
                                <th>NIK</th>
                                <th>Shift</th>
                                <th>Nama Karyawan</th>
                                <th>Departemen</th>
                                <th>Grup</th>
                                <th>Jam Masuk</th>
                                <th>Scan Masuk</th>
                                <th>Terlambat</th>
                                <th>Jam Keluar</th>
                                <th>Scan Keluar</th>
                                <th>Pulang Cepat</th>
                                <th>Status Awal</th>
                                <th>Status Final</th>
                                <th>Keterangan</th>
                                <th>Tgl Konfirmasi</th>
                                <th>Dikonfirmasi Oleh</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (($rows ?? []) as $row)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $row['tanggal'] }}</td>
                            <td>{{ $row['nik'] }}</td>
                            <td>{{ $row['shift'] }}</td>
                            <td>{{ $row['nama_karyawan'] }}</td>
                            <td>{{ $row['departemen'] ?? '-' }}</td>
                            <td>{{ $row['nama_grup'] ?? '-' }}</td>
                            <td>{{ $row['jam_masuk'] ?? '-' }}</td>
                            <td>{{ $row['scan_masuk'] ?? '-' }}</td>
                            <td>{{ $row['terlambat'] ?? '-' }}</td>
                            <td>{{ $row['jam_keluar'] ?? '-' }}</td>
                            <td>{{ $row['scan_keluar'] ?? '-' }}</td>
                            <td>{{ $row['pulang_cepat'] ?? '-' }}</td>
                            <td>{!! $row['status_awal'] ?? '-' !!}</td>
                            <td>{!! $row['status'] ?? '-' !!}</td>
                            <td>{!! $row['keterangan'] ?? '-' !!}</td>
                            <td>{!! $row['tgl_konfirmasi'] ?? '-' !!}</td>
                            <td>{{ $row['dikonfirmasi_oleh'] ?? '-' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

                <div class="mt-3"></div>
            </div>
        </div>
    </div>

    @push('js')
        <style>
            /* No custom styles needed, using DataTables default positioning */
        </style>
        <script>
            let missingTable = null;

            function applyMsjButtonStyle() {
                $('#missingExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#missingExportButtons .dt-button').removeClass('dt-button');
            }

            $(document).ready(function() {
                missingTable = $('#list_{{ $dmenu }}').DataTable({
                    order: [],
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Maaf - Data tidak ada',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    responsive: true,
                    drawCallback: function() {
                        $('#list_{{ $dmenu }} tbody td').each(function() {
                            var cellText = $(this).text().trim();
                            if (cellText === '-') {
                                $(this).css('text-align', 'center');
                            }
                        });
                    }
                });

                new $.fn.dataTable.Buttons(missingTable, {
                    buttons: [
                        { extend: 'excelHtml5', text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel', title: 'Rekap Data Missing' },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap Data Missing', orientation: 'landscape', pageSize: 'A4' },
                        { extend: 'print', text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print', title: 'Rekap Data Missing' }
                    ]
                });

                missingTable.buttons(0, null).container().appendTo('#missingExportButtons');
                applyMsjButtonStyle();
                $('#list_{{ $dmenu }}_length').hide();
            });
        </script>
    @endpush
@endsection