<?php
session_start();
require_once __DIR__ . "/../config/db.php";

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

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

/* =========================
   FILTER + SEARCH
========================= */
$search = $_GET['search'] ?? '';
$category_filter = $_GET['category'] ?? '';
$department_filter = $_GET['department'] ?? '';

$conditions = [];

if (!empty($search)) {
    $search_safe = mysqli_real_escape_string($conn, $search);
    $conditions[] = "(equipment_name LIKE '%$search_safe%' OR serial_number LIKE '%$search_safe%')";
}

if (!empty($category_filter)) {
    $category_safe = mysqli_real_escape_string($conn, $category_filter);
    $conditions[] = "category='$category_safe'";
}

if (!empty($department_filter)) {
    $department_safe = mysqli_real_escape_string($conn, $department_filter);
    $conditions[] = "department='$department_safe'";
}

$where = !empty($conditions) ? "WHERE " . implode(" AND ", $conditions) : "";

/* =========================
   FETCH EQUIPMENT
========================= */
$equipments = [];
$equipQuery = "SELECT * FROM equipment $where ORDER BY equipment_name ASC";
$equipResult = mysqli_query($conn, $equipQuery);

while ($eq = mysqli_fetch_assoc($equipResult)) {
    $equipments[] = $eq;
}

/* =========================
   DROPDOWN DATA
========================= */
$departmentResult = mysqli_query($conn, "SELECT DISTINCT department FROM equipment WHERE department IS NOT NULL ORDER BY department ASC");
$categoryResult = mysqli_query($conn, "SELECT DISTINCT category FROM equipment WHERE category IS NOT NULL ORDER BY category ASC");
?>
<!DOCTYPE html>
<html>
<head>
    <title>Select Equipment - QRCareTrack</title>
    <link rel="stylesheet" href="../assets/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: #f3fdfc;
        }
        .main {
            margin-left: 220px;
            padding: 35px;
        }
        .page-header {
            margin-bottom: 25px;
        }
        .page-header h1 {
            color: #0f766e;
            margin-bottom: 8px;
        }
        .page-header p {
            color: #64748b;
        }
        .filter-box {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 30px;
            padding: 20px;
            background: #ffffff;
            border: 1px solid #d7f3ef;
            border-radius: 20px;
        }
        .form-control {
            width: 100%;
            padding: 15px;
            border-radius: 14px;
            border: 1px solid #d1d5db;
            font-size: 15px;
        }
        .form-control:focus {
            outline: none;
            border-color: #14b8a6;
            box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
        }
        .filter-btn {
            background: #0f766e;
            color: #fff;
            border: none;
            padding: 14px 20px;
            border-radius: 14px;
            font-weight: 700;
            cursor: pointer;
        }
        .reset-btn {
            background: #64748b;
            color: #fff;
            padding: 14px 20px;
            border-radius: 14px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }
        
        /* EQUIPMENT SEARCH SELECTION GRID */
        .equipment-hub-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .equipment-select-card {
            background: #ffffff;
            border: 1px solid #d7f3ef;
            border-radius: 22px;
            padding: 20px;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .equipment-select-card:hover {
            transform: translateY(-4px);
            border-color: #14b8a6;
            box-shadow: 0 12px 20px -5px rgba(15, 118, 110, 0.1);
        }
        .card-top-info {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 15px;
        }
        .hub-thumb {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 14px;
            border: 2px solid #ccfbf1;
        }
        .hub-meta h3 {
            margin: 0;
            color: #0f766e;
            font-size: 18px;
            font-weight: 700;
        }
        .hub-meta span {
            font-size: 13px;
            color: #64748b;
            display: block;
            margin-top: 2px;
        }
        .card-specs {
            background: #f8fffe;
            border: 1px solid #dff7f3;
            border-radius: 12px;
            padding: 10px 14px;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 15px;
        }
        .spec-row {
            display: flex;
            justify-content: space-between;
        }
        .spec-label {
            color: #64748b;
            font-weight: 600;
        }
        .spec-value {
            color: #0f172a;
            font-weight: 700;
        }
        .action-indicator {
            background: #f0fdfa;
            color: #0f766e;
            text-align: center;
            padding: 10px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 14px;
            transition: background 0.2s, color 0.2s;
        }
        .equipment-select-card:hover .action-indicator {
            background: #0f766e;
            color: #ffffff;
        }
        .no-data {
            background: #ffffff;
            border: 1px solid #d7f3ef;
            border-radius: 22px;
            padding: 40px;
            text-align: center;
            color: #64748b;
            grid-column: 1 / -1;
        }

        @media(max-width:900px){
            .main{
                margin-left:0;
                padding:20px;
            }
        }
    </style>
</head>
<body>

<?php include "../includes/sidebar.php"; ?>

<div class="main">

    <div class="page-header">
        <h1>Report Equipment Issue</h1>
        <p>Search and select an equipment below to file a maintenance report.</p>
    </div>

    <form method="GET" class="filter-box">
        <input 
            type="text" 
            name="search" 
            placeholder="Search equipment or serial..." 
            value="<?= htmlspecialchars($search) ?>" 
            class="form-control" 
            style="flex:1; min-width:220px;"
        >

        <select name="category" class="form-control" style="max-width:220px;">
            <option value="">All Categories</option>
            <?php while($cat = mysqli_fetch_assoc($categoryResult)): ?>
                <option value="<?= htmlspecialchars($cat['category']) ?>" <?=($category_filter == $cat['category']) ? 'selected' : ''?>>
                    <?= htmlspecialchars($cat['category']) ?>
                </option>
            <?php endwhile; ?>
        </select>

        <select name="department" class="form-control" style="max-width:220px;">
            <option value="">All Departments</option>
            <?php while($dept = mysqli_fetch_assoc($departmentResult)): ?>
                <option value="<?= htmlspecialchars($dept['department']) ?>" <?=($department_filter == $dept['department']) ? 'selected' : ''?>>
                    <?= htmlspecialchars($dept['department']) ?>
                </option>
            <?php endwhile; ?>
        </select>

        <button type="submit" class="filter-btn">
            <i class="fa-solid fa-filter"></i> Filter
        </button>

        <a href="report_issue.php" class="reset-btn">Reset</a>
    </form>

    <div class="equipment-hub-grid">
        <?php if(!empty($equipments)): ?>
            <?php foreach($equipments as $eq): 
                $imgSrc = !empty($eq['image']) ? "../assets/uploads/".$eq['image'] : "../assets/uploads/placeholder.png";
            ?>
                <a href="create_report.php?id=<?= $eq['id'] ?>" class="equipment-select-card">
                    <div>
                        <div class="card-top-info">
                            <img src="<?= $imgSrc ?>" class="hub-thumb" alt="Equipment Image">
                            <div class="hub-meta">
                                <h3><?= htmlspecialchars($eq['equipment_name']) ?></h3>
                                <span><?= htmlspecialchars($eq['category']) ?></span>
                            </div>
                        </div>

                        <div class="card-specs">
                            <div class="spec-row">
                                <span class="spec-label">Serial:</span>
                                <span class="spec-value"><?= htmlspecialchars($eq['serial_number']) ?></span>
                            </div>
                            <div class="spec-row">
                                <span class="spec-label">Dept:</span>
                                <span class="spec-value"><?= htmlspecialchars($eq['department'] ?? '-') ?></span>
                            </div>
                            <div class="spec-row">
                                <span class="spec-label">Status:</span>
                                <span class="spec-value"><?= htmlspecialchars($eq['status']) ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="action-indicator">
                        Select & Report Issue <i class="fa-solid fa-arrow-right" style="margin-left:4px;"></i>
                    </div>
                </a>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="no-data">
                <i class="fa-solid fa-magnifying-glass" style="font-size: 32px; color: #94a3b8; margin-bottom: 10px;"></i>
                <p>No equipment items matched your criteria. Try adjusting your search filters.</p>
            </div>
        <?php endif; ?>
    </div>

</div>

</body>
</html>