<?php
// admin-dashboard.php
ini_set('display_errors', 0);
error_reporting(E_ALL);
ini_set('log_errors', 1);
ini_set('error_log', 'php_errors.log');

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

// === SECURITY: Admin Check ===
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../login.php');
    exit;
}

// Fetch all companies with lead counts
$companies = [];
$sql = "SELECT c.id, c.company_name, c.company_email,
               COUNT(l.id) AS total_leads,
               SUM(l.converted) AS converted_leads
        FROM companies c
        LEFT JOIN leads l ON c.id = l.company_id
        GROUP BY c.id
        ORDER BY c.company_name";
$stmt = $conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
    $companies[] = $row;
}
$stmt->close();

// Calculate stats
$totalCompanies = count($companies);
$totalLeads = array_sum(array_column($companies, 'total_leads'));
$convertedLeads = array_sum(array_column($companies, 'converted_leads'));
$pendingLeads = $totalLeads - $convertedLeads;


// Handle branch selection via POST (updated for security)
if (isset($_POST['view-btn'])) {
    $company_id = intval($_POST['company_id']);

    // Verify branch exists
    $stmt = $conn->prepare("SELECT id FROM companies WHERE id = ?");
    $stmt->bind_param("i", $company_id);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        // Update user's branch_id in database for persistence
        $update_stmt = $conn->prepare("UPDATE users SET company_id = ? WHERE id = ?");
        $update_stmt->bind_param("ii", $company_id, $_SESSION['user_id']);
        if ($update_stmt->execute()) {
            $_SESSION['selected_branch_id'] = $company_id;
            header("Location: ../dashboard.php?company_id=$company_id");
            exit();
        } else {
            error_log('Update branch_id failed: ' . $update_stmt->error);
        }
        $update_stmt->close();
    }
    $stmt->close();
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - Lead Management System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #7c3aed;
            --primary-light: #8b5cf6;
            --primary-dark: #6d28d9;
            --secondary: #06b6d4;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #0f172a;
            --darker: #020617;
            --light: #f8fafc;
            --card-bg: rgba(255, 255, 255, 0.08);
            --card-bg-hover: rgba(255, 255, 255, 0.12);
            --border: rgba(255, 255, 255, 0.1);
            --text: #f1f5f9;
            --text-light: #cbd5e1;
            --text-lighter: #94a3b8;
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.4);
            --radius: 1rem;
            --radius-sm: 0.75rem;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
            color: var(--text);
            min-height: 100vh;
            line-height: 1.6;
        }

        /* Background Effects */
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.3;
            animation: float-orb 25s ease-in-out infinite;
        }

        .orb-1 {
            width: 500px;
            height: 500px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            top: -200px;
            left: -200px;
        }

        .orb-2 {
            width: 400px;
            height: 400px;
            background: linear-gradient(45deg, var(--secondary), var(--success));
            bottom: -150px;
            right: -150px;
            animation-delay: -8s;
        }

        @keyframes float-orb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(100px, 100px) scale(1.1); }
            50% { transform: translate(0, 200px) scale(0.9); }
            75% { transform: translate(-100px, 100px) scale(1.05); }
        }

        /* Main Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Header */
        .header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -1rem;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 2px;
        }

        .header h1 {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--text), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .header p {
            color: var(--text-light);
            font-size: 1.1rem;
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .stat-card {
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 2rem;
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.6s;
        }

        .stat-card:hover::before {
            left: 100%;
        }

        .stat-card:hover {
            transform: translateY(-8px);
            border-color: var(--primary-light);
            box-shadow: var(--shadow);
        }

        .stat-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--text), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-label {
            color: var(--text-light);
            font-size: 1rem;
            font-weight: 500;
        }

        /* Companies Section */
        .companies-section {
            margin-bottom: 3rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .section-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .section-title i {
            color: var(--primary-light);
        }

        .search-box {
            position: relative;
            max-width: 300px;
            flex: 1;
            min-width: 250px;
        }

        .search-input {
            width: 100%;
            padding: 0.875rem 1rem 0.875rem 3rem;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text);
            font-size: 0.95rem;
            transition: var(--transition);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
        }

        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-lighter);
        }

        .search-hint {
            font-size: 0.75rem;
            color: var(--text-lighter);
            margin-top: 0.25rem;
            padding-left: 3rem;
        }

        .refresh-btn {
            background: var(--card-bg);
            border: 1px solid var(--border);
            color: var(--text-light);
            padding: 0.75rem 1rem;
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .refresh-btn:hover {
            background: var(--card-bg-hover);
            border-color: var(--primary-light);
            color: var(--text);
        }

        /* Companies Grid */
        .companies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }

        .company-card {
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 2rem;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .company-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .company-card:hover::before {
            transform: scaleY(1);
        }

        .company-card:hover {
            transform: translateY(-5px);
            background: var(--card-bg-hover);
            border-color: var(--primary-light);
            box-shadow: var(--shadow);
        }

        .company-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .company-name {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.5rem;
            flex: 1;
        }

        .company-email {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .company-stats {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 1rem;
            align-items: center;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-light);
            display: block;
        }

        .stat-text {
            font-size: 0.8rem;
            color: var(--text-lighter);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .view-btn {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .view-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
        }

        /* Progress Bars */
        .conversion-rate {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
            color: var(--text-light);
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--success), var(--secondary));
            border-radius: 3px;
            width: 0%;
            transition: width 1.2s ease-out;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-lighter);
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .container { padding: 1.5rem; }
            .header h1 { font-size: 2.5rem; }
            .companies-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
        }

        @media (max-width: 768px) {
            .header h1 { font-size: 2rem; }
            .section-header { flex-direction: column; align-items: stretch; }
            .search-box { max-width: 100%; }
            .stats-grid { grid-template-columns: 1fr; }
            .company-stats { grid-template-columns: 1fr; gap: 0.75rem; }
            .view-btn { justify-content: center; }
        }

        @media (max-width: 480px) {
            .container { padding: 1rem; }
            .header h1 { font-size: 1.75rem; }
            .stat-card, .company-card { padding: 1.5rem; }
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in-up {
            opacity: 0;
            animation: fadeInUp 0.6s ease-out forwards;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }
    </style>
</head>
<body>

    <!-- Background Effects -->
    <div class="background">
        <div class="gradient-orb orb-1"></div>
        <div class="gradient-orb orb-2"></div>
    </div>

    <div class="container">
        <!-- Header -->
        <div class="header fade-in-up">
            <h1><i class="fas fa-chart-line"></i> Admin Dashboard</h1>
            <p>Comprehensive overview of your lead management system</p>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card fade-in-up" style="animation-delay: 0.1s">
                <div class="stat-icon"><i class="fas fa-building"></i></div>
                <div class="stat-value"><?= $totalCompanies ?></div>
                <div class="stat-label">Total Companies</div>
            </div>
            <div class="stat-card fade-in-up" style="animation-delay: 0.2s">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div class="stat-value"><?= $totalLeads ?></div>
                <div class="stat-label">Total Leads</div>
            </div>
            <div class="stat-card fade-in-up" style="animation-delay: 0.3s">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-value"><?= $convertedLeads ?></div>
                <div class="stat-label">Converted Leads</div>
            </div>
            <div class="stat-card fade-in-up" style="animation-delay: 0.4s">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div class="stat-value"><?= $pendingLeads ?></div>
                <div class="stat-label">Pending Leads</div>
            </div>
        </div>

        <!-- Companies Section -->
        <div class="companies-section">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-building"></i> Managed Companies</h2>
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="Search companies..." id="searchInput" aria-label="Search companies">
                    <small class="search-hint">Press / to focus</small>
                </div>
                <button class="refresh-btn" onclick="location.reload()">
                    <i class="fas fa-sync-alt"></i> Refresh
                </button>
            </div>

            <div class="companies-grid" id="companiesGrid">
                <?php if (empty($companies)): ?>
                    <div class="empty-state">
                        <i class="fas fa-building"></i>
                        <p>No companies found.</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($companies as $index => $company): 
                        $conversionRate = $company['total_leads'] > 0 ? 
                            round(($company['converted_leads'] / $company['total_leads']) * 100, 1) : 0;
                    ?>
                        <div class="company-card fade-in-up" 
                             style="animation-delay: <?= 0.1 + ($index * 0.05) ?>s"
                             data-company="<?= htmlspecialchars(json_encode($company), ENT_QUOTES, 'UTF-8') ?>">
                            <div class="company-header">
                                <div>
                                    <div class="company-name"><?= htmlspecialchars($company['company_name']) ?></div>
                                    <div class="company-email">
                                        <i class="fas fa-envelope"></i>
                                        <?= htmlspecialchars($company['company_email']) ?>
                                    </div>
                                </div>
                            </div>

                            <div class="company-stats">
                                <div class="stat-item">
                                    <span class="stat-number"><?= $company['total_leads'] ?></span>
                                    <span class="stat-text">Total Leads</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number"><?= $company['converted_leads'] ?></span>
                                    <span class="stat-text">Converted</span>
                                </div>
                                <!-- <a href="../dashboard.php?id=<?= $company['id'] ?>" class="view-btn">
                                    <i class="fas fa-arrow-right"></i> View
                                </a> -->


                                 <form method="post">
                        <input type="hidden" name="company_id" value="<?php echo $company['id']; ?>">
                            <button type="submit" name="view-btn" class="view-btn">
                                <i class="fas fa-external-link-alt"></i> View
                            </button>
                    </form>
                            </div>

                            <?php if ($company['total_leads'] > 0): ?>
                                <div class="conversion-rate">
                                    <div class="progress-label">
                                        <span>Conversion Rate</span>
                                        <span><?= $conversionRate ?>%</span>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress-fill" data-width="<?= $conversionRate ?>%"></div>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script>
        // Search functionality with animation reset
        const searchInput = document.getElementById('searchInput');
        const companyCards = document.querySelectorAll('.company-card');

        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            
            companyCards.forEach(card => {
                const companyData = JSON.parse(card.dataset.company);
                const matches = companyData.company_name.toLowerCase().includes(searchTerm) ||
                               companyData.company_email.toLowerCase().includes(searchTerm);
                
                if (matches) {
                    card.style.display = 'block';
                    card.style.animation = 'none';
                    card.offsetHeight;
                    card.style.animation = 'fadeInUp 0.6s ease-out';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // Progress bar animation on scroll
        const progressObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const fill = entry.target;
                    const width = fill.dataset.width;
                    fill.style.width = width;
                    progressObserver.unobserve(fill);
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.progress-fill').forEach(bar => {
            progressObserver.observe(bar);
        });

        // Keyboard shortcut: / to focus search
        document.addEventListener('keydown', function(e) {
            if (e.key === '/' && e.target.tagName !== 'INPUT') {
                e.preventDefault();
                searchInput.focus();
            }
        });

        // Click feedback on cards
        document.querySelectorAll('.company-card').forEach(card => {
            card.addEventListener('click', function(e) {
                if (!e.target.closest('.view-btn')) {
                    this.style.transform = 'scale(0.98)';
                    setTimeout(() => this.style.transform = '', 150);
                }
            });
        });
    </script>
</body>
</html>