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

<div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>Manage Branches</h2>
    <div class="header-actions" style="display: flex; gap: 1rem; align-items: center;">
        <a href="/branches/create" class="btn-primary" style="width: auto; text-decoration: none;">+ Add Branch</a>
    </div>
</div>

<div class="card" style="padding: 0;">
    <div class="responsive-table-container" style="border: none; margin-bottom: 0; border-radius: 0;">
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <thead>
                <tr style="border-bottom: 1px solid var(--glass-border); background: rgba(15,23,42,0.4);">
                    <th style="padding: 1rem; color: var(--text-muted);">Branch Name</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Address</th>
                    <th style="padding: 1rem; color: var(--text-muted);">Phone</th>
                    <th style="padding: 1rem; color: var(--text-muted); text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($branches as $branch): ?>
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                    <td style="padding: 1rem;"><strong><?php echo htmlspecialchars($branch['name']); ?></strong></td>
                    <td style="padding: 1rem;"><?php echo htmlspecialchars($branch['address'] ?? 'N/A'); ?></td>
                    <td style="padding: 1rem;"><?php echo htmlspecialchars($branch['phone'] ?? 'N/A'); ?></td>
                    <td style="padding: 1rem; text-align: right; display: flex; justify-content: flex-end; gap: 0.5rem; align-items: center; border-bottom: none;">
                        <a href="/branches/edit/<?php echo $branch['id']; ?>" title="Edit Branch" style="background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.2); color: var(--primary-color); padding: 0.4rem; border-radius: 6px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease;">
                            <i class="ph ph-pencil-simple" style="font-size: 1.25rem;"></i>
                        </a>
                        <?php if ($branch['name'] !== 'Main Branch'): ?>
                            <button type="button" onclick="openDeleteModal(<?php echo $branch['id']; ?>)" title="Delete Branch" style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; padding: 0.4rem; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center;">
                                <i class="ph ph-trash" style="font-size: 1.25rem;"></i>
                            </button>
                        <?php else: ?>
                            <span style="color: var(--text-muted); font-size: 0.8rem; padding: 0.4rem;">(Main)</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if(empty($branches)): ?>
                <tr>
                    <td colspan="4" style="padding: 2rem; text-align: center; color: var(--text-muted);">No branches found.</td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<?php if(isset($totalPages) && $totalPages > 1): ?>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-top: 1px solid var(--glass-border); background: var(--glass-bg); border-radius: 0 0 16px 16px;">
    <span style="color: var(--text-muted);">Showing Page <?php echo $page; ?> of <?php echo $totalPages; ?></span>
    <div style="display: flex; gap: 0.5rem;">
        <?php if($page > 1): ?>
            <a href="?page=<?php echo $page - 1; ?>" style="padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem;">Previous</a>
        <?php endif; ?>
        
        <?php if($page < $totalPages): ?>
            <a href="?page=<?php echo $page + 1; ?>" style="padding: 0.5rem 1rem; background: rgba(255,255,255,0.1); color: white; text-decoration: none; border-radius: 6px; font-size: 0.9rem;">Next</a>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

<div id="deleteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px);">
    <div class="card" style="width: 100%; max-width: 400px; animation: slideUp 0.3s ease;">
        <h3 style="margin-bottom: 1rem; color: #ef4444; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">Confirm Delete</h3>
        <p style="margin-bottom: 1.5rem; color: var(--text-muted);">Are you sure you want to delete this branch? All users and inventory tied to it may be affected.</p>
        <form id="deleteForm" method="GET" action="">
            <div style="display: flex; gap: 1rem;">
                <button type="button" class="btn-primary" style="flex: 1; background: transparent; border: 1px solid var(--glass-border); margin-top: 0; color: white;" onclick="closeModals()">Cancel</button>
                <button type="submit" class="btn-primary" style="flex: 1; margin-top: 0; background: #ef4444;">Yes, Delete</button>
            </div>
        </form>
    </div>
</div>

<script>
function openDeleteModal(branchId) {
    document.getElementById('deleteForm').action = '/branches/destroy/' + branchId;
    document.getElementById('deleteModal').style.display = 'flex';
}

function closeModals() {
    document.getElementById('deleteModal').style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == document.getElementById('deleteModal')) closeModals();
}
</script>

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