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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        <img src="{{ asset('img/logo-spunindo-tbk.jpg') }}" alt="report icon"
                            class="w-100 border-radius-lg shadow-sm">
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">{{ $title_menu }}</h5>
                        <p class="mb-0 font-weight-bold text-sm">Result Data</p>
                    </div>
                </div>
                <div class="col text-end">
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>Kembali
                    </button>
                    <button class="btn btn-success mb-0" onclick="generateExcel()">
                        <i class="fas fa-file-excel me-1"></i>Export Excel
                    </button>
                    <button class="btn btn-danger mb-0" onclick="generatePDF()">
                        <i class="fas fa-file-pdf me-1"></i>Export PDF
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="card">
            <div class="table-responsive px-3 pt-3 pb-2">
                <table class="table table-bordered align-items-center mb-0" id="tabel-detail-menu">
                    <thead>
                        <tr class="bg-success text-white text-center">
                            <th rowspan="2">No</th>
                            <th rowspan="2">Catering</th>
                            <th rowspan="2">Tanggal</th>
                            <th rowspan="2">Shift</th>
                            <th rowspan="2">Menu</th>
                            <th colspan="3">Karbo</th>
                            <th colspan="3">Lauk Utama</th>
                            <th colspan="3">Sayur</th>
                            <th colspan="3">Pendamping</th>
                            <th colspan="3">Lainnya</th>
                            <th rowspan="2">Total Berat (gram)</th>
                            <th rowspan="2">Total Gizi (kkal)</th>
                        </tr>
                        <tr class="bg-success text-white text-center">
                            <th>Jenis</th>
                            <th>Berat (gr)</th>
                            <th>Gizi (kkal)</th>
                            <th>Jenis</th>
                            <th>Berat (gr)</th>
                            <th>Gizi (kkal)</th>
                            <th>Jenis</th>
                            <th>Berat (gr)</th>
                            <th>Gizi (kkal)</th>
                            <th>Jenis</th>
                            <th>Berat (gr)</th>
                            <th>Gizi (kkal)</th>
                            <th>Jenis</th>
                            <th>Berat (gr)</th>
                            <th>Gizi (kkal)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($table_result as $key => $row)
                            @php
                                // Hitung gizi per kategori
                                $karboBerat = is_numeric($row->Karbo_Berat ?? 0) ? (float)$row->Karbo_Berat : 0;
                                $karboGiziPer100 = is_numeric($row->Karbo_Gizi ?? 0) ? (float)$row->Karbo_Gizi : 0;
                                $karboGizi = ($karboGiziPer100 * $karboBerat) / 100;
                                
                                $lktamaBerat = is_numeric($row->Lktama_Berat ?? 0) ? (float)$row->Lktama_Berat : 0;
                                $lktamaGiziPer100 = is_numeric($row->Lktama_Gizi ?? 0) ? (float)$row->Lktama_Gizi : 0;
                                $lktamaGizi = ($lktamaGiziPer100 * $lktamaBerat) / 100;
                                
                                $sayurBerat = is_numeric($row->Sayur_Berat ?? 0) ? (float)$row->Sayur_Berat : 0;
                                $sayurGiziPer100 = is_numeric($row->Sayur_Gizi ?? 0) ? (float)$row->Sayur_Gizi : 0;
                                $sayurGizi = ($sayurGiziPer100 * $sayurBerat) / 100;
                                
                                $totalBerat = $karboBerat + $lktamaBerat + $sayurBerat;
                                $totalGizi = $karboGizi + $lktamaGizi + $sayurGizi;
                                
                                // Handle multiple values (Lkpen & Lain)
                                $lkpenGiziArr = [];
                                if (!empty($row->Lkpen_Berat)) {
                                    $berats = explode("\n", $row->Lkpen_Berat);
                                    $gizis = !empty($row->Lkpen_Gizi) ? explode("\n", $row->Lkpen_Gizi) : [];
                                    foreach ($berats as $i => $b) {
                                        $bVal = is_numeric(trim($b)) ? (float)trim($b) : 0;
                                        $gVal = isset($gizis[$i]) && is_numeric(trim($gizis[$i])) ? (float)trim($gizis[$i]) : 0;
                                        $gCalc = ($gVal * $bVal) / 100;
                                        $lkpenGiziArr[] = number_format($gCalc, 2, '.', '');
                                        $totalBerat += $bVal;
                                        $totalGizi += $gCalc;
                                    }
                                }
                                
                                $lainGiziArr = [];
                                if (!empty($row->Lain_Berat)) {
                                    $berats = explode("\n", $row->Lain_Berat);
                                    $gizis = !empty($row->Lain_Gizi) ? explode("\n", $row->Lain_Gizi) : [];
                                    foreach ($berats as $i => $b) {
                                        $bVal = is_numeric(trim($b)) ? (float)trim($b) : 0;
                                        $gVal = isset($gizis[$i]) && is_numeric(trim($gizis[$i])) ? (float)trim($gizis[$i]) : 0;
                                        $gCalc = ($gVal * $bVal) / 100;
                                        $lainGiziArr[] = number_format($gCalc, 2, '.', '');
                                        $totalBerat += $bVal;
                                        $totalGizi += $gCalc;
                                    }
                                }
                            @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $row->Catering }}</td>
                                <td>{{ \Carbon\Carbon::parse($row->Tanggal)->format('d/m/Y') }}</td>
                                <td>{{ $row->Shift }}</td>
                                <td>{{ $row->Menu }}</td>

                                <td>{{ $row->Karbo_Jenis ?? '-' }}</td>
                                <td>{{ $row->Karbo_Berat ?? '-' }}</td>
                                <td>{{ $karboBerat > 0 ? number_format($karboGizi, 2, '.', '') : '-' }}</td>

                                <td>{{ $row->Lktama_Jenis ?? '-' }}</td>
                                <td>{{ $row->Lktama_Berat ?? '-' }}</td>
                                <td>{{ $lktamaBerat > 0 ? number_format($lktamaGizi, 2, '.', '') : '-' }}</td>

                                <td>{{ $row->Sayur_Jenis ?? '-' }}</td>
                                <td>{{ $row->Sayur_Berat ?? '-' }}</td>
                                <td>{{ $sayurBerat > 0 ? number_format($sayurGizi, 2, '.', '') : '-' }}</td>

                                <td>{!! nl2br(e($row->Lkpen_Jenis ?? '-')) !!}</td>
                                <td>{!! nl2br(e($row->Lkpen_Berat ?? '-')) !!}</td>
                                <td>{!! !empty($lkpenGiziArr) ? nl2br(e(implode("\n", $lkpenGiziArr))) : '-' !!}</td>
                                
                                <td>{!! nl2br(e($row->Lain_Jenis ?? '-')) !!}</td>
                                <td>{!! nl2br(e($row->Lain_Berat ?? '-')) !!}</td>
                                <td>{!! !empty($lainGiziArr) ? nl2br(e(implode("\n", $lainGiziArr))) : '-' !!}</td>
                                
                                <td class="text-end fw-bold">{{ number_format($totalBerat, 0, ',', '.') }}</td>
                                <td class="text-end fw-bold">{{ number_format($totalGizi, 2, '.', '') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    
    <style>
        #tabel-detail-menu th, #tabel-detail-menu td { padding: 8px 12px !important; }
        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin: 10px 0; }
        .dataTables_wrapper select, .dataTables_wrapper input[type="search"] { 
            padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; 
        }
    </style>
    
    <script>
        const tableData = @json($table_result);
        const logoBase64 = @json($logo);

        $(document).ready(function() {
            $('#tabel-detail-menu').DataTable({
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
                    infoFiltered: "(pencarian dari _MAX_ data)",
                },
                lengthMenu: [10, 25, 50, 100, 200],
                pageLength: 10,
                ordering: false,
                responsive: true,
            });
        });

        // Fungsi global untuk hitung total
        function calculateTotals(row) {
            let totalBerat = 0, totalGizi = 0;
            
            const hitungGizi = (berat, gizi) => {
                const b = parseFloat(berat) || 0;
                const g = parseFloat(gizi) || 0;
                return (g * b) / 100;
            };
            
            // Karbo, Lauk Utama, Sayur
            totalBerat += parseFloat(row.Karbo_Berat) || 0;
            totalGizi += hitungGizi(row.Karbo_Berat, row.Karbo_Gizi);
            
            totalBerat += parseFloat(row.Lktama_Berat) || 0;
            totalGizi += hitungGizi(row.Lktama_Berat, row.Lktama_Gizi);
            
            totalBerat += parseFloat(row.Sayur_Berat) || 0;
            totalGizi += hitungGizi(row.Sayur_Berat, row.Sayur_Gizi);
            
            // Lkpen & Lain (multiple values)
            ['Lkpen', 'Lain'].forEach(type => {
                if (row[`${type}_Berat`]) {
                    const berats = row[`${type}_Berat`].toString().split('\n');
                    const gizis = row[`${type}_Gizi`] ? row[`${type}_Gizi`].toString().split('\n') : [];
                    berats.forEach((b, i) => {
                        const bVal = parseFloat(b.trim()) || 0;
                        const gVal = parseFloat(gizis[i]?.trim()) || 0;
                        totalBerat += bVal;
                        totalGizi += (gVal * bVal) / 100;
                    });
                }
            });
            
            return { totalBerat, totalGizi };
        }

        // Fungsi untuk format gizi per item
        function formatGiziArray(beratStr, giziStr) {
            if (!beratStr) return '-';
            const berats = beratStr.toString().split('\n');
            const gizis = giziStr ? giziStr.toString().split('\n') : [];
            return berats.map((b, i) => {
                const bVal = parseFloat(b.trim()) || 0;
                const gVal = parseFloat(gizis[i]?.trim()) || 0;
                return ((gVal * bVal) / 100).toFixed(2);
            }).join('\n');
        }

        async function generateExcel() {
            try {
                const wb = new ExcelJS.Workbook();
                const ws = wb.addWorksheet('Report Detail Menu');
                
                ws.columns = [
                    { width: 6 }, { width: 22 }, { width: 15 }, { width: 8 }, { width: 25 }, 
                    { width: 18 }, { width: 10 }, { width: 10 }, { width: 18 }, { width: 10 }, 
                    { width: 10 }, { width: 18 }, { width: 10 }, { width: 10 }, { width: 20 }, 
                    { width: 10 }, { width: 10 }, { width: 20 }, { width: 10 }, { width: 10 },
                    { width: 15 }, { width: 15 }
                ];
                
                if (logoBase64) {
                    const imageId = wb.addImage({ base64: logoBase64, extension: 'png' });
                    ws.addImage(imageId, { tl: { col: 9.5, row: 0.2 }, ext: { width: 110, height: 50 } });
                }
                
                ws.getRow(1).height = 60;
                ws.mergeCells('A2:V4');
                ws.getCell('A2').value = 'Report Detail Menu';
                ws.getCell('A2').font = { bold: true, size: 22 };
                ws.getCell('A2').alignment = { horizontal: 'center', vertical: 'middle' };

                const headerStyle = {
                    font: { bold: true, size: 10 },
                    fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE0E0E0' } },
                    alignment: { horizontal: 'center', vertical: 'middle', wrapText: true },
                    border: { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'} }
                };

                // Headers
                ws.getRow(5).values = ['No', 'Catering', 'Tanggal', 'Shift', 'Menu', 
                    'Karbo', '', '', 'Lauk Utama', '', '', 'Sayur', '', '', 
                    'Pendamping', '', '', 'Lainnya', '', '', 'Total Berat (gram)', 'Total Gizi (kkal)'];
                ws.getRow(6).values = ['', '', '', '', '', 
                    'Jenis', 'Berat (gr)', 'Gizi (kkal)', 'Jenis', 'Berat (gr)', 'Gizi (kkal)', 
                    'Jenis', 'Berat (gr)', 'Gizi (kkal)', 'Jenis', 'Berat (gr)', 'Gizi (kkal)', 
                    'Jenis', 'Berat (gr)', 'Gizi (kkal)', '', ''];
                
                [5, 6].forEach(r => {
                    for (let i = 1; i <= 22; i++) ws.getCell(r, i).style = headerStyle;
                });

                ['A5:A6', 'B5:B6', 'C5:C6', 'D5:D6', 'E5:E6', 
                 'F5:H5', 'I5:K5', 'L5:N5', 'O5:Q5', 'R5:T5', 'U5:U6', 'V5:V6'].forEach(m => ws.mergeCells(m));

                // Data rows
                tableData.forEach((row, idx) => {
                    const totals = calculateTotals(row);
                    const dataRow = ws.addRow([
                        idx + 1, row.Catering, new Date(row.Tanggal).toLocaleDateString('id-ID'),
                        row.Shift, row.Menu,
                        row.Karbo_Jenis || '-', row.Karbo_Berat || '-', 
                        parseFloat(row.Karbo_Berat) > 0 ? (((parseFloat(row.Karbo_Gizi)||0) * parseFloat(row.Karbo_Berat)) / 100).toFixed(2) : '-',
                        row.Lktama_Jenis || '-', row.Lktama_Berat || '-',
                        parseFloat(row.Lktama_Berat) > 0 ? (((parseFloat(row.Lktama_Gizi)||0) * parseFloat(row.Lktama_Berat)) / 100).toFixed(2) : '-',
                        row.Sayur_Jenis || '-', row.Sayur_Berat || '-',
                        parseFloat(row.Sayur_Berat) > 0 ? (((parseFloat(row.Sayur_Gizi)||0) * parseFloat(row.Sayur_Berat)) / 100).toFixed(2) : '-',
                        row.Lkpen_Jenis || '-', row.Lkpen_Berat || '-', formatGiziArray(row.Lkpen_Berat, row.Lkpen_Gizi),
                        row.Lain_Jenis || '-', row.Lain_Berat || '-', formatGiziArray(row.Lain_Berat, row.Lain_Gizi),
                        totals.totalBerat, totals.totalGizi.toFixed(2)
                    ]);

                    dataRow.eachCell((cell, colNum) => {
                        cell.border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'} };
                        cell.alignment = { vertical: 'middle', wrapText: true };
                        if ([1,3,4].includes(colNum)) cell.alignment.horizontal = 'center';
                        else if ([7,8,10,11,13,14,16,17,19,20,21,22].includes(colNum)) {
                            cell.alignment.horizontal = 'right';
                            if ([21,22].includes(colNum)) cell.font = { bold: true };
                        }
                    });
                });

                const buffer = await wb.xlsx.writeBuffer();
                saveAs(new Blob([buffer]), `Report_Detail_Menu_${new Date().toISOString().split('T')[0]}.xlsx`);
            } catch (error) {
                console.error(error);
                alert('Gagal mengekspor Excel.');
            }
        }
        
        function generatePDF() {
            const tableHeader = [
                [
                    { text: 'No', rowSpan: 2, style: 'h' },
                    { text: 'Catering', rowSpan: 2, style: 'h' },
                    { text: 'Tanggal', rowSpan: 2, style: 'h' },
                    { text: 'Shift', rowSpan: 2, style: 'h' },
                    { text: 'Menu', rowSpan: 2, style: 'h' },
                    { text: 'Karbo', colSpan: 3, style: 'h' }, {}, {},
                    { text: 'Lauk Utama', colSpan: 3, style: 'h' }, {}, {},
                    { text: 'Sayur', colSpan: 3, style: 'h' }, {}, {},
                    { text: 'Pendamping', colSpan: 3, style: 'h' }, {}, {},
                    { text: 'Lainnya', colSpan: 3, style: 'h' }, {}, {},
                    { text: 'Total Berat (gr)', rowSpan: 2, style: 'h' },
                    { text: 'Total Gizi (kkal)', rowSpan: 2, style: 'h' }
                ],
                [{}, {}, {}, {}, {},
                    { text: 'Jenis', style: 'h' }, { text: 'Berat (gr)', style: 'h' }, { text: 'Gizi (kkal)', style: 'h' },
                    { text: 'Jenis', style: 'h' }, { text: 'Berat (gr)', style: 'h' }, { text: 'Gizi (kkal)', style: 'h' },
                    { text: 'Jenis', style: 'h' }, { text: 'Berat (gr)', style: 'h' }, { text: 'Gizi (kkal)', style: 'h' },
                    { text: 'Jenis', style: 'h' }, { text: 'Berat (gr)', style: 'h' }, { text: 'Gizi (kkal)', style: 'h' },
                    { text: 'Jenis', style: 'h' }, { text: 'Berat (gr)', style: 'h' }, { text: 'Gizi (kkal)', style: 'h' },
                    {}, {}
                ]
            ];

            const tableBody = tableData.map((row, idx) => {
                const totals = calculateTotals(row);
                return [
                    { text: idx + 1, alignment: 'center' },
                    row.Catering,
                    { text: new Date(row.Tanggal).toLocaleDateString('id-ID'), alignment: 'right' },
                    { text: row.Shift, alignment: 'center' },
                    row.Menu,
                    row.Karbo_Jenis || '-',
                    { text: row.Karbo_Berat || '-', alignment: 'right' },
                    { text: parseFloat(row.Karbo_Berat) > 0 ? (((parseFloat(row.Karbo_Gizi)||0) * parseFloat(row.Karbo_Berat)) / 100).toFixed(2) : '-', alignment: 'right' },
                    row.Lktama_Jenis || '-',
                    { text: row.Lktama_Berat || '-', alignment: 'right' },
                    { text: parseFloat(row.Lktama_Berat) > 0 ? (((parseFloat(row.Lktama_Gizi)||0) * parseFloat(row.Lktama_Berat)) / 100).toFixed(2) : '-', alignment: 'right' },
                    row.Sayur_Jenis || '-',
                    { text: row.Sayur_Berat || '-', alignment: 'right' },
                    { text: parseFloat(row.Sayur_Berat) > 0 ? (((parseFloat(row.Sayur_Gizi)||0) * parseFloat(row.Sayur_Berat)) / 100).toFixed(2) : '-', alignment: 'right' },
                    { text: row.Lkpen_Jenis || '-' },
                    { text: row.Lkpen_Berat || '-', alignment: 'right' },
                    { text: formatGiziArray(row.Lkpen_Berat, row.Lkpen_Gizi), alignment: 'right' },
                    { text: row.Lain_Jenis || '-' },
                    { text: row.Lain_Berat || '-', alignment: 'right' },
                    { text: formatGiziArray(row.Lain_Berat, row.Lain_Gizi), alignment: 'right' },
                    { text: totals.totalBerat.toLocaleString('id-ID'), alignment: 'right', bold: true },
                    { text: totals.totalGizi.toFixed(2), alignment: 'right', bold: true }
                ];
            });

            const docDef = {
                content: [
                    { image: logoBase64, width: 80, alignment: 'center', margin: [0, 0, 0, 5] },
                    { text: 'Report Detail Menu', fontSize: 14, bold: true, alignment: 'center', margin: [0, 0, 0, 10] },
                    {
                        table: {
                            headerRows: 2,
                            widths: [15, 50, 35, 20, 70, 40, 25, 25, 40, 25, 25, 40, 25, 25, 45, 25, 25, 45, 25, 25, 35, 35],
                            body: [...tableHeader, ...tableBody]
                        },
                        layout: { 
                            fillColor: (rowIndex) => rowIndex < 2 ? '#E0E0E0' : null,
                            hLineWidth: () => 0.5,
                            vLineWidth: () => 0.5,
                            paddingLeft: () => 2,
                            paddingRight: () => 2,
                            paddingTop: () => 2,
                            paddingBottom: () => 2
                        }
                    }
                ],
                styles: {
                    h: { fillColor: '#E0E0E0', bold: true, alignment: 'center', fontSize: 7 }
                },
                pageOrientation: 'landscape',
                pageSize: 'A4',
                pageMargins: [15, 15, 15, 15],
                defaultStyle: { fontSize: 6 }
            };

            try {
                pdfMake.createPdf(docDef).download(`Report_Detail_Menu_${new Date().toISOString().split('T')[0]}.pdf`);
            } catch (error) {
                console.error('Error generating PDF:', error);
                alert('Terjadi kesalahan saat membuat PDF. Silakan coba lagi.');
            }
        }
    </script>
@endsection