<?php require_once __DIR__ . '/../../layouts/header.php'; ?>
<?php 
$currentStep = isset($_SESSION['bulk_report']) || isset($report) ? 3 : 1;
?>
<div class="stepper" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; background: rgba(15, 23, 42, 0.4); padding: 1rem 2rem; border-radius: 12px; border: 1px solid var(--glass-border);">
    <div class="step" style="display: flex; align-items: center; gap: 0.75rem; color: <?php echo $currentStep === 1 ? 'var(--primary-color)' : ($currentStep > 1 ? '#10b981' : 'var(--text-muted)'); ?>; font-weight: <?php echo $currentStep === 1 ? '600' : '400'; ?>;">
        <span style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: <?php echo $currentStep === 1 ? 'var(--primary-color)' : ($currentStep > 1 ? '#10b981' : 'transparent'); ?>; color: <?php echo $currentStep >= 1 ? 'white' : 'var(--text-muted)'; ?>; border: 2px solid <?php echo $currentStep >= 1 ? ($currentStep == 1 ? 'var(--primary-color)' : '#10b981') : 'var(--glass-border)'; ?>; font-size: 0.9rem;">1</span>
        <span>Upload CSV File</span>
    </div>
    <div style="flex: 1; height: 2px; background: var(--glass-border); margin: 0 1.5rem;"></div>
    <div class="step" style="display: flex; align-items: center; gap: 0.75rem; color: <?php echo $currentStep === 2 ? 'var(--primary-color)' : ($currentStep > 2 ? '#10b981' : 'var(--text-muted)'); ?>; font-weight: <?php echo $currentStep === 2 ? '600' : '400'; ?>;">
        <span style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: <?php echo $currentStep === 2 ? 'var(--primary-color)' : ($currentStep > 2 ? '#10b981' : 'transparent'); ?>; color: <?php echo $currentStep >= 2 ? 'white' : 'var(--text-muted)'; ?>; border: 2px solid <?php echo $currentStep >= 2 ? ($currentStep == 2 ? 'var(--primary-color)' : '#10b981') : 'var(--glass-border)'; ?>; font-size: 0.9rem;">2</span>
        <span>Preview & Validation</span>
    </div>
    <div style="flex: 1; height: 2px; background: var(--glass-border); margin: 0 1.5rem;"></div>
    <div class="step" style="display: flex; align-items: center; gap: 0.75rem; color: <?php echo $currentStep === 3 ? 'var(--primary-color)' : 'var(--text-muted)'; ?>; font-weight: <?php echo $currentStep === 3 ? '600' : '400'; ?>;">
        <span style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: <?php echo $currentStep === 3 ? 'var(--primary-color)' : 'transparent'; ?>; color: <?php echo $currentStep >= 3 ? 'white' : 'var(--text-muted)'; ?>; border: 2px solid <?php echo $currentStep >= 3 ? 'var(--primary-color)' : 'var(--glass-border)'; ?>; font-size: 0.9rem;">3</span>
        <span>Import Results</span>
    </div>
</div>

<div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>Bulk Upload Inventory</h2>
    <div class="header-actions">
        <a href="/inventory" class="btn-primary" style="background: transparent; border: 1px solid var(--glass-border); color: var(--text-light); text-decoration: none; width: auto; margin: 0;">Back to Inventory</a>
    </div>
</div>

<div>
    <?php if (isset($_SESSION['bulk_report'])): ?>
        <?php $report = $_SESSION['bulk_report']; unset($_SESSION['bulk_report']); ?>
        <div class="card" style="margin-bottom: 2rem; border-color: <?php echo $report['errors'] > 0 ? '#ef4444' : '#10b981'; ?>;">
            <h3 style="margin-bottom: 1rem;">Upload Summary</h3>
            <p style="margin-bottom: 0.5rem;"><strong>Total Rows:</strong> <?php echo $report['total']; ?></p>
            <p style="color: #10b981; margin-bottom: 0.5rem;"><strong>Success Rows:</strong> <?php echo $report['success']; ?></p>
            <p style="color: <?php echo $report['errors'] > 0 ? '#ef4444' : 'var(--text-muted)'; ?>; margin-bottom: 0.5rem;"><strong>Failed Rows:</strong> <?php echo $report['errors']; ?></p>
            
            <?php if ($report['errors'] > 0): ?>
                <div style="margin-top: 1.5rem;">
                    <h4 style="color: #ef4444; margin-bottom: 0.75rem;">Failed Records Details:</h4>
                    <div style="max-height: 200px; overflow-y: auto; background: rgba(15,23,42,0.6); padding: 1rem; border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);" class="responsive-table-container">
                        <table style="width: 100%; border-collapse: collapse; text-align: left;">
                            <thead>
                                <tr style="border-bottom: 1px solid rgba(239,68,68,0.2); background: rgba(0,0,0,0.1);">
                                    <th style="padding: 0.5rem; color: #ef4444; font-weight: 600; width: 80px;">Row ID</th>
                                    <th style="padding: 0.5rem; color: #ef4444; font-weight: 600;">Error Message</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($report['error_details'] as $err): ?>
                                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                                        <td style="padding: 0.5rem; font-weight: bold; color: #ef4444;"><?php echo $err['row']; ?></td>
                                        <td style="padding: 0.5rem; color: var(--text-light);"><?php echo htmlspecialchars($err['message']); ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <?php if (!isset($report)): ?>
    <div class="card" style="padding: 2rem;">
        <h3 style="margin-bottom: 1rem;">1. Download Template</h3>
        <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Please use our official CSV template. Do not change the header row. You can open and edit this CSV directly in Excel.</p>
        
        <div style="background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem;">
            <h4 style="margin-top: 0; margin-bottom: 0.75rem; color: var(--primary-color);">CSV Template Requirements</h4>
            <p style="color: var(--text-light); font-size: 0.95rem; margin-bottom: 1rem;">To ensure successful import, please make sure the following <strong>5 required fields</strong> are filled in your CSV:</p>
            <ul style="color: var(--text-muted); font-size: 0.9rem; margin-left: 1.5rem; margin-bottom: 1.5rem; line-height: 1.6;">
                <li><strong style="color: var(--text-light);">Medicine Name*</strong>: Name of the medicine/drug.</li>
                <li><strong style="color: var(--text-light);">Unit of Measure*</strong>: Must match one of the registered Units of Measure below (case-insensitive).</li>
                <li><strong style="color: var(--text-light);">Expiry Alert Days*</strong>: Days before expiry to notify. Must be at least 1.</li>
                <li><strong style="color: var(--text-light);">Initial Quantity*</strong>: Initial stock count. Must be at least 1.</li>
                <li><strong style="color: var(--text-light);">Expiry Date*</strong>: Batch expiration date.</li>
            </ul>
            
            <h5 style="margin-top: 0; margin-bottom: 0.5rem; color: var(--text-light); font-size: 0.95rem;">Registered Units of Measure (UOMs):</h5>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; max-height: 120px; overflow-y: auto; padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px solid var(--glass-border);">
                <?php if (!empty($uoms)): ?>
                    <?php foreach($uoms as $uom): ?>
                        <span style="background: rgba(129, 140, 248, 0.15); border: 1px solid rgba(129, 140, 248, 0.3); color: #818cf8; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500;"><?php echo htmlspecialchars($uom['name']); ?></span>
                    <?php endforeach; ?>
                <?php else: ?>
                    <span style="color: var(--text-muted); font-size: 0.85rem;">No UOMs registered.</span>
                <?php endif; ?>
            </div>
        </div>

        <a href="/inventory/template" class="btn-primary" style="display: inline-block; text-decoration: none; margin-bottom: 2.5rem; background: #10b981; border-color: #059669; width: auto; max-width: 100%; text-align: center; padding: 0.75rem 2rem;">Download CSV Template</a>

        <h3 style="margin-bottom: 1rem; border-top: 1px solid var(--glass-border); padding-top: 2rem;">2. Upload Data</h3>
        <form action="/inventory/bulkPreview" method="POST" enctype="multipart/form-data">
            <?php if ($_SESSION['role'] === 'admin'): ?>
            <div class="input-group" style="margin-bottom: 1.5rem;">
                <label for="branch_id">Target Branch *</label>
                <select id="branch_id" name="branch_id" required style="width: 100%; padding: 0.75rem; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--text-light); outline: none;">
                    <option value="" style="background: var(--bg-dark);">-- Select Branch --</option>
                    <?php foreach($branches as $branch): ?>
                        <option value="<?php echo $branch['id']; ?>" style="background: var(--bg-dark);"><?php echo htmlspecialchars($branch['name']); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <?php endif; ?>
            
            <div class="input-group" style="margin-bottom: 1.5rem;">
                <label for="csv_file">Select CSV File</label>
                <input type="file" id="csv_file" name="csv_file" accept=".csv" required style="width: 100%; padding: 0.75rem; background: rgba(15, 23, 42, 0.6); border: 1px dashed var(--primary-color); border-radius: 8px; color: var(--text-light); cursor: pointer;">
            </div>

            <button type="submit" class="btn-primary" style="width: auto; max-width: 100%; padding: 0.75rem 2rem;">Process & Upload File</button>
        </form>
    </div>
    <?php endif; ?>
</div>

<?php require_once __DIR__ . '/../../layouts/footer.php'; ?>
