<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CRM Sales Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
   <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <style>
    * { font-family: 'Plus Jakarta Sans', sans-serif; }
    body { background: #f4f6fb; }

    .stat-card { background: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); min-width: 0; }
    .stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .badge-up { color: #22c55e; font-size: 12px; font-weight: 600; }

    .progress-bar { height: 6px; border-radius: 99px; background: #e5e7eb; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6366f1, #818cf8); }

    .funnel-segment { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .funnel-bar { height: 36px; border-radius: 6px; display: flex; align-items: center; padding-left: 12px; font-size: 13px; font-weight: 600; color: #fff; transition: width 0.8s ease; }

    .activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
    .activity-item:last-child { border-bottom: none; }
    .activity-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

    .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
    .task-item:last-child { border-bottom: none; }
    .task-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; transition: all .2s; }
    .task-item:hover .task-check { border-color: #6366f1; background: #eef2ff; }

    .donut-legend { display: flex; flex-direction: column; gap: 8px; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

    .conversion-card { background: #f8faff; border-radius: 12px; padding: 18px 20px; text-align: center; }

    @media (max-width: 640px) {
      .stat-cards-grid { grid-template-columns: 1fr 1fr !important; }
    }
    @media (max-width: 400px) {
      .stat-cards-grid { grid-template-columns: 1fr !important; }
    }
  </style>
</head>
<body class="min-h-screen px-2 sm:px-3 lg:px-4 py-4">

<div class="w-full max-w-[1600px] mx-auto space-y-6">

    <!-- Header -->
    <div class="flex items-center justify-between mb-2">
      <div>
        <h1 class="text-xl sm:text-2xl font-800 text-gray-900 font-extrabold">Sales Dashboard</h1>
        <p class="text-sm text-gray-500 mt-0.5">May 2025 · All data updated live</p>
      </div>
      <span class="hidden sm:inline-flex items-center gap-2 text-xs font-semibold bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-full border border-indigo-100">
        <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span> Live
      </span>
    </div>

    <!-- ── KPI CARDS ── -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-3 stat-cards-grid">

      <!-- Total Leads -->
      <div class="stat-card xl:col-span-1">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-indigo-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <div class="min-w-0">
            <p class="text-xs text-gray-500 font-medium truncate">Total Leads</p>
            <p class="text-xl font-extrabold text-gray-900 leading-tight">1,245</p>
            <span class="badge-up">↑ 18.5%</span>
          </div>
        </div>
      </div>

      <!-- Open Leads -->
      <div class="stat-card">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-blue-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Open Leads</p>
            <p class="text-xl font-extrabold text-gray-900 leading-tight">678</p>
            <span class="badge-up">↑ 12.3%</span>
          </div>
        </div>
      </div>

      <!-- Converted Leads -->
      <div class="stat-card">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-orange-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Converted</p>
            <p class="text-xl font-extrabold text-gray-900 leading-tight">312</p>
            <span class="badge-up">↑ 15.2%</span>
          </div>
        </div>
      </div>

      <!-- Deals Won -->
      <div class="stat-card">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-green-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Deals Won</p>
            <p class="text-xl font-extrabold text-gray-900 leading-tight">156</p>
            <span class="badge-up">↑ 20.6%</span>
          </div>
        </div>
      </div>

      <!-- Revenue (This month) -->
      <div class="stat-card sm:col-span-1">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-violet-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Revenue (This Month)</p>
            <p class="text-lg font-extrabold text-gray-900 leading-tight">₹24.85L</p>
            <span class="badge-up">↑ 22.8%</span>
          </div>
        </div>
      </div>
      
      <!-- Revenue (This year) -->
      <div class="stat-card sm:col-span-1">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-violet-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="3" y="4" width="18" height="17" rx="2" stroke="#8b5cf6" stroke-width="2"/>
  <path d="M8 2V6" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/>
  <path d="M16 2V6" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/>
  <path d="M3 9H21" stroke="#8b5cf6" stroke-width="2"/>
  <text x="12" y="17" text-anchor="middle" font-size="5" fill="#8b5cf6" font-family="Arial">YR</text>
</svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Revenue (This Year)</p>
            <p class="text-lg font-extrabold text-gray-900 leading-tight">₹40.85L</p>
            <span class="badge-up">↑ 40.8%</span>
          </div>
        </div>
      </div>

      <!-- Target -->
      <div class="stat-card">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-yellow-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-xs text-gray-500 font-medium">Target</p>
            <p class="text-lg font-extrabold text-gray-900 leading-tight">₹30L</p>
            <div class="progress-bar mt-1.5 w-full"><div class="progress-fill" style="width:83%"></div></div>
            <p class="text-xs text-gray-400 mt-0.5">83%</p>
          </div>
        </div>
      </div>

      <!-- Win Rate -->
      <div class="stat-card">
        <div class="flex items-start gap-3">
          <div class="stat-icon bg-pink-50">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
          </div>
          <div>
            <p class="text-xs text-gray-500 font-medium">Win Rate</p>
            <p class="text-xl font-extrabold text-gray-900 leading-tight">24.8%</p>
            <span class="badge-up">↑ 8.6%</span>
          </div>
        </div>
      </div>

    </div>

    <!-- ── CHARTS ROW ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    
      <!-- Sales Pipeline Funnel -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <h2 class="text-base font-bold text-gray-800 mb-5">Sales Pipeline</h2>
        <div class="space-y-2">
          <!-- New Lead -->
          <div class="funnel-segment">
            <div class="funnel-bar w-full" style="background:#6366f1; min-width:40px;">New Lead</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">1,245 (100%)</span>
          </div>
          <div class="funnel-segment">
            <div class="funnel-bar" style="background:#818cf8; width:54%; min-width:40px;">Contacted</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">678 (54%)</span>
          </div>
          <div class="funnel-segment">
            <div class="funnel-bar" style="background:#34d399; width:37%; min-width:40px;">Qualified</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">456 (37%)</span>
          </div>
          <div class="funnel-segment">
            <div class="funnel-bar" style="background:#fbbf24; width:20%; min-width:60px;">Proposal</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">245 (20%)</span>
          </div>
          <div class="funnel-segment">
            <div class="funnel-bar" style="background:#f87171; width:12%; min-width:80px;">Negotiation</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">156 (12%)</span>
          </div>
          <div class="funnel-segment">
            <div class="funnel-bar" style="background:#4ade80; width:12%; min-width:52px;">Won</div>
            <span class="text-xs text-gray-500 whitespace-nowrap font-medium w-28 text-right">156 (12%)</span>
          </div>
        </div>
      </div>

      <!-- Monthly Revenue Line Chart -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base font-bold text-gray-800">Monthly Revenue Overview</h2>
          <span class="text-sm font-bold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">₹24,85,000</span>
        </div>
        <div class="relative h-52 sm:h-64">
          <canvas id="revenueChart"></canvas>
        </div>
      </div>

    </div>

    <!-- ── RECENT ACTIVITIES + TASKS ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

      <!-- Recent Activities -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base font-bold text-gray-800">Recent Activities</h2>
          <button class="text-xs text-indigo-600 font-semibold hover:underline">View All</button>
        </div>
        <div>
          <div class="activity-item">
            <div class="activity-icon bg-blue-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800 truncate">Client meeting with Bright Future Pvt. Ltd.</p>
              <p class="text-xs text-gray-400 mt-0.5">Rohit Sharma</p>
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-2">10:30 AM</span>
          </div>
          <div class="activity-item">
            <div class="activity-icon bg-yellow-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.18 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 8.91a16 16 0 0 0 6.72 6.72l.82-.82a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800 truncate">Follow up call with TechNova Solutions</p>
              <p class="text-xs text-gray-400 mt-0.5">Anjali Verma</p>
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-2">11:45 AM</span>
          </div>
          <div class="activity-item">
            <div class="activity-icon bg-orange-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800 truncate">Proposal sent to Green Field Developers</p>
              <p class="text-xs text-gray-400 mt-0.5">Rohit Sharma</p>
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-2">Yesterday</span>
          </div>
          <div class="activity-item">
            <div class="activity-icon bg-green-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800 truncate">Demo scheduled with Alpha Systems</p>
              <p class="text-xs text-gray-400 mt-0.5">Neha Patel</p>
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-2">Yesterday</span>
          </div>
          <div class="activity-item">
            <div class="activity-icon bg-purple-50">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800 truncate">Quotation sent to Creative Mindz</p>
              <p class="text-xs text-gray-400 mt-0.5">Vikas Singh</p>
            </div>
            <span class="text-xs text-gray-400 whitespace-nowrap ml-2">2 Days Ago</span>
          </div>
        </div>
      </div>

      <!-- Tasks Due -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <h2 class="text-base font-bold text-gray-800 mb-4">Tasks Due</h2>
        <div>
          <div class="task-item">
            <div class="task-check"></div>
            <span class="text-sm text-gray-700 font-medium">Follow up with TechNova Solutions</span>
          </div>
          <div class="task-item">
            <div class="task-check"></div>
            <span class="text-sm text-gray-700 font-medium">Prepare proposal for Alpha Systems</span>
          </div>
          <div class="task-item">
            <div class="task-check"></div>
            <span class="text-sm text-gray-700 font-medium">Call back to Bright Future Pvt. Ltd.</span>
          </div>
          <div class="task-item">
            <div class="task-check"></div>
            <span class="text-sm text-gray-700 font-medium">Send quotation to Green Field Developers</span>
          </div>
          <div class="task-item">
            <div class="task-check"></div>
            <span class="text-sm text-gray-700 font-medium">Meeting with Webcorp Solutions</span>
          </div>
        </div>
      </div>

    </div>
    
    <!-- Latest Leads -->
<div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
  
  <div class="flex items-center justify-between mb-5">
    <h2 class="text-base font-bold text-gray-800">Latest Leads</h2>

    <button class="text-xs font-semibold text-indigo-600 hover:underline">
      View All
    </button>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full min-w-[700px]">

      <thead>
        <tr class="bg-gray-50">
          <th class="text-left text-[11px] font-semibold text-gray-500 px-4 py-3 rounded-l-xl">
            Lead Name
          </th>

          <th class="text-left text-[11px] font-semibold text-gray-500 px-4 py-3">
            Company
          </th>

          <th class="text-left text-[11px] font-semibold text-gray-500 px-4 py-3">
            Source
          </th>

          <th class="text-left text-[11px] font-semibold text-gray-500 px-4 py-3">
            Owner
          </th>

          <th class="text-left text-[11px] font-semibold text-gray-500 px-4 py-3 rounded-r-xl">
            Date
          </th>
        </tr>
      </thead>

      <tbody>

        <tr class="border-b border-gray-100">
          <td class="px-4 py-4 text-sm font-semibold text-gray-800">
            Amit Kumar
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Bright Future Pvt. Ltd.
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Website
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Rohit Sharma
          </td>

          <td class="px-4 py-4 text-sm text-gray-500">
            29 May 2025
          </td>
        </tr>

        <tr class="border-b border-gray-100">
          <td class="px-4 py-4 text-sm font-semibold text-gray-800">
            Neha Singh
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            TechNova Solutions
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Referral
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Anjali Verma
          </td>

          <td class="px-4 py-4 text-sm text-gray-500">
            29 May 2025
          </td>
        </tr>

        <tr class="border-b border-gray-100">
          <td class="px-4 py-4 text-sm font-semibold text-gray-800">
            Rahul Mehta
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Green Field Developers
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Google Ads
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Rohit Sharma
          </td>

          <td class="px-4 py-4 text-sm text-gray-500">
            28 May 2025
          </td>
        </tr>

        <tr class="border-b border-gray-100">
          <td class="px-4 py-4 text-sm font-semibold text-gray-800">
            Priya Sharma
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Alpha Systems
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Website
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Vikas Singh
          </td>

          <td class="px-4 py-4 text-sm text-gray-500">
            28 May 2025
          </td>
        </tr>

        <tr>
          <td class="px-4 py-4 text-sm font-semibold text-gray-800">
            Saurabh Jain
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Creative Mindz
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Referral
          </td>

          <td class="px-4 py-4 text-sm text-gray-600">
            Neha Patel
          </td>

          <td class="px-4 py-4 text-sm text-gray-500">
            27 May 2025
          </td>
        </tr>

      </tbody>

    </table>
  </div>

</div>

    <!-- ── LEADS BY SOURCE + CONVERSION SUMMARY ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

      <!-- Leads by Source -->
<div class=" bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Leads by Source
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div id="projectChart" class="mt-4"></div>

        </div>

      <!-- Lead Conversion Summary -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <h2 class="text-base font-bold text-gray-800 mb-5">Lead Conversion Summary</h2>
        <div class="grid grid-cols-2 gap-4">
          <div class="conversion-card">
            <p class="text-xs text-gray-500 font-medium mb-1">Total Leads</p>
            <p class="text-2xl font-extrabold text-gray-900">1,245</p>
          </div>
          <div class="conversion-card">
            <p class="text-xs text-gray-500 font-medium mb-1">Converted Leads</p>
            <p class="text-2xl font-extrabold text-indigo-600">312</p>
          </div>
          <div class="conversion-card">
            <p class="text-xs text-gray-500 font-medium mb-1">Conversion Rate</p>
            <p class="text-2xl font-extrabold text-green-500">24.8%</p>
          </div>
          <div class="conversion-card">
            <p class="text-xs text-gray-500 font-medium mb-1">Deals Won</p>
            <p class="text-2xl font-extrabold text-gray-900">156</p>
          </div>
        </div>
        <div class="conversion-card mt-4 bg-indigo-50">
          <p class="text-xs text-gray-500 font-medium mb-1">Win Rate</p>
          <p class="text-3xl font-extrabold text-indigo-700">12.5%</p>
        </div>
      </div>

    </div>

    <!-- ── TEAM PERFORMANCE + UPCOMING FOLLOW UPS ── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

      <!-- Team Performance -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm overflow-x-auto">
        <h2 class="text-base font-bold text-gray-800 mb-1">Team Performance <span class="text-xs font-medium text-gray-400">(May 2025)</span></h2>
        <table class="w-full mt-4 min-w-[420px]">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="text-left text-xs font-semibold text-gray-500 pb-2 pr-3">User</th>
              <th class="text-left text-xs font-semibold text-gray-500 pb-2 pr-3">Target (₹)</th>
              <th class="text-left text-xs font-semibold text-gray-500 pb-2 pr-3">Achieved (₹)</th>
              <th class="text-left text-xs font-semibold text-gray-500 pb-2 pr-3">Achievement %</th>
              <th class="text-left text-xs font-semibold text-gray-500 pb-2">Deals</th>
            </tr>
          </thead>
          <tbody>
            <!-- Rohit Sharma -->
            <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
              <td class="py-3 pr-3 text-sm font-semibold text-gray-800">Rohit Sharma</td>
              <td class="py-3 pr-3 text-sm text-gray-600">25,00,000</td>
              <td class="py-3 pr-3 text-sm text-gray-600">18,75,000</td>
              <td class="py-3 pr-3">
                <div class="flex items-center gap-2">
                  <div class="progress-bar w-20"><div class="progress-fill" style="width:75%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
                  <span class="text-xs font-semibold text-gray-700">75%</span>
                </div>
              </td>
              <td class="py-3 text-sm font-semibold text-gray-700">18</td>
            </tr>
            <!-- Anjali Verma -->
            <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
              <td class="py-3 pr-3 text-sm font-semibold text-gray-800">Anjali Verma</td>
              <td class="py-3 pr-3 text-sm text-gray-600">20,00,000</td>
              <td class="py-3 pr-3 text-sm text-gray-600">15,60,000</td>
              <td class="py-3 pr-3">
                <div class="flex items-center gap-2">
                  <div class="progress-bar w-20"><div class="progress-fill" style="width:76%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
                  <span class="text-xs font-semibold text-gray-700">76%</span>
                </div>
              </td>
              <td class="py-3 text-sm font-semibold text-gray-700">15</td>
            </tr>
            <!-- Vikas Singh -->
            <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
              <td class="py-3 pr-3 text-sm font-semibold text-gray-800">Vikas Singh</td>
              <td class="py-3 pr-3 text-sm text-gray-600">15,00,000</td>
              <td class="py-3 pr-3 text-sm text-gray-600">11,40,000</td>
              <td class="py-3 pr-3">
                <div class="flex items-center gap-2">
                  <div class="progress-bar w-20"><div class="progress-fill" style="width:76%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
                  <span class="text-xs font-semibold text-gray-700">76%</span>
                </div>
              </td>
              <td class="py-3 text-sm font-semibold text-gray-700">12</td>
            </tr>
            <!-- Neha Patel -->
            <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
              <td class="py-3 pr-3 text-sm font-semibold text-gray-800">Neha Patel</td>
              <td class="py-3 pr-3 text-sm text-gray-600">10,00,000</td>
              <td class="py-3 pr-3 text-sm text-gray-600">6,85,000</td>
              <td class="py-3 pr-3">
                <div class="flex items-center gap-2">
                  <div class="progress-bar w-20"><div class="progress-fill" style="width:68%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
                  <span class="text-xs font-semibold text-gray-700">68%</span>
                </div>
              </td>
              <td class="py-3 text-sm font-semibold text-gray-700">10</td>
            </tr>
            <!-- Total Row -->
            <tr class="bg-gray-50 rounded-lg">
              <td class="py-3 pr-3 text-sm font-extrabold text-gray-900 rounded-l-lg pl-2">Total</td>
              <td class="py-3 pr-3 text-sm font-extrabold text-gray-900">70,00,000</td>
              <td class="py-3 pr-3 text-sm font-extrabold text-gray-900">52,60,000</td>
              <td class="py-3 pr-3">
                <div class="flex items-center gap-2">
                  <div class="progress-bar w-20"><div class="progress-fill" style="width:75%;background:linear-gradient(90deg,#22c55e,#4ade80)"></div></div>
                  <span class="text-xs font-extrabold text-gray-900">75%</span>
                </div>
              </td>
              <td class="py-3 text-sm font-extrabold text-gray-900 rounded-r-lg">55</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Upcoming Follow Ups -->
      <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-base font-bold text-gray-800">Upcoming Follow Ups</h2>
          <button class="text-xs text-indigo-600 font-semibold hover:underline border border-indigo-100 px-3 py-1 rounded-full bg-indigo-50">View All</button>
        </div>
        <div class="space-y-1">

          <!-- TechNova -->
          <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
            <div class="w-9 h-9 rounded-10 bg-indigo-50 flex items-center justify-center flex-shrink-0 rounded-xl">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800">TechNova Solutions</p>
              <p class="text-xs text-gray-400 mt-0.5">Today, 11:00 AM</p>
            </div>
            <span class="text-xs font-bold px-3 py-1 rounded-full bg-red-50 text-red-500 flex-shrink-0">High</span>
          </div>

          <!-- Alpha Systems -->
          <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
            <div class="w-9 h-9 bg-blue-50 flex items-center justify-center flex-shrink-0 rounded-xl">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800">Alpha Systems</p>
              <p class="text-xs text-gray-400 mt-0.5">Tomorrow, 12:00 PM</p>
            </div>
            <span class="text-xs font-bold px-3 py-1 rounded-full bg-orange-50 text-orange-500 flex-shrink-0">Medium</span>
          </div>

          <!-- Webcorp Solutions -->
          <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
            <div class="w-9 h-9 bg-green-50 flex items-center justify-center flex-shrink-0 rounded-xl">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800">Webcorp Solutions</p>
              <p class="text-xs text-gray-400 mt-0.5">30 May 2025, 02:00 PM</p>
            </div>
            <span class="text-xs font-bold px-3 py-1 rounded-full bg-green-50 text-green-600 flex-shrink-0">Low</span>
          </div>

          <!-- Creative Mindz -->
          <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
            <div class="w-9 h-9 bg-purple-50 flex items-center justify-center flex-shrink-0 rounded-xl">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
            </div>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-semibold text-gray-800">Creative Mindz</p>
              <p class="text-xs text-gray-400 mt-0.5">31 May 2025, 10:30 AM</p>
            </div>
            <span class="text-xs font-bold px-3 py-1 rounded-full bg-orange-50 text-orange-500 flex-shrink-0">Medium</span>
          </div>

        </div>
      </div>

    </div>

    <!-- ── DAILY CALL REPORT ── -->
    <div class="bg-white rounded-2xl p-5 sm:p-6 shadow-sm">

      <!-- Section Header -->
      <div class="flex items-center justify-between mb-5">
        <h2 class="text-base font-bold text-gray-800">Daily Call Report</h2>
        <div class="flex items-center gap-2">
          <button onclick="document.getElementById('addCallModal').classList.remove('hidden')" class="inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Call
          </button>
          <button class="inline-flex items-center gap-1.5 border border-gray-200 hover:bg-gray-50 text-gray-600 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export
          </button>
        </div>
      </div>

      <!-- Filters + Summary Row -->
      <div class="flex flex-wrap items-end gap-4 mb-5 pb-5 border-b border-gray-100">
        <div>
          <label class="block text-[10px] font-semibold text-gray-500 mb-1">Report Date <span class="text-red-400">*</span></label>
          <div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-gray-50 cursor-pointer hover:border-indigo-300 transition-colors" style="min-width:148px;">
            <span>29-05-2025</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
          </div>
        </div>
        <div>
          <label class="block text-[10px] font-semibold text-gray-500 mb-1">User <span class="text-red-400">*</span></label>
          <div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-700 bg-gray-50 cursor-pointer hover:border-indigo-300 transition-colors" style="min-width:168px;">
            <span class="flex-1">Rohit Sharma</span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
          </div>
        </div>
        <div class="ml-auto flex items-end gap-8">
          <div class="text-center">
            <p class="text-[10px] font-semibold text-gray-500 mb-0.5">Total Calls Made</p>
            <p class="text-2xl font-extrabold text-gray-900">12</p>
          </div>
          <div class="text-center">
            <p class="text-[10px] font-semibold text-gray-500 mb-0.5">Total Duration</p>
            <p class="text-2xl font-extrabold text-gray-900">02:45:30</p>
          </div>
        </div>
      </div>

      <!-- Call Details Table + Right Panel -->
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <!-- Table -->
        <div class="xl:col-span-2">
          <p class="text-xs font-bold text-gray-600 mb-3 uppercase tracking-wide">Call Details</p>
          <div class="overflow-x-auto">
            <table class="w-full min-w-[800px] text-sm">
              <thead>
                <tr class="bg-gray-50">
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5 rounded-l-lg">#</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Company / Contact</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Phone Number</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Call Type</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Purpose</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Duration</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Call Status</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Next Follow Up</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5">Remarks</th>
                  <th class="text-left text-[11px] font-semibold text-gray-500 px-3 py-2.5 rounded-r-lg">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 text-xs text-gray-500 font-medium">1</td>
                  <td class="px-3 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">TechNova Solutions – Anjali Verma</td>
                  <td class="px-3 py-3 text-sm text-gray-500">9876543210</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Outbound</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Follow up</td>
                  <td class="px-3 py-3 text-sm text-gray-600">00:16:30</td>
                  <td class="px-3 py-3"><span class="text-xs font-semibold text-green-500">Interested</span></td>
                  <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">31-05-2025</td>
                  <td class="px-3 py-3 text-xs text-gray-500">Discussed about proposal</td>
                  <td class="px-3 py-3">
                    <div class="flex items-center gap-2">
                      <button class="text-gray-400 hover:text-indigo-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                      <button class="text-gray-400 hover:text-red-500 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 text-xs text-gray-500 font-medium">2</td>
                  <td class="px-3 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">Bright Future Pvt. Ltd. – Amit Kumar</td>
                  <td class="px-3 py-3 text-sm text-gray-500">9812345678</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Outbound</td>
                  <td class="px-3 py-3 text-sm text-gray-600 whitespace-nowrap">Proposal Discussion</td>
                  <td class="px-3 py-3 text-sm text-gray-600">00:22:10</td>
                  <td class="px-3 py-3"><span class="text-xs font-semibold text-blue-500">In Discussion</span></td>
                  <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">01-06-2025</td>
                  <td class="px-3 py-3 text-xs text-gray-500">Sent proposal on email</td>
                  <td class="px-3 py-3">
                    <div class="flex items-center gap-2">
                      <button class="text-gray-400 hover:text-indigo-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                      <button class="text-gray-400 hover:text-red-500 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 text-xs text-gray-500 font-medium">3</td>
                  <td class="px-3 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">Green Field Developers – Rahul Mehta</td>
                  <td class="px-3 py-3 text-sm text-gray-500">9723456789</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Inbound</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Requirement</td>
                  <td class="px-3 py-3 text-sm text-gray-600">00:18:45</td>
                  <td class="px-3 py-3"><span class="text-xs font-semibold text-green-500">Interested</span></td>
                  <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">30-05-2025</td>
                  <td class="px-3 py-3 text-xs text-gray-500">Needs custom solution</td>
                  <td class="px-3 py-3">
                    <div class="flex items-center gap-2">
                      <button class="text-gray-400 hover:text-indigo-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                      <button class="text-gray-400 hover:text-red-500 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 text-xs text-gray-500 font-medium">4</td>
                  <td class="px-3 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">Alpha Systems – Neha Singh</td>
                  <td class="px-3 py-3 text-sm text-gray-500">9933445566</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Outbound</td>
                  <td class="px-3 py-3 text-sm text-gray-600 whitespace-nowrap">Demo Follow up</td>
                  <td class="px-3 py-3 text-sm text-gray-600">00:20:05</td>
                  <td class="px-3 py-3"><span class="text-xs font-semibold text-red-500">Not Interested</span></td>
                  <td class="px-3 py-3 text-sm text-gray-400">–</td>
                  <td class="px-3 py-3 text-xs text-gray-500">Not the right time</td>
                  <td class="px-3 py-3">
                    <div class="flex items-center gap-2">
                      <button class="text-gray-400 hover:text-indigo-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                      <button class="text-gray-400 hover:text-red-500 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
                    </div>
                  </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-3 text-xs text-gray-500 font-medium">5</td>
                  <td class="px-3 py-3 text-sm font-semibold text-gray-800 whitespace-nowrap">Creative Mindz – Vikas Patel</td>
                  <td class="px-3 py-3 text-sm text-gray-500">9822334455</td>
                  <td class="px-3 py-3 text-sm text-gray-600">Outbound</td>
                  <td class="px-3 py-3 text-sm text-gray-600 whitespace-nowrap">Pricing Discussion</td>
                  <td class="px-3 py-3 text-sm text-gray-600">00:25:00</td>
                  <td class="px-3 py-3"><span class="text-xs font-semibold text-blue-500">In Discussion</span></td>
                  <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">02-06-2025</td>
                  <td class="px-3 py-3 text-xs text-gray-500">Waiting for approval</td>
                  <td class="px-3 py-3">
                    <div class="flex items-center gap-2">
                      <button class="text-gray-400 hover:text-indigo-600 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                      <button class="text-gray-400 hover:text-red-500 transition-colors"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg></button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- Right Panel: Call Summary + Call Outcome -->
        <div class="flex flex-col gap-4">

          <!-- Call Summary -->
          <div class="bg-gray-50 rounded-xl p-4">
            <p class="text-sm font-bold text-gray-800 mb-3">Call Summary</p>
            <div class="space-y-0">
              <div class="flex items-center justify-between py-2.5 border-b border-gray-200">
                <span class="text-sm text-gray-600">Total Calls Made</span>
                <span class="text-sm font-extrabold text-gray-900">12</span>
              </div>
              <div class="flex items-center justify-between py-2.5 border-b border-gray-200">
                <span class="text-sm text-gray-600">Connected Calls</span>
                <span class="text-sm font-extrabold text-gray-900">8</span>
              </div>
              <div class="flex items-center justify-between py-2.5 border-b border-gray-200">
                <span class="text-sm text-gray-600">Interested Leads</span>
                <span class="text-sm font-extrabold text-green-500">5</span>
              </div>
              <div class="flex items-center justify-between py-2.5 border-b border-gray-200">
                <span class="text-sm text-gray-600">Not Interested</span>
                <span class="text-sm font-extrabold text-red-500">2</span>
              </div>
              <div class="flex items-center justify-between py-2.5">
                <span class="text-sm text-gray-600">Callback Scheduled</span>
                <span class="text-sm font-extrabold text-indigo-600">6</span>
              </div>
            </div>
          </div>

          <!-- Call Outcome Donut Chart -->
          <div class="bg-gray-50 rounded-xl p-4 flex-1">
            <p class="text-sm font-bold text-gray-800 mb-2">Call Outcome</p>
            <div id="callOutcomeChart"></div>
          </div>

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

  </div><!-- end max-w -->

  <!-- ── ADD CALL MODAL ── -->
  <div id="addCallModal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
      <div class="flex items-center justify-between mb-5">
        <h3 class="text-base font-bold text-gray-800">Add New Call</h3>
        <button onclick="document.getElementById('addCallModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 transition-colors">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2">
          <label class="block text-xs font-semibold text-gray-500 mb-1">Company / Contact</label>
          <input class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" placeholder="e.g. TechNova – Anjali Verma" />
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Phone Number</label>
          <input class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" placeholder="98XXXXXXXX" />
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Call Type</label>
          <select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors bg-white">
            <option>Outbound</option>
            <option>Inbound</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Purpose</label>
          <input class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" placeholder="e.g. Follow up" />
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Duration</label>
          <input class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" placeholder="00:00:00" />
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Call Status</label>
          <select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors bg-white">
            <option>Interested</option>
            <option>In Discussion</option>
            <option>Not Interested</option>
            <option>Callback</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-gray-500 mb-1">Next Follow Up</label>
          <input type="date" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" />
        </div>
        <div class="col-span-2">
          <label class="block text-xs font-semibold text-gray-500 mb-1">Remarks</label>
          <input class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 transition-colors" placeholder="Any notes..." />
        </div>
      </div>
      <div class="flex gap-3 mt-5">
        <button onclick="document.getElementById('addCallModal').classList.add('hidden')" class="flex-1 border border-gray-200 rounded-lg py-2 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition-colors">Cancel</button>
        <button onclick="document.getElementById('addCallModal').classList.add('hidden')" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg py-2 text-sm font-semibold transition-colors">Save Call</button>
      </div>
    </div>
  </div>

  <script>
    // ── Revenue Line Chart ──
    const revCtx = document.getElementById('revenueChart').getContext('2d');
    const months = ['Dec','Jan','Feb','Mar','Apr','May'];
    const revData = [14, 18, 16, 22, 28, 24.85];

    new Chart(revCtx, {
      type: 'line',
      data: {
        labels: months,
        datasets: [{
          data: revData,
          borderColor: '#6366f1',
          backgroundColor: 'rgba(99,102,241,0.08)',
          pointBackgroundColor: '#6366f1',
          pointBorderColor: '#fff',
          pointBorderWidth: 2,
          pointRadius: 5,
          pointHoverRadius: 7,
          tension: 0.4,
          fill: true,
          borderWidth: 2.5
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: {
          callbacks: { label: ctx => `₹${ctx.parsed.y}L` }
        }},
        scales: {
          x: { grid: { display: false }, ticks: { color: '#9ca3af', font: { size: 11 } } },
          y: {
            grid: { color: '#f1f5f9' },
            ticks: { color: '#9ca3af', font: { size: 11 }, callback: v => `${v}L` },
            min: 0, max: 40
          }
        }
      }
    });

    // ── Donut Chart ──
    const dCtx = document.getElementById('donutChart');
    if (dCtx) {
      new Chart(dCtx.getContext('2d'), {
        type: 'doughnut',
        data: {
          labels: ['Website','Referral','Google Ads','Social Media','Others'],
          datasets: [{
            data: [435, 311, 249, 125, 125],
            backgroundColor: ['#6366f1','#34d399','#60a5fa','#f97316','#c084fc'],
            borderWidth: 0,
            hoverOffset: 6
          }]
        },
        options: {
          responsive: false,
          cutout: '68%',
          plugins: { legend: { display: false }, tooltip: {
            callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}` }
          }}
        }
      });
    }
  </script>
  <script>

    // ===============================
    // PROJECT OVERVIEW DONUT CHART
    // ===============================

    const projectChart = new ApexCharts(document.querySelector("#projectChart"), {

        chart: {
            type: 'donut',
            height: 320,
            fontFamily: 'Inter, sans-serif',
            toolbar: {
                show: false
            }
        },

        series: [10, 8, 3, 3,4],

        labels: [
            'Website',
            'Referral',
            'Google Ads',
            'Social Media',
            'Others'
        ],

        colors: [
            '#6366f1',
            '#34d399',
            '#60a5fa',
            '#f97316',
            '#c084fc'
        ],

        stroke: {
            width: 0
        },

        legend: {
            position: 'bottom',
            fontSize: '14px'
        },

        dataLabels: {
            enabled: false
        },

        plotOptions: {
            pie: {
                donut: {
                    size: '70%',

                    labels: {

                        show: true,

                        total: {
                            show: true,
                            label: 'Total',

                            formatter: function () {
                                return 28
                            }
                        }
                    }
                }
            }
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 280
                    }
                }
            }
        ]

    });

    projectChart.render();


    // ===============================
    // TASK OVERVIEW BAR CHART
    // ===============================

    const taskChart = new ApexCharts(document.querySelector("#taskChart"), {

        chart: {
            type: 'bar',
            height: 320,
            toolbar: {
                show: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Tasks',
            data: [128, 96, 42, 18]
        }],

        colors: ['#4f46e5'],

        xaxis: {

            categories: [
                'Completed',
                'In Progress',
                'Review',
                'Rework'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        plotOptions: {
            bar: {
                borderRadius: 8,
                columnWidth: '45%'
            }
        },

        grid: {
            borderColor: '#e2e8f0',
            strokeDashArray: 5
        },

        dataLabels: {
            enabled: false
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 260
                    }
                }
            }
        ]

    });

    taskChart.render();


    // ===============================
    // REWORK ANALYSIS LINE CHART
    // ===============================

    const reworkChart = new ApexCharts(document.querySelector("#reworkChart"), {

        chart: {
            type: 'line',
            height: 320,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Rework',
            data: [4, 7, 6, 10, 7, 9, 7, 13]
        }],

        colors: ['#4f46e5'],

        stroke: {
            curve: 'smooth',
            width: 4
        },

        markers: {
            size: 5
        },

        xaxis: {

            categories: [
                '13 May',
                '14 May',
                '15 May',
                '17 May',
                '19 May',
                '21 May',
                '22 May',
                '23 May'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        grid: {
            borderColor: '#e2e8f0',
            strokeDashArray: 5
        },

        tooltip: {
            theme: 'light'
        },

        dataLabels: {
            enabled: false
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 260
                    }
                }
            }
        ]

    });

    reworkChart.render();

    // ===============================
    // CALL OUTCOME DONUT CHART
    // ===============================

    const callOutcomeChart = new ApexCharts(document.querySelector("#callOutcomeChart"), {
        chart: {
            type: 'donut',
            height: 230,
            fontFamily: 'Plus Jakarta Sans, sans-serif',
            toolbar: { show: false }
        },
        series: [5, 3, 3, 1],
        labels: ['Interested', 'In Discussion', 'Callback', 'Not Interested'],
        colors: ['#6366f1', '#34d399', '#60a5fa', '#f87171'],
        stroke: { width: 0 },
        legend: {
            position: 'bottom',
            fontSize: '12px',
            markers: { width: 8, height: 8, radius: 4 },
            itemMargin: { horizontal: 6, vertical: 2 }
        },
        dataLabels: { enabled: false },
        plotOptions: {
            pie: {
                donut: {
                    size: '68%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            fontSize: '13px',
                            fontWeight: 700,
                            color: '#111827',
                            formatter: () => '12'
                        }
                    }
                }
            }
        },
        responsive: [
            {
                breakpoint: 640,
                options: { chart: { height: 200 } }
            }
        ]
    });

    callOutcomeChart.render();

</script>
</body>
</html>

<?php include 'footer.php'; ?>