<?php
/**
 * Test CSS Loading
 * This file helps verify that CSS paths are generated correctly
 * Access this file directly to see the detected paths
 * 
 * After verifying, you can delete this file for security
 */

// Define access constant (simulating init.php)
define('HRM_ACCESS', true);

// Load configuration
require_once __DIR__ . '/includes/init.php';

header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Path Test - HRM System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        .info-row {
            display: flex;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .info-label {
            font-weight: bold;
            width: 250px;
            color: #666;
        }
        .info-value {
            flex: 1;
            font-family: 'Courier New', monospace;
            color: #333;
            word-break: break-all;
        }
        .success {
            color: #28a745;
            font-weight: bold;
        }
        .error {
            color: #dc3545;
            font-weight: bold;
        }
        .test-css {
            background: #667eea;
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        .css-link {
            display: block;
            margin: 10px 0;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
            color: white;
            text-decoration: none;
        }
        .css-link:hover {
            background: rgba(255,255,255,0.3);
        }
    </style>
</head>
<body>
    <h1>CSS Path Generation Test</h1>
    
    <div class="test-box">
        <h2>BASE_URL Detection</h2>
        <div class="info-row">
            <div class="info-label">BASE_URL:</div>
            <div class="info-value <?php echo empty(BASE_URL) ? 'success' : ''; ?>">
                "<?php echo htmlspecialchars(BASE_URL); ?>" 
                <?php echo empty(BASE_URL) ? '(Root - OK)' : '(Subdirectory: ' . BASE_URL . ')'; ?>
            </div>
        </div>
    </div>
    
    <div class="test-box">
        <h2>Generated Asset URLs</h2>
        <div class="info-row">
            <div class="info-label">CSS Style URL:</div>
            <div class="info-value">
                <code><?php echo assetUrl('assets/css/style.css'); ?></code>
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">CSS Table URL:</div>
            <div class="info-value">
                <code><?php echo assetUrl('assets/css/table.css'); ?></code>
            </div>
        </div>
        <div class="info-row">
            <div class="info-label">JS Main URL:</div>
            <div class="info-value">
                <code><?php echo assetUrl('assets/js/main.js'); ?></code>
            </div>
        </div>
    </div>
    
    <div class="test-box">
        <h2>File Existence Check</h2>
        <?php
        $assetsToCheck = [
            'assets/css/style.css',
            'assets/css/table.css',
            'assets/js/main.js'
        ];
        
        foreach ($assetsToCheck as $asset) {
            $filePath = BASE_PATH . '/' . $asset;
            $exists = file_exists($filePath);
            $url = assetUrl($asset);
            $status = $exists ? '<span class="success">✓ EXISTS</span>' : '<span class="error">✗ NOT FOUND</span>';
            echo "<div class='info-row'>";
            echo "<div class='info-label'>{$asset}:</div>";
            echo "<div class='info-value'>{$status}<br>";
            echo "<small>Path: " . htmlspecialchars($filePath) . "</small><br>";
            echo "<small>URL: <code>{$url}</code></small></div>";
            echo "</div>";
        }
        ?>
    </div>
    
    <div class="test-box">
        <h2>Live CSS Test</h2>
        <p>If CSS loads correctly, you should see styled content below:</p>
        <div class="test-css">
            <h3>CSS Load Test</h3>
            <p>If you see this box with purple background and white text, CSS is loading correctly!</p>
            <a href="<?php echo assetUrl('assets/css/style.css'); ?>" class="css-link" target="_blank">
                Click to open: <?php echo assetUrl('assets/css/style.css'); ?>
            </a>
            <a href="<?php echo assetUrl('assets/css/table.css'); ?>" class="css-link" target="_blank">
                Click to open: <?php echo assetUrl('assets/css/table.css'); ?>
            </a>
        </div>
    </div>
    
    <div class="test-box">
        <h2>Direct URL Test</h2>
        <p>Try accessing these URLs directly in your browser:</p>
        <ul>
            <li><a href="<?php echo assetUrl('assets/css/style.css'); ?>" target="_blank"><?php echo assetUrl('assets/css/style.css'); ?></a></li>
            <li><a href="<?php echo assetUrl('assets/css/table.css'); ?>" target="_blank"><?php echo assetUrl('assets/css/table.css'); ?></a></li>
        </ul>
        <p><strong>Expected:</strong> If URLs are correct, clicking should show the CSS file content. If you get 404, the path is wrong.</p>
    </div>
    
    <div class="test-box">
        <p class="error">
            <strong>Security Note:</strong> Delete this file (test_css.php) after verifying CSS is working.
        </p>
    </div>
</body>
</html>
