<?php
// index.php
require_once 'config/database.php';

// Get stats for cards
$database = new Database();
$db = $database->getConnection();

// Get counts
$total_query = "SELECT COUNT(*) as total FROM service_requests";
$completed_query = "SELECT COUNT(*) as completed FROM service_requests WHERE job_status_id = 4";
$pending_query = "SELECT COUNT(*) as pending FROM service_requests WHERE job_status_id = 1";

$total = $db->query($total_query)->fetch(PDO::FETCH_ASSOC)['total'];
$completed = $db->query($completed_query)->fetch(PDO::FETCH_ASSOC)['completed'];
$pending = $db->query($pending_query)->fetch(PDO::FETCH_ASSOC)['pending'];

// Get recent requests
$recent_query = "SELECT sr.*, a.name as appliance_name, j.status_name, j.color_code 
                 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
                 ORDER BY sr.requested_at DESC LIMIT 5";
$recent_requests = $db->query($recent_query)->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, maximum-scale=1.0, user-scalable=no">
    <title>Home Service App</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #3498db;
            --light-blue: #e3f2fd;
            --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            margin-bottom: 70px; /* Space for bottom navigation */
        }
        
        /* Header styles */
        .app-header {
            background-color: white;
            padding: 12px 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .header-title {
            font-weight: 600;
            font-size: 18px;
            color: #333;
        }
        
        .back-btn, .notification-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #333;
            padding: 0;
            cursor: pointer;
        }
        
        .notification-badge {
            position: relative;
        }
        
        .badge-count {
            position: absolute;
            top: 3px;
            right: 3px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 10px;
        }
        
        /* Cover Banner */
        .cover-banner {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px 20px;
            border-radius: 0 0 25px 25px;
            margin-bottom: 20px;
        }
        
        .wrench-icon {
            font-size: 40px;
            margin-bottom: 10px;
        }
        
        .home-service-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .professional-text {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 15px;
        }
        
        .welcome-text {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .question-text {
            font-size: 16px;
            opacity: 0.9;
            margin-bottom: 20px;
        }
        
        .request-btn {
            width: 100%;
            padding: 15px;
            background-color: white;
            color: #667eea;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        
        .request-btn:hover {
            transform: translateY(-2px);
            background-color: #f8f9fa;
        }
        
        /* Stats Cards */
        .stats-container {
            padding: 0 15px;
            margin-bottom: 25px;
        }
        
        .stat-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: var(--card-shadow);
            text-align: center;
            height: 100%;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .stat-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 5px;
        }
        
        /* Section Titles */
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #34495e;
            margin: 20px 15px 15px;
        }
        
        /* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 0 15px;
            margin-bottom: 20px;
        }
        
        .service-item {
            background: white;
            border-radius: 12px;
            padding: 15px 5px;
            text-align: center;
            box-shadow: var(--card-shadow);
            transition: all 0.3s;
        }
        
        .service-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .service-icon {
            font-size: 24px;
            color: var(--primary-color);
            margin-bottom: 8px;
        }
        
        .service-name {
            font-size: 12px;
            color: #2c3e50;
            font-weight: 500;
        }
        
        /* Recent Requests */
        .recent-requests {
            padding: 0 15px;
        }
        
        .request-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .request-icon {
            width: 40px;
            height: 40px;
            background: var(--light-blue);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 20px;
        }
        
        .request-details {
            flex: 1;
        }
        
        .request-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .request-meta {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #7f8c8d;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            color: white;
        }
        
        /* Bottom Navigation */
        .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);
            z-index: 1000;
        }
        
        .nav-item {
            text-align: center;
            color: #95a5a6;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.3s;
        }
        
        .nav-item.active {
            color: var(--primary-color);
        }
        
        .nav-item i {
            font-size: 22px;
            display: block;
            margin-bottom: 4px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 360px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </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>
    <!-- Header -->
    <header class="app-header">
        <div class="header-content">
            <button class="back-btn" onclick="history.back()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <span class="header-title">Home Service</span>
            <button class="notification-btn">
                <i class="fas fa-bell"></i>
                <span class="badge-count">3</span>
            </button>
        </div>
    </header>

    <!-- Cover Banner -->
    <div class="cover-banner">
        <div class="text-center">
            <!-- <i class="fas fa-wrench wrench-icon"></i> -->
            <img src="assets/icons/ushs.avif" alt="Wrench Icon" class="wrench-icon" style="height: 100px; width: 100px;">
            <h1 class="home-service-title">US in Home Services</h1>
            <p class="professional-text"><i>"Committed to providing quick and reliable service"</i></p>
            <!-- <h2 class="welcome-text">Welcome back!</h2> -->
            <h2 class="welcome-text">What appliance can we fix for you today?</h2>
            <!-- <p class="question-text">What appliance can we fix for you today?</p> -->
            <button class="request-btn" onclick="window.location.href='request.php'">
                <i class="fas fa-plus-circle me-2"></i>Request Repair Service
            </button>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="stats-container">
        <div class="row g-2">
            <div class="col-4">
                <div class="stat-card">
                    <div class="stat-number"><?php echo $total; ?></div>
                    <div class="stat-label">Total Request</div>
                </div>
            </div>
            <div class="col-4">
                <div class="stat-card">
                    <div class="stat-number" style="color: #27ae60;"><?php echo $completed; ?></div>
                    <div class="stat-label">Completed</div>
                </div>
            </div>
            <div class="col-4">
                <div class="stat-card">
                    <div class="stat-number" style="color: #f39c12;"><?php echo $pending; ?></div>
                    <div class="stat-label">Pending</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Our Services -->
    <h3 class="section-title">Our Services</h3>
    <div class="services-grid">
        <?php
        $appliance_query = "SELECT * FROM appliance_types ORDER BY sort_order";
        $appliances = $db->query($appliance_query)->fetchAll(PDO::FETCH_ASSOC);
        $icons = ['fa-snowflake', 'fa-tshirt', 'fa-wind', 'fa-utensils', 'fa-fire', 'fa-fire', 'fa-temperature-low', 'fa-wind', 'fa-tools'];
        
        foreach($appliances as $index => $appliance):
        ?>
        <div class="service-item">
            <i class="fas <?php echo $icons[$index % count($icons)]; ?> service-icon"></i>
            <div class="service-name"><?php echo htmlspecialchars($appliance['name']); ?></div>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- Recent Requests -->
    <h3 class="section-title">Recent Requests</h3>
    <div class="recent-requests">
        <?php foreach($recent_requests as $request): ?>
        <div class="request-card">
            <div class="request-icon">
                <i class="fas fa-tools"></i>
            </div>
            <div class="request-details">
                <div class="request-title"><?php echo htmlspecialchars($request['appliance_name']); ?> Service</div>
                <div class="request-meta">
                    <span><i class="fas fa-calendar-alt me-1"></i><?php echo date('M d', strtotime($request['requested_at'])); ?></span>
                    <span><i class="fas fa-user me-1"></i><?php echo htmlspecialchars($request['full_name']); ?></span>
                </div>
            </div>
            <span class="status-badge" style="background-color: <?php echo $request['color_code']; ?>">
                <?php echo $request['status_name']; ?>
            </span>
        </div>
        <?php endforeach; ?>
        
        <?php if(empty($recent_requests)): ?>
        <div class="text-center text-muted py-4">
            <i class="fas fa-inbox fa-3x mb-3"></i>
            <p>No recent requests</p>
        </div>
        <?php endif; ?>
    </div>

    <!-- Bottom Navigation -->
    <nav class="bottom-nav">
        <a href="index.php" class="nav-item active">
            <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="chat.php" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>Chat</span>
        </a>
        <a href="profile.php" class="nav-item">
            <i class="fas fa-user"></i>
            <span>Profile</span>
        </a>
    </nav>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // Add active class to current navigation item
        $(document).ready(function() {
            var currentUrl = window.location.pathname.split('/').pop();
            $('.bottom-nav a').each(function() {
                if($(this).attr('href') === currentUrl) {
                    $(this).addClass('active');
                }
            });
        });
    </script>
</body>
</html>