<?php
// customer/my_requests.php
header('Location: my_requests.php');
exit();
session_start();
require_once '../config/database.php';

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

$database = new Database();
$db = $database->getConnection();

// Get all customer requests
$query = "SELECT sr.*, a.name as appliance_name, j.status_name, j.color_code,
          u.name as urgency_name
          FROM service_requests sr
          LEFT JOIN appliance_types a ON sr.appliance_type_id = a.id
          LEFT JOIN job_statuses j ON sr.job_status_id = j.id
          LEFT JOIN urgency_levels u ON sr.urgency_level_id = u.id
          WHERE sr.customer_id = :customer_id
          ORDER BY sr.requested_at DESC";
$stmt = $db->prepare($query);
$stmt->execute([':customer_id' => $_SESSION['customer_id']]);
$requests = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Requests - Home Service</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 70px;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .request-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-left: 4px solid #667eea;
        }
        
        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            color: white;
        }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        
        .nav-item {
            text-align: center;
            color: #95a5a6;
            text-decoration: none;
            font-size: 12px;
        }
        
        .nav-item.active {
            color: #667eea;
        }
        
        .nav-item i {
            font-size: 22px;
            display: block;
            margin-bottom: 4px;
        }
    </style>
<link rel="stylesheet" href="../assets/theme.css">
<link rel="stylesheet" href="../assets/portal-dark.css">
    <link rel="stylesheet" href="../assets/ushs-global-theme.css">
</head>
<body>
    <div class="header">
        <div class="d-flex align-items-center">
            <button class="btn btn-link text-white p-0 me-3" onclick="history.back()">
                <i class="fas fa-arrow-left fa-lg"></i>
            </button>
            <h4 class="mb-0">My Service Requests</h4>
        </div>
    </div>

    <div class="container mt-3">
        <?php if(empty($requests)): ?>
            <div class="text-center py-5">
                <i class="fas fa-clipboard-list fa-4x text-muted mb-3"></i>
                <h5>No requests found</h5>
                <p class="text-muted">You haven't made any service requests yet.</p>
                <a href="../request.php" class="btn btn-primary">Request Service</a>
            </div>
        <?php else: ?>
            <?php foreach($requests as $req): ?>
            <div class="request-card" onclick="window.location.href='my_requests.php?id=<?php echo $req['id']; ?>'">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="mb-1"><?php echo htmlspecialchars($req['appliance_name']); ?> Service</h6>
                        <p class="small text-muted mb-2">
                            <i class="fas fa-calendar-alt me-1"></i>
                            <?php echo date('M d, Y h:i A', strtotime($req['requested_at'])); ?>
                        </p>
                        <p class="small mb-0">
                            <i class="fas fa-hashtag me-1"></i>
                            Request #: <?php echo $req['request_number']; ?>
                        </p>
                    </div>
                    <span class="status-badge" style="background-color: <?php echo $req['color_code']; ?>">
                        <?php echo $req['status_name']; ?>
                    </span>
                </div>
                <?php if($req['status_name'] == 'Completed'): ?>
                <div class="mt-2">
                    <button class="btn btn-sm btn-outline-primary" onclick="event.stopPropagation(); rateService(<?php echo $req['id']; ?>)">
                        <i class="fas fa-star me-1"></i>Rate Service
                    </button>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>

    <nav class="bottom-nav">
        <a href="dashboard.php" class="nav-item">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <a href="../request.php" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>Request</span>
        </a>
        <a href="my_requests.php" class="nav-item active">
            <i class="fas fa-clipboard-list"></i>
            <span>My Requests</span>
        </a>
        <a href="profile.php" class="nav-item">
            <i class="fas fa-user"></i>
            <span>Profile</span>
        </a>
    </nav>
</body>
</html>