@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<meta name="csrf-token" content="{{ csrf_token() }}">

@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>
                <!-- Use flexbox for buttons to align them properly -->
                <div class="col d-flex justify-content-end align-items-center">
                    <button class="btn btn-secondary me-2" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>Kembali
                    </button>
                    <button onclick="exportExcel()" id="exportText" class="btn btn-success">Download Excel</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        {{-- Tabel 1: Porsi, Susu, Jus, Takjil, Nasi --}}
        <div class="card mb-4">
            <div class="card-header pb-0">
                <h6>Tabel 1 - Porsi, Jus, Takjil & Nasi</h6>
            </div>
            <div class="table-responsive px-3 pt-3 pb-2">
                <table class="table table-bordered align-items-center mb-0" id="tabel-porsi">
                    <thead>
                        <tr class="bg-success text-white text-center">
                            <th rowspan="2" style="vertical-align: middle;">Tanggal</th>
                            <th rowspan="2" style="vertical-align: middle;">Shift</th>
                            <th rowspan="2" style="vertical-align: middle;">Katering</th>
                            <th class="bg-primary" colspan="3" style="vertical-align: middle;">Porsi Makanan</th>
                            <th class="bg-warning" colspan="3" style="vertical-align: middle;">Extra Nasi</th>
                            <th colspan="6" style="vertical-align: middle;">Extra Food</th>
                        </tr>
                        <tr class="text-center">
                            <th style="vertical-align: middle;">Qty</th>
                            <th style="vertical-align: middle;">Harga</th>
                            <th style="vertical-align: middle;">Total</th>
                            <th style="vertical-align: middle;">Qty</th>
                            <th style="vertical-align: middle;">Harga</th>
                            <th style="vertical-align: middle;">Total</th>
                            <th style="vertical-align: middle;">Jus Qty</th>
                            <th style="vertical-align: middle;">Jus Harga</th>
                            <th style="vertical-align: middle;">Jus Total</th>
                            <th style="vertical-align: middle;">Takjil Qty</th>
                            <th style="vertical-align: middle;">Takjil Harga</th>
                            <th style="vertical-align: middle;">Takjil Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($table_result as $row)
                            <tr>
                                <td class="text-center">{{ date('d/m/Y', strtotime($row->Tanggal)) }}</td>
                                <td class="text-center">{{ $row->Shift }}</td>
                                <td>{{ $row->Catering }}</td>

                                {{-- Porsi Makanan --}}
                                <td class="text-end">{{ number_format($row->qty, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total, 0) }}</td>

                                {{-- Extra Nasi --}}
                                <td class="text-end">{{ number_format($row->qty_nasi, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_nasi, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_nasi, 0) }}</td>

                                {{-- Susu --}}
                                {{-- <td class="text-end">{{ number_format($row->qty_susu, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_susu, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_susu, 0) }}</td> --}}

                                {{-- Jus --}}
                                <td class="text-end">{{ number_format($row->qty_jus, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_jus, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_jus, 0) }}</td>

                                {{-- Takjil --}}
                                <td class="text-end">{{ number_format($row->qty_takjil, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_takjil, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_takjil, 0) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="bg-light fw-bold">
                            <td colspan="3" class="text-end">Total</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_porsi'], 0) }}</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_nasi'], 0) }}</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_jus'], 0) }}</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_takjil'], 0) }}</td>
                        </tr>
                        <tr class="bg-primary text-white fw-bold">
                            <td colspan="3" class="text-end">GRAND TOTAL</td>
                            <td colspan="12" class="text-end">Rp{{ number_format($summary['grand_total'], 0) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- Tabel 2: Yakult dan Susu --}}
        <div class="card">
            <div class="card-header pb-0">
                <h6>Tabel 2 - Yakult & Susu</h6>
            </div>
            <div class="table-responsive px-3 pt-3 pb-2">
                <table class="table table-bordered align-items-center mb-0" id="tabel-yakult">
                    <thead>
                        <tr class="bg-success text-white text-center">
                            <th rowspan="2" style="vertical-align: middle;">Tanggal</th>
                            <th rowspan="2" style="vertical-align: middle;">Shift</th>
                            <th rowspan="2" style="vertical-align: middle;">Katering</th>
                            <th colspan="3" style="vertical-align: middle;">Yakult</th>
                            <th colspan="3" style="vertical-align: middle;">Susu</th>
                        </tr>
                        <tr class="text-center">
                            <th style="vertical-align: middle;">Qty</th>
                            <th style="vertical-align: middle;">Harga</th>
                            <th style="vertical-align: middle;">Total</th>
                            <th style="vertical-align: middle;">Qty</th>
                            <th style="vertical-align: middle;">Harga</th>
                            <th style="vertical-align: middle;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($table_result as $row)
                            <tr>
                                <td class="text-center">{{ date('d/m/Y', strtotime($row->Tanggal)) }}</td>
                                <td class="text-center">{{ $row->Shift }}</td>
                                <td>{{ $row->Catering }}</td>

                                {{-- Yakult --}}
                                <td class="text-end">{{ number_format($row->qty_yakult, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_yakult, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_yakult, 0) }}</td>

                                {{-- Susu --}}
                                <td class="text-end">{{ number_format($row->qty_susu, 0) }}</td>
                                <td class="text-end">{{ number_format($row->harga_susu, 0) }}</td>
                                <td class="text-end">{{ number_format($row->Total_susu, 0) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="bg-light fw-bold">
                            <td colspan="3" class="text-end">Total</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_yakult'], 0) }}</td>
                            <td colspan="3" class="text-end">Rp{{ number_format($summary['total_susu'], 0) }}</td>
                        </tr>
                        <tr class="bg-primary text-white fw-bold">
                            <td colspan="3" class="text-end">GRAND TOTAL</td>
                            <td colspan="6" class="text-end">Rp{{ number_format($summary['grand_total_2'], 0) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    {{-- DataTables --}}
    <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>
    <style>
        #tabel-porsi_wrapper .dataTables_length,
        #tabel-porsi_wrapper .dataTables_filter,
        #tabel-yakult_wrapper .dataTables_length,
        #tabel-yakult_wrapper .dataTables_filter {
            margin-bottom: 10px;
        }

        #tabel-porsi_wrapper .dataTables_length,
        #tabel-yakult_wrapper .dataTables_length {
            float: left;
            margin-top: 8px;
        }

        #tabel-porsi_wrapper .dataTables_filter,
        #tabel-yakult_wrapper .dataTables_filter {
            float: right;
            margin-top: 8px;
        }

        #tabel-porsi_wrapper .dataTables_length label,
        #tabel-porsi_wrapper .dataTables_filter label,
        #tabel-yakult_wrapper .dataTables_length label,
        #tabel-yakult_wrapper .dataTables_filter label {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0;
        }

        #tabel-porsi_wrapper .dataTables_length select,
        #tabel-yakult_wrapper .dataTables_length select {
            margin: 0 6px;
            padding: 2px 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        #tabel-porsi_wrapper .dataTables_filter input[type="search"],
        #tabel-yakult_wrapper .dataTables_filter input[type="search"] {
            margin-left: 6px;
            border-radius: 6px;
            border: 1px solid #ccc;
            padding: 2px 8px;
        }

        #tabel-porsi_wrapper .dataTables_info,
        #tabel-porsi_wrapper .dataTables_paginate,
        #tabel-yakult_wrapper .dataTables_info,
        #tabel-yakult_wrapper .dataTables_paginate {
            margin-top: 10px;
        }

        #tabel-porsi_wrapper .dataTables_paginate,
        #tabel-yakult_wrapper .dataTables_paginate {
            float: right;
        }

        #tabel-porsi_wrapper .dataTables_info,
        #tabel-yakult_wrapper .dataTables_info {
            float: left;
        }

        #tabel-porsi th, #tabel-porsi td,
        #tabel-yakult th, #tabel-yakult td {
            padding: 8px 12px !important;
        }

        @media (max-width: 768px) {
            #tabel-porsi_wrapper .dataTables_length,
            #tabel-porsi_wrapper .dataTables_filter,
            #tabel-porsi_wrapper .dataTables_info,
            #tabel-porsi_wrapper .dataTables_paginate,
            #tabel-yakult_wrapper .dataTables_length,
            #tabel-yakult_wrapper .dataTables_filter,
            #tabel-yakult_wrapper .dataTables_info,
            #tabel-yakult_wrapper .dataTables_paginate {
                float: none !important;
                text-align: center;
            }
            #tabel-porsi_wrapper .dataTables_length,
            #tabel-porsi_wrapper .dataTables_filter,
            #tabel-yakult_wrapper .dataTables_length,
            #tabel-yakult_wrapper .dataTables_filter {
                margin-bottom: 8px;
                margin-top: 0;
            }
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#tabel-porsi').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,
                order: [[0, 'asc']],
                responsive: true,
            });
            $('#tabel-yakult').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,
                order: [[0, 'asc']],
                responsive: true,
            });
        });
    </script>
    <script>
        function exportExcel() {
            const button = document.getElementById("exportText");
            button.innerHTML = 'Downloading...';
            button.disabled = true;

            const tableResult = @json(session('table_result'));
            const summary = @json(session('summary'));

            fetch("{{ route('report.rptphg.export') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        table_result: tableResult,
                        summary: summary
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Gagal export. Coba generate ulang.");
                    }
                    return response.blob();
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'Report_Total_Porsi_' + new Date().toISOString().split('T')[0] + '.xlsx';
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => {
                    alert(error.message);
                })
                .finally(() => {
                    button.innerHTML = 'Download Excel';
                    button.disabled = false;
                });
        }
    </script>
@endsection