{% extends 'base.html' %}
{% load static %}

{% block title %}ComplianceShield Dashboard{% endblock %}

{% block content %}
<style>
  :root {
    --ink: #0b0b0c;
    --paper: #fbfaf7;
    --line: rgba(11, 11, 12, .08);
    --shadow: 0 18px 48px rgba(11, 11, 12, .10);
    --shadow2: 0 10px 26px rgba(11, 11, 12, .10);
    --radius: 22px;
    --blue: #2563eb;
    --blue2: #60a5fa;
    --ice: #eaf2ff;
    --ice2: #f6fbff;
  }
  body {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background-color: #f7f9fc;
  }
  .panel {
    border-radius: var(--radius);
    background: white;
    border: 1px solid var(--line);
    box-shadow: var(--shadow2);
  }
  .chip {
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f8f9fa;
  }
</style>

<div class="flex h-screen bg-gray-100">
  <!-- Sidebar -->
  <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
    <div class="p-6">
      <a href="#" class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
        <div class="font-semibold tracking-tight">ComplianceShield</div>
      </a>
    </div>
    <div class="flex-1">
        <p class="px-6 text-xs text-gray-500 uppercase tracking-wider">Menu</p>
        <nav class="px-4 py-2 space-y-1">
          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
            🏠 Dashboard
          </a>
          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
            📊 Reports
          </a>
          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
            📅 Calendar
          </a>
          <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
            👥 Teams
          </a>
        </nav>
        <p class="px-6 mt-4 text-xs text-gray-500 uppercase tracking-wider">Projects</p>
        <nav class="px-4 py-2 space-y-1">
            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
                🟦 Ongoing
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
                ✅ Completed
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
                ⏸️ On Hold
            </a>
        </nav>
    </div>
    <div class="p-4">
        <div class="p-4 bg-gray-100 rounded-lg text-center">
            <p class="text-sm font-medium">Ready to launch a new project?</p>
            <p class="text-xs text-gray-600 mt-1">Create a new jobsite and start tracking compliance today.</p>
            <button class="mt-3 w-full bg-blue-600 text-white py-2 rounded-lg text-sm font-semibold">Add New Project</button>
        </div>
    </div>
    <div class="border-t border-gray-200">
        <nav class="px-4 py-4 space-y-1">
            <a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
                ⚙️ Settings
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
                🛟 Help Center
            </a>
        </nav>
    </div>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-6 lg:p-10 overflow-y-auto">
    <div class="max-w-7xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-semibold text-gray-800">ComplianceShield Dashboard</h1>
            <div class="flex-1 flex justify-center px-8">
                <div class="relative w-full max-w-lg">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                        <i-o-magnifying-glass class="h-5 w-5 text-gray-500"></i-o-magnifying-glass>
                    </span>
                    <input type="text" placeholder="Search..." class="block w-full rounded-md border border-gray-200 bg-gray-50 py-2 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm">
                </div>
            </div>
            <div class="flex items-center gap-4">
                <i-o-bell class="h-6 w-6 text-gray-500"></i-o-bell>
                <div class="flex items-center gap-2">
                    <div class="h-8 w-8 rounded-full bg-gray-400"></div>
                    <div>
                        <p class="font-semibold text-sm">Owner</p>
                        <p class="text-xs text-gray-500">Your Account Menu</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel p-6 mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-semibold">Ready to launch a new project?</h2>
                    <p class="text-sm text-gray-500">Create a new jobsite and start tracking compliance today.</p>
                </div>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold">Add New Project</button>
            </div>
        </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 col-span-2">
          <div class="panel p-6">
            <h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-blue-500 rounded-full"></span> Ongoing Projects</h3>
            <p class="text-3xl font-bold mt-2">08</p>
            <p class="text-sm text-green-500">+3.0% From last month</p>
          </div>
          <div class="panel p-6">
            <h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-green-500 rounded-full"></span> Complete Projects</h3>
            <p class="text-3xl font-bold mt-2">30</p>
            <p class="text-sm text-red-500">-5.0% From last month</p>
          </div>
          <div class="panel p-6">
            <h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-gray-400 rounded-full"></span> On Hold Projects</h3>
            <p class="text-3xl font-bold mt-2">03</p>
            <p class="text-sm text-green-500">+8.0% From last month</p>
          </div>
        </div>
        <div class="panel p-6 col-span-1">
            <h3 class="font-semibold mb-4">Alert Overview Live</h3>
            <div class="space-y-4">
                <div class="flex items-start gap-4">
                    <div class="h-8 w-8 bg-red-100 text-red-600 flex items-center justify-center rounded-full"><i-o-exclamation-triangle class="h-5 w-5"></i-o-exclamation-triangle></div>
                    <div>
                        <p class="font-semibold text-sm">Fraud / anomaly alert</p>
                        <p class="text-xs text-gray-500">Project Manager — Eng. Rahim</p>
                        <p class="text-xs text-gray-500">Habiganj 9746tr — Ongoing</p>
                        <p class="text-xs mt-1">Material usage exceeded expected threshold.</p>
                        <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
                    </div>
                    <button class="text-xs text-blue-600 font-semibold">Mark as solved</button>
                </div>
                <div class="flex items-start gap-4">
                    <div class="h-8 w-8 bg-yellow-100 text-yellow-600 flex items-center justify-center rounded-full"><i-o-exclamation-circle class="h-5 w-5"></i-o-exclamation-circle></div>
                    <div>
                        <p class="font-semibold text-sm">COI expiring soon</p>
                        <p class="text-xs text-gray-500">Subcontractor — R. Builders LLC</p>
                        <p class="text-xs mt-1">Certificate of Insurance Expires in 7 days — request renewal.</p>
                        <p class="text-xs text-gray-400 mt-1">Today</p>
                    </div>
                    <button class="text-xs text-blue-600 font-semibold">Send reminder</button>
                </div>
            </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
        <div class="panel p-6 col-span-1">
            <h3 class="font-semibold">Projects Map Overview</h3>
            <div class="mt-4 bg-gray-200 rounded-lg h-48 flex items-center justify-center">
                <p class="text-gray-500">Mock map</p>
            </div>
             <ul class="mt-4 space-y-2 text-sm">
                <li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Kukatata wt46tr</li>
                <li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Habiganj 9746tr</li>
                <li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Newmarket 746t</li>
             </ul>
        </div>
        <div class="panel p-6 col-span-2">
            <h3 class="font-semibold">Habiganj 9746tr — Ongoing</h3>
            <div class="grid grid-cols-3 gap-4 text-sm mt-4">
                <div><p class="text-gray-500">Location</p><p>Dhaka, Bangladesh</p></div>
                <div><p class="text-gray-500">Planned</p><p>$2.5M</p></div>
                <div><p class="text-gray-500">Actual</p><p>$2.0M (-12%)</p></div>
            </div>
            <div class="mt-4">
                <p class="text-gray-500 text-sm">Progress</p>
                <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
                </div>
            </div>
            <button class="text-blue-600 font-semibold text-sm mt-4">View details</button>
        </div>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
        <div class="panel p-6 col-span-1">
            <h3 class="font-semibold">Compliance Status</h3>
            <div class="mt-4 space-y-4">
                <div>
                    <p class="font-semibold">Daily Logs</p>
                    <p class="text-gray-500 text-sm">On-time: 92%</p>
                </div>
                <div>
                    <p class="font-semibold">Docs</p>
                    <p class="text-gray-500 text-sm">Valid: 128 • Expiring: 7</p>
                </div>
                 <div>
                    <p class="font-semibold">Equipment</p>
                    <p class="text-gray-500 text-sm">Maintenance due: 3</p>
                </div>
            </div>
        </div>
        <div class="col-span-2">
             <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold">Daily Activity Log</h2>
                <div>
                    <button class="chip px-4 py-2 text-sm font-semibold bg-white">Today</button>
                    <button class="chip px-4 py-2 text-sm font-semibold">This week</button>
                </div>
            </div>
            <div class="mt-4 space-y-4">
              <div class="panel p-6">
                <h3 class="font-semibold">Floor Slab</h3>
                <p class="text-sm text-gray-500">Project Manager — Eng. Rahim</p>
                <p class="text-xs text-gray-500">Habiganj 9746tr — Ongoing</p>
                <ul class="list-disc list-inside text-sm mt-2 space-y-1">
                    <li>Ensure rebar spacing matches BOQ specification.</li>
                    <li>Check curing process for foundation concrete.</li>
                    <li>Verify column alignment before pouring.</li>
                </ul>
                <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                    <span>Sep 17, 2025 — 06:45 PM</span>
                    <span class="flex items-center gap-2"><i-o-photo class="h-5 w-5"></i-o-photo> 2 photos</span>
                </div>
              </div>
              <div class="panel p-6">
                <h3 class="font-semibold">Safety Meeting</h3>
                <p class="text-sm text-gray-500">Supervisor — T. Coleman</p>
                <p class="text-xs text-gray-500">Kukatata wt46tr — Ongoing</p>
                 <ul class="list-disc list-inside text-sm mt-2 space-y-1">
                    <li>Toolbox talk completed (PPE + ladder safety)</li>
                    <li>Attendance captured with GPS check-in.</li>
                    <li>PPE checklist verified (helmets, vests).</li>
                    <li>Hazards documented with photo proof.</li>
                </ul>
                 <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                    <span>Sep 17, 2025 — 08:10 AM</span>
                    <span class="flex items-center gap-2 text-green-600"><i-o-check-circle class="h-5 w-5"></i-o-check-circle> Completed</span>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
  </main>
</div>
{% endblock %}
