@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 HRIS</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="hrisExportButtons" 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 Disetujui</th>
                                <th>Tanggal Mulai</th>
                                <th>Tanggal Akhir</th>
                                <th>NIK</th>
                                <th>Nama Karyawan</th>
                                <th>Departemen</th>
                                <th>Keterangan HRIS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                     <td>{{ \Carbon\Carbon::parse($row['tanggal_disetujui'] ?: $row['tanggal'])->format('d/m/Y') }}</td>
                                     <td>{{ !empty($row['tanggal_mulai']) ? \Carbon\Carbon::parse($row['tanggal_mulai'])->format('d/m/Y') : '-' }}</td>
                                     <td>{{ !empty($row['tanggal_akhir']) ? \Carbon\Carbon::parse($row['tanggal_akhir'])->format('d/m/Y') : '-' }}</td>
                                    <td>{{ $row['nik'] }}</td>
                                    <td>{{ $row['nama_karyawan'] }}</td>
                                    <td>{{ $row['departemen'] }}</td>
                                    <td>{{ $row['keterangan'] ?? '-' }}</td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <style>
            /* No custom styles needed, using DataTables default positioning */
        </style>
        <script>
            function applyMsjButtonStyle() {
                $('#hrisExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#hrisExportButtons .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 HRIS' },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap HRIS', 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 HRIS' }
                    ]
                });

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