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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Laporan Rekap Cuti & Izin Karyawan'])

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">

                        <h6 class="mb-0">
                            Laporan Rekap Cuti & Izin Karyawan - {{ $bulan_tahun }}
                        </h6>

                        <div class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto">

                            <button type="button"
                                id="exportButton"
                                class="btn btn-sm btn-success w-100 w-md-auto">

                                <i class="fas fa-file-excel me-1"></i>
                                Export to Excel
                            </button>

                            <button type="button"
                                id="backButton"
                                class="btn btn-sm btn-outline-primary w-100 w-md-auto">

                                <i class="fas fa-arrow-left me-1"></i>
                                Kembali
                            </button>

                        </div>

                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-4">
                            <table id="reportTable" class="table table-bordered table-hover align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">NIK</th>
                                        <th class="text-center">Nama</th>
                                        <th class="text-center">Departemen</th>
                                        <th class="text-center">Cuti Pribadi</th>
                                        <th class="text-center">Cuti Sakit</th>
                                        <th class="text-center">Cuti Khusus</th>
                                        <th class="text-center">Total Cuti</th>
                                        <th class="text-center">Izin</th>
                                        <th class="text-center">Tugas</th>
                                        <th class="text-center">Total Izin</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be populated by DataTables via AJAX -->
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="4" class="text-end">Total:</th>
                                        <th class="text-center" id="footer-cuti-pribadi">0</th>
                                        <th class="text-center" id="footer-cuti-sakit">0</th>
                                        <th class="text-center" id="footer-cuti-khusus">0</th>
                                        <th class="text-center" id="footer-total-cuti">0</th>
                                        <th class="text-center" id="footer-izin">0</th>
                                        <th class="text-center" id="footer-tugas">0</th>
                                        <th class="text-center" id="footer-total-izin">0</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        #reportTable thead th {
            vertical-align: middle;
            background-color: #00d5b5 !important;
            color: #ffffff !important;
            font-size: 0.875rem;
            font-weight: 600;
            text-align: center;
        }

        #reportTable tbody td {
            vertical-align: middle;
        }

        #reportTable tfoot th {
            background-color: #e9ecef !important;
            font-weight: bold;
        }

        .table-responsive {
            overflow-x: auto;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            const bulanTahun = '{{ $bulan_tahun }}';

            // Initialize DataTable with AJAX
            const table = $('#reportTable').DataTable({
                processing: true,
                serverSide: false,
                ajax: {
                    url: '{{ url('/rptork-fetch-data') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        bulan_tahun: bulanTahun
                    },
                    dataSrc: 'data'
                },
                columns: [{
                        data: null,
                        className: 'text-center',
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'nik',
                        className: 'text-center'
                    },
                    {
                        data: 'nama',
                        className: 'text-start'
                    },
                    {
                        data: 'departemen',
                        className: 'text-start'
                    },
                    {
                        data: 'cuti_pribadi',
                        className: 'text-center'
                    },
                    {
                        data: 'cuti_sakit',
                        className: 'text-center'
                    },
                    {
                        data: 'cuti_khusus',
                        className: 'text-center'
                    },
                    {
                        data: 'total_cuti',
                        className: 'text-center'
                    },
                    {
                        data: 'izin',
                        className: 'text-center'
                    },
                    {
                        data: 'tugas',
                        className: 'text-center'
                    },
                    {
                        data: 'total_izin',
                        className: 'text-center'
                    }
                ],
                pageLength: 25,
                order: [
                    [3, 'asc'],
                    [2, 'asc']
                ], // Sort by departemen, then nama
                language: {
                    processing: "Memuat data...",
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data per halaman",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(difilter dari _MAX_ total data)",
                    zeroRecords: "Tidak ada data yang ditemukan",
                    emptyTable: "Tidak ada data yang tersedia",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }
                },
                drawCallback: function() {
                    // Calculate totals for footer
                    const api = this.api();

                    let totalCutiPribadi = 0;
                    let totalCutiSakit = 0;
                    let totalCutiKhusus = 0;
                    let totalCuti = 0;
                    let totalIzin = 0;
                    let totalTugas = 0;
                    let totalIzinCount = 0;

                    api.rows({
                        search: 'applied'
                    }).every(function() {
                        const data = this.data();
                        totalCutiPribadi += parseInt(data.cuti_pribadi) || 0;
                        totalCutiSakit += parseInt(data.cuti_sakit) || 0;
                        totalCutiKhusus += parseInt(data.cuti_khusus) || 0;
                        totalCuti += parseInt(data.total_cuti) || 0;
                        totalIzin += parseInt(data.izin) || 0;
                        totalTugas += parseInt(data.tugas) || 0;
                        totalIzinCount += parseInt(data.total_izin) || 0;
                    });

                    // Update footer
                    $('#footer-cuti-pribadi').html(totalCutiPribadi);
                    $('#footer-cuti-sakit').html(totalCutiSakit);
                    $('#footer-cuti-khusus').html(totalCutiKhusus);
                    $('#footer-total-cuti').html(totalCuti);
                    $('#footer-izin').html(totalIzin);
                    $('#footer-tugas').html(totalTugas);
                    $('#footer-total-izin').html(totalIzinCount);
                }
            });

            // Back button
            $('#backButton').on('click', function() {
                window.history.back();
            });

            // Export to Excel button
            $('#exportButton').on('click', function() {
                Swal.fire({
                    title: 'Export to Excel',
                    text: 'Apakah Anda yakin ingin mengekspor laporan ini ke Excel?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Export!',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#00d5b5',
                    cancelButtonColor: '#d33'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Sedang memproses...',
                            text: 'Mohon tunggu sebentar',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Create form and submit
                        const form = $('<form>', {
                            'method': 'POST',
                            'action': '{{ url('/rptork-export-excel') }}'
                        });

                        form.append($('<input>', {
                            'type': 'hidden',
                            'name': '_token',
                            'value': '{{ csrf_token() }}'
                        }));

                        form.append($('<input>', {
                            'type': 'hidden',
                            'name': 'bulan_tahun',
                            'value': bulanTahun
                        }));

                        $('body').append(form);
                        form.submit();

                        // Close loading after a short delay
                        setTimeout(() => {
                            Swal.close();
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil!',
                                text: 'File Excel berhasil diunduh',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }, 1500);
                    }
                });
            });
        });
    </script>
@endpush