@extends('layouts.app')

@section('dashboard-title')
    <h3 class="">WCKP - PROGRESS DASHBOARD</h3>
@endsection
@section('extra_margin', 'style=margin-top:32px;')

@section('content')
    <!-- Inner Navbar -->
    <div class="flex items-stretch lg:fixed z-5 top-(--header-height) start-(--sidebar-width) end-5 h-(--navbar-height) mx-5 lg:mx-0 bg-muted"
        id="navbar" style="margin-top: 32px">
        <div class="rounded-t-xl border border-input border-b-input bg-background filter-container flex items-stretch grow">
            <!-- Container -->
            <div class="kt-container-fluid flex justify-center items-stretch gap-5">
              <div class="grid items-stretch">
                    <div class="kt-scrollable-x-auto flex items-stretch">

                    </div>
                </div>

            </div>
            <!-- Right section: Download icon -->
            <div class="flex items-center ml-auto me-2">
                <button type="button"
                    class="export-btn flex items-center gap-2 px-4 py-2 text-black font-semibold rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 12v8m0 0l-4-4m4 4l4-4" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v8" />
                    </svg>
                    Export
                </button>
            </div>
            <!-- End of Container -->
        </div>
    </div>
    <!-- End of Inner Navbar -->

    <!-- Container -->
    <div class="kt-container-fluid">
        <div class="grid gap-5 lg:gap-7.5 mb-5">
                 <table id="dashboard_table" class="divide-y divide-gray-200">
                                <thead>
    <!-- First Row: Common headings -->
    <tr class="bg-gray-100">
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800" rowspan="2">SR.</th>
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800" rowspan="2">INTERVENTIONS</th>
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800" rowspan="2">STATUS</th>
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800" rowspan="2">PROJECT TARGETS</th>
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800" rowspan="2">TILL LAST YEAR PROGRESS</th>

        <!-- Common heading for current year -->
        <th class="px-2 py-2 text-center text-sm font-bold text-white bg-primary uppercase tracking-wide" colspan="3">
            CURRENT YEAR <b>(2024-2025)</b>
        </th>

        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800 " rowspan="2">CUMULATIVE PROGRESS</th>
        <th class="px-2 py-2 text-left text-sm font-semibold text-gray-800 " rowspan="2">PROGRESS % AGAINST PROJECT TARGETS</th>
    </tr>

    <!-- Second Row: Sub-columns -->
    <tr class="bg-gray-100">
        <th class="px-2 py-2 text-center text-sm font-semibold text-gray-700">CURRENT TARGETS</th>
        <th class="px-2 py-2 text-center text-sm font-semibold text-gray-700">CURRENT PROGRESS</th>
        <th class="px-2 py-2 text-center text-sm font-semibold text-gray-700">PROGRESS %</th>
    </tr>
</thead>
<tbody>
@foreach ($data as $row)
<tr>
    <td class="px-1 py-1">{{ $row['sr'] ?? '' }}</td>
    <td class="px-1 py-1">{{ $row['intervention'] ?? '' }}</td>
    <td class="px-1 py-1">{{ $row['status'] ?? '' }}</td>
    <td class="px-1 py-1">{{ number_format($row['project_targets'] ?? 0) }}</td>
    <td class="px-1 py-1">{{ number_format($row['till_last_year'] ?? 0) }}</td>
    <td class="px-1 py-1">{{ number_format($row['current_target'] ?? 0) }}</td>
    <td class="px-1 py-1">{{ number_format($row['current_progress'] ?? 0) }}</td>
    <td class="px-1 py-1">{{ $row['progress_percent'] ?? 0 }}%</td>
    <td class="px-1 py-1">{{ number_format($row['cumulative'] ?? 0) }}</td>
    <td class="px-1 py-1">{{ $row['percent_against'] ?? 0 }}%</td>
</tr>
@endforeach
</tbody>


            </table>
        </div>
    </div>
    <!-- End of Container -->
@endsection

@section('scripts')
    @vite('resources/js/pages/dashboard.js')
@endsection