loreal-global-kickoff/global-to-local.php

<?php
/**
 * Global to Local CSV Transformation
 * Upload and transform global campaign CSV into regional CSVs
 */

// Load dependencies
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/AuthMiddleware.php';

// Initialize authentication
$auth = new AuthMiddleware();
$user = $auth->requireAuth();

$pageTitle = 'Global to Local - L\'Oréal Box';

// Include shared header
require_once __DIR__ . '/header.php';
?>

<div class="g2l-container">
    <!-- Upload Section -->
    <div class="upload-section" id="uploadSection">
        <h2>Upload Global Campaign CSV</h2>
        <p class="section-description">Upload a global campaign CSV file to transform it into regional market CSVs.</p>

        <form id="csvUploadForm" enctype="multipart/form-data">
            <div class="upload-dropzone" id="dropzone">
                <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
                    <path d="M30 10L30 40M30 10L20 20M30 10L40 20" stroke="#FFC407" stroke-width="3" stroke-linecap="round"/>
                    <path d="M10 35L10 45C10 47.7614 12.2386 50 15 50L45 50C47.7614 50 50 47.7614 50 45L50 35" stroke="#FFC407" stroke-width="3" stroke-linecap="round"/>
                </svg>
                <p class="dropzone-text">Drag & drop CSV file here or click to browse</p>
                <p class="dropzone-limit">Maximum file size: 5MB</p>
                <input type="file" id="csvFile" name="csvFile" accept=".csv" required hidden>
            </div>

            <div id="fileInfo" class="file-info" style="display:none;">
                <div class="file-icon">📄</div>
                <div class="file-details">
                    <div class="file-name" id="fileName"></div>
                    <div class="file-size" id="fileSize"></div>
                </div>
                <button type="button" class="remove-file-btn" id="removeFile">✕</button>
            </div>

            <button type="submit" class="submit-btn" id="processBtn" disabled>
                Process CSV
            </button>
        </form>
    </div>

    <!-- Progress Tracker -->
    <div class="progress-section" id="progressSection" style="display:none;">
        <h2>Processing Progress</h2>

        <div class="progress-tracker" id="progressTracker">
            <div class="progress-step" data-stage="upload">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">Upload CSV</div>
                    <div class="step-message">Waiting...</div>
                </div>
            </div>
            <div class="progress-step" data-stage="parse">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">Parse CSV</div>
                    <div class="step-message">Pending</div>
                </div>
            </div>
            <div class="progress-step" data-stage="campaign">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">Extract Campaign Number</div>
                    <div class="step-message">Pending</div>
                </div>
            </div>
            <div class="progress-step" data-stage="omg_api">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">OMG API Lookup</div>
                    <div class="step-message">Pending</div>
                </div>
            </div>
            <div class="progress-step" data-stage="business_unit">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">Map Business Unit</div>
                    <div class="step-message">Pending</div>
                </div>
            </div>
            <div class="progress-step" data-stage="transform">
                <div class="step-icon">⏸️</div>
                <div class="step-content">
                    <div class="step-title">Transform Data</div>
                    <div class="step-message">Pending</div>
                </div>
            </div>
        </div>

        <!-- Error/Warning Display -->
        <div id="alertsContainer"></div>
    </div>

    <!-- Preview Section -->
    <div class="preview-section" id="previewSection" style="display:none;">
        <h2>Preview Transformed CSV Files</h2>

        <div class="preview-summary" id="previewSummary"></div>

        <!-- File Selector -->
        <div class="file-selector-container" id="fileSelectorContainer" style="display:none;">
            <label for="fileSelector" style="font-weight: 600; margin-right: 10px;">Preview File:</label>
            <select id="fileSelector" class="file-selector">
                <!-- Options populated by JavaScript -->
            </select>
        </div>

        <div class="preview-table-container">
            <table class="preview-table" id="previewTable"></table>
        </div>

        <div class="preview-actions">
            <button type="button" class="action-btn download-btn" id="downloadPreviewBtn">
                Download Current File
            </button>
            <button type="button" class="action-btn download-btn" id="downloadAllBtn">
                Download All Files (ZIP)
            </button>
            <button type="button" class="action-btn cancel-btn" id="cancelBtn">
                Cancel
            </button>
            <button type="button" class="submit-btn" id="uploadToBoxBtn">
                Approve & Upload to OMG
            </button>
        </div>
    </div>
</div>

<script>
    // User data
    const currentUser = {
        name: '<?php echo addslashes($user['name']); ?>',
        email: '<?php echo addslashes($user['email']); ?>'
    };
</script>
<script src="js/global-to-local.js"></script>

</body>
</html>