@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">
                    <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 per Departemen ({{ $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">
                        <!-- Charts Section -->
                        <div class="row mb-4">
                            <div class="col-md-12 mb-4">
                                <div class="card">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">Grafik Rata-rata Persentase Kehadiran per Departemen</h6>
                                    </div>
                                    <div class="card-body">
                                        <div style="position: relative; height: 400px;">
                                            <canvas id="departmentAttendanceChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-header pb-0">
                                        <h6 class="mb-0">Grafik Rata-rata Ketidakhadiran per Tipe</h6>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="absenceTypeChart" 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">Trend Kehadiran per Bulan (Rata-rata Semua Departemen)</h6>
                                    </div>
                                    <div class="card-body">
                                        <canvas id="monthlyTrendChart" height="250"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="table-wrapper">
                            <div class="table-scroll">
                                <table id="reportTable" class="table table-bordered table-hover">
                                    <thead>
                                        <!-- Header rows will be generated dynamically by JavaScript -->
                                    </thead>
                                    <tbody>
                                        <!-- Data will be populated by DataTables from JSON -->
                                    </tbody>
                                    <tfoot>
                                        <!-- Footer rows will be generated dynamically by JavaScript -->
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        /* Table Wrapper untuk ScrollX */
        .table-wrapper {
            width: 100%;
            overflow: hidden;
            margin-top: 20px;
        }

        .table-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
        }

        /* Disable DataTables default scrollX wrapper yang konflik */
        .dataTables_wrapper .dataTables_scroll {
            overflow: visible !important;
        }

        .dataTables_wrapper .dataTables_scrollBody {
            overflow: visible !important;
        }

        table#reportTable {
            width: 100% !important;
            min-width: 100%;
            table-layout: auto;
            border-collapse: collapse;
            margin-bottom: 0 !important;
        }

        table#reportTable th,
        table#reportTable td {
            border: 1px solid #b0b0b0;
            text-align: center;
            padding: 8px 12px;
            vertical-align: middle;
            white-space: nowrap;
            min-width: 80px;
        }

        table#reportTable thead tr th {
            background-color: #00d5b5 !important;
            color: #ffffff !important;
            vertical-align: middle !important;
            font-weight: bold !important;
        }

        table#reportTable.table-bordered thead tr th {
            background-color: #00d5b5 !important;
            color: #ffffff !important;
        }

        table#reportTable tbody td:first-child,
        table#reportTable tbody td:nth-child(2) {
            text-align: left;
            background-color: #ffffff;
        }

        table#reportTable tbody td:nth-child(2) {
            min-width: 150px;
        }

        table#reportTable tfoot th {
            text-align: left;
            font-weight: bold;
            background-color: #e9e9e9 !important;
        }

        table#reportTable tfoot td {
            font-weight: bold;
            background-color: #f5f5f5 !important;
        }

        .highlight-hadir {
            background-color: #e6f7ff !important;
            font-weight: bold;
        }

        .summary-row th,
        .summary-row td {
            background-color: #d4edda !important;
            font-weight: bold;
        }

        .summary-per-bulan th,
        .summary-per-bulan td {
            background-color: #e9ecef !important;
            font-weight: bold;
        }

        /* Scrollbar styling */
        .table-scroll::-webkit-scrollbar {
            height: 12px;
        }

        .table-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .table-scroll::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .table-scroll::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Text utilities */
        .text-nowrap {
            white-space: nowrap !important;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {
            // =================================================================
            // DATA FROM BACKEND
            // =================================================================

            const months = @json($months);
            const departments = @json($departments);
            const reportData = @json($report_data);

            // Attendance types yang akan ditampilkan
            const attendanceTypes = ['sakit', 'cuti', 'izin', 'alpha'];
            const attendanceLabels = ['Sakit', 'Cuti', 'Ijin', 'Alpha'];

            // =================================================================
            // PREPARE DATA FOR CHARTS
            // =================================================================

            // 1. Calculate average attendance per department
            const departmentNames = [];
            const departmentAvgAttendance = [];

            reportData.forEach(dept => {
                departmentNames.push(dept.department_name);

                let totalAttendance = 0;
                let monthCount = 0;

                months.forEach(month => {
                    const monthData = dept.monthly_data[month] || {};
                    let totalAbsence = 0;

                    attendanceTypes.forEach(type => {
                        totalAbsence += parseFloat(monthData[type]) || 0;
                    });

                    const attendance = 100 - totalAbsence;
                    totalAttendance += attendance;
                    monthCount++;
                });

                const avgAttendance = monthCount > 0 ? totalAttendance / monthCount : 0;
                departmentAvgAttendance.push(avgAttendance.toFixed(2));
            });

            // 2. Calculate average absence by type (across all departments and months)
            const absenceByType = {
                sakit: 0,
                cuti: 0,
                izin: 0,
                alpha: 0
            };
            let totalDataPoints = 0;

            reportData.forEach(dept => {
                months.forEach(month => {
                    const monthData = dept.monthly_data[month] || {};
                    attendanceTypes.forEach(type => {
                        absenceByType[type] += parseFloat(monthData[type]) || 0;
                    });
                    totalDataPoints++;
                });
            });

            const avgAbsenceByType = attendanceTypes.map(type => {
                return (absenceByType[type] / totalDataPoints).toFixed(2);
            });

            // 3. Calculate monthly trend (average across all departments)
            const monthlyAvgAttendance = [];

            months.forEach(month => {
                let monthTotal = 0;
                let deptCount = 0;

                reportData.forEach(dept => {
                    const monthData = dept.monthly_data[month] || {};
                    let totalAbsence = 0;

                    attendanceTypes.forEach(type => {
                        totalAbsence += parseFloat(monthData[type]) || 0;
                    });

                    const attendance = 100 - totalAbsence;
                    monthTotal += attendance;
                    deptCount++;
                });

                const avgAttendance = deptCount > 0 ? monthTotal / deptCount : 0;
                monthlyAvgAttendance.push(avgAttendance.toFixed(2));
            });

            // =================================================================
            // CHART 1: Department Attendance (Vertical Bar Chart)
            // =================================================================
            const deptAttendanceCtx = document.getElementById('departmentAttendanceChart').getContext('2d');
            const deptAttendanceChart = new Chart(deptAttendanceCtx, {
                type: 'bar',
                data: {
                    labels: departmentNames,
                    datasets: [{
                        label: 'Rata-rata Kehadiran (%)',
                        data: departmentAvgAttendance,
                        backgroundColor: 'rgba(0, 213, 181, 0.7)',
                        borderColor: 'rgba(0, 213, 181, 1)',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    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 + '%';
                                }
                            },
                            grid: {
                                display: true,
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        x: {
                            ticks: {
                                autoSkip: false,
                                maxRotation: 45,
                                minRotation: 45,
                                font: {
                                    size: 11
                                }
                            },
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // =================================================================
            // CHART 2: Absence Type (Doughnut Chart)
            // =================================================================
            const absenceTypeCtx = document.getElementById('absenceTypeChart').getContext('2d');
            const absenceTypeChart = new Chart(absenceTypeCtx, {
                type: 'doughnut',
                data: {
                    labels: attendanceLabels,
                    datasets: [{
                        label: 'Rata-rata Ketidakhadiran (%)',
                        data: avgAbsenceByType,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(255, 206, 86, 0.7)',
                            'rgba(75, 192, 192, 0.7)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.label + ': ' + context.parsed + '%';
                                }
                            }
                        }
                    }
                }
            });

            // =================================================================
            // CHART 3: Monthly Trend (Line Chart)
            // =================================================================
            const monthlyTrendCtx = document.getElementById('monthlyTrendChart').getContext('2d');
            const monthlyTrendChart = new Chart(monthlyTrendCtx, {
                type: 'line',
                data: {
                    labels: months,
                    datasets: [{
                        label: 'Rata-rata Kehadiran (%)',
                        data: monthlyAvgAttendance,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 3,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        pointBackgroundColor: 'rgba(75, 192, 192, 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 + '%';
                                }
                            }
                        }
                    }
                }
            });

            // =================================================================
            // TRANSFORM DATA FOR DATATABLES
            // =================================================================

            const tableData = reportData.map((dept, index) => {
                let row = {
                    no: index + 1,
                    departemen: dept.department_name,
                    monthly_data: dept.monthly_data
                };
                return row;
            });

            // =================================================================
            // DYNAMIC TABLE GENERATION
            // =================================================================

            let headerRow1 =
                '<tr><th rowspan="2" style="background-color: #00d5b5 !important; color: #ffffff !important;">No</th><th rowspan="2" style="background-color: #00d5b5 !important; color: #ffffff !important;">Departemen</th>';
            let headerRow2 = '<tr>';
            let dtColumns = [{
                    data: 'no'
                },
                {
                    data: 'departemen'
                }
            ];

            months.forEach(month => {
                const typesCount = attendanceTypes.length + 1; // +1 for "% Hadir"
                headerRow1 +=
                    `<th colspan="${typesCount}" style="background-color: #00d5b5 !important; color: #ffffff !important;">${month} (%)</th>`;

                attendanceTypes.forEach((type, index) => {
                    headerRow2 +=
                        `<th style="background-color: #00d5b5 !important; color: #ffffff !important;">${attendanceLabels[index]}</th>`;
                    dtColumns.push({
                        data: `monthly_data.${month}.${type}`,
                        defaultContent: '',
                        render: function(data, type, row) {
                            // Untuk alpha, tampilkan string kosong jika tidak ada data
                            if (attendanceTypes[index] === 'alpha') {
                                if (type === 'display' || type === 'filter') {
                                    return data === '' || data === null || data ===
                                        undefined ? '' : parseFloat(data).toFixed(2) +
                                        '%';
                                }
                                return data === '' || data === null || data ===
                                    undefined ? 0 : parseFloat(data);
                            }

                            // Untuk tipe lainnya, tampilkan seperti biasa
                            if (type === 'display' || type === 'filter') {
                                const value = parseFloat(data) || 0;
                                return value.toFixed(2) + '%';
                            }
                            return parseFloat(data) || 0;
                        }
                    });
                });

                headerRow2 +=
                    `<th style="background-color: #00d5b5 !important; color: #ffffff !important;">% Hadir</th>`;
                dtColumns.push({
                    data: null,
                    className: 'highlight-hadir',
                    render: function(data, type, row) {
                        const monthData = row.monthly_data[month] || {};
                        let totalAbsen = 0;
                        attendanceTypes.forEach(attType => {
                            totalAbsen += parseFloat(monthData[attType]) || 0;
                        });
                        const hadir = 100 - totalAbsen;
                        if (type === 'display' || type === 'filter') {
                            return hadir.toFixed(2) + '%';
                        }
                        return hadir;
                    }
                });
            });

            headerRow1 += '</tr>';
            headerRow2 += '</tr>';

            // Generate Footer
            const totalColumns = dtColumns.length;
            let footerRow1 = `<tr class="summary-per-bulan"><th colspan="2">Rata-rata per bulan</th>`;
            for (let i = 2; i < totalColumns; i++) {
                footerRow1 += `<td></td>`;
            }
            footerRow1 += '</tr>';

            const summaryColspan = totalColumns - 2;
            let footerRow2 =
                `<tr class="summary-row"><th colspan="2">Rata-rata per ${months.length} bulan</th><td colspan="${summaryColspan}"></td></tr>`;
            let footerRow3 =
                `<tr class="summary-row"><th colspan="2">Rata-rata per tahun</th><td colspan="${summaryColspan}"></td></tr>`;

            // Inject generated HTML into the table
            $('#reportTable thead').html(headerRow1 + headerRow2);
            $('#reportTable tfoot').html(footerRow1 + footerRow2 + footerRow3);

            // =================================================================
            // DATATABLES INITIALIZATION
            // =================================================================

            const table = $('#reportTable').DataTable({
                data: tableData,
                columns: dtColumns,
                paging: false,
                searching: false,
                info: false,
                ordering: false,
                scrollX: false, // Disable DataTables scrollX, kita pakai wrapper sendiri
                autoWidth: false, // Disable auto width calculation
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                footerCallback: function(row, data, start, end, display) {
                    const api = this.api();

                    // Calculate average for each data column
                    for (let i = 2; i < totalColumns; i++) {
                        let pageTotal = 0;
                        let count = 0;

                        api.column(i).data().each(function(value, index) {
                            let numValue = 0;

                            // For calculated columns (% Hadir)
                            if (dtColumns[i].data === null) {
                                const currentMonthIndex = Math.floor((i - 2) / 5);
                                const currentMonth = months[currentMonthIndex];
                                const rowData = tableData[index];
                                const monthData = rowData.monthly_data[currentMonth] || {};

                                let totalAbsen = 0;
                                attendanceTypes.forEach(attType => {
                                    // Skip alpha karena datanya kosong
                                    if (attType !== 'alpha') {
                                        totalAbsen += parseFloat(monthData[attType]) ||
                                            0;
                                    }
                                });
                                numValue = 100 - totalAbsen;
                            } else {
                                // Skip alpha untuk perhitungan rata-rata
                                const columnType = dtColumns[i].data ? dtColumns[i].data.split(
                                    '.').pop() : '';
                                if (columnType === 'alpha') {
                                    numValue = 0; // Tidak dihitung dalam rata-rata
                                } else {
                                    numValue = parseFloat(value) || 0;
                                }
                            }

                            pageTotal += numValue;
                            count++;
                        });

                        const avg = count > 0 ? pageTotal / count : 0;

                        // Update footer for rata-rata per bulan
                        $(api.column(i).footer()).eq(0).html(avg.toFixed(2) + '%');
                    }

                    // Calculate rata-rata per X bulan (hanya dari kolom % Hadir)
                    let totalHadirAvg = 0;
                    let hadirColumnCount = 0;

                    months.forEach((month, monthIndex) => {
                        // Kolom % Hadir adalah kolom ke-5 dari setiap bulan (Sakit, Cuti, Ijin, Alpha, % Hadir)
                        const hadirColumnIndex = 2 + (monthIndex * 5) + 4;

                        let columnTotal = 0;
                        let rowCount = 0;

                        api.column(hadirColumnIndex).data().each(function(value, index) {
                            const rowData = tableData[index];
                            const monthData = rowData.monthly_data[month] || {};

                            let totalAbsen = 0;
                            attendanceTypes.forEach(attType => {
                                // Skip alpha karena datanya kosong
                                if (attType !== 'alpha') {
                                    totalAbsen += parseFloat(monthData[
                                        attType]) || 0;
                                }
                            });
                            const hadir = 100 - totalAbsen;

                            columnTotal += hadir;
                            rowCount++;
                        });

                        const avgHadir = rowCount > 0 ? columnTotal / rowCount : 0;
                        totalHadirAvg += avgHadir;
                        hadirColumnCount++;
                    });

                    const overallAvg = hadirColumnCount > 0 ? totalHadirAvg / hadirColumnCount : 0;

                    $(`.summary-row:eq(0) td`).html(overallAvg.toFixed(2) + '%');
                    $(`.summary-row:eq(1) td`).html('');
                }
            });

            // Export to Excel button
            $('#exportButton').on('click', function() {
                const quartal = '{{ request()->input('quartal') }}';

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

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

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

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