@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 Klarifikasi</h4>
                <hr class="horizontal dark mt-0">

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

                <div id="klarExportButtons" 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>Nama Karyawan</th>
                                <th>Departemen</th>
                                <th>Grup</th>
                                <th>Shift</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>Istirahat</th>
                                <th>Status</th>
                                <th>Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row['tanggal'] }}</td>
                                    <td>{{ $row['nik'] }}</td>
                                    <td>{{ $row['nama_karyawan'] }}</td>
                                    <td>{{ $row['departemen'] }}</td>
                                    <td>{{ $row['nama_grup'] }}</td>
                                    <td>{{ $row['shift'] ?? '-' }}</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['istirahat'] ?? '-' }}</td>
                                    <td>
                                        {{ $row['status'] ?? '-' }}
                                    </td>
                                    <td>{{ $row['keterangan'] ?? '-' }}</td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function applyMsjButtonStyle() {
                $('#klarExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#klarExportButtons .dt-button').removeClass('dt-button');
            }

            $(document).ready(function() {
                let table = $('#list_{{ $dmenu }}').DataTable();

                new $.fn.dataTable.Buttons(table, {
                    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 Klarifikasi' },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap Klarifikasi', 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 Klarifikasi' }
                    ]
                });

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