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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">MSJ REKAP TAGIHAN</h6>
                        <p class="text-sm">Selamat datang di halaman dashboard Rekap Tagihan!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Vendor Baru</p>
                                    <h5 class="font-weight-bolder">
                                        +{{ $vendor_baru }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">
                                            +{{ $persentase_vendor_baru }}%
                                        </span>
                                        1 bulan terakhir
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape shadow-primary text-center rounded-circle"
                                    style="background: linear-gradient(45deg, #0b7c0f, #8bb55b,  #f9ff42);">
                                    <i class="fas fa-truck text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Bank Baru</p>
                                    <h5 class="font-weight-bolder">
                                        +{{ $bank_baru }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">
                                            +{{ $persentase_bank_baru }}%
                                        </span> 3 bulan terakhir
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape shadow-primary text-center rounded-circle"
                                    style="background: linear-gradient(45deg, #051b60, #52aeff,  #c1c2ba);">
                                    <i class="fas fa-building-columns opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Currency Baru</p>
                                    <h5 class="font-weight-bolder">
                                        +{{ $curr_baru }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">
                                            +{{ $persentase_curr_baru }}%
                                        </span> 3 bulan terakhir
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape shadow-primary text-center rounded-circle"
                                    style="background: linear-gradient(45deg, #724c05, #e8d966,  #b93f3f);">
                                    <i class="fas fa-dollar-sign opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Detail Tanda Terima</p>
                                    <h5 class="font-weight-bolder">
                                        +{{ $kuitansi_baru }}
                                    </h5>
                                    <p class="mb-0">
                                        <span class="text-success text-sm font-weight-bolder">
                                            +{{ $persentase_kuitansi_baru }}%
                                        </span> 1 bulan terakhir
                                    </p>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape shadow-warning text-center rounded-circle"
                                    style="background: linear-gradient(45deg, #d324d0, #799ad7,  #e7a0d4);">
                                    <i class="fas fa-print opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-sm-6 mb-4">
                <div class="card z-index-2">
                    <div class="card-header p-3 pb-0">
                        <h6>Estimasi Pembayaran Berdasarkan Kategori Pembayaran</h6>
                        <p class="text-sm mb-0">
                            <small class="text-muted">Data diperbarui per {{ now()->format('d F Y') }}</small>
                        </p>
                    </div>
                    <div class="card-body p-3">
                        <div class="chart">
                            <canvas id="bar-chart" class="chart-canvas" height="375"
                                style="display: block; box-sizing: border-box; height: 280px; width: 458.8px;"
                                width="573"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card z-index-2">
                    <div class="card-header pb-0 p-3">
                        <h6>Estimasi Pembayaran Berdasarkan Department</h6>
                        <p class="text-sm mb-0">
                            <small class="text-muted">Data diperbarui per {{ now()->format('d F Y') }}</small>
                        </p>
                    </div>
                    <div class="card-body p-1">
                    </div>
                    <div class="chart">
                        <canvas id="pie-chart" class="chart-canvas" height="375"
                            style="display: block; box-sizing: border-box; height: 236px; width: 454px;"
                            width="567"></canvas>
                    </div>
                    <!-- Tombol untuk memunculkan data Others -->
                    <div class="text-center mt-3">
                        <button id="show-others" class="btn btn-outline-primary btn-sm">Lihat Others...</button>
                    </div>
                </div>
            </div>

            <!-- Modal untuk menampilkan data kategori Others -->
            <div class="modal fade" id="othersModal" tabindex="-1" aria-labelledby="othersModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="othersModalLabel">Detail Department Others</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul id="others-details" class="list-group list-group-flush">
                                <!-- Data kategori Others akan dimuat di sini -->
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 mt-md-3 mt-4">
                <div class="card overflow-hidden" style="height: 100%;">
                    <div class="card-header p-3"
                        style="background: linear-gradient(90deg, #59cf5d, #3da2f4); color: white;">
                        <p class="text-sm mb-0 text-uppercase font-weight-bold">Kurs Mata Uang Asing</p>
                    </div>
                    <div class="card-body p-3"
                        style="background: linear-gradient(100deg, #59cf5d, #3da2f4); color: white;">
                        <a href="https://datacenter.ortax.org/ortax/kursbi/list" target="_blank" class="btn btn-light">
                            Lihat Kurs Real-Time
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 mt-md-3 mt-4">
                <div class="card overflow-hidden" style="height: 100%;">
                    <!-- Header Card -->
                    <div class="card-header p-3"
                        style="background: linear-gradient(75deg, #59cf5d, #3da2f4); color: white;">
                        <div class="d-flex align-items-center">
                            <!-- Informasi Task -->
                            <div class="ms-3">
                                <p class="text-sm mb-0 text-capitalize font-weight-bold">TASK TANDA TERIMA PERIODE SATU
                                    BULAN</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ $jumlah_tanda_terima_per_bulan->sum('total') }}
                                    <!-- Menampilkan total tanda terima -->
                                </h5>
                            </div>
                            <!-- Progress -->
                            <div class="progress-wrapper ms-auto w-25">
                                <div class="progress-info">
                                    <div class="progress-percentage">
                                        <span class="text-xs font-weight-bold">{{ $persentase }}%</span>
                                        <!-- Menampilkan persentase -->
                                    </div>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="{{ $persentase }}"
                                        aria-valuemin="0" aria-valuemax="100"
                                        style="width: {{ $persentase }}%; background-color: #FFB200;"></div>
                                    <!-- Menampilkan progress -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Chart Body -->
                    <div class="card-body p-3"
                        style="margin-top: -14px; background: linear-gradient(75deg, #59cf5d, #3da2f4); color: white;">
                        <div class="chart">
                            <canvas id="chart-tasks" class="chart-canvas" height="60"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Fungsi untuk memformat angka ke format Rupiah
        function formatCurrency(value) {
            // Pastikan nilai adalah angka
            value = parseFloat(value);

            // Format angka sesuai lokal Indonesia (tanpa desimal)
            return value.toLocaleString("id-ID", {
                style: "decimal",
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            });
        }

        // Bar chart: Kategori Pembayaran
        const kategoriPembayaran = @json($kategori_pembayaran); // Data kategori pembayaran
        const kategoriLabels = kategoriPembayaran.map(item => item.kategori_pembayaran);
        const nominalData = kategoriPembayaran.map(item => item.nominal);

        const barCtx = document.getElementById("bar-chart").getContext("2d");

        new Chart(barCtx, {
            type: "bar",
            data: {
                labels: kategoriLabels,
                datasets: [{
                    label: "Total by category",
                    backgroundColor: "#A888B5",
                    data: nominalData,
                    maxBarThickness: 35,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        ticks: {
                            callback: function(value) {
                                return "Rp" + formatCurrency(value); // Format angka di sumbu-Y
                            },
                            color: "#1B1833",
                            padding: 10,
                        },
                        grid: {
                            display: true,
                            borderDash: [5, 5],
                        },
                    },
                    x: {
                        ticks: {
                            color: "#1B1833",
                            padding: 10,
                        },
                        grid: {
                            display: false,
                        },
                    },
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw || 0; // Ambil nilai data
                                return "Rp" + formatCurrency(value); // Format angka di tooltip
                            }
                        }
                    },
                },
            },
        });


        // Pie chart: Department
        // Data department dari server (top 3 + semua lainnya dalam Others)
        const departmentData = @json($department); // Data termasuk 3 teratas dan Others (jika ada)

        // Menyiapkan labels dan data untuk Pie Chart
        const departmentLabels = departmentData.map(item => item.nama_dept);
        const departmentDataValues = departmentData.map(item => item.nominal);

        // Ambil semua department di luar top 3
        const allOthers = @json($allDepartments); // Data lengkap dari server, termasuk semua department
        const top3Names = departmentLabels.slice(0, 3); // Nama top 3 department
        const otherDepartments = allOthers.filter(item => !top3Names.includes(item.nama_dept)); // Filter untuk Others

        // Fungsi untuk memformat angka ke format rupiah
        function formatCurrency(value) {
            // Pastikan nilai adalah angka
            value = parseFloat(value);

            // Format angka sesuai lokal Indonesia (tanpa desimal)
            return value.toLocaleString("id-ID", {
                style: "decimal",
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            });
        }

        // Event listener untuk tombol "Lihat Data Lainnya"
        const showOthersButton = document.getElementById("show-others");
        const othersModal = new bootstrap.Modal(document.getElementById("othersModal"));
        const othersDetailsList = document.getElementById("others-details");

        showOthersButton.addEventListener("click", () => {
            // Kosongkan isi modal sebelumnya
            othersDetailsList.innerHTML = "";

            if (otherDepartments.length > 0) {
                // Tambahkan department di luar top 3 ke dalam modal
                otherDepartments.forEach(item => {
                    const listItem = document.createElement("li");
                    listItem.className = "list-group-item";
                    listItem.textContent = `${item.nama_dept}: Rp ${formatCurrency(item.nominal)}`;
                    othersDetailsList.appendChild(listItem);
                });
            } else {
                // Jika tidak ada data lainnya
                const noDataItem = document.createElement("li");
                noDataItem.className = "list-group-item text-center";
                noDataItem.textContent = "Tidak ada data lainnya.";
                othersDetailsList.appendChild(noDataItem);
            }

            othersModal.show(); // Tampilkan modal
        });

        // Konfigurasi dan render Pie Chart
        const ctx = document.getElementById("pie-chart").getContext("2d");
        new Chart(ctx, {
            type: "pie",
            data: {
                labels: departmentLabels,
                datasets: [{
                    data: departmentDataValues,
                    backgroundColor: ["#FF6384", "#80C4E9", "#FFCE56", "#B59F78", "#CA7373"],
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: "top"
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                const label = tooltipItem.label || '';
                                const value = tooltipItem.raw || 0;
                                return `${label}: Rp ${formatCurrency(value)}`;
                            }
                        }
                    }
                }
            }
        });


        // Line chart: Jumlah Tanda Terima per Bulan
        const jumlahTandaTerima = @json($jumlah_tanda_terima_per_bulan);
        const bulanLabels = jumlahTandaTerima.map(item =>
            new Date(item.bulan).toLocaleString("id-ID", {
                month: "short",
                year: "numeric"
            })
        );
        const totalData = jumlahTandaTerima.map(item => item.total);

        const lineCtx = document.getElementById("chart-tasks").getContext("2d");
        const gradientStroke = lineCtx.createLinearGradient(0, 230, 0, 50);
        gradientStroke.addColorStop(1, "rgba(29,140,248,0.2)");
        gradientStroke.addColorStop(0.2, "rgba(29,140,248,0.0)");
        gradientStroke.addColorStop(0, "rgba(29,140,248,0)");

        new Chart(lineCtx, {
            type: "line",
            data: {
                labels: bulanLabels,
                datasets: [{
                    label: "Jumlah Daftar Tanda Terima",
                    tension: 0.5,
                    pointRadius: 3,
                    borderWidth: 2,
                    pointBackgroundColor: "#FFF6E9",
                    borderColor: "#FFF6E9",
                    backgroundColor: gradientStroke,
                    data: totalData,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        display: false
                    },
                    x: {
                        ticks: {
                            color: "#FFF6E9",
                            padding: 10
                        }
                    },
                },
                plugins: {
                    legend: {
                        display: false
                    },
                },
            },
        });
    </script>
@endpush