<?php

session_start();
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../classes/Database.php';
require_once __DIR__ . '/../../classes/Branch.php';


$database = new Database();
$conn = $database->getConnection();
$auth = new Auth($conn);

if (!$auth->isSuperAdmin($_SESSION['user_id'])) {
    header('Location: /unauthorized.php');
    exit;
}


$branch = new Branch($conn);
$branchesResult = $branch->getAllBranches();
$branches = $branchesResult->fetchAll(PDO::FETCH_ASSOC);

include '../../includes/header.php';
?>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
        }

        .branch-selection-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        .branch-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .branch-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform: translateY(-2px);
            text-decoration: none;
            color: inherit;
        }

        .branch-card:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
            text-decoration: none;
            color: inherit;
        }

        .branch-card .branch-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #007bff;
            margin-bottom: 0.5rem;
        }

        .branch-card .branch-details {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .branch-icon {
            font-size: 2rem;
            color: #007bff;
            margin-right: 1rem;
        }

        .page-header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            border-radius: 8px;
        }

        .real-time-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #28a745;
            border-radius: 50%;
            margin-right: 0.5rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .back-button {
            margin-bottom: 1rem;
        }

        .info-card {
            background-color: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 4px;
        }
    </style>

    <div class="container-fluid">
        <div class="back-button">
            <a href="../dashboard/admin.php" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Admin Dashboard
            </a>
        </div>

        <div class="page-header text-center">
            <h1><i class="fas fa-chart-line"></i> Branch Sales Tracking</h1>
            <p class="mb-0">Select a branch to view real-time sales data</p>
        </div>

        <div class="branch-selection-container">
            <div class="info-card">
                <div class="d-flex align-items-center">
                    <i class="fas fa-info-circle text-primary me-2"></i>
                    <div>
                        <strong>Real-time Sales Monitoring</strong><br>
                        <small>View live sales data from any branch, including unsubmitted weekly reports. Data updates automatically.</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <?php if (empty($branches)): ?>
                    <div class="col-12">
                        <div class="alert alert-warning text-center">
                            <i class="fas fa-exclamation-triangle"></i>
                            No branches found in the system.
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($branches as $branchData): ?>
                        <div class="col-md-6 col-lg-4">
                            <a href="admin_weekly_view.php?branch_id=<?php echo $branchData['branch_id']; ?>"
                               class="branch-card d-block">
                                <div class="d-flex align-items-center">
                                    <div class="branch-icon">
                                        <i class="fas fa-store"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="branch-name">
                                            <?php echo htmlspecialchars($branchData['branch_name']); ?>
                                        </div>

                                    </div>
                                    <div class="ms-2">
                                        <i class="fas fa-chevron-right text-muted"></i>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <div class="mt-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-question-circle"></i> How It Works</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                <strong>Real-time Access:</strong> View current week's sales data as it's recorded
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                <strong>No Waiting:</strong> See sales data even before branch managers submit weekly reports
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                <strong>Read-only View:</strong> Monitor without interfering with branch operations
                            </li>
                            <li>
                                <i class="fas fa-check text-success me-2"></i>
                                <strong>Auto-refresh:</strong> Data updates automatically every 5 minutes
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.target.classList.contains('branch-card')) {
                e.target.click();
            }
        });


        document.querySelectorAll('.branch-card').forEach(card => {
            card.addEventListener('click', function() {
                const loadingHtml = '<i class="fas fa-spinner fa-spin me-2"></i>Loading sales data...';
                const originalHtml = this.innerHTML;


                this.innerHTML = '<div class="text-center p-3">' + loadingHtml + '</div>';
                this.style.pointerEvents = 'none';


                setTimeout(() => {
                    this.innerHTML = originalHtml;
                    this.style.pointerEvents = 'auto';
                }, 5000);
            });
        });
    </script>
<?php include __DIR__ . '/../../includes/footer.php'; ?>