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

{% block title %}ComplianceShield — Portal{% 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>
    <nav class="flex-1 px-4 py-2 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        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">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7m-4 10V7m-6 10V7m-6 10V7"></path></svg>
        Projects
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        Documents
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3-1.343 3-3S13.657 2 12 2 9 3.343 9 5s1.343 3 3 3zm0 2c-2.21 0-4 1.79-4 4v1h8v-1c0-2.21-1.79-4-4-4zm6 6H6"></path></svg>
        Team
      </a>
       <a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.096 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        Admin
      </a>
    </nav>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-6 lg:p-10">
    <div class="max-w-7xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-semibold text-gray-800">Welcome, User!</h1>
                <p class="text-gray-500">Here is your compliance and project overview.</p>
            </div>
            <div class="relative">
                <input type="search" placeholder="Search projects..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-64 focus:ring-blue-500 focus:border-blue-500">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
        </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
        <div class="lg:col-span-2">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="panel p-6">
                <h3 class="text-lg font-semibold">Active Projects</h3>
                <p class="text-3xl font-bold mt-2">12</p>
                <p class="text-sm text-gray-500">+2 this week</p>
              </div>
              <div class="panel p-6">
                <h3 class="text-lg font-semibold">Pending Tasks</h3>
                <p class="text-3xl font-bold mt-2">48</p>
                <p class="text-sm text-gray-500">Due this week</p>
              </div>
              <div class="panel p-6">
                <h3 class="text-lg font-semibold">Completed Milestones</h3>
                <p class="text-3xl font-bold mt-2">8</p>
                <p class="text-sm text-gray-500">This month</p>
              </div>
            </div>
        </div>

        <!-- On-time Status -->
        <div class="panel p-6 flex flex-col items-center justify-center">
          <h2 class="text-lg font-semibold">On-Time Completion</h2>
          <div class="relative mt-4" style="width: 120px; height: 120px;">
            <svg class="w-full h-full" viewBox="0 0 36 36">
              <path class="stroke-current text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3"></path>
              <path class="stroke-current text-blue-600" stroke-dasharray="92, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="3" stroke-linecap="round"></path>
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <span class="text-2xl font-bold">92%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Document Status -->
      <div class="mt-8">
        <h2 class="text-xl font-semibold">Document Status</h2>
        <div class="mt-4 panel">
          <table class="w-full text-sm">
            <thead class="text-left text-gray-500">
              <tr>
                <th class="p-4">Document Name</th>
                <th class="p-4">Project</th>
                <th class="p-4">Status</th>
                <th class="p-4">Last Updated</th>
              </tr>
            </thead>
            <tbody>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Structural Drawings</td>
                <td class="p-4">Habiganj 9746tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-green-100 text-green-700">Approved</span></td>
                <td class="p-4">2 days ago</td>
              </tr>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Electrical Plan</td>
                <td class="p-4">Kukatata wt46tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-yellow-100 text-yellow-700">Pending Review</span></td>
                <td class="p-4">5 days ago</td>
              </tr>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Safety Compliance Report</td>
                <td class="p-4">Habiganj 9746tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-red-100 text-red-700">Rejected</span></td>
                <td class="p-4">1 day ago</td>
              </tr>
        </div>
      </div>

      <!-- Equipment Maintenance -->
      <div class="mt-8">
        <h2 class="text-xl font-semibold">Equipment Maintenance</h2>
        <div class="mt-4 panel">
          <table class="w-full text-sm">
            <thead class="text-left text-gray-500">
              <tr>
                <th class="p-4">Equipment</th>
                <th class="p-4">Project</th>
                <th class="p-4">Status</th>
                <th class="p-4">Next Service</th>
              </tr>
            </thead>
            <tbody>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Excavator</td>
                <td class="p-4">Habiganj 9746tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-green-100 text-green-700">Operational</span></td>
                <td class="p-4">Dec 28, 2025</td>
              </tr>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Crane</td>
                <td class="p-4">Kukatata wt46tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-yellow-100 text-yellow-700">Maintenance Due</span></td>
                <td class="p-4">Dec 22, 2025</td>
              </tr>
              <tr class="border-t border-gray-200">
                <td class="p-4 font-semibold">Concrete Mixer</td>
                <td class="p-4">Habiganj 9746tr</td>
                <td class="p-4"><span class="chip text-xs px-3 py-1 bg-red-100 text-red-700">Out of Service</span></td>
                <td class="p-4">-</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Daily Activity Log -->
      <div class="mt-8">
        <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-8">
          <!-- Timeline Item -->
          <div class="flex gap-4">
            <div class="w-12 text-right text-sm text-gray-500">08:10 AM</div>
            <div class="relative">
                <div class="absolute -left-1.5 top-1 h-3 w-3 rounded-full bg-blue-500"></div>
                <div class="absolute -left-px top-4 h-full w-px bg-gray-200"></div>
            </div>
            <div class="flex-1 panel p-6">
              <div class="flex justify-between items-start">
                <div>
                  <h3 class="font-semibold">Safety Meeting</h3>
                  <p class="text-sm text-gray-500">Supervisor — T. Coleman</p>
                </div>
                <span class="chip text-xs px-3 py-1">Kukatata wt46tr — Ongoing</span>
              </div>
              <p class="mt-4 font-semibold">Toolbox talk completed (PPE + ladder safety)</p>
              <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                  <span>Sep 17, 2025</span>
                  <span class="chip text-xs px-3 py-1 text-green-600 border-green-200 flex items-center gap-1"><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Completed</span>
              </div>
            </div>
          </div>
          <!-- Timeline Item -->
          <div class="flex gap-4">
            <div class="w-12 text-right text-sm text-gray-500">06:45 PM</div>
            <div class="relative">
                <div class="absolute -left-1.5 top-1 h-3 w-3 rounded-full bg-blue-500"></div>
                <div class="absolute -left-px top-4 h-full w-px bg-gray-200"></div>
            </div>
            <div class="flex-1 panel p-6">
              <div class="flex justify-between items-start">
                <div>
                  <h3 class="font-semibold">Floor Slab</h3>
                  <p class="text-sm text-gray-500">Project Manager — Eng. Rahim</p>
                </div>
                <span class="chip text-xs px-3 py-1">Habiganj 9746tr — Ongoing</span>
              </div>
              <p class="mt-4 font-semibold">Concrete pouring completed for 2nd floor slab</p>
              <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
                <span>Sep 17, 2025</span>
                <span class="flex items-center gap-2"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 14m6-6l.01.01"></path></svg> 2 photos</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
{% endblock %}