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

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

$role = $_SESSION['role'] ?? '';

function e($v){
    return htmlspecialchars($v ?? '', ENT_QUOTES);
}

$products = [];

$sql = "SELECT p.*, c.country_name
        FROM products p
        LEFT JOIN countries c ON p.country_id = c.id
        WHERE p.status != 'approved'
          AND (p.registration_number IS NULL OR p.registration_number = '' OR p.registration_date IS NULL)
        ORDER BY p.created_at DESC";

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

/* COUNT */
$countRes = $conn->query("SELECT COUNT(*) as total FROM products p 
LEFT JOIN countries c ON p.country_id=c.id
WHERE p.status != 'approved'
AND (p.registration_number IS NULL OR p.registration_number='' OR p.registration_date IS NULL)");

$total = $countRes->fetch_assoc()['total'];
$total_pages = ceil($total / $per_page);

/* DATA */
$sql .= " LIMIT $per_page OFFSET $offset";

$res = $conn->query($sql);

while($row=$res->fetch_assoc()){
    $products[]=$row;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unregistered Products</title>

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

<style>
/* Base */
:root {
  --bg: #eef2f7;
  --card-bg: #fff;
  --muted: #64748b;
  --accent: #334155;
  --soft: #f1f5f9;
}
body{
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  margin: 0;
  color: #000;
}

/* Container (matches Manage Products layout) */
.container{
  margin-left: 260px;
  padding: 80px 25px;
}

/* Card */
.card{
  background: var(--card-bg);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  max-width: 1200px;
}

/* Top bar */
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
h2{
  margin:0;
  font-weight:700;
  font-size:22px;
  color: #000;
}
.small{
  font-size:13px;
  color: var(--muted);
  margin-top:4px;
}

/* Filter area */
.filter{
  background: var(--soft);
  padding:12px;
  border-radius:12px;
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px;
}
.filter input[type="search"]{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  font-size:14px;
  background:#fff;
}
.btn{
  background:#334155;
  color:#fff;
  padding:9px 14px;
  border-radius:18px;
  border:none;
  text-decoration:none; /* remove underline */
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:14px;
}
.btn:hover{ background:#1e293b; }

/* Table */
.table-container{
  overflow-x:auto;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{
  background:#334155;
  color:#fff;
  padding:12px 14px;
  text-align:left;
  font-size:13px;
}
.table td{
  background:#fff;
  padding:12px 14px;
  font-size:14px;
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
}
.table tr td:first-child{ border-left:1px solid #eef2f7; border-radius:8px 0 0 8px; }
.table tr td:last-child{ border-right:1px solid #eef2f7; border-radius:0 8px 8px 0; }
.table tr:hover td{ background:#f8fafc; }

/* Action buttons */
.actions{
  display:flex;
  gap:8px;
}
.btn-small{
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#111827;
}
.btn-view{ background:#fff; color:#000; border:none; }
.btn-edit{ background:#fff; color:#000; border:1px solid #e2e8f0; }
.btn-register{ background:#10b981; color:#fff; border:none; }

/* Responsive adjustments */
@media(max-width:900px){
  .container{ margin-left:0; padding:60px 16px; }
  .top-bar{ flex-direction:column; align-items:flex-start; gap:8px; }
  .filter{ flex-direction:column; align-items:stretch; }
}
.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index:99999;

  align-items:center;
  justify-content:center;
}

.modal-content {
  width:95%;
  max-width:1000px;
  max-height:90vh;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,0.3);
  animation:zoomIn 0.25s ease;
}

@keyframes zoomIn {
  from { transform:scale(0.95); opacity:0; }
  to { transform:scale(1); opacity:1; }
}

/* HEADER */
.modal-header {
  position:sticky;
  top:0;
  background:#fff;
  padding:18px 22px;
  border-bottom:1px solid #e2e8f0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:10;
}

.modal-title {
  font-size:20px;
  font-weight:700;
}

.close {
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.2s;
}
.close:hover {
  background:#e2e8f0;
}

/* BODY */
.modal-body {
  padding:20px;
  overflow-y:auto;
  max-height: calc(90vh - 70px);
}

/* GRID */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:14px;
}

.field {
  background:#f8fafc;
  padding:12px;
  border-radius:10px;
  transition:0.2s;
}
.field:hover {
  background:#f1f5f9;
}

.label {
  font-size:11px;
  color:#64748b;
}

.value {
  font-weight:600;
  margin-top:2px;
}

/* FULL WIDTH */
.full {
  grid-column:1/-1;
}

/* IMAGE */
.preview {
  text-align:center;
  margin-top:20px;
}
.preview img {
  max-width:220px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* BUTTON */
.download-btn {
  margin-top:10px;
  display:inline-block;
  padding:8px 16px;
  background:#334155;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
}
/* ================= MOBILE RESPONSIVE ================= */
@media (max-width:768px){

    /* ðŸ”¥ REMOVE SIDEBAR GAP */
    .container{
        margin-left:0 !important;
        padding:10px;
    }

    body{
        padding:65px 10px;
    }

    /* TOP BAR */
    .top-bar{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    /* FILTER */
    .filter{
        flex-direction:column;
        gap:8px;
    }

    .filter input{
        width:100%;
    }

    /* ðŸ”¥ TABLE â†’ CARD */
    .table thead{
        display:none;
    }

    .table{
        border-spacing:0;
    }

    .table tbody tr{
        display:block;
        background:#fff;
        margin-bottom:12px;
        border-radius:12px;
        padding:12px;
        box-shadow:0 4px 10px rgba(0,0,0,0.05);
    }

    .table tbody td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:8px 0;
        border:none;
        font-size:13px;
    }

    .table tbody td::before{
        content:attr(data-label);
        font-weight:600;
        color:#64748b;
        flex:0 0 45%;
    }

    /* ACTION */
    .actions{
        justify-content:flex-end;
    }

}
</style>
</head>
<body>

<?php include "rasidebar.php"; ?>
<?php include "../header.php"; ?>

<div class="container">
  <div class="card">

    <div class="top-bar">
      <div>
        <h2>UnRegistered Products</h2>
        <div class="small">Products that are missing registration number or registration date</div>
      </div>
    </div>

    <div class="filter">
      <input type="search" id="tableSearch" placeholder="Search product, brand, dossier..." aria-label="Search products">
    </div>

    <div class="table-container">
      <table class="table" id="productsTable" role="table" aria-label="Unregistered products">
        <thead>
          <tr>
            <th>Product Name</th>
<th>Generic Name</th>
<th>Brand Name</th>
<th>Standard</th>
<th>Strength</th>
<th>Volume</th>
<th>Dosage Form</th>
<th>Shelf Life</th>
<th>Indication</th>
<th>Packing</th>
<th>Manufactured By</th>
<th>Marketed By</th>
<th>Distributed By</th>
<th>Country</th>
<th>Type of Dossier</th>
<th>Actions</th>
          </tr>
        </thead>
       <tbody>
<?php if(empty($products)): ?>
<tr>
  <td colspan="16" class="small">No unregistered products found</td>
</tr>

<?php else: ?>
<?php foreach($products as $p): ?>
<tr>

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

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

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

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

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

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

  <td data-label="Dosage Form"><?php echo e($p['dosage_form'] ?? '—'); ?></td>

  <td data-label="Shelf Life"><?php echo e($p['shelf_life'] ?? '—'); ?></td>

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

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

  <td data-label="Manufactured By"><?php echo e($p['manufactured_by'] ?? '—'); ?></td>

  <td data-label="Marketed By"><?php echo e($p['marketed_by'] ?? '—'); ?></td>

  <td data-label="Distributed By"><?php echo e($p['distributed_by'] ?? '—'); ?></td>

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

  <td data-label="Type of Dossier"><?php echo e($p['dossier_type'] ?? '—'); ?></td>

  <td data-label="Actions">
    <div class="actions">
      <a class="btn-small btn-edit" href="add_product.php?id=<?php echo (int)$p['id']; ?>">
        <i class="fa fa-pen"></i> Edit
      </a>
    </div>
  </td>

</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
      </table>
      
<div id="productModal" class="modal" onclick="outsideClick(event)">
  <div class="modal-content">

    <div class="modal-header">
      <div class="modal-title">Product Details</div>
      <div class="close" onclick="closeModal()">Ã—</div>
    </div>

    <div class="modal-body" id="modalData">
      Loading...
    </div>

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

  </div>
</div>

<script>
/* Client-side table filtering (search as-you-type) */
(function(){
  const search = document.getElementById('tableSearch');
  const table = document.getElementById('productsTable');
  const tbody = table.tBodies[0];

  function normalize(text){
    return (text || '').toString().toLowerCase().trim();
  }

  function filterRows(q){
    const needle = normalize(q);
    const rows = Array.from(tbody.rows);

    if(!needle){
      rows.forEach(r => r.style.display = '');
      return;
    }

    rows.forEach(row => {
      const text = normalize(row.innerText);
      row.style.display = text.indexOf(needle) !== -1 ? '' : 'none';
    });
  }

  search.addEventListener('input', function(e){
    filterRows(e.target.value);
  });

  window.clearSearch = function(){
    search.value = '';
    filterRows('');
    search.focus();
  };
})();
</script>
<script>
function openModal(id){
  const modal = document.getElementById('productModal');
  modal.style.display = 'flex';
  document.body.style.overflow = 'hidden';

  fetch('get_product.php?id=' + id)
    .then(res => res.text())
    .then(data => {
      document.getElementById('modalData').innerHTML = data;
    })
    .catch(err => {
      document.getElementById('modalData').innerHTML = "Error loading data";
    });
}

function closeModal(){
  document.getElementById('productModal').style.display = 'none';
  document.body.style.overflow = 'auto';
}

// outside click
function outsideClick(e){
  if(e.target.id === 'productModal'){
    closeModal();
  }
}

// ESC close
document.addEventListener('keydown', function(e){
  if(e.key === "Escape"){
    closeModal();
  }
});
</script>

</body>
</html>