<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'S.A.T.T - Gestion des Factures' ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        :root { --primary: #1a5276; --primary-light: #2e86ab; --sidebar-width: 260px; }
        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f6f9; }
        .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; 
                   background: linear-gradient(180deg, var(--primary) 0%, #0d3240 100%); 
                   color: white; z-index: 1000; transition: all 0.3s; }
        .sidebar-brand { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
        .sidebar-brand h4 { margin: 0; font-weight: 700; letter-spacing: 2px; }
        .sidebar-brand small { opacity: 0.7; font-size: 0.75rem; }
        .nav-link { color: rgba(255,255,255,0.8); padding: 12px 20px; border-radius: 0; 
                     transition: all 0.2s; border-left: 3px solid transparent; }
        .nav-link:hover, .nav-link.active { color: white; background: rgba(255,255,255,0.1); 
                                             border-left-color: #f39c12; }
        .nav-link i { width: 24px; text-align: center; margin-right: 10px; }
        .main-content { margin-left: var(--sidebar-width); padding: 20px; min-height: 100vh; }
        .topbar { background: white; padding: 15px 25px; border-radius: 12px; 
                  box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; 
                  display: flex; justify-content: space-between; align-items: center; }
        .stat-card { background: white; border-radius: 12px; padding: 20px; 
                     box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid var(--primary); }
        .stat-card.success { border-left-color: #27ae60; }
        .stat-card.warning { border-left-color: #f39c12; }
        .stat-card.danger { border-left-color: #e74c3c; }
        .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--primary); }
        .stat-label { color: #7f8c8d; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
        .btn-primary { background: var(--primary); border-color: var(--primary); }
        .btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); }
        .table-card { background: white; border-radius: 12px; padding: 20px; 
                      box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .badge-status { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .status-brouillon { background: #95a5a6; color: white; }
        .status-envoyee { background: #3498db; color: white; }
        .status-payee { background: #27ae60; color: white; }
        .status-partielle { background: #f39c12; color: white; }
        .status-retard { background: #e74c3c; color: white; }
        .status-annulee { background: #7f8c8d; color: white; }
        @media (max-width: 768px) { 
            .sidebar { transform: translateX(-100%); } 
            .sidebar.show { transform: translateX(0); }
            .main-content { margin-left: 0; } 
        }
    </style>
    <?= $this->renderSection('styles') ?>
</head>
<body>
    <nav class="sidebar">
        <div class="sidebar-brand">
            <h4>S.A.T.T</h4>
            <small>Societe d'Assistance Transit</small>
        </div>
        <div class="p-3">
            <div class="small text-white-50 mb-2">MENU PRINCIPAL</div>
            <a href="/dashboard" class="nav-link <?= url_is('dashboard*') ? 'active' : '' ?>">
                <i class="bi bi-speedometer2"></i> Tableau de bord
            </a>
            <a href="/invoices" class="nav-link <?= url_is('invoices*') ? 'active' : '' ?>">
                <i class="bi bi-file-text"></i> Factures
            </a>
            <a href="/clients" class="nav-link <?= url_is('clients*') ? 'active' : '' ?>">
                <i class="bi bi-people"></i> Clients
            </a>
            <a href="/products" class="nav-link <?= url_is('products*') ? 'active' : '' ?>">
                <i class="bi bi-box-seam"></i> Produits
            </a>
            <a href="/payments" class="nav-link <?= url_is('payments*') ? 'active' : '' ?>">
                <i class="bi bi-cash-stack"></i> Paiements
            </a>
            <div class="small text-white-50 mb-2 mt-3">CONFIGURATION</div>
            <a href="/settings" class="nav-link <?= url_is('settings*') ? 'active' : '' ?>">
                <i class="bi bi-gear"></i> Parametres
            </a>
            <a href="/logout" class="nav-link">
                <i class="bi bi-box-arrow-right"></i> Deconnexion
            </a>
        </div>
    </nav>

    <div class="main-content">
        <div class="topbar">
            <div class="d-flex align-items-center">
                <button class="btn btn-sm btn-outline-secondary d-md-none me-3" onclick="document.querySelector('.sidebar').classList.toggle('show')">
                    <i class="bi bi-list"></i>
                </button>
                <h5 class="m-0"><?= $title ?? 'Tableau de bord' ?></h5>
            </div>
            <div class="d-flex align-items-center gap-3">
                <span class="text-muted small"><?= session()->get('user_name') ?? 'Utilisateur' ?></span>
                <span class="badge bg-primary"><?= strtoupper(session()->get('user_role') ?? 'USER') ?></span>
            </div>
        </div>

        <?php if (session()->getFlashdata('success')): ?>
            <div class="alert alert-success alert-dismissible fade show">
                <?= session()->getFlashdata('success') ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>
        <?php if (session()->getFlashdata('error')): ?>
            <div class="alert alert-danger alert-dismissible fade show">
                <?= session()->getFlashdata('error') ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>

        <?= $this->renderSection('content') ?>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <?= $this->renderSection('scripts') ?>
</body>
</html>
