<?php
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../classes/Branch.php';
requireRole('super_admin');
$pageTitle = 'Cabang';

$db = db();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && verifyCsrf($_POST['csrf_token'] ?? '')) {
    Branch::create([
        'name' => $_POST['name'],
        'address' => $_POST['address'],
        'phone' => $_POST['phone'],
        'email' => $_POST['email'],
    ]);
    redirect('/admin/branches.php', '✅ Cabang berhasil ditambahkan');
}

$branches = Branch::all();

// Summary stats
$totalBranches = count($branches);
$activeBranches = count(array_filter($branches, fn($b) => $b['status'] === 'active'));
$inactiveBranches = $totalBranches - $activeBranches;
$totalBalance = array_sum(array_column($branches, 'balance'));

require __DIR__ . '/../includes/header.php';
require __DIR__ . '/../includes/sidebar.php';
?>

<style>
/* === NAVBAR MODERN === */


.page-header {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i {
    font-size: 2rem;
    color: #0066CC;
}

.btn-add {
    padding: 12px 24px;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

/* === SUMMARY CARDS === */
.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
}

.summary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.summary-card.primary::before { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success::before { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning::before { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.info::before { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.summary-card-title {
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.summary-card.primary .summary-card-icon { background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%); }
.summary-card.success .summary-card-icon { background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%); }
.summary-card.warning .summary-card-icon { background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%); }
.summary-card.info .summary-card-icon { background: linear-gradient(135deg, #00B8D4 0%, #26C6DA 100%); }

.summary-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.summary-card.primary .summary-card-value { color: #0066CC; }
.summary-card.success .summary-card-value { color: #00C853; }
.summary-card.warning .summary-card-value { color: #FF9900; }
.summary-card.info .summary-card-value { color: #00B8D4; }

.summary-card-footer {
    font-size: 0.8rem;
    color: #999;
}

/* === BRANCH CARDS === */
.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.branch-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
}

.branch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.branch-card-header {
    padding: 20px 20px 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-bottom: 1px dashed #e8f4f8;
}

.branch-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.branch-card.inactive .branch-avatar {
    background: linear-gradient(135deg, #9e9e9e 0%, #bdbdbd 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.branch-info {
    flex: 1;
    min-width: 0;
}

.branch-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #003D7A;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.branch-status.active {
    background: #d1e7dd;
    color: #0f5132;
}

.branch-status.inactive {
    background: #e9ecef;
    color: #6c757d;
}

.branch-card-body {
    padding: 18px 20px;
}

.branch-detail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
}

.branch-detail:last-child {
    margin-bottom: 0;
}

.branch-detail i {
    color: #0066CC;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.branch-detail .label {
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.branch-balance {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 14px 16px;
    border-radius: 12px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.balance-label {
    font-size: 0.78rem;
    color: #1565c0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0066CC;
}

.branch-card-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
}

.btn-branch-action {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
}

.btn-branch-action.primary {
    background: #e3f2fd;
    color: #1565c0;
}

.btn-branch-action.primary:hover {
    background: #0066CC;
    color: white;
}

.btn-branch-action.success {
    background: #d1e7dd;
    color: #0f5132;
}

.btn-branch-action.success:hover {
    background: #00C853;
    color: white;
}

/* === EMPTY STATE === */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #ccc;
}

.empty-state-title {
    color: #666;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1.1rem;
}

.empty-state-subtitle {
    color: #999;
    font-size: 0.9rem;
    margin: 0 0 20px;
}

/* === ALERT MODERN === */
.alert-modern {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    border: 2px solid;
}

.alert-modern.success {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

.alert-modern i {
    font-size: 1.3rem;
    margin-top: 2px;
}

/* === MODAL MODERN === */
.modal-modern .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-modern .modal-header {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    padding: 18px 24px;
    border: none;
}

.modal-modern .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.modal-modern .modal-body {
    padding: 24px;
}

.modal-modern .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background: #f8fafc;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.form-group-modern {
    margin-bottom: 18px;
}

.form-label-modern {
    display: block;
    font-weight: 600;
    color: #003D7A;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-control-modern {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8f4f8;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #f8fafc;
    font-family: inherit;
}

.form-control-modern:focus {
    outline: none;
    border-color: #0066CC;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.btn-modal {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-modal.secondary {
    background: white;
    color: #666;
    border: 2px solid #e8f4f8;
}

.btn-modal.secondary:hover {
    background: #f8fafc;
}

.btn-modal.primary {
    background: linear-gradient(135deg, #0066CC 0%, #00B4FF 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-modal.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.4);
}

/* === RESPONSIVE === */

@media (max-width: 480px) {
    .navbar-modern {
        padding: 10px 12px;
    }
    
    .burger-btn {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    
    .navbar-title {
        font-size: 0.95rem;
    }
    
    .main-content {
        padding: 12px;
    }
    
    .page-title {
        font-size: 1.2rem;
        gap: 8px;
    }
    
    .summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .summary-card {
        padding: 12px;
    }
    
    .summary-card-value {
        font-size: 1.05rem;
    }
    
    .summary-card-footer {
        font-size: 0.7rem;
    }
    
    .branch-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
    
    .branch-name {
        font-size: 0.95rem;
    }
    
    .branch-detail {
        font-size: 0.82rem;
    }
    
    .btn-branch-action {
        font-size: 0.78rem;
        padding: 7px;
    }
}
</style>

<!-- Navbar Modern dengan Burger Icon -->

<div class="content-wrapper">
<div class="main-content">
    <div class="navbar-modern">
    <div class="navbar-left">
        <button class="burger-btn" onclick="toggleSidebar()">
            <i class="bi bi-list"></i>
        </button>
        <div>
            <h1 class="navbar-title">Data Cabang</h1>
            
        </div>
    </div>
    <div class="navbar-right">
        <span class="navbar-badge">
            <i class="bi bi-shield-check"></i> Super Admin
        </span>
    </div>
</div>
    <!-- Page Header -->
    <div class="page-header">
        <h2 class="page-title">
          
        </h2>
        <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addModal">
            <i class="bi bi-plus-circle-fill"></i>
            <span>Tambah Cabang</span>
        </button>
    </div>

    <?= flashMessage() ?>

    <!-- Summary Cards -->
    <div class="summary-row">
        <div class="summary-card primary">
            <div class="summary-card-header">
                <h6 class="summary-card-title">
                    <i class="bi bi-building"></i> Total Cabang
                </h6>
                <div class="summary-card-icon">
                    <i class="bi bi-building"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= $totalBranches ?></div>
            <div class="summary-card-footer">🏢 Seluruh cabang terdaftar</div>
        </div>
        <div class="summary-card success">
            <div class="summary-card-header">
                <h6 class="summary-card-title">
                    <i class="bi bi-check-circle"></i> Aktif
                </h6>
                <div class="summary-card-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= $activeBranches ?></div>
            <div class="summary-card-footer">✅ Cabang beroperasi</div>
        </div>
        <div class="summary-card warning">
            <div class="summary-card-header">
                <h6 class="summary-card-title">
                    <i class="bi bi-pause-circle"></i> Non-Aktif
                </h6>
                <div class="summary-card-icon">
                    <i class="bi bi-pause-circle-fill"></i>
                </div>
            </div>
            <div class="summary-card-value"><?= $inactiveBranches ?></div>
            <div class="summary-card-footer">⏸️ Tidak beroperasi</div>
        </div>
        <div class="summary-card info">
            <div class="summary-card-header">
                <h6 class="summary-card-title">
                    <i class="bi bi-cash-stack"></i> Total Saldo
                </h6>
                <div class="summary-card-icon">
                    <i class="bi bi-wallet2"></i>
                </div>
            </div>
            <div class="summary-card-value">Rp <?= number_format($totalBalance, 0, ',', '.') ?></div>
            <div class="summary-card-footer">💰 Keseluruhan cabang</div>
        </div>
    </div>

    <!-- Branches Grid -->
    <?php if (empty($branches)): ?>
        <div class="empty-state">
            <div class="empty-state-icon">
                <i class="bi bi-building"></i>
            </div>
            <h5 class="empty-state-title">Belum ada cabang</h5>
            <p class="empty-state-subtitle">Mulai tambahkan cabang pertama Anda untuk mengelola bisnis</p>
            <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addModal">
                <i class="bi bi-plus-circle-fill"></i>
                <span>Tambah Cabang Pertama</span>
            </button>
        </div>
    <?php else: ?>
        <div class="branches-grid">
            <?php foreach ($branches as $b): ?>
                <div class="branch-card <?= $b['status'] === 'active' ? '' : 'inactive' ?>">
                    <div class="branch-card-header">
                        <div class="branch-avatar">
                            <?= strtoupper(substr($b['name'], 0, 1)) ?>
                        </div>
                        <div class="branch-info">
                            <h5 class="branch-name"><?= htmlspecialchars($b['name']) ?></h5>
                            <span class="branch-status <?= $b['status'] ?>">
                                <i class="bi bi-<?= $b['status'] === 'active' ? 'check-circle-fill' : 'pause-circle-fill' ?>"></i>
                                <?= ucfirst($b['status']) ?>
                            </span>
                        </div>
                    </div>
                    
                    <div class="branch-card-body">
                        <?php if (!empty($b['address'])): ?>
                            <div class="branch-detail">
                                <i class="bi bi-geo-alt-fill"></i>
                                <div>
                                    <span class="label">Alamat</span>
                                    <?= htmlspecialchars($b['address']) ?>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($b['phone'])): ?>
                            <div class="branch-detail">
                                <i class="bi bi-telephone-fill"></i>
                                <div>
                                    <span class="label">Telepon</span>
                                    <?= htmlspecialchars($b['phone']) ?>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($b['email'])): ?>
                            <div class="branch-detail">
                                <i class="bi bi-envelope-fill"></i>
                                <div>
                                    <span class="label">Email</span>
                                    <?= htmlspecialchars($b['email']) ?>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <div class="branch-balance">
                            <span class="balance-label">
                                <i class="bi bi-wallet2"></i> Saldo
                            </span>
                            <span class="balance-value">
                                Rp <?= number_format($b['balance'] ?? 0, 0, ',', '.') ?>
                            </span>
                        </div>
                    </div>
                    
                    <div class="branch-card-footer">
                        <a href="/admin/branch_finance.php?branch=<?= $b['id'] ?>" class="btn-branch-action primary">
                            <i class="bi bi-eye-fill"></i>
                            <span>Detail</span>
                        </a>
                        <a href="/admin/users.php?branch=<?= $b['id'] ?>" class="btn-branch-action success">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- Modal Tambah Cabang -->
<div class="modal fade modal-modern" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST">
            <?= csrfField() ?>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-plus-circle-fill"></i>
                        Tambah Cabang Baru
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group-modern">
                        <label class="form-label-modern">
                            <i class="bi bi-building"></i> Nama Cabang *
                        </label>
                        <input type="text" name="name" class="form-control-modern" 
                               placeholder="Contoh: Cabang Jakarta Pusat" required>
                    </div>
                    <div class="form-group-modern">
                        <label class="form-label-modern">
                            <i class="bi bi-geo-alt"></i> Alamat
                        </label>
                        <textarea name="address" class="form-control-modern" rows="3" 
                                  placeholder="Alamat lengkap cabang..."></textarea>
                    </div>
                    <div class="form-group-modern">
                        <label class="form-label-modern">
                            <i class="bi bi-telephone"></i> Telepon
                        </label>
                        <input type="text" name="phone" class="form-control-modern" 
                               placeholder="08xxxxxxxxxx">
                    </div>
                    <div class="form-group-modern">
                        <label class="form-label-modern">
                            <i class="bi bi-envelope"></i> Email
                        </label>
                        <input type="email" name="email" class="form-control-modern" 
                               placeholder="cabang@domain.com">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-modal secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn-modal primary">
                        <i class="bi bi-save-fill"></i> Simpan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    if (sidebar && overlay) {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }
}
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>