@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <!-- Tombol Kembali di Kiri -->
                            <button class="btn btn-secondary mb-0" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i>
                                <span class="font-weight-bold">Kembali</span>
                            </button>

                            <!-- Judul di Tengah -->
                            {{-- <h5 class="mb-0 flex-grow-1 text-center">
                                Result {{ $title_menu }} - {{ $it->firstname }}
                            </h5> --}}

                            <!-- Placeholder untuk menjaga keseimbangan -->
                            <div style="width: 100px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <input type="hidden" id="user" name="user" value="{{ $it->firstname }}">

                            <h5 class="mb-0"> Result {{ $title_menu }} - {{ $it->firstname }}</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}

                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">

                            <div class="table-responsive">
                                <table class="table display table-hover" id="tabel-dailya">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">No</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">IT Name</th>
                                            <th scope="col">Keterangan</th>
                                            <th scope="col">Pengerjaan</th>
                                            <th scope="col">Kategori</th>
                                            <th scope="col">User</th>
                                            <th scope="col">Departement</th>
                                            <th scope="col">Dampak</th>
                                            <th scope="col">Urgency</th>
                                            <th scope="col">Start</th>
                                            <th scope="col">Finish</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Poin</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($dailya as $d)
                                            <tr>
                                                <td>{{ $vcount++ }}</td>
                                                <td>{{ $d->date }}</td>
                                                <td>{{ $d->it_name }}</td>
                                                <td>{{ $d->ket }}</td>
                                                <td>{{ $d->pengerjaan }}</td>
                                                <td>{{ $d->detkat_name }}</td>
                                                <td>{{ $d->user_name }}</td>
                                                <td>{{ $d->dept_name }}</td>
                                                <td>{{ $d->dampak_name }}</td>
                                                <td>{{ $d->urgency_name }}</td>
                                                <td>{{ $d->start }}</td>
                                                <td>{{ $d->finish }}</td>
                                                <td>{{ $d->status_name }}</td>
                                                <td style="text-align: right">{{ $d->poin }}</td>
                                            </tr>
                                        @endforeach
                                        {{-- ✅ Pastikan total poin ada dalam baris yang sesuai --}}

                                    </tbody>


                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Tabel Sum Of Point --}}
    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Sum of Poin</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapseSOP" role="button"
                                aria-expanded="false" aria-controls="collapseSOP">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="collapse" id="collapseSOP">
                            <div class="row px-4 py-2">

                                <div class="table-responsive">
                                    <div class="table-responsive">
                                        <table class="table display table-hover table-bordered" id="tabel-sop">
                                            <thead style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th rowspan="2" class="align-middle text-center">Tahun</th>
                                                    <th rowspan="2" class="align-middle text-center">Bulan</th>
                                                    <th colspan="3" class="text-center">Status</th>
                                                    <th rowspan="2" class="align-middle text-center">Grand Total</th>
                                                </tr>
                                                <tr>
                                                    <th>Completed</th>
                                                    <th>Defined</th>
                                                    <th>In Progress</th>
                                                </tr>
                                            </thead>

                                            @php
                                                $total_completed = 0;
                                                $total_defined = 0;
                                                $total_inprogress = 0;
                                                $total_all = 0;

                                                $lastYear = null;

                                                $rowspanCounts = [];
                                                $totalCPerYear = [];

                                                foreach ($sum_month as $row) {
                                                    $year = $row->year;
                                                    $rowspanCounts[$year] = ($rowspanCounts[$year] ?? 0) + 1;
                                                    $totalCPerYear[$year] = ($totalCPerYear[$year] ?? 0) + $row->C;
                                                }
                                            @endphp

                                            @foreach ($sum_month as $row)
                                                @if ($lastYear !== $row->year)
                                                    @if (!is_null($lastYear))
                                                        </tbody>
                                                    @endif
                                                    <tbody id="group-{{ $row->year }}">
                                                @endif

                                                <tr
                                                    @if ($lastYear !== $row->year) @php $isFirstRow = true; @endphp @else class="row-detail-{{ $row->year }}" @endif>
                                                    @if ($lastYear !== $row->year)
                                                        <td rowspan="{{ $rowspanCounts[$row->year] }}"
                                                            class="align-middle text-center">
                                                            <div
                                                                class="d-flex align-items-center justify-content-center gap-2">
                                                                <i class="fas fa-minus-circle text-secondary"
                                                                    style="cursor: pointer; font-size: 14px;"
                                                                    onclick="toggleYear({{ $row->year }}, this)"
                                                                    title="Minimize/Maximize"></i>
                                                                <span style="font-size: 14px;">{{ $row->year }}</span>
                                                            </div>
                                                        </td>
                                                    @endif

                                                    {{-- Data Bulan dan Status --}}
                                                    <td>{{ $row->month }}</td>
                                                    <td class="text-end">{{ $row->C }}</td>
                                                    <td class="text-end">{{ $row->D }}</td>
                                                    <td class="text-end">{{ $row->P }}</td>

                                                    {{-- Total Per Tahun --}}
                                                    @if ($lastYear !== $row->year)
                                                        <td rowspan="{{ $rowspanCounts[$row->year] }}"
                                                            class="align-middle text-center">
                                                            {{ $totalCPerYear[$row->year] }}
                                                        </td>
                                                        @php $lastYear = $row->year; @endphp
                                                    @endif
                                                </tr>

                                                @php
                                                    $total_completed += $row->C;
                                                    $total_defined += $row->D;
                                                    $total_inprogress += $row->P;
                                                    $total_all += $totalCPerYear[$row->year];

                                                @endphp
                                            @endforeach
                                            </tbody>

                                            <!-- Grand Total -->
                                            <tfoot>
                                                <tr>
                                                    <td colspan="2" class="text-end fw-bold">Grand Total</td>
                                                    <td class="text-end fw-bold">{{ $total_completed }}</td>
                                                    <td class="text-end fw-bold">{{ $total_defined }}</td>
                                                    <td class="text-end fw-bold">{{ $total_inprogress }}</td>
                                                    <td class="text-center fw-bold">{{ $total_all }}</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Penyelesaian --}}
    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0"> Penyelesaian</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapsePP"
                                role="button" aria-expanded="false" aria-controls="collapsePP">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="collapse" id="collapsePP">
                            <div class="row px-4 py-2">

                                <div class="table-responsive">
                                    <table class="table display table-hover table-bordered" id="tabel-program">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Tittle</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($report as $r)
                                                <tr>
                                                    <td>{{ $vcount2++ }}</td>
                                                    <td>{{ $r->pengerjaan }}</td>
                                                </tr>
                                            @endforeach
                                            {{-- <tr hidden>
                                                <td></td>
                                                <td></td>
                                            </tr> --}}

                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Planning --}}
    <br>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="mb-0">Planning</h5>
                            {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}
                            <a class="btn btn-primary ms-auto" data-bs-toggle="collapse" href="#collapsePlan"
                                role="button" aria-expanded="false" aria-controls="collapsePlan">
                                <i class="fa fa-angle-down me-1"></i>
                            </a>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="collapse" id="collapsePlan">

                            <div class="row px-4 py-2">

                                <div class="table-responsive">
                                    <table class="table display table-hover table-bordered" id="tabel-planning">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Tittle</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($planning as $p)
                                                <tr>
                                                    <td>{{ $vcount3++ }}</td>
                                                    <td>{{ $p->ket }}</td>
                                                    <td>{{ $p->pengerjaan }}</td>
                                                </tr>
                                                {{-- <tr hidden>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr> --}}
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($month != '' && $year != '')
        {{-- Tabel Result --}}
        <br>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header">
                                <input type="hidden" id="user" name="user" value="{{ $it->firstname }}">

                                <h5 class="mb-0"> Result {{ $title_menu }} - {{ $it->firstname }}</h5>
                                {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}

                            </div>
                            <hr class="horizontal dark mt-0">

                            <div class="row px-4 py-2">

                                <div class="table-responsive">
                                    <table class="table display table-hover" id="tabel-result">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">No</th>
                                                <th scope="col">Description</th>
                                                <th scope="col">Settlement</th>
                                                <th scope="col">User</th>
                                                <th scope="col">Poin</th>
                                                <th scope="col">Start</th>
                                                <th scope="col">Finish</th>
                                                <th scope="col">TTD</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($complete as $c)
                                                <tr>
                                                    <td>{{ $vcount4++ }}</td>

                                                    <td>{{ $c->ket }}</td>
                                                    <td>{{ $c->pengerjaan }}</td>

                                                    <td>{{ $c->user_name }}</td>
                                                    <td style="text-align: right">{{ $c->poin }}</td>

                                                    <td>{{ $c->start }}</td>
                                                    <td>{{ $c->finish }}</td>
                                                    <td></td>

                                                </tr>
                                            @endforeach
                                            {{-- ✅ Pastikan total poin ada dalam baris yang sesuai --}}

                                        </tbody>


                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header">
                                <input type="hidden" id="user" name="user" value="{{ $it->firstname }}">

                                <h5 class="mb-0"> List Backup Database - {{ $it->firstname }}</h5>
                                {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}

                            </div>
                            <hr class="horizontal dark mt-0">

                            <div class="row px-4 py-2">

                                <div class="table-responsive">
                                    <table class="table display table-hover" id="tabel-backup">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col">No</th>
                                                <th scope="col">Lokasi Server</th>
                                                <th scope="col">DB Name</th>
                                                <th scope="col">DB File</th>
                                                <th scope="col">Schedule Time</th>
                                                <th scope="col">Status</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($backup as $b)
                                                <tr>
                                                    <td>{{ $vcount5++ }}</td>
                                                    <td>{{ $b->server_lok }}</td>
                                                    <td>{{ $b->db_name }}</td>
                                                    <td>{{ $b->db_file }}</td>
                                                    <td>{{ $b->schedule_time }}</td>
                                                    <td>{{ $b->status == 1 ? 'Success' : 'Failed' }}</td>
                                                </tr>
                                            @endforeach
                                            {{-- ✅ Pastikan total poin ada dalam baris yang sesuai --}}

                                        </tbody>


                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"> Print Report</h5>
                                {{-- <h5 class="mb-0">Bulan : {{ $month }}| Tahun : {{ $year }}</h5> --}}

                            </div>
                            <hr class="horizontal dark mt-0">
                            <input type="hidden" id="month" name="month" value="{{ $month->month }}">
                            <input type="hidden" id="year" name="year" value="{{ $year }}">

                            <div class="row px-4 py-2">
                                <div class="col-md-4">
                                    <label for="mengetahui_1" class="form-label">Mengetahui 1</label>
                                    <select class="form-select" name="mengetahui[]" id="m1_nama"
                                        onchange="validateSelection(1)">

                                        <option value="">Pilih</option>
                                        @foreach ($mengetahui as $m)
                                            <option value="{{ $m->nama }}">{{ $m->nama }} |
                                                {{ $m->jabatan }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="" name="m1_j" id="m1_j">
                                </div>
                                <div class="col-md-4">
                                    <label for="mengetahui_2" class="form-label">Mengetahui 2</label>
                                    <select class="form-select" name="mengetahui[]" id="m2_nama"
                                        onchange="validateSelection(2)" disabled>
                                        <option value="">Pilih</option>
                                        @foreach ($mengetahui as $m)
                                            <option value="{{ $m->nama }}">{{ $m->nama }} |
                                                {{ $m->jabatan }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="" name="m2_j" id="m2_j">

                                </div>
                                <div class="col-md-4">
                                    <label for="mengetahui_3" class="form-label">Mengetahui 3</label>
                                    <select class="form-select" name="mengetahui[]" id="m3_nama" disabled>
                                        <option value="">Pilih</option>
                                        @foreach ($mengetahui as $m)
                                            <option value="{{ $m->nama }}">{{ $m->nama }} |
                                                {{ $m->jabatan }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" value="" name="m3_j" id="m3_j">

                                </div>
                            </div>

                            <!-- Button Simpan -->
                            <div class="row mt-3">
                                <div class="col text-center">
                                    <button type="submit" class="btn btn-primary" id="pdf"> <i
                                            class="fa fa-print"></i> Print PDF
                                    </button>
                                </div>

                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <script>
        function decodeHtmlEntities(str) {
            var txt = document.createElement("textarea");
            txt.innerHTML = str;
            return txt.value;
        }

        $(document).ready(function() {
            $('#tabel-dailya').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });

            // $('#tabel-sop').DataTable({
            //     "language": {
            //         "search": "Cari :",
            //         "lengthMenu": "Tampilkan _MENU_ baris",
            //         "zeroRecords": "Maaf - Data tidak ada",
            //         "info": "Halaman _PAGE_ dari _PAGES_",
            //         "infoEmpty": "Tidak ada data",
            //         "infoFiltered": "(pencarian dari _MAX_ data)"
            //     },
            //     "destroy": true,
            //     "ordering": true,
            //     "responsive": true,
            //     "autoWidth": false
            // });
            $('#tabel-program').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });
            $('#tabel-planning').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false
            });
            $('#tabel-result').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false,

            });

            $('#tabel-backup').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                "ordering": true,
                "responsive": true,
                "autoWidth": false,

            });
        });

        function toggleYear(year, icon) {
            const rows = document.querySelectorAll(`.row-detail-${year}`);
            let isHidden = false;

            rows.forEach(row => {
                const currentlyHidden = row.style.display === 'none';
                row.style.display = currentlyHidden ? '' : 'none';
                if (!currentlyHidden) isHidden = true;
            });

            // Ganti ikon: + saat di minimize, − saat normal
            if (icon) {
                icon.classList.remove('fa-minus-circle', 'fa-plus-circle');
                icon.classList.add(isHidden ? 'fa-plus-circle' : 'fa-minus-circle');
            }
        }






        function validateSelection(step) {
            let mengetahui1 = document.getElementById("m1_nama");
            let mengetahui2 = document.getElementById("m2_nama");
            let mengetahui3 = document.getElementById("m3_nama");

            let mengetahui1Val = mengetahui1.value;
            let mengetahui2Val = mengetahui2.value;
            let mengetahui3Val = mengetahui3.value;


            let mengetahui1Text = mengetahui1.options[mengetahui1.selectedIndex].text.split(" | ");
            let mengetahui2Text = mengetahui2.options[mengetahui2.selectedIndex].text.split(" | ");
            let mengetahui3Text = mengetahui3.options[mengetahui3.selectedIndex].text.split(" | ");

            // Memasukkan jabatan ke dalam input hidden
            document.getElementById("m1_j").value = mengetahui1Val ? mengetahui1Text[1] : "";
            document.getElementById("m2_j").value = mengetahui2Val ? mengetahui2Text[1] : "";
            document.getElementById("m3_j").value = mengetahui3Val ? mengetahui3Text[1] : "";


            if (step === 1) {
                if (mengetahui1Val) {
                    mengetahui2.disabled = false;
                } else {
                    mengetahui2.disabled = true;
                    mengetahui3.disabled = true;
                    mengetahui2.value = "";
                    mengetahui3.value = "";
                    document.getElementById("m2_j").value = "";
                    document.getElementById("m3_j").value = "";
                }
            }

            if (step === 2) {
                if (mengetahui2Val) {
                    mengetahui3.disabled = false;
                } else {
                    mengetahui3.disabled = true;
                    mengetahui3.value = "";
                    document.getElementById("m3_j").value = "";
                }

            }
        }

        $('#pdf').click(function() {
            var m1 = $('select[id="m1_nama"]').val();
            var m2 = $('select[id="m2_nama"]').val();
            var m3 = $('select[id="m3_nama"]').val();
            var j1 = $('input[id="m1_j"]').val();
            var j2 = $('input[id="m2_j"]').val();
            var j3 = $('input[id="m3_j"]').val();

            var user = $('input[id="user"]').val();
            var month = $('input[id="month"]').val();
            var year = $('input[id="year"]').val();

            if (m1 == '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Mengetahui 1 Wajib Diisi!',
                    text: 'Harap pilih opsi Mengetahui 1 sebelum melanjutkan.',
                    confirmButtonText: 'OK'
                });
                return false; // Mencegah aksi selanjutnya jika m1 kosong
            }

            print_report(m1, m2, m3, user, month, year, j1, j2, j3);
        });


        function print_report(m1, m2, m3, user, month, year, j1, j2, j3) {
            // var program = document.getElementById('tabel-program');
            var vprogram = $('#tabel-program').DataTable();
            var program = vprogram.rows().data().toArray();

            var vplanning = $('#tabel-planning').DataTable();
            var planning = vplanning.rows().data().toArray();

            var vresult = $('#tabel-result').DataTable();
            var result = vresult.rows().data().toArray();

            var vbackup = $('#tabel-backup').DataTable();
            var backup = vbackup.rows().data().toArray();
            console.log('backup', backup);

            // Array untuk menyimpan objek
            var dataProgram = [];
            dataProgram.push([{
                    text: 'No',
                    style: 'tableHeader'
                },
                {
                    text: 'Tittle',
                    style: 'tableHeader'
                }
            ]);


            //penyelesaian program
            var dataProgram = [
                [{
                    text: 'No',
                    style: 'tableHeader'
                }, {
                    text: 'Penyelesaian',
                    style: 'tableHeader'
                }] // Header tabel
            ];

            // Looping data penyelesaian
            if (program.length === 0) {
                dataProgram.push([{
                        text: 'Maaf tidak ada data',
                        colSpan: 2,
                        alignment: 'center',
                        italics: true,
                        color: 'grey'
                    },
                    {} // kolom kedua dikosongkan karena digabung
                ]);
            } else {
                program.forEach(function(rowData, index) {
                    dataProgram.push([{
                            text: rowData[0],
                            alignment: 'center'
                        },
                        {
                            text: decodeHtmlEntities(rowData[1]),
                            alignment: 'left'
                        }
                    ]);
                });
            }

            //planning program
            var dataPlanning = [];
            var dataPlanning = [
                [{
                    text: 'No',
                    style: 'tableHeader'
                }, {
                    text: 'Tittle',
                    style: 'tableHeader'
                }, {
                    text: 'Description',
                    style: 'tableHeader'
                }] // Header tabel
            ];
            // Looping data Planning
            if (planning.length === 0) {
                dataPlanning.push([{
                        text: 'Maaf tidak ada data',
                        colSpan: 3,
                        alignment: 'center',
                        italics: true,
                        color: 'grey'
                    },
                    {}, {}
                ]);
            } else {
                planning.forEach(function(rowData, index) {
                    dataPlanning.push([{
                            text: rowData[0],
                            alignment: 'center'
                        },
                        {
                            text: decodeHtmlEntities(rowData[1]),
                            alignment: 'left'
                        },
                        {
                            text: decodeHtmlEntities(rowData[2]),
                            alignment: 'left'
                        }
                    ]);
                });
            }
            //backupdata
            //Backup data
            var backupData = [];
            var backupData = [
                [{
                    text: 'No',
                    style: 'tableHeader'
                }, {
                    text: 'Server Location',
                    style: 'tableHeader'
                }, {
                    text: 'Database Name',
                    style: 'tableHeader'
                }, {
                    text: 'Database File',
                    style: 'tableHeader'
                }, {
                    text: 'Schedule Time',
                    style: 'tableHeader'
                }, {
                    text: 'Status',
                    style: 'tableHeader'
                }]
            ];


            // Looping data Planning
            if (backup.length === 0) {
                backupData.push([{
                        text: 'Maaf tidak ada data',
                        colSpan: 6,
                        alignment: 'center',
                        italics: true,
                        color: 'grey'
                    },
                    {}, {}
                ]);
            } else {
                backup.forEach(function(rowData, index) {
                    backupData.push([{
                            text: rowData[0],
                            alignment: 'center'
                        },
                        {
                            text: decodeHtmlEntities(rowData[1]),
                            alignment: 'left'
                        },
                        {
                            text: decodeHtmlEntities(rowData[2]),
                            alignment: 'left'
                        },
                        {
                            text: decodeHtmlEntities(rowData[3]),
                            alignment: 'left'
                        },
                        {
                            text: decodeHtmlEntities(rowData[4]),
                            alignment: 'left'
                        },
                        {
                            text: decodeHtmlEntities(rowData[5]),
                            alignment: 'left'
                        }
                    ]);
                });
            }
            console.log('backupData', backupData)

            let dataResult = [];
            let previousUser = null;
            let rowspan = 1;
            let firstIndex = -1;
            let sumPoint = 0;

            // **Menambahkan Header ke Table Result Form TTD**
            dataResult.push([{
                    text: 'No',
                    style: 'tableHeader'
                },
                {
                    text: 'Description',
                    style: 'tableHeader'
                },
                {
                    text: 'Settlement',
                    style: 'tableHeader'
                },
                {
                    text: 'User',
                    style: 'tableHeader'
                },
                {
                    text: 'Point',
                    style: 'tableHeader'
                },
                {
                    text: 'Start',
                    style: 'tableHeader'
                },
                {
                    text: 'Finish',
                    style: 'tableHeader'
                },
                {
                    text: 'TTD',
                    style: 'tableHeader'
                }
            ]);



            result.forEach((row, index) => {
                let rowData = [];

                // Kolom No
                rowData.push({
                    text: row[0],
                    alignment: 'center'
                });

                // Kolom Description
                rowData.push({
                    text: decodeHtmlEntities(row[1]),
                    alignment: 'left'
                });

                // Kolom Settlement
                rowData.push({
                    text: decodeHtmlEntities(row[2]),
                    alignment: 'left'
                });

                // **Kolom User (Menggunakan Rowspan)**
                let currentUser = row[3];

                if (currentUser === previousUser) {
                    // Jika user sama → rowspan
                    rowData.push({}); // user (kosong)
                } else {
                    rowspan = 1;
                    firstIndex = dataResult.length;
                    rowData.push({
                        text: currentUser,
                        alignment: 'left',
                        rowSpan: 1 // sementara, akan diupdate nanti
                    });
                }

                previousUser = currentUser;

                // Point
                let point = parseFloat(row[4]) || 0;
                sumPoint += point;
                rowData.push({
                    text: point.toFixed(1),
                    alignment: 'center'
                });

                // Start & Finish
                rowData.push({
                    text: row[5],
                    alignment: 'center'
                });
                rowData.push({
                    text: row[6],
                    alignment: 'center'
                });

                if (currentUser === previousUser && firstIndex !== dataResult.length) {
                    // baris selain pertama
                    rowData.push({}); // TTD kosong karena rowspan
                    rowspan++;
                    dataResult[firstIndex][3].rowSpan = rowspan;
                    dataResult[firstIndex][7].rowSpan = rowspan;
                } else {
                    // baris pertama user
                    rowData.push({
                        text: row[7] || '',
                        alignment: 'center',
                        rowSpan: 1, // sementara, akan diupdate
                        margin: [0, 8, 0, 8] // kiri, atas, kanan, bawah
                    });
                }

                dataResult.push(rowData);
            });
            // console.log('point', sumPoint);



            // **Tambahkan Total di Akhir Table**
            dataResult.push([{
                    text: 'Total',
                    colSpan: 4,
                    alignment: 'center',
                    bold: true
                }, {}, {}, {},
                {
                    text: sumPoint.toFixed(1),
                    alignment: 'center',
                    bold: true
                },
                {
                    text: "",
                    colSpan: 3
                }, {}, {}
            ]);
            console.log('length', dataResult.length);



            var total_data = result.length; // Menghitung total data dalam array resul
            var average = sumPoint / total_data
            console.log('avg', average);

            dataResult.push([{
                    text: 'Average',
                    colSpan: 4,
                    alignment: 'center',
                    bold: true
                }, {}, {}, {},
                {
                    text: average.toFixed(1),
                    alignment: 'center',
                    bold: true
                },
                {
                    text: "",
                    colSpan: 3
                }, {}, {}
            ]);

            console.log('result', result.length);

            // **Tampilkan ke PDFMake**
            var docDefinition = {
                content: [{
                    style: 'tableExample',
                    table: {
                        widths: [20, '*', '*', '*', 40, 70, 70, '*'], // Lebar kolom
                        body: dataResult
                    }
                }],
                styles: {
                    tableHeader: {
                        bold: true,
                        fontSize: 12,
                        color: 'white',
                        fillColor: '#4CAF50',
                        alignment: 'center'
                    }
                }
            };


            var docDefinition = {
                pageSize: 'A4',
                pageOrientation: 'potrait',
                pageMargins: [40, 30, 40, 60],
                content: [{
                        text: 'Report ' + month + ' ' + year,
                        style: 'header',
                        alignment: 'center',
                        margin: [0, 10, 0, 30]
                    },
                    {
                        canvas: [{
                                type: 'line',
                                x1: 230,
                                y1: 0,
                                x2: 230,
                                y2: 180,
                                lineWidth: 2
                            },
                            {
                                type: 'line',
                                x1: 260,
                                y1: 0,
                                x2: 260,
                                y2: 205,
                                lineWidth: 2
                            },
                            {
                                type: 'line',
                                x1: 290,
                                y1: 0,
                                x2: 290,
                                y2: 180,
                                lineWidth: 2
                            }

                        ]
                    },
                    {
                        image: 'LOGO_IMAGE',
                        width: 180,
                        alignment: 'center',
                        margin: [0, 30, 0, 30]
                    },
                    {
                        canvas: [{
                                type: 'line',
                                x1: 230,
                                y1: 25,
                                x2: 230,
                                y2: 200,
                                lineWidth: 2
                            },
                            {
                                type: 'line',
                                x1: 260,
                                y1: 0,
                                x2: 260,
                                y2: 200,
                                lineWidth: 2
                            },
                            {
                                type: 'line',
                                x1: 290,
                                y1: 25,
                                x2: 290,
                                y2: 200,
                                lineWidth: 2
                            }

                        ]
                    },
                    {
                        text: 'Di Buat Oleh :',
                        style: 'subheader',
                        alignment: 'center',
                        margin: [0, 40, 0, 5]
                    },
                    {
                        text: user,
                        style: 'boldText',
                        alignment: 'center'
                    },
                    {
                        text: 'DEPARTEMENT',
                        style: 'subheader',
                        alignment: 'center',
                        margin: [0, 10, 0, 0]
                    },
                    {
                        text: 'MIS',
                        style: 'boldText',
                        alignment: 'center'
                    },



                    // {
                    //     text: 'I. Penyelesaian', // **Header Halaman Kedua**
                    //     style: 'header2',
                    //     alignment: 'left',
                    //     margin: [0, 0, 0, 20]
                    // },
                    // {
                    //     style: 'tableExample',
                    //     table: {
                    //         widths: [20, '*'], // **Ukuran Kolom**
                    //         body: dataProgram
                    //     },
                    // },
                    {
                        pageBreak: 'before', // Mulai halaman baru sebelum ini
                        pageSize: 'A4',
                        pageOrientation: 'landscape', // Ubah menjadi landscape
                        stack: [{
                                text: 'Form Report ' + month + ' ' + year,
                                style: 'header2',
                                alignment: 'center',
                                margin: [0, 0, 0, 20]
                            },
                            {
                                style: 'tableExample',
                                table: {
                                    widths: [15, 170, 215, 85, 30, 70, 70, 40], // Ukuran Kolom
                                    body: dataResult
                                }
                            }
                        ]
                    },


                    {
                        pageBreak: 'before', // Mulai halaman baru sebelum ini
                        pageSize: 'A4',
                        pageOrientation: 'potrait', // Ubah menjadi landscape
                        stack: [

                            {

                                text: 'Planning', // **Header Halaman Ketiga**
                                style: 'header2',
                                alignment: 'left',
                                margin: [0, 0, 0, 20]
                            },
                            {
                                style: 'tableExample',
                                table: {
                                    widths: [20, '*', '*'], // **Ukuran Kolom**
                                    body: dataPlanning
                                }
                            },
                            // **Mengetahui (Tanda Tangan)**
                            {
                                text: 'Mengetahui,',
                                style: 'boldText',
                                alignment: 'center',
                                margin: [0, 30, 0, 10]
                            },

                            // ⬇️ **JIKA hanya M1 diisi**
                            m1 && !m2 && !m3 ? [{
                                    text: j1 + ` MIS`,
                                    style: 'smallText',
                                    alignment: 'center',
                                    margin: [0, 5, 0, 20]
                                },
                                {
                                    text: `${m1}`,
                                    style: 'smallText',
                                    alignment: 'center',
                                    margin: [0, 25, 0, 1]
                                },
                                {
                                    columns: [{
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },

                                    ],
                                    margin: [50, 2, 50, 20]
                                }
                            ] :
                            '',

                            // ⬇️ **JIKA M1 & M2 diisi**
                            m1 && m2 && !m3 ? [{
                                    columns: [{
                                            text: j1 + ` MIS`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: '',
                                            style: 'smallText'
                                        }, // Kosong tengah
                                        {
                                            text: j2 + ` MIS`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        }
                                    ],
                                    margin: [50, 5, 50, 20]
                                },
                                {
                                    columns: [{
                                            text: `${m1}`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: '',
                                            style: 'smallText'
                                        },
                                        {
                                            text: `${m2}`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        }
                                    ],
                                    margin: [50, 25, 50, 1]
                                },
                                {
                                    columns: [{
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: '',
                                            style: 'smallText'
                                        },
                                        {
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                    ],
                                    margin: [50, 2, 50, 20]
                                }

                            ] :
                            '',

                            // ⬇️ **JIKA M1, M2, & M3 diisi**
                            m1 && m2 && m3 ? [{
                                    columns: [{
                                            text: j1 + ` MIS`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: j2 + ` MIS`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: j3 + ` MIS`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        }
                                    ],
                                    margin: [50, 5, 50, 20]
                                },
                                {
                                    columns: [{
                                            text: `${m1}`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: `${m2}`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: `${m3}`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        }
                                    ],
                                    margin: [50, 25, 50, 1]
                                },
                                {
                                    columns: [{
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        },
                                        {
                                            text: `(Acc Date. __-__-____)`,
                                            style: 'smallText',
                                            alignment: 'center'
                                        }
                                    ],
                                    margin: [50, 2, 50, 20]
                                }
                            ] :
                            '',
                        ]
                    },

                    {
                        pageBreak: 'before', // Mulai halaman baru sebelum ini
                        pageSize: 'A4',
                        pageOrientation: 'potrait', // Ubah menjadi landscape
                        stack: [

                            {

                                text: 'Lampiran Backup Database', // **Header Halaman Ketiga**
                                style: 'header2',
                                alignment: 'left',
                                margin: [0, 0, 0, 20]
                            },
                            {
                                style: 'tableExample',
                                table: {
                                    widths: [20, 65, 65, '*', 65, 30], // **Ukuran Kolom**
                                    body: backupData
                                }
                            },

                        ]
                    },



                ],
                styles: {
                    header: {
                        fontSize: 16,
                        bold: true
                    },
                    subheader: {
                        fontSize: 11,
                        bold: true
                    },
                    boldText: {
                        fontSize: 14,
                        bold: true
                    },
                    header2: {
                        fontSize: 16,
                        bold: true,
                        color: '#black',
                        align: 'left',
                    }, // Header Halaman 2
                    tableExample: {
                        margin: [0, 0, 0, 0],
                        fontSize: 7
                    },
                    tableHeader: {
                        bold: true,
                        alignment: 'center',
                        margin: [0, 10, 0, 0],
                        fillColor: '#D3D3D3'
                    },
                    normalText: {
                        fontSize: 11
                    }

                },
                images: {
                    LOGO_IMAGE: 'data:image/png;base64,' +
                        "{{ base64_encode(file_get_contents(public_path('storage/logreport.jpg'))) }}"
                }
            };

            // Generate PDF
            pdfMake.createPdf(docDefinition).open();

        }

        // Toggle icons when collapsing
        $('#collapseSOP').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapseSOP').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapseSOP').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapseSOP').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        // Toggle icons when collapsing
        $('#collapsePP').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapsePP').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapsePP').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapsePP').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });

        // Toggle icons when collapsing
        $('#collapsePlan').on('show.bs.collapse', function() {
            // Ganti ikon ketika div ditampilkan
            $('#collapsePlan').siblings('.card-header').find('i').removeClass('fa-angle-down').addClass(
                'fa-angle-up');
        });

        $('#collapsePlan').on('hide.bs.collapse', function() {
            // Ganti ikon ketika div disembunyikan
            $('#collapsePlan').siblings('.card-header').find('i').removeClass('fa-angle-up').addClass(
                'fa-angle-down');
        });
    </script>
@endsection