<?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>Visit Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <style>@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');.metric-card{background:#fff;border:1.5px solid #ececf3;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;transition:box-shadow .2s}.metric-card:hover{box-shadow:0 6px 24px rgba(90,90,160,.08)}.metric-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.section-card{background:#fff;border:1.5px solid #ececf3;border-radius:16px;padding:20px 22px}.badge-up{color:#22c55e;font-weight:700;font-size:12px}.badge-down{color:#ef4444;font-weight:700;font-size:12px}.add-visit-btn{background:#4f46e5;color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;transition:background .2s}.add-visit-btn:hover{background:#4338ca}.date-range-pill{border:1.5px solid #e2e8f0;border-radius:8px;padding:7px 14px;font-size:13px;color:#475569;font-weight:500;display:flex;align-items:center;gap:6px;cursor:pointer;background:#fff}.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}.loc-bar-bg{background:#eeefff;border-radius:999px;height:6px;width:100%}.loc-bar-fill{background:#4f46e5;border-radius:999px;height:6px}.cal-day{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:.15s}.cal-day:hover{background:#eeefff;color:#4f46e5}.cal-day.today{background:#4f46e5;color:#fff;font-weight:700;border-radius:50%}.cal-day.other-month{color:#c4c4d8}.cal-header{font-size:12px;font-weight:600;color:#94a3b8;text-align:center;width:32px}.today-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9}.today-row:last-child{border-bottom:none}.today-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}</style>
</head>

<body class="min-h-screen">

<div class="w-full max-w-[1700px] mx-auto px-4 sm:px-6 lg:px-8 py-5">

    <!-- ── TOP BAR ── -->
    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
        <div> <h1 class="text-xl sm:text-2xl font-800 text-gray-900 font-extrabold">Dashboard</h1></div>
        <div class="flex items-center gap-3 flex-wrap">
            <div class="date-range-pill">
                <i class="ri-calendar-2-line text-indigo-500"></i>
                29 May 2025 – 29 May 2025
                <i class="ri-arrow-down-s-line text-slate-400"></i>
            </div>
            <a href="puresaas_add_visit.php">
            <button class="add-visit-btn">
                <i class="ri-add-line"></i> Add Visit
            </button>
            </a>
            
        </div>
    </div>

    <!-- ── METRIC CARDS ROW ── -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3 mb-5">

        <!-- Total Visits -->
        <div class="metric-card">
            <div class="metric-icon bg-indigo-50 text-indigo-500">
                <i class="ri-user-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">Total Visits</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">68</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 12.6%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs yesterday</span>
            </div>
        </div>

        <!-- Productive Visits -->
        <div class="metric-card">
            <div class="metric-icon bg-orange-50 text-orange-500">
                <i class="ri-briefcase-4-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">Productive Visits</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">32</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 47.06%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs total</span>
            </div>
        </div>

        <!-- New Contacts -->
        <div class="metric-card">
            <div class="metric-icon bg-green-50 text-green-500">
                <i class="ri-user-add-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">New Contacts</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">18</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 8.3%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs yesterday</span>
            </div>
        </div>

        <!-- Follow Up Visits -->
        <div class="metric-card">
            <div class="metric-icon bg-blue-50 text-blue-500">
                <i class="ri-refresh-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">Follow Up Visits</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">26</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 38.24%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs total</span>
            </div>
        </div>

        <!-- Meetings Held -->
        <div class="metric-card">
            <div class="metric-icon bg-yellow-50 text-yellow-500">
                <i class="ri-calendar-check-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">Meetings Held</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">21</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 30.88%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs total</span>
            </div>
        </div>

        <!-- Deals from Visits -->
        <div class="metric-card">
            <div class="metric-icon bg-purple-50 text-purple-500">
                <i class="ri-file-chart-line"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-[11px] text-slate-500 font-semibold">Deals from Visits</p>
                <p class="text-[26px] font-bold text-slate-800 leading-tight">7</p>
                <span class="badge-up"><i class="ri-arrow-up-line"></i> 16.7%</span>
                <span class="text-[11px] text-slate-400 ml-1">vs yesterday</span>
            </div>
        </div>

    </div>

    <!--
        LAYOUT (4 equal cols):
        Col1: Visit Type (top) | Daily Visit Trend spanning col1+col2+col3 (bottom)
        Col2: Visit Outcome (top) | (trend continues)
        Col3: Top Locations (top) | (trend continues)
        Col4: Visit Calendar (spans both rows)
    -->
    <div style="display:grid; grid-template-columns: repeat(4,1fr); grid-template-rows: auto auto; gap:16px;">

        <!-- Visit Type Summary — col1, row1 -->
        <div class="section-card" style="grid-column:1; grid-row:1;">
            <h3 class="text-[13px] font-bold text-slate-700 mb-3">Visit Type Summary</h3>
            <div id="visitTypeChart"></div>
            <div class="space-y-2 mt-3">
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-indigo-500"></span> New Visit</span>
                    <span class="font-semibold text-slate-700">28 <span class="text-slate-400 font-normal">(41.18%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-green-400"></span> Follow Up</span>
                    <span class="font-semibold text-slate-700">26 <span class="text-slate-400 font-normal">(38.24%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-yellow-400"></span> Repeat Visit</span>
                    <span class="font-semibold text-slate-700">10 <span class="text-slate-400 font-normal">(14.71%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-slate-300"></span> Other Visit</span>
                    <span class="font-semibold text-slate-700">4 <span class="text-slate-400 font-normal">(6.88%)</span></span>
                </div>
            </div>
        </div>

        <!-- Visit Outcome Summary — col2, row1 -->
        <div class="section-card" style="grid-column:2; grid-row:1;">
            <h3 class="text-[13px] font-bold text-slate-700 mb-3">Visit Outcome Summary</h3>
            <div id="visitOutcomeChart"></div>
            <div class="space-y-2 mt-3">
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-indigo-500"></span> Interested</span>
                    <span class="font-semibold text-slate-700">21 <span class="text-slate-400 font-normal">(30.88%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-blue-400"></span> In Discussion</span>
                    <span class="font-semibold text-slate-700">19 <span class="text-slate-400 font-normal">(27.94%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-rose-400"></span> Not Interested</span>
                    <span class="font-semibold text-slate-700">12 <span class="text-slate-400 font-normal">(17.65%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-yellow-400"></span> Callback</span>
                    <span class="font-semibold text-slate-700">10 <span class="text-slate-400 font-normal">(14.71%)</span></span>
                </div>
                <div class="flex items-center justify-between text-[12px]">
                    <span class="flex items-center gap-2"><span class="legend-dot bg-slate-300"></span> Not Meet</span>
                    <span class="font-semibold text-slate-700">6 <span class="text-slate-400 font-normal">(8.82%)</span></span>
                </div>
            </div>
        </div>

        <!-- Top Visited Locations — col3, row1 -->
        <div class="section-card" style="grid-column:3; grid-row:1;">
            <h3 class="text-[13px] font-bold text-slate-700 mb-4">Top Visited Locations</h3>
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between text-[12px] mb-1">
                        <span class="font-medium text-slate-700">Noida</span>
                        <span class="font-bold text-slate-800">22 <span class="text-slate-400 font-normal">(32.35%)</span></span>
                    </div>
                    <div class="loc-bar-bg"><div class="loc-bar-fill" style="width:100%"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-[12px] mb-1">
                        <span class="font-medium text-slate-700">Delhi</span>
                        <span class="font-bold text-slate-800">18 <span class="text-slate-400 font-normal">(26.47%)</span></span>
                    </div>
                    <div class="loc-bar-bg"><div class="loc-bar-fill" style="width:82%"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-[12px] mb-1">
                        <span class="font-medium text-slate-700">Gurgaon</span>
                        <span class="font-bold text-slate-800">12 <span class="text-slate-400 font-normal">(17.65%)</span></span>
                    </div>
                    <div class="loc-bar-bg"><div class="loc-bar-fill" style="width:55%"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-[12px] mb-1">
                        <span class="font-medium text-slate-700">Faridabad</span>
                        <span class="font-bold text-slate-800">8 <span class="text-slate-400 font-normal">(11.76%)</span></span>
                    </div>
                    <div class="loc-bar-bg"><div class="loc-bar-fill" style="width:36%"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-[12px] mb-1">
                        <span class="font-medium text-slate-700">Others</span>
                        <span class="font-bold text-slate-800">8 <span class="text-slate-400 font-normal">(11.76%)</span></span>
                    </div>
                    <div class="loc-bar-bg"><div class="loc-bar-fill" style="width:36%"></div></div>
                </div>
            </div>
        </div>

        <!-- Visit Calendar — col4, spans both rows -->
        <div class="section-card" style="grid-column:4; grid-row:1/3;">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-[14px] font-bold text-slate-700">Visit Calendar</h3>
                <div class="flex items-center gap-2">
                    <button class="text-slate-400 hover:text-indigo-500 transition-colors"><i class="ri-arrow-left-s-line text-lg"></i></button>
                    <button class="text-slate-400 hover:text-indigo-500 transition-colors"><i class="ri-arrow-right-s-line text-lg"></i></button>
                </div>
            </div>
            <div class="flex items-center gap-2 mb-3 text-[13px] font-semibold text-slate-700">
                May 2025 <i class="ri-arrow-right-s-line text-slate-400"></i>
            </div>
            <div class="grid grid-cols-7 mb-1">
                <div class="cal-header">Su</div>
                <div class="cal-header">Mo</div>
                <div class="cal-header">Tu</div>
                <div class="cal-header">We</div>
                <div class="cal-header">Th</div>
                <div class="cal-header">Fr</div>
                <div class="cal-header">Sa</div>
            </div>
            <div class="grid grid-cols-7 gap-y-1">
                <div></div><div></div><div></div><div></div>
                <div class="cal-day">1</div><div class="cal-day">2</div><div class="cal-day">3</div>
                <div class="cal-day">4</div><div class="cal-day">5</div><div class="cal-day">6</div><div class="cal-day">7</div><div class="cal-day">8</div><div class="cal-day">9</div><div class="cal-day">10</div>
                <div class="cal-day">11</div><div class="cal-day">12</div><div class="cal-day">13</div><div class="cal-day">14</div><div class="cal-day">15</div><div class="cal-day">16</div><div class="cal-day">17</div>
                <div class="cal-day">18</div><div class="cal-day">19</div><div class="cal-day">20</div><div class="cal-day">21</div><div class="cal-day">22</div><div class="cal-day">23</div><div class="cal-day">24</div>
                <div class="cal-day">25</div><div class="cal-day">26</div><div class="cal-day">27</div><div class="cal-day">28</div><div class="cal-day today">29</div><div class="cal-day">30</div><div class="cal-day">31</div>
            </div>
            <div class="mt-5">
                <h3 class="text-[13px] font-bold text-slate-700 mb-3">Today's Summary</h3>
                <div class="today-row">
                    <div class="flex items-center gap-2">
                        <div class="today-icon bg-indigo-50 text-indigo-500"><i class="ri-user-line"></i></div>
                        <span class="text-[12px] font-medium text-slate-600">Total Visits</span>
                    </div>
                    <span class="text-[13px] font-bold text-slate-800">8</span>
                </div>
                <div class="today-row">
                    <div class="flex items-center gap-2">
                        <div class="today-icon bg-green-50 text-green-500"><i class="ri-briefcase-4-line"></i></div>
                        <span class="text-[12px] font-medium text-slate-600">Productive Visits</span>
                    </div>
                    <span class="text-[13px] font-bold text-slate-800">5</span>
                </div>
                <div class="today-row">
                    <div class="flex items-center gap-2">
                        <div class="today-icon bg-blue-50 text-blue-500"><i class="ri-user-add-line"></i></div>
                        <span class="text-[12px] font-medium text-slate-600">New Contacts</span>
                    </div>
                    <span class="text-[13px] font-bold text-slate-800">2</span>
                </div>
                <div class="today-row">
                    <div class="flex items-center gap-2">
                        <div class="today-icon bg-yellow-50 text-yellow-500"><i class="ri-calendar-check-line"></i></div>
                        <span class="text-[12px] font-medium text-slate-600">Meetings Held</span>
                    </div>
                    <span class="text-[13px] font-bold text-slate-800">3</span>
                </div>
            </div>
        </div>

        <!-- Daily Visit Trend — col1–3, row2 -->
        <div class="section-card" style="grid-column:1/4; grid-row:2;">
            <h3 class="text-[13px] font-bold text-slate-700 mb-1">Daily Visit Trend</h3>
            <div id="dailyTrendChart"></div>
        </div>

    </div><!-- end main grid -->

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // ── Visit Type Donut ──
    new ApexCharts(document.querySelector("#visitTypeChart"), {
        series: [28, 26, 10, 4],
        labels: ['New Visit', 'Follow Up', 'Repeat Visit', 'Other Visit'],
        chart: { type: 'donut', height: 160 },
        colors: ['#6366f1', '#4ade80', '#facc15', '#cbd5e1'],
        plotOptions: { pie: { donut: { size: '65%', labels: { show: true, total: { show: true, label: 'Total', fontSize: '11px', color: '#94a3b8', fontWeight: 600, formatter: () => '68' }, value: { fontSize: '20px', fontWeight: 700, color: '#1e293b' } } } } },
        dataLabels: { enabled: false },
        legend: { show: false },
        stroke: { width: 2 },
        tooltip: { y: { formatter: v => v + ' visits' } }
    }).render();

    // ── Visit Outcome Donut ──
    new ApexCharts(document.querySelector("#visitOutcomeChart"), {
        series: [21, 19, 12, 10, 6],
        labels: ['Interested', 'In Discussion', 'Not Interested', 'Callback', 'Not Meet'],
        chart: { type: 'donut', height: 160 },
        colors: ['#6366f1', '#60a5fa', '#f87171', '#fbbf24', '#cbd5e1'],
        plotOptions: { pie: { donut: { size: '65%', labels: { show: true, total: { show: true, label: 'Total', fontSize: '11px', color: '#94a3b8', fontWeight: 600, formatter: () => '68' }, value: { fontSize: '20px', fontWeight: 700, color: '#1e293b' } } } } },
        dataLabels: { enabled: false },
        legend: { show: false },
        stroke: { width: 2 },
        tooltip: { y: { formatter: v => v + ' visits' } }
    }).render();

    // ── Daily Visit Trend ──
    new ApexCharts(document.querySelector("#dailyTrendChart"), {
        series: [{ name: 'Visits', data: [42, 55, 38, 62, 48, 70, 58] }],
        chart: { type: 'line', height: 220, toolbar: { show: false }, sparkline: { enabled: false } },
        colors: ['#6366f1'],
        stroke: { curve: 'smooth', width: 2.5 },
        markers: { size: 4, strokeWidth: 2, strokeColors: '#fff', fillOpacity: 1 },
        xaxis: {
            categories: ['23 May', '24 May', '25 May', '26 May', '27 May', '28 May', '29 May'],
            labels: { style: { fontSize: '10px', colors: '#94a3b8' } },
            axisBorder: { show: false }, axisTicks: { show: false }
        },
        yaxis: { min: 0, max: 80, tickAmount: 4, labels: { style: { fontSize: '10px', colors: '#94a3b8' }, formatter: v => v } },
        grid: { borderColor: '#f1f5f9', strokeDashArray: 4 },
        dataLabels: { enabled: false },
        tooltip: { y: { formatter: v => v + ' visits' } },
        legend: { show: false }
    }).render();

});
</script>

</body>
</html>

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