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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Laporan Absensi 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 Absensi Karyawan Tahun {{ $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">
                        <!-- Charts Section -->
                        <div class="row px-4 pt-4">
                            <div class="col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">Grafik Persentase Kehadiran per Bulan</h6>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="attendanceChart" height="250"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">Grafik Total Ketidakhadiran per Bulan</h6>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="absenceChart" height="250"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive p-4">
                            <table id="employeeTable" class="table table-bordered table-striped" style="width:100%">
                                <thead>
                                    <tr>
                                        <th rowspan="3" style="width: 8%; vertical-align: middle; text-align: center;">
                                            BULAN</th>
                                        <th colspan="4" style="text-align: center;">JML KARYAWAN</th>
                                        <th colspan="5" style="text-align: center;">KETIDAKHADIRAN NON SHIFT</th>
                                        <th colspan="5" style="text-align: center;">KETIDAKHADIRAN SHIFT</th>
                                        <th rowspan="3" style="vertical-align: middle; text-align: center;">TOTAL
                                            KETIDAKHADIRAN</th>
                                        <th rowspan="3" style="vertical-align: middle; text-align: center;">PROSENTASE
                                            KETIDAK HADIRAN PER BULAN</th>
                                        <th rowspan="3" style="vertical-align: middle; text-align: center;">PROSENTASE
                                            KEHADIRAN PER BULAN</th>
                                    </tr>
                                    <tr>
                                        <th colspan="2" style="text-align: center;">MSJ</th>
                                        <th colspan="2" style="text-align: center;">OS</th>
                                        <th colspan="2" style="text-align: center;">CUTI</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">SAKIT</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">IZIN</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">MANGKIR</th>
                                        <th colspan="2" style="text-align: center;">CUTI</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">SAKIT</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">IZIN</th>
                                        <th rowspan="2" style="vertical-align: middle; text-align: center;">MANGKIR</th>
                                    </tr>
                                    <tr>
                                        <th style="text-align: center;">SHIFT</th>
                                        <th style="text-align: center;">NON SHIFT</th>
                                        <th style="text-align: center;">SHIFT</th>
                                        <th style="text-align: center;">NON SHIFT</th>
                                        <th style="text-align: center;">PRIBADI</th>
                                        <th style="text-align: center;">KHUSUS</th>
                                        <th style="text-align: center;">PRIBADI</th>
                                        <th style="text-align: center;">KHUSUS</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data akan diisi oleh DataTables dari JSON -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

        .text-center {
            text-align: center !important;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            // Data dari backend
            var reportData = @json($table_result);

            // =================================================================
            // PREPARE DATA FOR CHARTS
            // =================================================================
            var months = [];
            var attendancePercentages = [];
            var absencePercentages = [];
            var totalAbsences = [];

            reportData.forEach(function(row) {
                months.push(row.bulan);

                var totalKaryawan = row.jml_msj_shift + row.jml_msj_non_shift + row.jml_os_shift + row
                    .jml_os_non_shift;
                // Skip mangkir karena datanya kosong
                var totalAbsen = row.non_shift_cuti_pribadi + row.non_shift_cuti_khusus + row
                    .non_shift_cuti_sakit +
                    row.non_shift_izin +
                    row.shift_cuti_pribadi + row.shift_cuti_khusus + row.shift_sakit + row.shift_izin;

                var persentaseKehadiran = totalKaryawan === 0 ? 0 : ((totalKaryawan - totalAbsen) /
                    totalKaryawan) * 100;
                var persentaseKetidakhadiran = totalKaryawan === 0 ? 0 : (totalAbsen / totalKaryawan) * 100;

                attendancePercentages.push(persentaseKehadiran.toFixed(2));
                absencePercentages.push(persentaseKetidakhadiran.toFixed(2));
                totalAbsences.push(totalAbsen);
            });

            // =================================================================
            // ATTENDANCE CHART (Line Chart)
            // =================================================================
            var attendanceCtx = document.getElementById('attendanceChart').getContext('2d');
            var attendanceChart = new Chart(attendanceCtx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Persentase Kehadiran (%)',
                        data: attendancePercentages,
                        backgroundColor: 'rgba(0, 213, 181, 0.2)',
                        borderColor: 'rgba(0, 213, 181, 1)',
                        borderWidth: 3,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        pointBackgroundColor: 'rgba(0, 213, 181, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y + '%';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });

            // =================================================================
            // ABSENCE CHART (Bar Chart)
            // =================================================================
            var absenceCtx = document.getElementById('absenceChart').getContext('2d');
            var absenceChart = new Chart(absenceCtx, {
                type: 'bar',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Total Ketidakhadiran',
                        data: totalAbsences,
                        backgroundColor: 'rgba(255, 99, 132, 0.7)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y + ' hari';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // =================================================================
            // DATATABLE
            // =================================================================
            $('#employeeTable').DataTable({
                data: reportData,
                columns: [{
                        data: 'bulan'
                    },
                    {
                        data: 'jml_msj_shift',
                        className: 'text-center'
                    },
                    {
                        data: 'jml_msj_non_shift',
                        className: 'text-center'
                    },
                    {
                        data: 'jml_os_shift',
                        className: 'text-center'
                    },
                    {
                        data: 'jml_os_non_shift',
                        className: 'text-center'
                    },
                    {
                        data: 'non_shift_cuti_pribadi',
                        className: 'text-center'
                    },
                    {
                        data: 'non_shift_cuti_khusus',
                        className: 'text-center'
                    },
                    {
                        data: 'non_shift_cuti_sakit',
                        className: 'text-center'
                    },
                    {
                        data: 'non_shift_izin',
                        className: 'text-center'
                    },
                    {
                        data: 'non_shift_mangkir',
                        className: 'text-center',
                        render: function(data, type, row) {
                            // Tampilkan string kosong untuk mangkir karena belum ada data
                            return data === '' || data === null || data === undefined ? '' : data;
                        }
                    },
                    {
                        data: 'shift_cuti_pribadi',
                        className: 'text-center'
                    },
                    {
                        data: 'shift_cuti_khusus',
                        className: 'text-center'
                    },
                    {
                        data: 'shift_sakit',
                        className: 'text-center'
                    },
                    {
                        data: 'shift_izin',
                        className: 'text-center'
                    },
                    {
                        data: 'shift_mangkir',
                        className: 'text-center',
                        render: function(data, type, row) {
                            // Tampilkan string kosong untuk mangkir karena belum ada data
                            return data === '' || data === null || data === undefined ? '' : data;
                        }
                    },
                    { // Kolom Total Ketidakhadiran (dihitung)
                        className: 'text-center',
                        render: function(data, type, row) {
                            // Skip mangkir karena datanya kosong
                            return row.non_shift_cuti_pribadi + row.non_shift_cuti_khusus + row
                                .non_shift_cuti_sakit + row.non_shift_izin +
                                row.shift_cuti_pribadi + row.shift_cuti_khusus + row.shift_sakit +
                                row.shift_izin;
                        }
                    },
                    { // Kolom Prosentase Ketidakhadiran (dihitung)
                        className: 'text-center',
                        render: function(data, type, row) {
                            var totalKaryawan = row.jml_msj_shift + row.jml_msj_non_shift + row
                                .jml_os_shift + row.jml_os_non_shift;
                            // Skip mangkir karena datanya kosong
                            var totalAbsen = row.non_shift_cuti_pribadi + row
                                .non_shift_cuti_khusus + row.non_shift_cuti_sakit + row.non_shift_izin +
                                row.shift_cuti_pribadi + row.shift_cuti_khusus + row.shift_sakit +
                                row.shift_izin;
                            if (totalKaryawan === 0) return '0.00%';
                            var persentase = (totalAbsen / totalKaryawan) * 100;
                            return persentase.toFixed(2) + '%';
                        }
                    },
                    { // Kolom Prosentase Kehadiran (dihitung)
                        className: 'text-center',
                        render: function(data, type, row) {
                            var totalKaryawan = row.jml_msj_shift + row.jml_msj_non_shift + row
                                .jml_os_shift + row.jml_os_non_shift;
                            // Skip mangkir karena datanya kosong
                            var totalAbsen = row.non_shift_cuti_pribadi + row
                                .non_shift_cuti_khusus + row.non_shift_cuti_sakit + row.non_shift_izin +
                                row.shift_cuti_pribadi + row.shift_cuti_khusus + row.shift_sakit +
                                row.shift_izin;
                            if (totalKaryawan === 0) return '0.00%';
                            var persentase = ((totalKaryawan - totalAbsen) / totalKaryawan) * 100;
                            return persentase.toFixed(2) + '%';
                        }
                    }
                ],
                paging: false, // Disable paging karena hanya 12 bulan
                searching: false, // Disable search karena data sudah specific per tahun
                info: false, // Hide info
                ordering: false, // Disable ordering agar tetap urut Januari-Desember
            });

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

            // Export to Excel button
            $('#exportButton').on('click', function() {
                const tahun = '{{ $tahun }}';

                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('/rptorl-export-excel') }}'
                        });

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

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

                        $('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