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

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

// Search
$search = $_GET['search'] ?? '';

$query = "
    SELECT * FROM doctors
    WHERE name LIKE ? OR mobile LIKE ? OR city LIKE ?
    ORDER BY id DESC
";

$stmt = $conn->prepare($query);
$search_param = "%$search%";
$stmt->bind_param("sss", $search_param, $search_param, $search_param);
$stmt->execute();
$result = $stmt->get_result();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Doctor Directory</title>

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

   <style>
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #f4f6fb;
}

/* Layout same */
.main-content {
    flex: 1;
    padding: 0px 20px 20px;
    margin-left: 250px;
    margin-top: 0;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 1000;
}

/* Card (slightly compact) */
.container {
    background: #ffffff;
    padding: 18px; /* reduced */
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.page-header h2 {
    margin: 0;
    font-size: 18px; /* reduced from 22 */
    font-weight: 600;
    color: #111827;
}

/* Subtitle (already present) */
.page-title p {
    font-size: 12.5px;
    margin: 2px 0 0;
    color: #64748b;
}

/* Search */
.search-box {
    display: flex;
    gap: 10px;
}

.search-box input {
    height: 40px;
    padding: 0 12px;
    width: 240px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 13.5px;
}

.search-box input:focus {
    border-color: #374155;
}

.search-box button {
    height: 40px;
    padding: 0 14px;
    border: none;
    background: #374155;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-box button:hover {
    background: #000;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    table-layout: fixed;
}

th {
    background: #374155;
    color: #fff;
    font-size: 13px;
    padding: 10px; /* reduced */
    text-align: center;
}

td {
    padding: 10px; /* reduced */
    font-size: 13.5px; /* medium */
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #000;
}

/* Column alignment SAME */
th:nth-child(1), td:nth-child(1) { width: 60px; }
th:nth-child(2), td:nth-child(2) { text-align: left; }
th:nth-child(3), td:nth-child(3) { width: 150px; }
th:nth-child(4), td:nth-child(4) { width: 150px; }
th:nth-child(5), td:nth-child(5) { width: 180px; }

tr:hover {
    background: #f1f5f9;
}

/* Badge */
.badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 5px 10px; /* reduced */
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 768px){

  html, body{
    overflow-x: hidden;
  }

  body{
    padding-top: 0px;
  }

  .main-content{
    margin-left: 0 !important;
    padding: 0px 10px 10px; 
  }

  .container{
    padding: 0px;
    border-radius: 14px;
  }

  /* HEADER STACK */
  .page-header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

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

  .subtitle{
    font-size: 12px;
  }

  /* SEARCH FULL WIDTH */
  .search-box{
    flex-direction: column;
    gap: 8px;
  }

  .search-box input{
    width: 100%;
    height: 42px;
    font-size: 13px;
  }

  .search-box button{
    width: 100%;
    height: 42px;
    justify-content: center;
  }

  /* 🔥 TABLE → CARD UI */
  table{
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  table tr:first-child{
    display: none !important;
  }

  table tr{
    display: block;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  }

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

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

  /* LABEL */
  table td::before{
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
  }

  /* BADGE */
  .badge{
    font-size: 11px;
    padding: 4px 10px;
  }
}

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

  .container{
    padding: 10px;
  }

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

  .search-box input,
  .search-box button{
    height: 40px;
    font-size: 12px;
  }

  table td{
    font-size: 12px;
  }

  table td::before{
    font-size: 10px;
  }
}
</style>
</head>

<body>

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

<div class="main-content">
    <div class="container">

        <!-- HEADER + SEARCH SAME LINE -->
        <div class="page-header">
            <div class="page-title">
  <h2>
    <i class="fa-solid fa-user-doctor"></i>
    Doctor Directory
  </h2>
  <p class="subtitle">View and manage all doctors</p>
</div>

            <form method="GET" class="search-box">
                <input type="text" name="search" placeholder="Search doctor..." 
                    value="<?php echo htmlspecialchars($search); ?>">
                <button type="submit">
                    <i class="fas fa-search"></i> Search
                </button>
            </form>
        </div>

        <!-- TABLE -->
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Mobile</th>
                <th>City</th>
                <th>Specialization</th>
            </tr>

            <?php if ($result->num_rows > 0): ?>
                <?php while ($row = $result->fetch_assoc()): ?>
                <tr>
<td data-label="ID"><?php echo $row['id']; ?></td>
<td data-label="Name"><?php echo $row['name']; ?></td>
<td data-label="Mobile"><?php echo $row['mobile']; ?></td>
<td data-label="City"><?php echo $row['city']; ?></td>
<td data-label="Specialization">
    <span class="badge"><?php echo $row['specialization']; ?></span>
</td>
                </tr>
                <?php endwhile; ?>
            <?php else: ?>
                <tr>
                    <td colspan="5">No doctors found</td>
                </tr>
            <?php endif; ?>
        </table>

    </div>
</div>

</body>
</html>