@extends('theme.sphf.layouts.app')

@section('content')

<script src="https://cdn.tailwindcss.com"></script>

<style>
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
  * { font-family: 'IBM Plex Sans', sans-serif; }
  body { margin: 0; background: #f0f4f8; }
  .status-red { background: #ef4444; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .status-amber { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .status-yellow { background: #eab308; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .status-green { background: #22c55e; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .green-val { color: #16a34a; font-weight: 600; }
  .yellow-val { color: #ca8a04; font-weight: 600; }
  .amber-val { color: #d97706; font-weight: 600; }
  .red-val { color: #dc2626; font-weight: 600; }
  .donut { width: 120px; height: 120px; }
  table { border-collapse: collapse; width: 100%; }
  th { background: #f8fafc; color: #64748b; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
  td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
  tr:hover td { background: #f8fafc; }
</style>

<section class="sphf-page">
    <div class="sphf-page__heading-row">
        <div class="sphf-page__title-wrap">
            <h1 class="sphf-page__title">SPHF Live Monitoring & DSS Prototype</h1>
            <!-- <span class="sphf-page__badge">Updated 10-03-26</span> -->
        </div>
        <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfDashboardExportArea" data-export-file="SPHF_Dashboard_Report" data-export-bg="#f3f5f6">
            <i class="ki-filled ki-exit-down"></i>
            <span>Export</span>
        </button>
    </div>

    <div class="sphf-export-area" id="sphfDashboardExportArea">

        @include('theme.sphf.partials.filter-bar', [
            'options' => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

        <!-- YOUR ORIGINAL HTML START -->
        <div class="w-full min-h-screen flex flex-col p-2 gap-2 box-border">

        <!-- TOP ROW -->
        <div class="flex gap-2 flex-1 min-h-0">

          <!-- Stage Bottleneck Matrix -->
          <div class="bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col w-[67%] min-w-0 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-2 border-b border-slate-100 shrink-0">
              <span class="font-semibold text-slate-800 text-sm">Stage Bottleneck Matrix</span>
              <span class="text-xs font-semibold text-blue-600 border border-blue-200 bg-blue-50 px-2 py-0.5 rounded">Under-progress only</span>
            </div>

            <div class=" flex-1">
              <table>
                <thead>
                  <tr>
                    <th>Stage</th>
                    <th>Live Cases</th>
                    <th>Avg Days</th>
                    <th>Green</th>
                    <th>Yellow</th>
                    <th>Amber</th>
                    <th>Red</th>
                    <th>Escalation</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>1st to Plinth</td><td>98,000</td><td>54</td><td class="green-val">64,200</td><td class="yellow-val">18,100</td><td class="amber-val">9,200</td><td class="red-val">6,500</td><td>District/IP</td></tr>
                  <tr><td>Plinth to 2nd</td><td>64,200</td><td>39</td><td class="green-val">42,100</td><td class="yellow-val">10,500</td><td class="amber-val">6,800</td><td class="red-val">4,800</td><td>District/IP</td></tr>
                  <tr><td>2nd to Lintel</td><td>72,200</td><td>44</td><td class="green-val">41,100</td><td class="yellow-val">16,800</td><td class="amber-val">8,600</td><td class="red-val">5,700</td><td>Regional Ops</td></tr>
                  <tr><td>Lintel to 3rd</td><td>53,100</td><td>38</td><td class="green-val">33,800</td><td class="yellow-val">9,900</td><td class="amber-val">5,600</td><td class="red-val">3,800</td><td>Regional Ops</td></tr>
                  <tr><td>3rd to Roof</td><td>88,100</td><td>51</td><td class="green-val">55,200</td><td class="yellow-val">17,100</td><td class="amber-val">9,200</td><td class="red-val">6,600</td><td>HQ if Red</td></tr>
                  <tr><td>Roof to 4th</td><td>34,100</td><td>27</td><td class="green-val">24,900</td><td class="yellow-val">5,600</td><td class="amber-val">2,100</td><td class="red-val">1,500</td><td>Finance/Ops</td></tr>
                  <tr class="font-semibold bg-slate-50"><td>Overall</td><td>244,500</td><td>210</td><td class="green-val">60,300</td><td class="yellow-val">94,500</td><td class="amber-val">62,800</td><td class="red-val">26,900</td><td>HQ</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Donut -->
          <div class="bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col  shrink-0 w-[33%]">
            <span class="font-semibold text-slate-800 text-sm mb-2 p-3" style="border-bottom:1px solid;" >Stage Red Alert Share</span>
            <div class="flex-1 flex flex-col items-center justify-center gap-2">

              <svg viewBox="0 0 160 160" class="w-40 h-40">
                <circle cx="80" cy="80" r="55" fill="none" stroke="#e2e8f0" stroke-width="28"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#0d9488" stroke-width="28" stroke-dasharray="173 173" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#3b82f6" stroke-width="28" stroke-dasharray="44 302" stroke-dashoffset="-173" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#06b6d4" stroke-width="28" stroke-dasharray="26 320" stroke-dashoffset="-217" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#f97316" stroke-width="28" stroke-dasharray="30 316" stroke-dashoffset="-243" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#8b5cf6" stroke-width="28" stroke-dasharray="20 326" stroke-dashoffset="-273" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#ef4444" stroke-width="28" stroke-dasharray="28 318" stroke-dashoffset="-293" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="55" fill="none" stroke="#94a3b8" stroke-width="28" stroke-dasharray="18 328" stroke-dashoffset="-321" transform="rotate(-90 80 80)"/>
                <circle cx="80" cy="80" r="40" fill="white"/>
              </svg>
              <div class="mt-3 w-full flex flex-col items-center">

  <div class="grid grid-cols-3 gap-x-6 gap-y-2 text-xs">

    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#3b82f6"></span>
      <span>1st to Plinth</span>
    </div>

    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#06b6d4"></span>
      <span>Plinth to 2nd</span>
    </div>

    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#f97316"></span>
      <span>2nd to Lintel</span>
    </div>

    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#8b5cf6"></span>
      <span>Lintel to 3rd</span>
    </div>

    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#ef4444"></span>
      <span>3rd to Roof</span>
    </div>

    <!-- 🔥 FIX: Overall ko last grid item bana do -->
    <div class="flex items-center gap-2">
      <span class="w-3 h-2 rounded-sm" style="background:#94a3b8"></span>
      <span>Roof to 4th</span>
    </div>

  </div>

  <!-- Overall merged inside SAME 2 rows flow -->
  <div class="flex items-center gap-2 mt-2 text-xs">
    <span class="w-3 h-2 rounded-sm" style="background:#0d9488"></span>
    <span>Overall</span>
  </div>

</div>
            </div>
          </div>

        </div>

        <!-- BOTTOM -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col flex-1 min-h-0 overflow-hidden">
          <div class="flex items-center justify-between px-4 py-2 border-b border-slate-100 shrink-0">
            <span class="font-semibold text-slate-800 text-sm">Beneficiary Drill-down: Current Stage Delays</span>
            <span class="text-xs font-semibold text-orange-500 cursor-pointer hover:underline">Click Row</span>
          </div>

          <div class=" flex-1">
            <table>
              <thead>
                <tr>
                  <th>Beneficiary</th>
                  <th>CNIC</th>
                  <th>IP</th>
                  <th>District</th>
                  <th>IFI</th>
                  <th>Current Stage</th>
                  <th>Elapsed Days</th>
                  <th>Status</th>
                  <th>Owner Level</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>Ahsan Ali</td><td>35202-1234567-1</td><td>HANDS</td><td>Ghotki</td><td>World Bank</td><td>1st to Plinth</td><td>94</td><td><span class="status-red">Red</span></td><td>SPHF HQ</td></tr>
                <tr><td>Rashida Bibi</td><td>41301-1234567-8</td><td>NRSP</td><td>Badin</td><td>ADB</td><td>2nd to Lintel</td><td>64</td><td><span class="status-amber">Amber</span></td><td>Regional Ops</td></tr>
                <tr><td>Ahsan Ali</td><td>35202-1234567-1</td><td>HANDS</td><td>Ghotki</td><td>World Bank</td><td>1st to Plinth</td><td>94</td><td><span class="status-red">Red</span></td><td>SPHF HQ</td></tr>
                <tr><td>Rashida Bibi</td><td>41301-1234567-8</td><td>NRSP</td><td>Badin</td><td>ADB</td><td>2nd to Lintel</td><td>64</td><td><span class="status-amber">Amber</span></td><td>Regional Ops</td></tr>
                <tr><td>Ahsan Ali</td><td>35202-1234567-1</td><td>HANDS</td><td>Ghotki</td><td>World Bank</td><td>1st to Plinth</td><td>94</td><td><span class="status-red">Red</span></td><td>SPHF HQ</td></tr>
                <tr><td>Rashida Bibi</td><td>41301-1234567-8</td><td>NRSP</td><td>Badin</td><td>ADB</td><td>2nd to Lintel</td><td>64</td><td><span class="status-amber">Amber</span></td><td>Regional Ops</td></tr>
                <tr><td>Ahsan Ali</td><td>35202-1234567-1</td><td>HANDS</td><td>Ghotki</td><td>World Bank</td><td>1st to Plinth</td><td>94</td><td><span class="status-green">Red</span></td><td>SPHF HQ</td></tr>
                <tr><td>Rashida Bibi</td><td>41301-1234567-8</td><td>NRSP</td><td>Badin</td><td>ADB</td><td>2nd to Lintel</td><td>64</td><td><span class="status-amber">Amber</span></td><td>Regional Ops</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        </div>
        <!-- YOUR ORIGINAL HTML END -->

    </div>
</section>

@endsection

@section('scripts')
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@endsection