<?php
session_start();
require_once '../config.php';

if (!isset($_SESSION['user_id'])) {
    header('Location: ../login.php');
    exit;
}

/* GET STOCK LIMIT */
$limit_res = $conn->query("SELECT stock_limit FROM stock_limits ORDER BY id DESC LIMIT 1");
$stock_limit = 20; // fallback

if($limit_res && $limit_res->num_rows > 0){
    $stock_limit = (int)$limit_res->fetch_assoc()['stock_limit'];
}
function e($v){ return htmlspecialchars($v ?? '', ENT_QUOTES); }

/* SEARCH */
$q = trim($_GET['q'] ?? '');

$page = max(1,(int)($_GET['page'] ?? 1));
$per_page = 20;
$offset = ($page-1)*$per_page;

$where = "";
$params = [];
$types = "";

if($q != ''){
    $where = "WHERE product_name LIKE ? OR brand_name LIKE ?";
    $like = "%$q%";
    $params = [$like,$like];
    $types = "ss";
}

/* TOTAL */
$sql_count = "SELECT COUNT(*) as total FROM products $where";
$stmt = $conn->prepare($sql_count);

if($types){
    $stmt->bind_param($types,...$params);
}

$stmt->execute();
$total = $stmt->get_result()->fetch_assoc()['total'];
$stmt->close();

/* DATA */
$sql = "SELECT id, product_name, brand_name, qty 
        FROM products 
        $where
        ORDER BY product_name 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 = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();

$total_pages = ceil($total/$per_page);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stock Check</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body{
    font-family:Inter,Arial;
    background:#f4f7fb;
    margin:0;
    padding:0;
}

/* LAYOUT */
.container{
    margin-left:260px;
    padding:40px 20px 20px;
}

/* CARD */
.card{
    background:#fff;
    padding:16px;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(2,6,23,.08);
    border:1px solid #e2e8f0;
}

/* TITLE */
.page-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:22px;
    font-weight:700;
    margin-bottom:4px;
    color:#0f172a;
}

.page-title i{
    color:#334155;
    font-size:18px;
}

.subtitle{
    color:#64748b;
    font-size:13px;
    margin-bottom:14px;
}

/* SEARCH */
.search-box{
    margin-bottom:14px;
}

.search-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f8fafc;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid #e2e8f0;
}

.search-wrapper input{
    flex:1;
    border:none;
    outline:none;
    background:none;
    font-size:13px;
}

/* TABLE */
.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
}

.table th{
    background:#334155;
    color:#fff;
    padding:10px;
    font-size:13px;
}

.table td{
    background:#fff;
    color:#000;
    padding:10px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    font-size:13px;
}

/* ROUNDED ROW */
.table tr td:first-child{
    border-left:1px solid #eee;
    border-radius:10px 0 0 10px;
}
.table tr td:last-child{
    border-right:1px solid #eee;
    border-radius:0 10px 10px 0;
}

.table tr:hover td{
    background:#f8fafc;
}

/* LINKS */
.table td a{
    color:#000;
    text-decoration:none;
    font-weight:600;
}

.table td a:hover{
    color:#000;
}

/* STATUS BADGES */
.status{
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    display:inline-block;
}

/* PAGINATION */
.pagination{
    margin-top:14px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.pagination a{
    padding:6px 10px;
    font-size:12px;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    background:#374155;
    font-weight:600;
}

.pagination a:hover{
    background:#374155;
}

/* RESPONSIVE */
@media(max-width:992px){
    .container{margin-left:0;}
}

/* ================= MOBILE RESPONSIVE (CARD UI) ================= */
@media (max-width: 768px){

    .container{
        margin-left:0 !important;
        padding:12px;
        width:100%;
    }

    .card{
        padding:14px;
    }

    .page-title{
        font-size:18px;
    }

    .subtitle{
        font-size:12px;
    }

    /* SEARCH */
    .search-wrapper{
        padding:10px;
    }

    .search-wrapper input{
        font-size:13px;
    }

    /* ❌ HIDE TABLE HEADER */
    .table thead{
        display:none;
    }

    /* ✅ CARD STYLE ROW */
    .table tbody tr{
        display:block;
        margin-bottom:12px;
        border-radius:12px;
        border:1px solid #e2e8f0;
        padding:10px;
        background:#f8fafc;
    }

    /* EACH CELL */
    .table tbody td{
        display:flex;
        justify-content:space-between;
        padding:6px 0;
        border:none;
        font-size:13px;
    }

    /* LABEL */
    .table tbody td::before{
        content:attr(data-label);
        font-weight:600;
        color:#64748b;
    }

    /* STATUS ALIGN */
    .status{
        font-size:11px;
    }

    /* PAGINATION */
    .pagination{
        justify-content:center;
        gap:6px;
    }

    .pagination a{
        font-size:11px;
        padding:6px 10px;
    }
}
</style>
</head>

<body>

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

<div class="container">

<div class="card">

<!-- TITLE -->
<div class="page-title" style="color: #000;">
    <i class="fa fa-boxes-stacked"></i>
    Stock Check
</div>
<div class="subtitle">
    Monitor product stock levels with real-time status.
</div>

<!-- SEARCH -->
<form method="get" class="search-box" id="searchForm">
<div class="search-wrapper">
    <i class="fa fa-search"></i>

    <input 
    type="search" 
    name="q" 
    id="searchInput"
    placeholder="Search product or brand..."
    value="<?php echo e($q); ?>"
    autocomplete="off">

    
</div>
</form>

<!-- TABLE -->
<table class="table">

<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Status</th>
</tr>
</thead>

<tbody>

<?php foreach($products as $p): 

$qty = (int)$p['qty'];

if($qty <= $stock_limit){
    $class = "low";
    $status = "Low";
}elseif($qty <= ($stock_limit * 3)){
    $class = "medium";
    $status = "Medium";
}else{
    $class = "high";
    $status = "High";
}
?>

<tr>

<td data-label="ID"><?php echo $p['id']; ?></td>

<td data-label="Product">
<a href="product_view.php?id=<?php echo $p['id']; ?>">
<?php echo e($p['product_name']); ?>
</a>
</td>

<td data-label="Brand"><?php echo e($p['brand_name']); ?></td>

<td data-label="Stock"><?php echo $qty; ?></td>

<td data-label="Status">
<span class="status <?php echo $class; ?>">
<?php echo $status; ?>
</span>
</td>

</tr>

<?php endforeach; ?>

</tbody>
</table>

<!-- PAGINATION -->
<div class="pagination">
<?php for($i=1;$i<=$total_pages;$i++): ?>
<a href="?page=<?php echo $i; ?>&q=<?php echo urlencode($q); ?>">
<?php echo $i; ?>
</a>
<?php endfor; ?>
</div>

</div>
</div>

<script>
const searchInput = document.getElementById("searchInput");
const searchForm = document.getElementById("searchForm");
const clearBtn = document.getElementById("clearSearch");

let timer;

searchInput.addEventListener("keyup", function(){
    clearTimeout(timer);
    timer = setTimeout(() => searchForm.submit(), 400);
});

clearBtn.addEventListener("click", function(){
    searchInput.value = "";
    searchForm.submit();
});
</script>

</body>
</html>