<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($title) ? $title : 'FerryOps'; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --fo-primary: #0d6efd;
            --fo-sidebar: #1b2a4a;
            --fo-sidebar-hover: #253a5e;
        }
        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f6f9; }

        /* Sidebar */
        .fo-sidebar {
            position: fixed; top: 0; left: 0; bottom: 0;
            width: 250px; background: var(--fo-sidebar);
            color: #fff; z-index: 1030; overflow-y: auto;
            transition: transform .25s;
        }
        .fo-sidebar .brand {
            padding: 1.25rem 1rem; font-size: 1.2rem; font-weight: 700;
            border-bottom: 1px solid rgba(255,255,255,.1);
            display: flex; align-items: center; gap: .5rem;
        }
        .fo-sidebar .brand i { font-size: 1.5rem; color: #5ba3f5; }
        .fo-sidebar .nav-link {
            color: rgba(255,255,255,.7); padding: .6rem 1rem;
            font-size: .875rem; display: flex; align-items: center; gap: .5rem;
            border-radius: 0;
        }
        .fo-sidebar .nav-link:hover,
        .fo-sidebar .nav-link.active { background: var(--fo-sidebar-hover); color: #fff; }
        .fo-sidebar .nav-section {
            padding: .5rem 1rem .25rem; font-size: .7rem; text-transform: uppercase;
            letter-spacing: .05em; color: rgba(255,255,255,.35); margin-top: .5rem;
        }

        /* Content */
        .fo-content { margin-left: 250px; min-height: 100vh; }
        .fo-topbar {
            background: #fff; border-bottom: 1px solid #e0e0e0;
            padding: .75rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
        }
        .fo-main { padding: 1.5rem; }

        /* Responsive */
        @media (max-width: 991px) {
            .fo-sidebar { transform: translateX(-100%); }
            .fo-sidebar.show { transform: translateX(0); }
            .fo-content { margin-left: 0; }
        }
    </style>
</head>
<body>

<!-- Sidebar -->
<nav class="fo-sidebar" id="sidebar">
    <div class="brand">
        <i class="bi bi-tsunami"></i> FerryOps
    </div>
    <div class="nav flex-column">
        <div class="nav-section">Principal</div>
        <a class="nav-link" href="<?= site_url('dashboard'); ?>">
            <i class="bi bi-speedometer2"></i> Tableau de bord
        </a>

        <?php if ($this->auth_lib->has_permission('expense_view')): ?>
        <div class="nav-section">Opérations</div>
        <a class="nav-link" href="<?= site_url('expenses'); ?>">
            <i class="bi bi-receipt"></i> Dépenses
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('request_view')): ?>
        <a class="nav-link" href="<?= site_url('requests'); ?>">
            <i class="bi bi-file-earmark-text"></i> Demandes
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('cashbox_view')): ?>
        <div class="nav-section">Trésorerie</div>
        <a class="nav-link" href="<?= site_url('cashboxes'); ?>">
            <i class="bi bi-safe2"></i> Caisses
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('transfer_view')): ?>
        <a class="nav-link" href="<?= site_url('transfers'); ?>">
            <i class="bi bi-arrow-left-right"></i> Transferts
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('batch_view')): ?>
        <a class="nav-link" href="<?= site_url('batches'); ?>">
            <i class="bi bi-collection"></i> Batchs
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('partner_view')): ?>
        <a class="nav-link" href="<?= site_url('statements'); ?>">
            <i class="bi bi-journal-text"></i> Compte Partenaire
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('report_view')): ?>
        <div class="nav-section">Rapports</div>
        <a class="nav-link" href="<?= site_url('reports'); ?>">
            <i class="bi bi-graph-up"></i> Rapports
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('user_view')): ?>
        <div class="nav-section">Administration</div>
        <a class="nav-link" href="<?= site_url('users'); ?>">
            <i class="bi bi-people"></i> Utilisateurs
        </a>
        <?php endif; ?>

        <?php if ($this->auth_lib->has_permission('log_view')): ?>
        <a class="nav-link" href="<?= site_url('users/logs'); ?>">
            <i class="bi bi-clock-history"></i> Journal
        </a>
        <?php endif; ?>
    </div>
</nav>

<!-- Content Area -->
<div class="fo-content">
    <!-- Top bar -->
    <div class="fo-topbar">
        <div>
            <button class="btn btn-sm btn-outline-secondary d-lg-none" onclick="document.getElementById('sidebar').classList.toggle('show')">
                <i class="bi bi-list"></i>
            </button>
            <strong class="ms-2"><?= isset($title) ? $title : ''; ?></strong>
        </div>
        <div class="dropdown">
            <a class="btn btn-sm btn-light dropdown-toggle" href="#" data-bs-toggle="dropdown">
                <i class="bi bi-person-circle"></i>
                <?= $this->auth_lib->full_name(); ?>
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><span class="dropdown-item-text text-muted small"><?= $this->auth_lib->role_code(); ?></span></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="<?= site_url('auth/change_password'); ?>"><i class="bi bi-key"></i> Mot de passe</a></li>
                <li><a class="dropdown-item text-danger" href="<?= site_url('auth/logout'); ?>"><i class="bi bi-box-arrow-right"></i> Déconnexion</a></li>
            </ul>
        </div>
    </div>

    <!-- Flash messages -->
    <div class="fo-main">
        <?php if ($msg = $this->session->flashdata('success')): ?>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle"></i> <?= $msg; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>

        <?php if ($msg = $this->session->flashdata('error')): ?>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle"></i> <?= $msg; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>

        <?php if (validation_errors()): ?>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <?= validation_errors('<div><i class="bi bi-exclamation-circle"></i> ', '</div>'); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        <?php endif; ?>
