<?php
    ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
    session_start();
    require_once '../config.php';
    
    /* ADMIN AUTH CHECK */
    if (!isset($_SESSION['user_id']) || ($_SESSION['role'] ?? '') !== 'admin') {
        header('Location: ../login.php');
        exit;
    }
    
    function e($v){ return htmlspecialchars($v ?? '', ENT_QUOTES, 'UTF-8'); }
    
    /* CSRF */
    if (empty($_SESSION['csrf_token'])) {
        $_SESSION['csrf_token'] = bin2hex(random_bytes(16));
    }
    $csrf = $_SESSION['csrf_token'];
    
    $errors = [];
    $messages = [];
    
    /* DELETE PRODUCT */
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_id'])) {
        if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
            $errors[] = 'Invalid request.';
        } else {
            $del_id = (int) $_POST['delete_id'];
    
            $stmt = $conn->prepare("SELECT file_path FROM products WHERE id=?");
            $stmt->bind_param("i", $del_id);
            $stmt->execute();
            $res = $stmt->get_result();
            $row = $res ? $res->fetch_assoc() : null;
            $stmt->close();
    
            $stmt = $conn->prepare("DELETE FROM products WHERE id=?");
            $stmt->bind_param("i", $del_id);
    
            if ($stmt->execute()) {
                if (!empty($row['file_path'])) {
                    $file = __DIR__ . '/../' . $row['file_path'];
                    if (file_exists($file)) {
                        @unlink($file);
                    }
                }
                $messages[] = "Product deleted successfully.";
            } else {
                $errors[] = 'Delete failed.';
            }
    
            $stmt->close();
        }
    }
    
    /* AVAILABLE COLUMNS */
    
    $allowed_columns = [
    
        /* Commercial Product Info */
        'product_name' => 'Product Name',
        'generic_name' => 'Generic Name',
        'brand_name' => 'Brand Name',
        'standards' => 'Standards',
        'strength' => 'Strength',
        'volume' => 'Volume',
        'dosage_form' => 'Dosage Form',
        'indication' => 'Indication',
        'primary_packing' => 'Primary Packing',
        'secondary_packing' => 'Secondary Packing',
        'shelf_life' => 'Shelf Life',
        'manufactured_by' => 'Manufactured By',
        'marketed_by' => 'Marketed By',
        'distributed_by' => 'Distributed By',
    
        /* Samples Details */
        'samples_batch_no' => 'Samples Batch No',
        'samples_manufacturing_date' => 'Samples Manufacturing Date',
        'samples_expiry_date' => 'Samples Expiry Date',
        'samples_submitted_on' => 'Samples Submitted On',
        'samples_tracking_no' => 'Samples Tracking No',
        'samples_qty' => 'Samples Qty',
        'samples_sent_to' => 'Samples Sent To',
        'samples_destination_address' => 'Samples Destination Address',
    
        /* WS Details */
        'ws_batch_no' => 'WS Batch No',
        'ws_manufacturing_date' => 'WS Manufacturing Date',
        'ws_expiry_date' => 'WS Expiry Date',
        'ws_submitted_on' => 'WS Submitted On',
        'ws_tracking_no' => 'WS Tracking No',
        'ws_qty' => 'WS Qty',
        'ws_sent_to' => 'WS Sent To',
        'ws_destination_address' => 'WS Destination Address',
    
        /* Dossier Details */
        'dossier_number' => 'Dossier Number',
        'submitted_to' => 'Submitted To',
        'dossier_sent_on' => 'Dossier Sent On',
        'query_received_on' => 'Query Received On',
        'query_submitted_on' => 'Query Submitted On',
        'dossier_submitted_in_moh_on' => 'Dossier Submitted In MOH On',
        'moh_comments_received_on' => 'MOH Comments Received On',
        'moh_comments' => 'MOH Comments',
        'moh_comments_submitted_on' => 'MOH Comments Submitted On',
    
        /* Registration */
        'registration_number' => 'Registration Number',
        'registration_details' => 'Registration Details',
        'purchase_name' => 'Purchase Name',
        'registration_exp_date' => 'Registration Expiry Date',
        'renewal_process_start' => 'Renewal Process Start',
        'variation_submitted' => 'Variation Submitted',
        'variation_approval_date' => 'Variation Approval Date',
    
        /* Pricing */
        'qty' => 'Balance Quantity',
        'units_per_packet' => 'Units Per Packet',
        'price_per_packet' => 'Price Per Packet',
        'hsn_no' => 'HSN No.',   // ✅ ADD THIS
    ];
    
    
    /* DEFAULT COLUMNS */
    $selected_columns = $_GET['columns'] ?? [
        'product_name',
        'brand_name',
        'qty'
    ];
    
    $valid_columns = [];
    foreach ($selected_columns as $col) {
        if (isset($allowed_columns[$col])) {
            $valid_columns[] = $col;
        }
    }
    if (!$valid_columns) {
        $valid_columns = ['product_name'];
    }
    
    /* SEARCH */
    $q = trim($_GET['q'] ?? '');
    $country_filter = (int)($_GET['country_id'] ?? 0);
    
    $page = max(1, (int)($_GET['page'] ?? 1));
    $per_page = 20;
    $offset = ($page - 1) * $per_page;
    
    $where = [];
    $params = [];
    $types = "";
    
    if ($q !== '') {
        $where[] = "(
            p.product_name LIKE ? OR
            p.generic_name LIKE ? OR
            p.brand_name LIKE ? OR
            p.dossier_number LIKE ? OR
            p.registration_number LIKE ?
        )";
        $like = "%$q%";
        $params = array_merge($params, [$like, $like, $like, $like, $like]);
        $types .= "sssss";
    }
    
    if ($country_filter > 0) {
        $where[] = "p.country_id = ?";
        $params[] = $country_filter;
        $types .= "i";
    }
    
    $where_sql = $where ? "WHERE " . implode(" AND ", $where) : "";
    
    /* COUNT */
    $sql_count = "SELECT COUNT(*) as total FROM products p $where_sql";
    $stmt = $conn->prepare($sql_count);
    if ($types) {
        $stmt->bind_param($types, ...$params);
    }
    $stmt->execute();
    $total = (int)($stmt->get_result()->fetch_assoc()['total'] ?? 0);
    $stmt->close();
    
    /* PRODUCT LIST */
    $sql = "SELECT p.*, c.country_name
            FROM products p
            LEFT JOIN countries c ON c.id = p.country_id
            $where_sql
            ORDER BY p.created_at DESC
            LIMIT ? OFFSET ?";
    
    $stmt = $conn->prepare($sql);
    
    $params2 = $params;
    $params2[] = $per_page;
    $params2[] = $offset;
    $types2 = $types . "ii";
    
    $stmt->bind_param($types2, ...$params2);
    $stmt->execute();
    
    $result = $stmt->get_result();
    $products = [];
    while ($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
    $stmt->close();
    
    $total_pages = max(1, (int)ceil($total / $per_page));
    $current_count = count($products);
    $from = $total > 0 ? ($offset + 1) : 0;
    $to = $offset + $current_count;
    
    /* COUNTRIES */
    $countries = [];
    $res = $conn->query("
        SELECT DISTINCT c.id, c.country_name
        FROM countries c
        INNER JOIN products p ON p.country_id = c.id
        WHERE p.status = 'approved'
        ORDER BY c.country_name
    ");
    if ($res) {
        while ($r = $res->fetch_assoc()) {
            $countries[] = $r;
        }
    }
    
    /* PAGINATION QUERY */
    $base_query = [
        'q' => $q,
        'country_id' => $country_filter,
        'columns' => $valid_columns
    ];
    function page_link($page, $base_query) {
        $params = $base_query;
        $params['page'] = $page;
        return '?' . http_build_query($params);
    }
    ?>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Admin - All Commercial Product</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
    :root{
        --primary:#374155;
        --primary-dark:#1f2937;
        --primary-light:#eef2f7;
    
        --bg:#f4f6fb;
        --card:#ffffff;
        --text:#000000;
        --muted:#555555;
        --border:#e5e7eb;
    
        --shadow:0 12px 30px rgba(0,0,0,0.08);
        --radius:18px;
        --sidebar:260px;
    }
    
    *{
        box-sizing:border-box;
    }
    
    html, body{
        margin:0;
        padding:0;
        overflow-x:hidden;
        background:var(--bg);
        color:var(--text);
        font-family: Arial, Helvetica, sans-serif;
    }
    
    a{
        text-decoration:none !important;
    }
    
    /* ===== CONTAINER ===== */
    .container{
        margin-left: var(--sidebar);
        padding: 58px 18px 18px;
        min-height:100vh;
    }
    
    /* ===== HEADER ===== */
    .page-header{
        color:#071127;
        padding:14px 16px;
        border-radius:var(--radius);
    }
    
    .page-header .head-row{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:16px;
        flex-wrap:wrap;
    }
    
    .page-header h1{
        margin:0;
        font-size:22px;
        font-weight:800;
    }
    
    .page-header p{
        margin:8px 0 0;
        font-size:14px;
        color:#555;
    }
    
    /* ===== CARD ===== */
    .card{
        background:var(--card);
        border-radius:var(--radius);
        box-shadow:var(--shadow);
        border:1px solid var(--border);
        overflow:hidden;
    }
    
    /* ===== STATS ===== */
    .stats-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:16px;
        margin-bottom:18px;
    }
    
    .stat{
        background:#fff;
        border:1px solid var(--border);
        border-radius:16px;
        padding:14px;
        box-shadow:var(--shadow);
        position:relative;
    }
    
    .stat::before{
        content:"";
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:5px;
        background: linear-gradient(180deg,#374155,#1f2937);
    }
    
    .stat .label{
        color:var(--muted);
        font-size:13px;
        font-weight:700;
    }
    
    .stat .value{
        margin-top:10px;
        font-size:22px;
        font-weight:800;
    }
    
    /* ===== TOOLBAR ===== */
    .toolbar{
        display:flex;
        justify-content:flex-end; /* ðŸ”¥ button right me */
        align-items:center;
        padding:8px 12px;
        border-bottom:1px solid var(--border);
        background:#fafafa;
    }
    
    /* ===== FILTER ===== */
    .filter{
        padding:10px 12px;
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        border-bottom:1px solid var(--border);
        background:#fff;
    }
    
    .filter input,
    .filter select{
        height:38px;
        padding:0 14px;
        border-radius:12px;
        border:1px solid var(--border);
        font-size:13px;
    }
    
    .filter input{
        flex:1;
        min-width:240px;
    }
    
    .filter input:focus,
    .filter select:focus{
        border-color:var(--primary);
        box-shadow:0 0 0 3px rgba(55,65,85,0.1);
    }
    
    /* ===== BUTTON ===== */
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        height:38px;
        padding:0 12px;
        border-radius:12px;
        border:none;
        background:var(--primary);
        color:#fff;
        cursor:pointer;
        font-size:13px;
        font-weight:700;
        transition:0.2s;
    }
    
    .btn:hover{
        background:var(--primary-dark);
        transform:translateY(-1px);
    }
    
    /* ===== SMALL BUTTON ===== */
    .btn-small{
        width:32px;
        height:32px;
        font-size:13px;
        border-radius:10px;
        background:var(--primary);
        color:#fff;
        border:none;
        cursor:pointer;
    }
        
    .btn-small:hover{
        background:var(--primary-dark);
    }
    
    /* ===== COLUMN BUTTON ===== */
    .btn-column{
        background:var(--primary);
        color:#fff;
        padding:0 14px;
        height:42px;
        border-radius:12px;
        font-size:13px;
    }
    
    /* ===== TABLE ===== */
    .table-wrap{
        overflow-x:auto;
    }
    
    .table{
        width:100%;
        border-collapse:separate;
        border-spacing:0;
        min-width:1100px;
    }
    
    .table thead th{
        background: linear-gradient(180deg,#374155,#1f2937);
        color:#fff;
        padding:10px 10px;
        font-size:12px;
        text-align:left;
    }
    
    .table tbody td{
        padding:10px 10px;
        border-bottom:1px solid #f1f1f1;
        background:#fff;
        font-size:13px;
    }
    
    .table tbody tr:hover td{
        background:#f8fafc;
    }
    
    /* ===== ACTIONS ===== */
    .row-actions{
        display:flex;
        gap:8px;
    }
    
    /* ===== PAGINATION ===== */
    .pagination{
        display:flex;
        gap:8px;
        padding:18px;
        border-top:1px solid var(--border);
        background:#fff;
    }
    
    .pagination a{
        padding:8px 12px;
        border-radius:10px;
        border:1px solid var(--border);
        text-decoration:none;
        background:#fff;
        font-size:13px;
        font-weight:700;
        color:#000;
    }
    
    .pagination a.active{
        background: linear-gradient(180deg,#374155,#1f2937);
        color:#fff;
    }
    
    /* ===== DROPDOWN ===== */
    .column-dropdown{
        display:none;
        position:absolute;
        top:50px;
        right:0; /* ðŸ”¥ IMPORTANT FIX */
        width:320px;
        background:#fff;
        border-radius:14px;
        border:1px solid var(--border);
        box-shadow:var(--shadow);
        padding:14px;
        z-index:9999; /* ðŸ”¥ sidebar ke upar lane ke liye */
    }
    
    .column-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        max-height:200px;
        overflow:auto;
    }
    
    /* ===== MODAL ===== */
    .modal{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.5);
        align-items:center;
        justify-content:center;
    }
    
    .modal-card{
        background:#fff;
        border-radius:18px;
        width:500px;
        max-width:100%;
        padding:20px;
    }
    /* ===== NEW ACTION BUTTONS ===== */
    .btn-action{
        width:36px;
        height:36px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:14px;
        border:none;
        cursor:pointer;
        transition:0.25s ease;
    }
    
    /* EDIT BUTTON */
    .btn-action.edit{
      
        color:#2563eb;
    }
    
    .btn-action.edit:hover{
       
        color:#2563eb;
        transform:scale(1.08);
    }
    
    /* DELETE BUTTON */
    .btn-action.delete{
     
        color:#dc2626;
    }
    
    .btn-action.delete:hover{
        
        color:#dc2626;
        transform:scale(1.08);
    }
    
    /* ALIGNMENT FIX */
    .row-actions{
        display:flex;
        gap:8px;
        align-items:center;
        justify-content:flex-start;
    }
    
    /* ===== RESPONSIVE ===== */
    @media(max-width:900px){
        .container{
            margin-left:0;
            padding:16px;
        }
    
        .stats-grid{
            grid-template-columns:1fr 1fr;
        }
    }
    
    @media(max-width:600px){
        .stats-grid{
            grid-template-columns:1fr;
        }
    }
    /* ================= MOBILE RESPONSIVE ================= */
    @media (max-width: 768px) {
    
        /* HEADER FIX */
        body {
            padding-top: 65px;
        }
    
        /* CONTAINER FULL WIDTH */
        .container {
            margin-left: 0 !important;
            padding: 12px;
        }
    
        /* HEADER */
        .page-header .head-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
    
        .page-header h1 {
            font-size: 18px;
        }
    
        .page-header p {
            font-size: 12px;
        }
    
        /* STATS GRID */
        .stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
    
        .stat {
            padding: 10px;
        }
    
        .stat .value {
            font-size: 18px;
        }
    
        /* TOOLBAR */
        .toolbar {
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }
    
        /* FILTER */
        .filter {
            flex-direction: column;
            gap: 8px;
        }
    
        .filter input,
        .filter select,
        .btn {
            width: 100%;
        }
    
        /* TABLE SCROLL */
        .table-wrap {
            overflow-x: auto;
        }
    
        .table {
            min-width: 1000px; /* important */
        }
    
        .table th,
        .table td {
            font-size: 12px;
            padding: 8px;
            white-space: nowrap;
        }
    
        /* ACTION BUTTONS */
        .row-actions {
            flex-direction: column;
            gap: 6px;
        }
    
        /* PAGINATION */
        .pagination {
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
        }
    
        .pagination a {
            font-size: 11px;
            padding: 6px 10px;
        }
    
        /* COLUMN DROPDOWN FIX */
        .column-dropdown {
            width: 95%;
            right: 10px;
            top: 60px;
        }
    
        .column-grid {
            grid-template-columns: 1fr;
        }
    }
    </style>
    </head>
    <body>
    
    <?php include 'adminsidebar.php'; ?>
    <?php include '../header.php'; ?>
    
    <div class="container">
        <div class="page-header">
            <div class="head-row">
                <div>
                    <h1><i class="fa-solid fa-boxes-stacked"></i> All Commercial Product</h1>
                    <p>Manage, search, filter, and update all commercial products in one place.</p>
                </div>
                <div class="page-actions">
                    <a class="btn" href="add_product.php">
                        <i class="fa fa-plus"></i> Add Product
                    </a>
                </div>
            </div>
        </div>
    
      
        <?php foreach ($messages as $m): ?>
            <div class="notice success"><?php echo e($m); ?></div>
        <?php endforeach; ?>
    
        <?php foreach ($errors as $er): ?>
            <div class="notice error"><?php echo e($er); ?></div>
        <?php endforeach; ?>
    
        <div class="card">
            <div class="toolbar">
                
    
                <div class="column-section">
                    <button type="button" class="btn-column" onclick="toggleColumns()">
                        <i class="fa-solid fa-table-columns"></i> Columns
                    </button>
    
                    <div id="columnDropdown" class="column-dropdown">
                        <form method="get">
                            <input type="hidden" name="q" value="<?php echo e($q); ?>">
                            <input type="hidden" name="country_id" value="<?php echo (int)$country_filter; ?>">
    
                            <div class="column-actions">
                                <label class="col-item" style="margin-bottom:10px;">
                                    <input type="checkbox" onclick="toggleAll(this)">
                                    <span>Select All</span>
                                </label>
                            </div>
    
                            <div class="column-grid">
                                <?php foreach ($allowed_columns as $key => $label): ?>
                                    <label class="col-item">
                                        <input type="checkbox" name="columns[]" value="<?php echo e($key); ?>" <?php if (in_array($key, $valid_columns, true)) echo 'checked'; ?>>
                                        <span><?php echo e($label); ?></span>
                                    </label>
                                <?php endforeach; ?>
                            </div>
    
                            <input type="hidden" name="page" value="1">
                            <button class="btn apply-btn" type="submit">Apply Columns</button>
                        </form>
                    </div>
                </div>
            </div>
    
            <form class="filter" method="get">
                <?php foreach ($valid_columns as $col): ?>
                    <input type="hidden" name="columns[]" value="<?php echo e($col); ?>">
                <?php endforeach; ?>
    
                <input type="search" id="liveSearch" name="q" placeholder="Search product..." value="<?php echo e($q); ?>">
    
                <select name="country_id">
                    <option value="0">All Countries</option>
                    <?php foreach ($countries as $c): ?>
                        <option value="<?php echo (int)$c['id']; ?>" <?php if ($country_filter == (int)$c['id']) echo 'selected'; ?>>
                            <?php echo e($c['country_name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
    
                <input type="hidden" name="page" value="1">
                <button class="btn" type="submit">
                    <i class="fa fa-filter"></i> Filter
                </button>
            </form>
    
            <div class="table-wrap" id="scrollTable">
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width:80px;">No.</th>
                            <th>Date</th>
                            <?php foreach ($valid_columns as $col): ?>
                                <th><?php echo e($allowed_columns[$col]); ?></th>
                            <?php endforeach; ?>
                            <th>Units/Pack</th>
                            <th>Price/Pack</th>
                            <th>HSN No.</th>
                            <th>Country</th>
                            <th>Purchase Name</th>
                            <th>File</th>
                            <th style="width:120px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($products)): ?>
                            <tr>
                                <td colspan="<?php echo 9 + count($valid_columns); ?>">
                                    <div class="empty">No products found.</div>
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php $i = $offset + 1; foreach ($products as $p): ?>
                                <tr>
                                    <td><?php echo $i++; ?></td>
    
                                    <td>
                                    <?php 
                                    echo !empty($p['created_at']) 
                                        ? date('d M Y', strtotime($p['created_at'])) 
                                        : '-'; 
                                    ?>
                                    </td>
    
                                    <?php foreach ($valid_columns as $col): ?>
                                        <td><?php echo e($p[$col] ?? ''); ?></td>
                                    <?php endforeach; ?>
                                    <td><?php echo e($p['units_per_packet'] ?? '-'); ?></td>
    
                                    <td>₹<?php echo number_format($p['price_per_packet'] ?? 0, 2); ?></td>
    
                                    <td><?php echo e($p['hsn_no'] ?? '-'); ?></td>
                                    <td><?php echo e($p['country_name'] ?? ''); ?></td>
                                    <td><?php echo e($p['purchase_name'] ?? ''); ?></td>
                                    <td>
                                        <?php if (!empty($p['file_path'])): ?>
                                            <a class="btn-small" href="../Admin/file_view.php?id=<?php echo (int)$p['id']; ?>" target="_blank" title="View File">
                                                <i class="fa fa-file"></i>
                                            </a>
                                        <?php else: ?>
                                            <span class="small">-</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <div class="row-actions">
        <a class="btn-action edit" href="add_product.php?id=<?php echo (int)$p['id']; ?>" title="Edit">
            <i class="fa fa-pen"></i>
        </a>
    
        <form method="post" style="margin:0;">
            <input type="hidden" name="csrf_token" value="<?php echo e($csrf); ?>">
            <input type="hidden" name="delete_id" value="<?php echo (int)$p['id']; ?>">
            <button type="submit" class="btn-action delete" onclick="return confirm('Delete this product?')" title="Delete">
                <i class="fa fa-trash"></i>
            </button>
        </form>
    </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
    
            <div class="pagination">
                <?php for ($pageno = 1; $pageno <= $total_pages; $pageno++): ?>
                    <a class="<?php echo $pageno === $page ? 'active' : ''; ?>" href="<?php echo e(page_link($pageno, $base_query)); ?>">
                        <?php echo $pageno; ?>
                    </a>
                <?php endfor; ?>
            </div>
        </div>
    </div>
    
    <script>
    function toggleColumns(){
        const box = document.getElementById("columnDropdown");
        box.style.display = (box.style.display === "block") ? "none" : "block";
    }
    
    document.addEventListener("click", function(e){
        const box = document.getElementById("columnDropdown");
        if (!e.target.closest(".column-section")) {
            box.style.display = "none";
        }
    });
    
    function toggleAll(source){
        document.querySelectorAll(".column-grid input[type='checkbox']").forEach(cb => cb.checked = source.checked);
    }
    </script>
    <script>
    let timer;
    
    document.getElementById("liveSearch").addEventListener("keyup", function(){
        clearTimeout(timer);
    
        timer = setTimeout(() => {
            const query = this.value;
            const url = new URL(window.location.href);
    
            url.searchParams.set("q", query);
            url.searchParams.set("page", 1);
    
            window.location.href = url.toString();
        }, 500); // delay for smooth typing
    });
    </script>
    <script>
    const slider = document.getElementById('scrollTable');
    
    let isDown = false;
    let startX;
    let scrollLeft;
    
    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });
    
    slider.addEventListener('mouseleave', () => {
        isDown = false;
    });
    
    slider.addEventListener('mouseup', () => {
        isDown = false;
    });
    
    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 2; // scroll speed
        slider.scrollLeft = scrollLeft - walk;
    });
    </script>
    </body>
    </html>