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 text-center">Bil</th>
                            <th class="text-xs px-4 py-2 text-center">S-GLC</th>
                            <th class="text-xs px-4 py-2 text-center">Sasaran Pelaburan 2025 (RM)</th>
                            <th class="text-xs px-4 py-2 text-center">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 text-center">{{ $index + 1 }}</td>
                                <td class="px-4 py-2 border ">
                                    <a href="/project" class="text-blue-800 underline">{{ $data['name'] }}</a>
                                </td>
                                <td class="px-4 py-2 border text-center">{{ number_format($data['investment_target'], 2) }}
                                </td>
                                <td class="px-4 py-2 border text-center">
                                    {{ 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-center">{{ number_format($totalTargetAmount, 2) }}</td>
                            <td class="px-4 py-2 text-white text-center">{{ number_format($totalTargetAmountYB, 2) }}</td>
                        </tr>

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

        <div x-data="{ editNote: false }">
            <div x-show="!editNote" class="border rounded p-5 space-y-4 mb-3">
                <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>

            <!-- Edit mode -->
            <div x-show="editNote" class="border rounded p-5 space-y-4 mb-3">
                <label for="note" class="text-sm font-semibold text-gray-700 block">Kemaskini Nota:</label>
                <textarea id="textNote" x-model="noteText" placeholder="Masukkan nota baru di sini..."
                    class="w-full h-32 p-3 border border-gray-300 rounded-lg text-sm text-gray-800 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"></textarea>
            </div>

            <!-- Buttons -->
            <div class="flex justify-end gap-2">
                <!-- Show when not editing -->
                <button @click="editNote = true" x-show="!editNote"
                    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">
                    <i class="fa-solid fa-edit text-white text-xs"></i>
                    <span>Kemaskini</span>
                </button>

                <!-- Show when editing -->
                <button onclick="updateNote()" @click="editNote = false" x-show="editNote"
                    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">
                    <i class="fa-solid fa-save text-white text-xs"></i>
                    <span>Simpan</span>
                </button>
            </div>

            <script>
                function updateNote(){
                    console.log("update note")
                }
            </script>

        </div>

    </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