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

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 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="ftmExportButtons" 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 style="width: 100px;">Action</th>
                                <th>No</th>
                                <th>Att ID</th>
                                <th>Pin</th>
                                <th>NIK HRIS</th>
                                <th>Name</th>
                                <th>Departemen</th>
                                <th>Grup</th>
                                <th>Tanggal</th>
                                <th>Jam Scan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows ?? [] as $row)
                                <tr>
                                    <td>
                                        <a href="{{ url($url_menu . '/detail/' . $row['id']) }}" class="btn btn-primary btn-sm mb-0">
                                            <i class="fas fa-eye me-1"></i>View
                                        </a>
                                    </td>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row['att_id'] ?? $row['id'] }}</td>
                                    <td>{{ $row['pin'] }}</td>
                                    <td>{{ $row['nik_hris'] ?? '-' }}</td>
                                    <td>{{ $row['name'] }}</td>
                                    <td>{{ $row['departemen'] }}</td>
                                    <td>{{ $row['nama_grup'] ?? '-' }}</td>
                                    <td>{{ \Carbon\Carbon::parse($row['tanggal'])->format('d/m/Y') }}</td>
                                    <td>{{ $row['jam_scan'] }}</td>
                                </tr>
                            @empty
                                {{-- DataTables akan menampilkan pesan zeroRecords --}}
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <code>Note : Data not active</code>
                </div>
            </div>
        </div>
    </div>

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

            $(document).ready(function() {
                console.log('Dmenu value: {{ $dmenu }}');
                console.log('Table ID: list_{{ $dmenu }}');
                console.log('Table exists:', $('#list_{{ $dmenu }}').length);
                console.log('Thead columns:', $('#list_{{ $dmenu }} thead th').length);
                console.log('Rows count:', $('#list_{{ $dmenu }} tbody tr').length);
                
                // Check if we have actual data rows (not just empty state with colspan)
                var hasColspanRow = $('#list_{{ $dmenu }} tbody tr:first td[colspan]').length > 0;
                
                // If empty state with colspan exists, remove it before initializing DataTables
                if (hasColspanRow) {
                    $('#list_{{ $dmenu }} tbody').empty();
                }
                
                if ($('#list_{{ $dmenu }}').length && $('#list_{{ $dmenu }} thead th').length > 0) {
                    try {
                        let table = $('#list_{{ $dmenu }}').DataTable({
                            "language": {
                                "emptyTable": "Data tidak ditemukan",
                                "zeroRecords": "Data tidak ditemukan",
                                "lengthMenu": "Tampilkan _MENU_ baris",
                                "info": "Data _START_ - _END_ dari _TOTAL_",
                                "infoEmpty": "Tidak ada data",
                                "infoFiltered": "(pencarian dari _MAX_ data)"
                            },
                            "columnDefs": [
                                { "orderable": false, "targets": 0 }
                            ]
                        });

                        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: 'Data FTM', exportOptions: { columns: ':not(:first-child)' } },
                                { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Data FTM', orientation: 'landscape', pageSize: 'A4', exportOptions: { columns: ':not(:first-child)' } },
                                { extend: 'print', text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print', title: 'Data FTM', exportOptions: { columns: ':not(:first-child)' } }
                            ]
                        });

                        table.buttons(0, null).container().appendTo('#ftmExportButtons');
                        applyMsjButtonStyle();
                        
                        // Hide "Tampilkan X baris" filter
                        $('#list_{{ $dmenu }}_length').hide();
                        
                        console.log('DataTables initialized successfully');
                    } catch (error) {
                        console.error('DataTables initialization error:', error);
                    }
                } else {
                    console.warn('DataTables not initialized - table structure issue');
                }
            });
        </script>
    @endpush
@endsection