pasca/resources/views/home.blade.php

@extends('layouts.main')

@php

    $totalTargetAmount = 0;
    $totalTargetAmountYB = 0;

    $chartLabel = [];
    $chartPercent = [];

    $hasNotification = true;

    foreach ($status as $data) {
        $chartLabel[] = $data['name'];
        $chartPercent[] = $data['percent'];
    }

    foreach ($rekodKPIPelaburan as $index => $data) {
        $totalTargetAmount += $data['investment_target'];
        $totalTargetAmountYB += $data['investment_target_setting'];
    }

@endphp


@section('content')
    <div class="flex flex-col gap-4 bg-white rounded p-10 min-h-screen">

        <div class="flex justify-between items-center">
            <p class="flex items-center text-xs">
                <i class="fa-solid fa-house text-[#BD8736] mr-1"></i>
                <span>Dashboard</span>
            </p>
            <div class="relative cursor-pointer hidden md:block">
                @if ($hasNotification)
                    <div class="absolute top-[2px] left-0 w-2 h-2 bg-[#E50A0A] rounded-full"></div>
                @endif
                <i class="fa-regular fa-bell text-md hover:text-[#BD8736]"></i>
            </div>

        </div>

        <div class="border rounded p-5">
            <h6 class="font-semibold mb-4">Senarai Agensi Mengikut Status</h6>
            <div class="mx-auto text-center" style="width:25%">
                <canvas id="agencyPieChart"></canvas>
                <h5 class="font-bold my-2">Status</h5>
            </div>
        </div>

        <div class="border rounded">
            <h5 class="font-semibold m-5">Rekod Penetapan KPI Pelaburan</h5>
            <div class="overflow-x-auto overflow-hidden rounded-[10px]">
                <table class="w-full text-sm text-left text-gray-700 border-collapse">
                    <thead>
                        <tr>
                            <th class="text-xs px-4 py-2">Bil</th>
                            <th class="text-xs px-4 py-2">S-GLC</th>
                            <th class="text-xs px-4 py-2 text-right">Sasaran Pelaburan 2025 (RM)</th>
                            <th class="text-xs px-4 py-2 text-right">Penetapan Sasaran Pelaburan (RM) oleh YB Dato’
                                Pengerusi
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($rekodKPIPelaburan as $index => $data)
                            <tr>
                                <td class="px-4 py-2 border">{{ $index + 1 }}</td>
                                <td class="px-4 py-2 border ">
                                    <a href="#" class="text-blue-800 underline">{{ $data['name'] }}</a>
                                </td>
                                <td class="px-4 py-2 border text-right">{{ number_format($data['investment_target'], 2) }}
                                </td>
                                <td class="px-4 py-2 border text-right">
                                    {{ number_format($data['investment_target_setting'], 2) }}</td>
                            </tr>
                        @endforeach
                        <tr class="bg-[#012961]">
                            <td class="px-4 py-2 text-white" colspan="2">Jumlah</td>
                            <td class="px-4 py-2 text-white text-right">{{ number_format($totalTargetAmount, 2) }}</td>
                            <td class="px-4 py-2 text-white text-right">{{ number_format($totalTargetAmountYB, 2) }}</td>
                        </tr>

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

        <div class="border rounded p-5">

            <h5 class="font-semibold mb-4">Rekod Penetapan KPI Pelaburan</h5>
            <p class="text-xs font-bold">YB Dato’ Pengerusi memohon agar sasaran adalah melebihi sasaran tahun 2024: <span
                    class="text-[#BD8736]">DEADLINE, 2 WEEK from JPPP MEETING.</span></p>
            <p class="text-xs font-bold">15-04-2025 | Jumlah Pelaburan Komited telah dikemaskini berdasarkan data yang diisi
                oleh S-GLC. Jumlah pelaburan komited berjumlah RM 2,000,333.00.</p>
        </div>

        <button
            class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200 ml-auto">
            <i class="fa-solid fa-edit text-white text-xs"></i>
            <span>Kemaskini</span>
        </button>


    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('agencyPieChart').getContext('2d');

        const chartLabels = @json($chartLabel);
        const chartData = @json($chartPercent);

        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'Status',
                    data: chartData,
                    backgroundColor: [
                        '#F9DFF2 ',
                        '#F9DFC0 ',
                        '#E0C7FB',
                        '#CDF6DE',
                        '#FAEAB7',
                        '#E0EEFE'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: false,
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed;
                                return `(${value}%)`;
                            }
                        }
                    }
                }
            }
        });
    </script>
@endsection