<div class="page-header">
    <div>
        <h1>Locations & Inventory</h1>
        <div class="page-subtitle">Manage warehouses, physical stores, and view stock valuation.</div>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-primary" onclick="document.getElementById('addLocationModal').classList.add('show')">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            Add Location
        </button>
        <div class="dropdown" style="position:relative;">
            <button class="btn btn-outline" onclick="this.nextElementSibling.classList.toggle('show')">
                Stock Actions
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px; margin-left:4px;"><polyline points="6 9 12 15 18 9"></polyline></svg>
            </button>
            <div class="dropdown-menu" style="display:none; position:absolute; top:100%; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; width:160px; z-index:10; box-shadow:var(--shadow-md); margin-top:4px;">
                <a href="<?= APP_URL ?>/inventory/transfer" style="display:block; padding:8px; color:var(--text-primary); text-decoration:none; border-radius:4px;" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='transparent'">Transfer Stock</a>
            </div>
        </div>
    </div>
</div>

<script>
    // simple inline click outside for dropdown
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown')) {
            document.querySelectorAll('.dropdown-menu').forEach(el => el.classList.remove('show'));
            document.querySelectorAll('.dropdown-menu').forEach(el => el.style.display = 'none');
        } else {
             const m = e.target.closest('.dropdown').querySelector('.dropdown-menu');
             if(m) m.style.display = m.classList.contains('show') ? 'block' : 'none';
        }
    });
</script>

<div class="grid-3 mb-6">
    <?php foreach ($locations as $loc): 
        $val = $valuation[$loc['id']] ?? ['items_count'=>0, 'total_value'=>0];
    ?>
    <div class="card p-0" style="overflow:hidden; display:flex; flex-direction:column;">
        <div style="background:var(--bg-raised); padding:20px 24px; border-bottom:1px solid var(--border);">
            <div class="flex justify-between items-start mb-2">
                <h3 style="font-size:1.1rem; font-weight:700;"><?= e($loc['name']) ?></h3>
                <?php if ($loc['is_default'] ?? false): ?>
                    <span class="badge badge-primary">Default</span>
                <?php endif; ?>
            </div>
            <div style="font-size:0.8rem; color:var(--text-muted); display:flex; align-items:center; gap:8px;">
                <span class="badge badge-muted" style="text-transform:uppercase; font-size:0.65rem;"><?= e($loc['type']) ?></span>
                Code: <?= e($loc['code']) ?>
            </div>
        </div>
        
        <div style="padding:24px; flex:1;">
            <div class="grid-2 gap-4">
                <div>
                    <div style="font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; font-weight:600; margin-bottom:4px;">Unique Items</div>
                    <div style="font-size:1.4rem; font-weight:800;"><?= number_format($val['items_count']) ?></div>
                </div>
                <div>
                    <div style="font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; font-weight:600; margin-bottom:4px;">Stock Valuation</div>
                    <div style="font-size:1.4rem; font-weight:800; color:var(--primary-light);"><?= money($val['total_value']) ?></div>
                </div>
            </div>
            
            <?php if ($loc['address']): ?>
                <div style="margin-top:20px; font-size:0.85rem; color:var(--text-muted);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px; display:inline; margin-bottom:-2px;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                    <?= e($loc['address']) ?>
                </div>
            <?php endif; ?>
        </div>
        
        <div style="padding:12px 24px; border-top:1px solid var(--border); display:flex; gap:10px;">
            <button class="btn btn-outline btn-sm flex-1">Edit</button>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- Add Location Modal -->
<div class="modal-overlay" id="addLocationModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add New Location</h3>
            <button class="modal-close" onclick="document.getElementById('addLocationModal').classList.remove('show')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
        </div>
        <form action="<?= APP_URL ?>/inventory/locations" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Location Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required placeholder="e.g. Downtown Store">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Code <span class="required">*</span></label>
                        <input type="text" name="code" class="form-control" required placeholder="e.g. WH-1">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-control">
                            <option value="store">Retail Store</option>
                            <option value="warehouse">Warehouse</option>
                            <option value="office">Office / Storage</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control" rows="2" placeholder="Full physical address..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('addLocationModal').classList.remove('show')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Location</button>
            </div>
        </form>
    </div>
</div>
