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

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

if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'sales_manager') {
    echo "Access Denied";
    exit;
}

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

$search = trim($_GET['q'] ?? '');
$date1  = $_GET['date1'] ?? '';
$date2  = $_GET['date2'] ?? '';

$where = "WHERE u.role IN ('sales_manager','sales_executive')";

if ($search !== '') {
    $searchEsc = $conn->real_escape_string($search);
    $where .= " AND (
        b.customer_name LIKE '%$searchEsc%' 
        OR CAST(b.id AS CHAR) LIKE '%$searchEsc%'
    )";
}

if ($date1 !== '' && $date2 !== '') {
    $date1Esc = $conn->real_escape_string($date1);
    $date2Esc = $conn->real_escape_string($date2);
    $where .= " AND DATE(b.created_at) BETWEEN '$date1Esc' AND '$date2Esc'";
}

$query = "
SELECT 
    b.id,
    b.customer_name,
    b.total_amount,
    b.created_at,
    b.payment_status,
    u.name AS created_by_name,
    u.role AS created_by_role
FROM bills b
LEFT JOIN users u ON b.created_by = u.id
$where
ORDER BY b.id ASC
";

$result = mysqli_query($conn, $query);
?>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>All Bills</title>

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

<style>
:root{
  --primary:#374151;        /* softer professional */
  --bg:#f4f7fb;
  --card:#ffffff;
  --border:#e5e7eb;
}

/* BASE */
body{
  margin:0;
  font-family: 'Segoe UI', sans-serif;
  background:var(--bg);
  color:#111827;
}

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

/* CARD */
.card{
  background:var(--card);
  border-radius:14px;
  padding:18px;   /* reduced for medium */
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* PAGE TITLE */
.page-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:15px;
}

.page-title h2{
  margin:0;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#1e293b;
}

.page-title h2 i{
  color:#374151;
  font-size:17px;
}

.subtitle{
  font-size:12.5px;
  color:#64748b;
  font-weight:500;
}

/* FILTER */
.filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:18px;
}

/* INPUT */
.input{
  height:40px;
  padding:0 12px;
  font-size:13.5px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fafc;
  min-width:180px;
}

/* BUTTON */
.btn{
  height:40px;
  padding:0 14px;
  font-size:13.5px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}

.btn-primary:hover{
  background:#1f2937;
}

.btn-reset{
  background:#e5e7eb;
  color:#111827;
}

.btn-reset:hover{
  background:#d1d5db;
}

/* TABLE */
.table{
  width:100%;
  border-collapse:collapse;
}

.table th{
  background:var(--primary);
  color:#fff;
  padding:10px;
  font-size:13px;
  font-weight:600;
}

.table td{
  padding:10px;
  font-size:13.5px;
  border-bottom:1px solid var(--border);
  color:#111827;
}

.table tr:hover{
  background:#f1f5f9;
  transition:0.2s;
}

/* BADGE (STATUS COLORS ðŸ”¥) */
.badge{
  padding:5px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.paid{
  color:#16a34a;
}

.unpaid{
  color:#dc2626;
}

.advance{
  color:#f59e0b;
}
/* ================= FINAL PERFECT MOBILE ================= */
@media (max-width: 768px){

  html, body{
    overflow-x: hidden;
  }

  body{
    padding: 62px 8px 12px;
  }

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

  .card{
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  }

  .page-title{
    margin-bottom: 12px;
  }

  .page-title h2{
    font-size: 17px;
    line-height: 1.2;
  }

  .subtitle{
    font-size: 12px;
  }

  /* FILTER */
  .filter{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
  }

  .input{
    width: 100%;
    height: 42px;
    font-size: 13px;
    border-radius: 10px;
    background: #f8fafc;
  }

  .btn{
    width: 100%;
    height: 42px;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
  }

  .btn-reset{
    width: 100%;
  }

  /* 🔥 REMOVE HEADER COMPLETELY */
  .table tr:first-child{
    display: none !important;
  }

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

  .table tr{
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  }

  .table td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border: none;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 13px;
  }

  .table td:last-child{
    border-bottom: none;
  }

  /* LABEL STYLE (LEFT SIDE) */
  .table td::before{
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 40%;
  }

  /* VALUE SIDE */
  .table td span,
  .table td strong{
    text-align: right;
  }

  /* IMPORTANT FIELD STYLE */
  .table td[data-label="Customer"]{
    align-items: flex-start;
  }

  .table td[data-label="Total"] strong{
    font-size: 15px;
    color: #0f172a;
  }

  /* BADGE */
  .badge{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
  }

  .paid{ color:#16a34a; }
  .unpaid{ color:#dc2626; }
  .advance{ color:#d97706; }
}


/* ================= SMALL MOBILE ================= */
@media (max-width: 480px){

  body{
    padding: 58px 6px 10px;
  }

  .container{
    padding: 6px;
  }

  .card{
    padding: 10px;
  }

  .page-title h2{
    font-size: 16px;
  }

  .subtitle{
    font-size: 11px;
  }

  .input,
  .btn{
    height: 40px;
    font-size: 12px;
  }

  .table tr{
    padding: 10px;
  }

  .table td{
    font-size: 12px;
    padding: 8px 0;
  }

  .table td::before{
    font-size: 10px;
    flex-basis: 42%;
  }

  .badge{
    font-size: 10px;
    padding: 4px 8px;
  }
}
</style>
</head>

<body>

<!-- SIDEBAR -->
<?php include 'salesmanagersidebar.php'; ?>

<!-- HEADER -->
<?php include '../header.php'; ?>

<div class="container">

<div class="card">

<div class="page-title">
  <h2>
    <i class="fa-solid fa-file-invoice"></i>
    All Bills
  </h2>
  <p class="subtitle">View and manage all generated bills</p>
</div>

<form method="GET" class="filter">
    <input type="text" name="q" class="input" placeholder="Search customer / ID" value="<?php echo e($search); ?>">
    <input type="date" name="date1" class="input" value="<?php echo e($date1); ?>">
    <input type="date" name="date2" class="input" value="<?php echo e($date2); ?>">

    <button class="btn btn-primary">
        <i class="fa fa-filter"></i> Filter
    </button>

    <a href="all_bills.php" class="btn btn-reset">
        <i class="fa fa-rotate-left"></i> Reset
    </a>
</form>

<table class="table">
<tr>
    <th>ID</th>
    <th>Customer</th>
    <th>Total</th>
    <th>Created By</th>
    <th>Role</th>
    <th>Payment</th>
    <th>Date</th>
</tr>

<?php if(mysqli_num_rows($result)>0): ?>
<?php while ($row = mysqli_fetch_assoc($result)) { 
    $status = strtolower($row['payment_status']);
    $cls = ($status == 'paid') ? 'paid' : (($status == 'unpaid') ? 'unpaid' : 'advance');
?>
<tr>
   <td data-label="ID"><?php echo $row['id']; ?></td>

<td data-label="Customer">
  <?php echo e($row['customer_name']); ?>
</td>

<td data-label="Total">
  <strong>₹ <?php echo number_format($row['total_amount'],2); ?></strong>
</td>

<td data-label="Created By">
  <?php echo e($row['created_by_name']); ?>
</td>

<td data-label="Role">
  <?php echo ucfirst(e($row['created_by_role'])); ?>
</td>

<td data-label="Payment">
  <span class="badge <?php echo $cls; ?>">
    <?php echo strtoupper($status); ?>
  </span>
</td>

<td data-label="Date">
  <?php echo date('d M Y', strtotime($row['created_at'])); ?>
</td>
</tr>
<?php } ?>
<?php else: ?>
<tr>
    <td colspan="7" style="text-align:center; padding:20px;">No bills found</td>
</tr>
<?php endif; ?>

</table>

</div>
</div>

</body>
</html>