@extends('layouts.main')


@php
    $hasNotification = true;
    $FDI_amt = 100000000;
@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 <i class="fa-solid fa-chevron-right"></i> Lihat Projek</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="flex flex-col lg:flex-row gap-2 w-full">
            <div class="relative w-full lg:w-fit">
                <input type="text" placeholder="Carian"
                    class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
                <div class="pointer-events-none absolute text-gray-500 text-xs"
                    style="top: 50%; transform: translateY(-50%); right:10px">
                    <i class="fas fa-search"></i>
                </div>
            </div>

            <div class="relative w-full lg:w-fit">
                <select id="selectProjectType"
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onchange="fetchAndRenderProjects()">
                    <option value="commited" selected>Komited</option>
                    <option value="potential">Pontential</option>
                </select>
            </div>

            <div class="relative w-full lg:w-fit">
                <select id="selectProjectStatus"
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onchange="renderFDITable()">
                    <option value="all" selected>Status</option>
                    <option value="1">Perjanjian Muktamad</option>
                    <option value="0">Deraf Perjanjian</option>
                </select>
            </div>

            <div class="relative w-full lg:w-fit">
                <select id="selectProjectArea"
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onchange="renderFDITable()">
                    <option value="all" selected>Daerah</option>
                    <option value="Gambang">Gambang</option>
                    <option value="Pekan">Pekan</option>
                </select>
            </div>

            <div class="relative w-full lg:w-fit">
                <select id="selectProjectYear"
                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onchange="renderFDITable()">
                    <option value="all" selected>Tahun</option>
                    <option value="2026">2026</option>
                    <option value="2025">2025</option>
                </select>
            </div>

            <button
                class="bg-[#012961] hover:bg-blue-700 text-white font-semibold w-full lg:w-fit text-xs py-2 px-4 rounded-lg shadow-md transition duration-200">
                <span><i class="fa-solid fa-file-excel text-white text-xs pe-3"></i> Eksport</span>
            </button>
        </div>


        <div class="border rounded">
            <h5 class="font-semibold m-5">Senarai Pelaburan Komited Perbadanan Kemajuan Negeri Pahang (PKNP) 2025</h5>
            <div class="bg-[#012961] text-white p-5">
                <h3 class="text-xs font-bold">FOREIGN DIRECT INVESTMENT (FDI)</h3>
            </div>
            <div class="overflow-x-scroll overflow-hidden rounded-[10px]">
                <table class="min-w-[2000px] text-sm text-left text-gray-700 border-collapse">
                    <thead>
                        <tr>
                            <th class="text-xs px-4 py-5">Bil</th>
                            <th class="text-xs px-4 py-5">Nama Syarikat</th>
                            <th class="text-xs px-4 py-5">Jenis Projek</th>
                            <th class="text-xs px-4 py-5">Status</th>
                            <th class="text-xs px-4 py-5">Catatan</th>
                            <th class="text-xs px-4 py-5">Tarikh MOA Ditandatangani</th>
                            <th class="text-xs px-4 py-5">Daerah</th>
                            <th class="text-xs px-4 py-5">Anggaran Nilai Pelaburan (RM)</th>
                            <th class="text-xs px-4 py-5">Anggaran Peluang Pekerjaan</th>
                            <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
                        </tr>
                    </thead>
                    <tbody id="FDItableBody">
                        @foreach ($commitedFDIProject as $index => $project)
                            <tr>
                                <td class="px-4 py-2">{{ $index + 1 }}</td>
                                <td class="px-4 py-2">{{ $project['company_name'] }}</td>
                                <td class="px-4 py-2">{{ $project['type'] }}
                                </td>
                                <td class="px-4 py-2 text-center">
                                    @switch($project['status'])
                                        @case(1)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
                                                Perjanjian Muktamad
                                            </div>
                                        @break

                                        @case(0)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452; width:100%">
                                                Deraf Perjanjian
                                            </div>
                                        @break

                                        <div></div>

                                        @default
                                    @endswitch
                                </td>
                                <td class="px-4 py-2 text-xs">{{ $project['note'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['moa_date'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['area'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ number_format($project['invesment_approx'], 2) }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['labour_approx'] }}</td>
                                @if ($project['land_area'])
                                    <td class="px-4 py-2 text-xs">{{ number_format($project['land_area']) }}</td>
                                @else
                                    <td class="px-4 py-2 text-xs"><span class="text-md font-bold">TBC</span></td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="bg-[#F8F8F8] p-5">
                <h3 class="text-xs font-bold">JUMLAH FDI: <span class="ms-4">{{ number_format($FDI_amt, 2) }}</span></h3>
            </div>
        </div>

        <div class="border rounded overflow-hidden">
            <div class="bg-[#012961] text-white p-5">
                <h3 class="text-xs font-bold">Domestic Direct Investment (DDI)</h3>
            </div>
            <div class="overflow-x-scroll overflow-hidden rounded-[10px]">
                <table class="min-w-[2000px] text-sm text-left text-gray-700 border-collapse">
                    <thead>
                        <tr>
                            <th class="text-xs px-4 py-5">Bil</th>
                            <th class="text-xs px-4 py-5">Nama Syarikat</th>
                            <th class="text-xs px-4 py-5">Jenis Projek</th>
                            <th class="text-xs px-4 py-5">Status</th>
                            <th class="text-xs px-4 py-5">Catatan</th>
                            <th class="text-xs px-4 py-5">Tarikh MOA Ditandatangani</th>
                            <th class="text-xs px-4 py-5">Daerah</th>
                            <th class="text-xs px-4 py-5">Anggaran Nilai Pelaburan (RM)</th>
                            <th class="text-xs px-4 py-5">Anggaran Peluang Pekerjaan</th>
                            <th class="text-xs px-4 py-5">Keluasan (Ekar)</th>
                        </tr>
                    </thead>
                    <tbody id="DDItableBody">
                        @foreach ($commitedDDIProject as $index => $project)
                            <tr>
                                <td class="px-4 py-2">{{ $index + 1 }}</td>
                                <td class="px-4 py-2">{{ $project['company_name'] }}</td>
                                <td class="px-4 py-2">{{ $project['type'] }}
                                </td>
                                <td class="px-4 py-2 text-center">
                                    @switch($project['status'])
                                        @case(1)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
                                                Perjanjian Muktamad
                                            </div>
                                        @break

                                        @case(0)
                                            <div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452; width:100%">
                                                Deraf Perjanjian
                                            </div>
                                        @break

                                        <div></div>

                                        @default
                                    @endswitch
                                </td>
                                <td class="px-4 py-2 text-xs">{{ $project['note'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['moa_date'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['area'] }}</td>
                                <td class="px-4 py-2 text-xs">{{ number_format($project['invesment_approx'], 2) }}</td>
                                <td class="px-4 py-2 text-xs">{{ $project['labour_approx'] }}</td>
                                @if ($project['land_area'])
                                    <td class="px-4 py-2 text-xs">{{ number_format($project['land_area'], 2) }}</td>
                                @else
                                    <td class="px-4 py-2 text-xs"><span class="text-md font-bold">TBC</span></td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="bg-[#F8F8F8] p-5">
                <h3 class="text-xs font-bold">JUMLAH DDI: <span class="ms-4">{{ number_format($FDI_amt, 2) }}</span>
                </h3>
            </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>
        var FDIProject = [];
        var DDIProject = [];

        async function fetchAndRenderProjects() {

            const selectedType = document.getElementById('selectProjectType').value;

            try {

                const response = await fetch(`/api/project/${selectedType}`); // Adjust to your real endpoint
                const data = await response.json();

                if (!data.FDIProject || !data.DDIProject) return

                FDIProject = data.FDIProject
                DDIProject = data.DDIProject
                renderFDITable()
                renderDDITable()

            } catch (error) {
                console.error('Error fetching projects:', error);
            }
        }

        function renderFDITable() {

            const tbody = document.getElementById('FDItableBody');
            tbody.innerHTML = ''; // Clear existing content

            data = filterData(FDIProject)

            data.forEach((project, index) => {
                const statusHTML = (() => {
                    switch (project.status) {
                        case 1:
                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
                                Perjanjian Muktamad</div>`;
                        case 0:
                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452;width:100%">
                                Deraf Perjanjian</div>`;
                        default:
                            return `<div>-</div>`;
                    }
                })();

                const row = `
                    <tr>
                        <td class="px-4 py-2">${index + 1}</td>
                        <td class="px-4 py-2">${project.company_name}</td>
                        <td class="px-4 py-2">${project.type}</td>
                        <td class="px-4 py-2 text-center">${statusHTML}</td>
                        <td class="px-4 py-2 text-xs">${project.note}</td>
                        <td class="px-4 py-2 text-xs">${project.moa_date}</td>
                        <td class="px-4 py-2 text-xs">${project.area}</td>
                        <td class="px-4 py-2 text-xs">${Number(project.invesment_approx).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td class="px-4 py-2 text-xs">${project.labour_approx}</td>
                        <td class="px-4 py-2 text-xs">${project.land_area ? Number(project.land_area).toLocaleString() : '<span class="text-md font-bold">TBC</span>'}</td>
                    </tr>
                `;
                tbody.insertAdjacentHTML('beforeend', row);
            });

        }

        function renderDDITable() {

            const tbody = document.getElementById('DDItableBody');
            tbody.innerHTML = ''; // Clear existing content

            data = filterData(DDIProject)

            data.forEach((project, index) => {
                const statusHTML = (() => {
                    switch (project.status) {
                        case 1:
                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                style="color:#E5A20A; background-color:#FFFBF4; border-color:#E5A20A;width:100%">
                                Perjanjian Muktamad</div>`;
                        case 0:
                            return `<div class="px-3 py-1 text-xs rounded-lg border inline-block"
                                style="color:#49B452; background-color:#F7FFF7; border-color:#49B452;width:100%">
                                Deraf Perjanjian</div>`;
                        default:
                            return `<div>-</div>`;
                    }
                })();

                const row = `
                    <tr>
                        <td class="px-4 py-2">${index + 1}</td>
                        <td class="px-4 py-2">${project.company_name}</td>
                        <td class="px-4 py-2">${project.type}</td>
                        <td class="px-4 py-2 text-center">${statusHTML}</td>
                        <td class="px-4 py-2 text-xs">${project.note}</td>
                        <td class="px-4 py-2 text-xs">${project.moa_date}</td>
                        <td class="px-4 py-2 text-xs">${project.area}</td>
                        <td class="px-4 py-2 text-xs">${Number(project.invesment_approx).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                        <td class="px-4 py-2 text-xs">${project.labour_approx}</td>
                        <td class="px-4 py-2 text-xs">${project.land_area ? Number(project.land_area).toLocaleString() : '<span class="text-md font-bold">TBC</span>'}</td>
                    </tr>
                `;
                tbody.insertAdjacentHTML('beforeend', row);
            });

        }

        function filterData(data) {

            const status = document.getElementById("selectProjectStatus").value
            const area = document.getElementById("selectProjectArea").value
            const year = document.getElementById("selectProjectYear").value

            // filter by status
            data = data.filter(project => (status === "all" || parseInt(status) === parseInt(project.status)))

            // filter by area
            data = data.filter(project => (area === "all" || area === project.area))

            // filter by year
            data = data.filter(project => (year === "all" || parseInt(year) === parseInt(project.year)))

            return data
        }

        document.addEventListener('DOMContentLoaded', fetchAndRenderProjects);
    </script>
@endsection