<div class="page-header" style="margin-bottom: 16px;">
    <div>
        <a href="<?= APP_URL ?>/products" class="btn btn-ghost btn-sm mb-2" style="padding-left:0; padding: 6px 12px; font-size: 0.85rem;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Products
        </a>
        <h1 style="font-size: 1.4rem; margin-bottom: 4px;"><?= e($product['name']) ?> - History</h1>
        <div class="page-subtitle" style="font-size: 0.85rem;">Stock movement history for this product.</div>
    </div>
    <button onclick="printHistory()" class="btn btn-outline btn-sm" style="padding: 6px 12px; font-size: 0.85rem;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px; margin-right: 4px;">
            <polyline points="6 9 6 15 18 15"></polyline>
            <path d="M6 4h12v16H6z"></path>
        </svg>
        Print History
    </button>
</div>

<div class="card mb-4" style="padding: 0;">
    <div class="summary-section" style="padding: 16px; background: #f9f9f9; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 0.85rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #fff; border-radius: 6px; border: 1px solid #e5e5e5;">
                <span style="color: #666;">Total In (Purchases):</span>
                <span style="font-weight: 700; color: #28a745;">+<?= number_format($movementSummary['total_in'], 2) ?></span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #fff; border-radius: 6px; border: 1px solid #e5e5e5;">
                <span style="color: #666;">Total Out (Sales):</span>
                <span style="font-weight: 700; color: #dc3545;">-<?= number_format($movementSummary['total_out'], 2) ?></span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #fff; border-radius: 6px; border: 1px solid #e5e5e5;">
                <span style="color: #666;">Current Balance:</span>
                <span style="font-weight: 700; color: var(--primary);"><?= number_format($movementSummary['balance'], 2) ?></span>
            </div>
        </div>
    </div>
</div>

<?php if (!empty($movementSummaryByLocation)): ?>
<div class="card mb-4" style="padding: 0;">
    <div style="padding: 12px 16px; background: #f9f9f9; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
        <h4 style="font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; color: #555;">Stock by Location</h4>
        <div style="display: grid; grid-template-columns: repeat(<?= min(count($movementSummaryByLocation), 4) ?>, 1fr); gap: 10px; font-size: 0.8rem;">
            <?php foreach ($movementSummaryByLocation as $loc): ?>
            <div style="padding: 10px; background: #fff; border-radius: 6px; border: 1px solid #e5e5e5;">
                <div style="font-weight: 600; color: #444; margin-bottom: 6px; font-size: 0.8rem;"><?= e($loc['location_name'] ?? 'Unknown') ?></div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 3px;">
                    <span style="color: #888;">In:</span>
                    <span style="color: #28a745; font-weight: 600;">+<?= number_format($loc['total_in'], 2) ?></span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 3px;">
                    <span style="color: #888;">Out:</span>
                    <span style="color: #dc3545; font-weight: 600;">-<?= number_format(abs($loc['total_out']), 2) ?></span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-top: 4px; border-top: 1px solid #eee;">
                    <span style="color: #666; font-weight: 600;">Balance:</span>
                    <span style="font-weight: 700; color: <?= $loc['balance'] > 0 ? 'var(--primary)' : '#dc3545' ?>;"><?= number_format($loc['balance'], 2) ?></span>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<style>
@media print {
    @page {
        size: A4;
        margin: 15mm;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page-header {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 15mm !important;
        display: block !important;
        visibility: visible !important;
    }

    .page-header > div:first-child {
        display: block !important;
        visibility: visible !important;
    }

    .page-header a,
    .page-header button {
        display: none !important;
    }

    .page-header h1 {
        font-size: 18pt;
        margin-bottom: 4px;
        color: black !important;
        display: block !important;
        visibility: visible !important;
    }

    .page-header .page-subtitle {
        display: block !important;
        visibility: visible !important;
    }

    .page-subtitle {
        font-size: 10pt;
        color: #666 !important;
    }

    .card {
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    .card > div:first-child {
        display: flex !important;
        gap: 15px !important;
        margin-bottom: 15mm !important;
        border-bottom: 2px solid #333;
        padding-bottom: 10mm;
    }

    .card > div:first-child > div {
        flex: 1;
        background: white !important;
        border: 1px solid #333 !important;
        padding: 8mm !important;
        border-radius: 0 !important;
    }

    .card > div:first-child > div > div:first-child {
        color: #333 !important;
        font-size: 10pt;
        margin-bottom: 4px;
        font-weight: bold;
    }

    .card > div:first-child > div > div:last-child {
        font-size: 16pt !important;
        color: #333 !important;
        font-weight: bold;
    }

    .card h3 {
        font-size: 14pt;
        margin: 15mm 0 8mm 0;
        border-bottom: 1px solid #333;
        padding-bottom: 4mm;
        color: black !important;
    }

    .card table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
        border: 1px solid #333;
    }

    .card thead tr {
        background: #f5f5f5 !important;
    }

    .card th {
        border: 1px solid #333;
        padding: 6px 8px;
        text-align: left;
        font-weight: bold;
        color: black !important;
    }

    .card td {
        border: 1px solid #333;
        padding: 6px 8px;
        color: black !important;
    }

    .card tbody tr:nth-child(even) {
        background: #f9f9f9 !important;
    }

    .card tbody tr td span {
        color: black !important;
    }

    .card .empty-state {
        display: none;
    }

    /* Hide sidebar and navigation elements */
    aside,
    .sidebar,
    .nav,
    .navbar,
    .main-sidebar,
    .wrapper > aside,
    .layout-sidebar,
    [class*="sidebar"],
    [class*="nav"],
    header.topbar,
    .topbar,
    .top-bar,
    .main-header,
    .app-header,
    [class*="topbar"] {
        display: none !important;
    }

    /* Ensure main content area is visible */
    .main-content,
    .page-content {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide any layout wrapper that contains sidebar */
    .wrapper,
    .layout,
    .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
}
</style>

<script>
function printHistory() {
    window.print();
}
</script>

<h3 style="font-size: 1rem; margin-bottom: 12px;">Movement History</h3>
    
<?php if (empty($movementHistory)): ?>
    <div style="padding: 32px; text-align: center; color: var(--text-muted);">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.5;">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        <h3 style="font-size: 1rem; margin-bottom: 4px;">No movement history</h3>
        <p style="font-size: 0.85rem;">This product has no recorded stock movements yet.</p>
    </div>
<?php else: ?>
    <div style="border: 1px solid var(--border); border-radius: 8px; overflow: hidden;">
        <table style="font-size: 0.85rem; width: 100%;">
            <thead>
                <tr style="background: var(--bg-raised);">
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: left;">Date</th>
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: left;">Type</th>
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: left;">Location</th>
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: left;">Reference</th>
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: left;">Sold/Processed By</th>
                    <th style="padding: 10px 12px; font-size: 0.75rem; text-align: right;">Quantity</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($movementHistory as $movement): ?>
                <tr style="border-bottom: 1px solid var(--border);">
                    <td style="padding: 10px 12px; color: var(--text-muted); font-size: 0.8rem;">
                        <?= date('M j, Y H:i', strtotime($movement['created_at'])) ?>
                    </td>
                    <td style="padding: 10px 12px;">
                        <?php
                        $displayType = e($movement['type']);
                        // Check if this is a stock taking movement (adjustment with stock taking reference)
                        if ($movement['type'] === 'adjustment' && !empty($movement['reference']) && strpos(strtolower($movement['reference']), 'stock taking') !== false) {
                            $displayType = 'Stock Taking';
                        }
                        ?>
                        <span style="text-transform: capitalize;"><?= $displayType ?></span>
                    </td>
                    <td style="padding: 10px 12px;">
                        <span class="badge bg-blue-100 text-blue-800" style="font-size: 0.7rem;"><?= e($movement['location_name'] ?? 'Unknown') ?></span>
                    </td>
                    <td style="padding: 10px 12px; color: var(--text-muted);">
                        <?= e($movement['reference'] ?: '—') ?>
                    </td>
                    <td style="padding: 10px 12px; color: var(--text-muted); font-size: 0.8rem;">
                        <?= e($movement['user_name'] ?: 'System') ?>
                    </td>
                    <td style="padding: 10px 12px; text-align: right; font-weight: 600;">
                        <?php if ($movement['direction'] === 'in'): ?>
                            <span style="color: #28a745;">+<?= $movement['quantity'] ?></span>
                        <?php else: ?>
                            <span style="color: #dc3545;">-<?= $movement['quantity'] ?></span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
<?php endif; ?>
</div>
