// ========== INCLUDE SECURITY & DATABASE ==========
include('security.php');  // this should start session and check login
include('dbcon.php');

$user_type = '';
$location = '';
$header1 = '';
$header2 = '';
$not1 = '';
$usermail = '';
date_default_timezone_set("Asia/Calcutta");
$date = date('m/d/Y h:i:s a', time());
$startTime = date("Y-m-d H:i:s");
$cenvertedTime = date('Y-m-d H:i:s', strtotime('+0 hour +0 minutes', strtotime($startTime)));
$new_time = date("Y-m-d H:i:s", strtotime('+5:30 hours'));
$new_date = date("Y-m-d", strtotime('+5:30 hours'));

if (mysqli_connect_error()) {
    die("There was an error connecting to database");
} else {
    $username = $_SESSION['username'];
    $result = mysqli_query($link, "SELECT * from tbluser WHERE email = '$username'");
    while ($row = mysqli_fetch_array($result)) {
        $user_type = $row['user_type'];
        $location = $row['location'];
        $header1 = $row['header1'];
        $header2 = $row['header2'];
        $not1 = $row['not1'];
    }
}

// ==============================================
// DYNAMIC DATA FROM tblvehicle TABLE
// ==============================================

// Get date range from request or use default (last 24 hours)
$from_date = isset($_GET['from_date']) && !empty($_GET['from_date']) ? $_GET['from_date'] : date('Y-m-d H:i:s', strtotime('-24 hours'));
$to_date = isset($_GET['to_date']) && !empty($_GET['to_date']) ? $_GET['to_date'] : date('Y-m-d H:i:s');

// Build location filter
$location_filter = "";
if (!empty($location) && $user_type != 'Super') {
    $location_filter = "AND location = '" . mysqli_real_escape_string($link, $location) . "'";
}

// 1. ENTERED VEHICLES
$query_entered = "SELECT COUNT(*) as total, 
                  SUM(CASE WHEN type = 'Pass' OR type = 'pass' THEN 1 ELSE 0 END) as pass_count,
                  SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN 1 ELSE 0 END) as ticket_count,
                  SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN 1 ELSE 0 END) as fasttag_count,
                  SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN 1 ELSE 0 END) as anpr_count
                  FROM tblvehicle 
                  WHERE indatetime BETWEEN '$from_date' AND '$to_date' $location_filter";
$result_entered = mysqli_query($link, $query_entered);
if (!$result_entered) {
    die("Query Error: " . mysqli_error($link));
}
$entered_data = mysqli_fetch_assoc($result_entered);
$entered_total = $entered_data['total'] ?? 0;
$entered_pass = $entered_data['pass_count'] ?? 0;
$entered_ticket = $entered_data['ticket_count'] ?? 0;
$entered_fasttag = $entered_data['fasttag_count'] ?? 0;
$entered_anpr = $entered_data['anpr_count'] ?? 0;

$entered_pass_pct = $entered_total > 0 ? round(($entered_pass / $entered_total) * 100, 2) : 0;
$entered_ticket_pct = $entered_total > 0 ? round(($entered_ticket / $entered_total) * 100, 2) : 0;
$entered_fasttag_pct = $entered_total > 0 ? round(($entered_fasttag / $entered_total) * 100, 2) : 0;
$entered_anpr_pct = $entered_total > 0 ? round(($entered_anpr / $entered_total) * 100, 2) : 0;

// 2. EXIT VEHICLES
$query_exit = "SELECT COUNT(*) as total, 
               SUM(CASE WHEN type = 'Pass' OR type = 'pass' THEN 1 ELSE 0 END) as pass_count,
               SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN 1 ELSE 0 END) as ticket_count,
               SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN 1 ELSE 0 END) as fasttag_count,
               SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN 1 ELSE 0 END) as anpr_count
               FROM tblvehicle 
               WHERE outdatetime BETWEEN '$from_date' AND '$to_date' 
               AND departure = 'Departed' $location_filter";
$result_exit = mysqli_query($link, $query_exit);
$exit_data = mysqli_fetch_assoc($result_exit);
$exit_total = $exit_data['total'] ?? 0;
$exit_pass = $exit_data['pass_count'] ?? 0;
$exit_ticket = $exit_data['ticket_count'] ?? 0;
$exit_fasttag = $exit_data['fasttag_count'] ?? 0;
$exit_anpr = $exit_data['anpr_count'] ?? 0;

$exit_pass_pct = $exit_total > 0 ? round(($exit_pass / $exit_total) * 100, 2) : 0;
$exit_ticket_pct = $exit_total > 0 ? round(($exit_ticket / $exit_total) * 100, 2) : 0;
$exit_fasttag_pct = $exit_total > 0 ? round(($exit_fasttag / $exit_total) * 100, 2) : 0;
$exit_anpr_pct = $exit_total > 0 ? round(($exit_anpr / $exit_total) * 100, 2) : 0;

// 3. PENDING VEHICLES
$query_pending = "SELECT COUNT(*) as total, 
                  SUM(CASE WHEN type = 'Pass' OR type = 'pass' THEN 1 ELSE 0 END) as pass_count,
                  SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN 1 ELSE 0 END) as ticket_count,
                  SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN 1 ELSE 0 END) as fasttag_count,
                  SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN 1 ELSE 0 END) as anpr_count
                  FROM tblvehicle 
                  WHERE indatetime BETWEEN '$from_date' AND '$to_date' 
                  AND (departure = 'Parked' OR departure IS NULL OR departure = '') $location_filter";
$result_pending = mysqli_query($link, $query_pending);
$pending_data = mysqli_fetch_assoc($result_pending);
$pending_total = $pending_data['total'] ?? 0;
$pending_pass = $pending_data['pass_count'] ?? 0;
$pending_ticket = $pending_data['ticket_count'] ?? 0;
$pending_fasttag = $pending_data['fasttag_count'] ?? 0;
$pending_anpr = $pending_data['anpr_count'] ?? 0;

$pending_pass_pct = $pending_total > 0 ? round(($pending_pass / $pending_total) * 100, 2) : 0;
$pending_ticket_pct = $pending_total > 0 ? round(($pending_ticket / $pending_total) * 100, 2) : 0;
$pending_fasttag_pct = $pending_total > 0 ? round(($pending_fasttag / $pending_total) * 100, 2) : 0;
$pending_anpr_pct = $pending_total > 0 ? round(($pending_anpr / $pending_total) * 100, 2) : 0;

// 4. AMOUNT DATA
$query_amount = "SELECT 
                 SUM(CASE WHEN type = 'Pass' OR type = 'pass' THEN charge ELSE 0 END) as pass_amount,
                 SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN charge ELSE 0 END) as ticket_amount,
                 SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN charge ELSE 0 END) as fasttag_amount,
                 SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN charge ELSE 0 END) as anpr_amount,
                 SUM(CASE WHEN pcode = 'Foc' OR pcode = 'foc' OR pcode = 'FOC' THEN charge ELSE 0 END) as foc_amount,
                 SUM(CASE WHEN pcode = 'Online' OR pcode = 'online' THEN charge ELSE 0 END) as online_amount,
                 SUM(CASE WHEN pcode = 'Cash' OR pcode = 'cash' THEN charge ELSE 0 END) as cash_amount,
                 SUM(charge) as total_amount
                 FROM tblvehicle 
                 WHERE outdatetime BETWEEN '$from_date' AND '$to_date' 
                 AND departure = 'Departed' $location_filter";
$result_amount = mysqli_query($link, $query_amount);
$amount_data = mysqli_fetch_assoc($result_amount);
$total_amount = $amount_data['total_amount'] ?? 0;
$pass_amount = $amount_data['pass_amount'] ?? 0;
$ticket_amount = $amount_data['ticket_amount'] ?? 0;
$fasttag_amount = $amount_data['fasttag_amount'] ?? 0;
$anpr_amount = $amount_data['anpr_amount'] ?? 0;
$foc_amount = $amount_data['foc_amount'] ?? 0;
$online_amount = $amount_data['online_amount'] ?? 0;
$cash_amount = $amount_data['cash_amount'] ?? 0;

$pass_amount_pct = $total_amount > 0 ? round(($pass_amount / $total_amount) * 100, 2) : 0;
$ticket_amount_pct = $total_amount > 0 ? round(($ticket_amount / $total_amount) * 100, 2) : 0;
$fasttag_amount_pct = $total_amount > 0 ? round(($fasttag_amount / $total_amount) * 100, 2) : 0;
$anpr_amount_pct = $total_amount > 0 ? round(($anpr_amount / $total_amount) * 100, 2) : 0;
$foc_amount_pct = $total_amount > 0 ? round(($foc_amount / $total_amount) * 100, 2) : 0;
$online_amount_pct = $total_amount > 0 ? round(($online_amount / $total_amount) * 100, 2) : 0;
$cash_amount_pct = $total_amount > 0 ? round(($cash_amount / $total_amount) * 100, 2) : 0;

// 5. WEEKLY DATA FOR CHART (last 7 days)
$weekly_labels = [];
$weekly_anpr = [];
$weekly_fasttag = [];
$weekly_ticket = [];

for ($i = 6; $i >= 0; $i--) {
    $day = date('D', strtotime("-$i days"));
    $day_start = date('Y-m-d 00:00:00', strtotime("-$i days"));
    $day_end = date('Y-m-d 23:59:59', strtotime("-$i days"));
    $weekly_labels[] = $day;
    
    $query_day = "SELECT 
                  SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN 1 ELSE 0 END) as anpr_count,
                  SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN 1 ELSE 0 END) as fasttag_count,
                  SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN 1 ELSE 0 END) as ticket_count
                  FROM tblvehicle 
                  WHERE indatetime BETWEEN '$day_start' AND '$day_end' $location_filter";
    $result_day = mysqli_query($link, $query_day);
    $day_data = mysqli_fetch_assoc($result_day);
    
    $weekly_anpr[] = $day_data['anpr_count'] ?? 0;
    $weekly_fasttag[] = $day_data['fasttag_count'] ?? 0;
    $weekly_ticket[] = $day_data['ticket_count'] ?? 0;
}

// 6. TRANSACTION PERCENTAGES FOR PIE CHART
$query_transaction_pct = "SELECT 
                          SUM(CASE WHEN type = 'ANPR' OR type = 'anpr' THEN 1 ELSE 0 END) as anpr_total,
                          SUM(CASE WHEN type = 'FastTag' OR type = 'fasttag' OR type = 'Fastag' THEN 1 ELSE 0 END) as fasttag_total,
                          SUM(CASE WHEN type = 'Ticket' OR type = 'ticket' THEN 1 ELSE 0 END) as ticket_total,
                          COUNT(*) as grand_total
                          FROM tblvehicle 
                          WHERE indatetime BETWEEN '$from_date' AND '$to_date' $location_filter";
$result_transaction = mysqli_query($link, $query_transaction_pct);
$transaction_data = mysqli_fetch_assoc($result_transaction);
$grand_total = $transaction_data['grand_total'] ?? 1;
$anpr_pct = $grand_total > 0 ? round(($transaction_data['anpr_total'] / $grand_total) * 100, 1) : 0;
$fasttag_pct = $grand_total > 0 ? round(($transaction_data['fasttag_total'] / $grand_total) * 100, 1) : 0;
$ticket_pct = $grand_total > 0 ? round(($transaction_data['ticket_total'] / $grand_total) * 100, 1) : 0;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AccessPark - Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #e8edf2; overflow-x: hidden; }
        .sidebar {
            position: fixed; left: 0; top: 0; width: 280px; height: 100%;
            background: #0a2540; color: #fff; z-index: 1000; transition: all 0.3s;
            box-shadow: 4px 0 20px rgba(0,0,0,0.08);
        }
        .sidebar-header { padding: 28px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 24px; }
        .sidebar-header h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
        .sidebar-header h2 span { color: #ffc107; }
        .sidebar-header p { font-size: 11px; opacity: 0.6; letter-spacing: 1px; margin-top: 6px; }
        .location-badge {
            background: rgba(255,193,7,0.15); margin: 0 20px 20px 20px; padding: 10px 12px;
            border-radius: 10px; display: flex; align-items: center; gap: 10px;
            font-size: 13px; border-left: 3px solid #ffc107;
        }
        .location-badge i { color: #ffc107; font-size: 14px; }
        .sidebar-menu { list-style: none; padding: 0 16px; margin: 0; }
        .sidebar-menu li { margin-bottom: 4px; }
        .sidebar-menu li a {
            display: flex; align-items: center; padding: 12px 16px; color: #cbd5e1;
            text-decoration: none; transition: all 0.25s; font-size: 14px;
            font-weight: 500; border-radius: 12px;
        }
        .sidebar-menu li a i { width: 32px; font-size: 18px; margin-right: 8px; }
        .sidebar-menu li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .sidebar-menu li.active a { background: #ffc107; color: #0a2540; }
        .sidebar-menu li.active a i { color: #0a2540; }
        .main-content { margin-left: 280px; padding: 24px 32px; transition: all 0.3s; }
        .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
        .page-title h1 { font-size: 24px; font-weight: 700; color: #1e293b; }
        .page-title p { font-size: 13px; color: #64748b; margin-top: 4px; }
        .user-area {
            display: flex; align-items: center; gap: 20px; background: white;
            padding: 8px 20px; border-radius: 40px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .date-badge { font-size: 13px; color: #475569; }
        .user-avatar { display: flex; align-items: center; gap: 10px; }
        .user-avatar i { font-size: 32px; color: #ffc107; }
        .user-avatar .user-name { font-weight: 600; font-size: 14px; }
        .user-avatar .user-type { font-size: 11px; color: #64748b; }
        .card {
            background: white; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 24px; overflow: hidden; border: 1px solid #eef2f6;
        }
        .card-header { padding: 18px 24px; border-bottom: 1px solid #eef2f6; background: white; }
        .card-header h3 { font-size: 16px; font-weight: 600; margin: 0; color: #1e293b; }
        .card-header h3 i { margin-right: 8px; color: #ffc107; }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
        .stat-card { background: white; border-radius: 20px; overflow: hidden; border: 1px solid #eef2f6; }
        .stat-header { padding: 16px 20px; border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; align-items: center; }
        .stat-header .stat-title { font-weight: 700; font-size: 16px; }
        .stat-header .stat-total { font-size: 22px; font-weight: 800; color: #0a2540; }
        .stat-table { width: 100%; }
        .stat-table td { padding: 12px 20px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
        .stat-table td:last-child { text-align: right; font-weight: 600; }
        .percentage-text { font-size: 12px; color: #64748b; font-weight: normal; }
        .two-columns { display: grid; grid-template-columns: 1fr 1.8fr; gap: 24px; margin-bottom: 24px; }
        .date-filter-box { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
        .date-field { flex: 1; }
        .date-field label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; display: block; }
        .date-field input { width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 13px; background: #f8fafc; }
        .btn-primary { background: #ffc107; border: none; padding: 10px 24px; border-radius: 12px; font-weight: 600; color: #0a2540; cursor: pointer; }
        .btn-secondary { background: #e2e8f0; border: none; padding: 10px 24px; border-radius: 12px; font-weight: 600; color: #475569; cursor: pointer; }
        .view-details-btn { background: white; border: 2px solid #ffc107; padding: 12px 32px; border-radius: 40px; font-weight: 700; color: #0a2540; cursor: pointer; transition: all 0.2s; }
        .view-details-btn:hover { background: #ffc107; }
        @media (max-width: 1024px) {
            .main-content { margin-left: 0; padding: 20px; }
            .sidebar { left: -280px; }
            .stats-grid { grid-template-columns: 1fr; }
            .two-columns { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<div class="sidebar">
    <div class="sidebar-header">
        <h2>Access<span>Park</span></h2>
        <p>smart & secure parking</p>
    </div>
    <div class="location-badge">
        <i class="fas fa-map-marker-alt"></i>
        <span>Location: </span>
        <strong>All Locations</strong>
    </div>
    <ul class="sidebar-menu">
        <li class="active"><a href="dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
        <li><a href="#"><i class="fas fa-chart-line"></i> Master</a></li>
        <li><a href="#"><i class="fas fa-file-alt"></i> Report</a></li>
        <li style="margin-top: 16px;"><a href="#"><i class="fas fa-parking"></i> Parking Data</a></li>
        <li><a href="#"><i class="fas fa-truck"></i> Vehicle Type</a></li>
        <li style="margin-top: 16px;"><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
        <!-- ✅ FIXED LOGOUT LINK -->
        <li><a href="?logout=1"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
    </ul>
</div>

<div class="main-content">
    <div class="top-bar">
        <div class="page-title">
            <h1>Dashboard</h1>
            <p>Live parking operations data from tblvehicle</p>
        </div>
        <div class="user-area">
            <div class="date-badge">
                <i class="far fa-calendar-alt"></i> 05 Jun 2026, 09:16 PM            </div>
            <div class="user-avatar">
                <i class="fas fa-user-circle"></i>
                <div>
                    <div class="user-name"></div>
                    <div class="user-type"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Entered</span>
                <span class="stat-total">0</span>
            </div>
            <table class="stat-table">
                <tr><td>Pass <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>Ticket <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr><td>FastTag <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>ANPR <span class="percentage-text">(%)</span></td><td>0</td></tr>
            </table>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Exit</span>
                <span class="stat-total">0</span>
            </div>
            <table class="stat-table">
                <tr><td>Pass <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>Ticket <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr><td>FastTag <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>ANPR <span class="percentage-text">(%)</span></td><td>0</td></tr>
            </table>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <span class="stat-title">Pending</span>
                <span class="stat-total">0</span>
            </div>
            <table class="stat-table">
                <tr><td>Pass <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>Ticket <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr><td>FastTag <span class="percentage-text">(%)</span></td><td>0</td></tr>
                <tr style="background:#f8fafc;"><td>ANPR <span class="percentage-text">(%)</span></td><td>0</td></tr>
            </table>
        </div>
    </div>

    <div class="two-columns">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-rupee-sign"></i> Amount</h3>
            </div>
            <table class="stat-table">
                <tr><td>Pass <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr style="background:#f8fafc;"><td>Ticket <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr><td>FastTag <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr style="background:#f8fafc;"><td>ANPR <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr><td>Foc <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr style="background:#f8fafc;"><td>Online <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr><td>Cash <span class="percentage-text">(%)</span></td><td>₹0</td></tr>
                <tr style="background:#fefce8; font-weight:700;"><td>Total Amount</td><td>₹0</td></tr>
            </table>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-line"></i> Weekly Vehicle Entry Count Graph</h3>
            </div>
            <div class="card-body" style="padding: 20px;">
                <canvas id="weeklyChart" style="height: 220px; width: 100%;"></canvas>
                <div style="display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 12px;">
                    <span><span style="background: #28a745; display: inline-block; width: 12px; height: 12px; border-radius: 4px;"></span> ANPR</span>
                    <span><span style="background: #ffc107; display: inline-block; width: 12px; height: 12px; border-radius: 4px;"></span> FastTag</span>
                    <span><span style="background: #dc3545; display: inline-block; width: 12px; height: 12px; border-radius: 4px;"></span> Ticket</span>
                </div>
            </div>
        </div>
    </div>

    <div class="two-columns">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-percent"></i> Visitor vehicle transaction %</h3>
            </div>
            <div class="card-body" style="padding: 20px; text-align: center;">
                <canvas id="transactionChart" style="height: 180px; width: 100%; max-width: 280px; margin: 0 auto;"></canvas>
                <div style="display: flex; justify-content: center; gap: 24px; margin-top: 16px;">
                    <span><span style="background: #28a745; display: inline-block; width: 12px; height: 12px; border-radius: 50%;"></span> ANPR (%)</span>
                    <span><span style="background: #ffc107; display: inline-block; width: 12px; height: 12px; border-radius: 50%;"></span> FastTag (%)</span>
                    <span><span style="background: #dc3545; display: inline-block; width: 12px; height: 12px; border-radius: 50%;"></span> Ticket (%)</span>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="far fa-calendar-alt"></i> Select Date Range</h3>
            </div>
            <div class="card-body" style="padding: 20px;">
                <form method="GET" action="">
                    <div class="date-filter-box">
                        <div class="date-field">
                            <label>From Date</label>
                            <input type="datetime-local" name="from_date" value="1970-01-01T00:00">
                        </div>
                        <div class="date-field">
                            <label>To Date</label>
                            <input type="datetime-local" name="to_date" value="1970-01-01T00:00">
                        </div>
                        <div>
                            <button type="submit" class="btn-primary">Get</button>
                            <button type="button" class="btn-secondary" onclick="resetDates()">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div style="text-align: center; margin-top: 16px; margin-bottom: 32px;">
        <button class="view-details-btn">
            <i class="fas fa-car-side"></i> View Vehicle Type Details
        </button>
    </div>
</div>

<script>
    const weeklyData = {
        labels: null,
        anpr: null,
        fasttag: null,
        ticket: null    };

    const ctx1 = document.getElementById('weeklyChart').getContext('2d');
    new Chart(ctx1, {
        type: 'line',
        data: {
            labels: weeklyData.labels,
            datasets: [
                { label: 'ANPR', data: weeklyData.anpr, borderColor: '#28a745', backgroundColor: 'rgba(40,167,69,0.05)', borderWidth: 2, fill: false, tension: 0.3 },
                { label: 'FastTag', data: weeklyData.fasttag, borderColor: '#ffc107', backgroundColor: 'rgba(255,193,7,0.05)', borderWidth: 2, fill: false, tension: 0.3 },
                { label: 'Ticket', data: weeklyData.ticket, borderColor: '#dc3545', backgroundColor: 'rgba(220,53,69,0.05)', borderWidth: 2, fill: false, tension: 0.3 }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: true,
            plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
            scales: { y: { beginAtZero: true, title: { display: true, text: 'Vehicle Count' } }, x: { title: { display: true, text: 'Weekdays' } } }
        }
    });

    const ctx2 = document.getElementById('transactionChart').getContext('2d');
    new Chart(ctx2, {
        type: 'pie',
        data: {
            labels: ['ANPR', 'FastTag', 'Ticket'],
            datasets: [{ data: [, , ], backgroundColor: ['#28a745', '#ffc107', '#dc3545'], borderWidth: 0 }]
        },
        options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { display: false } } }
    });

    function resetDates() {
        window.location.href = window.location.pathname;
    }
</script>

</body>
</html>