@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 Tukar Jadwal</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="tukjExportButtons" 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>Tgl Pengajuan</th>
                                <th>NIK Pengaju</th>
                                <th>Nama Pengaju</th>
                                <th>Departemen</th>
                                <th>Shift Asal</th>
                                <th>Grup Asal</th>
                                <th>NIK Ditukar</th>
                                <th>Nama Ditukar</th>
                                <th>Departemen Ditukar</th>
                                <th>Shift Tujuan</th>
                                <th>Grup Tujuan</th>
                                <th>Tgl Tukar</th>
                                <th>Alasan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row['tanggal_pengajuan'] }}</td>
                                    <td>{{ $row['nik_pengaju'] }}</td>
                                    <td>{{ $row['nama_pengaju'] }}</td>
                                    <td>{{ $row['departemen_pengaju'] }}</td>
                                    <td>{{ $row['shift_asal_desc'] }}</td>
                                    <td>{{ $row['grub_asal_desc'] ?? '-' }}</td>
                                    <td>{{ $row['nik_ditukar'] }}</td>
                                    <td>{{ $row['nama_ditukar'] }}</td>
                                    <td>{{ $row['departemen_ditukar'] }}</td>
                                    <td>{{ $row['shift_tujuan_desc'] }}</td>
                                    <td>{{ $row['grub_tujuan_desc'] ?? '-' }}</td>
                                    <td>{{ $row['tanggal_tukar'] }}</td>
                                    <td>{{ $row['alasan'] ?: '-' }}</td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function applyMsjButtonStyle() {
                $('#tukjExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#tukjExportButtons .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 Tukar Jadwal' },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap Tukar Jadwal', 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 Tukar Jadwal' }
                    ]
                });

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