<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<div class="bg-dark text-white py-4 mb-4" style="background: linear-gradient(135deg, #2b3240 0%, #1e2430 100%) !important;">
    <div class="container fade-in">
        <h2 class="fw-bold"><i class="fa-solid fa-gauge-high me-2 text-info"></i>System Administrator</h2>
        <p class="mb-0 text-light opacity-75">Master Data Management and Reporting</p>
    </div>
</div>

<div class="container mb-5 fade-in" style="animation-delay: 0.1s;">
    <div class="row g-4">
        <!-- Master Data -->
        <div class="col-lg-8">
            <h4 class="fw-bold mb-3">Master Data Modules</h4>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                                    <i class="fa-solid fa-users-gear fs-4 text-primary"></i>
                                </div>
                                <h5 class="fw-bold mb-0">User Management</h5>
                            </div>
                            <p class="text-muted small">Manage customers, corporate clients, and system administrators.</p>
                            <a href="<?= base_url('admin/users') ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3">Manage Users</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3">
                                    <i class="fa-solid fa-id-badge fs-4 text-warning"></i>
                                </div>
                                <h5 class="fw-bold mb-0">B2B Agent Approvals</h5>
                            </div>
                            <p class="text-muted small">Review and approve new travel agent registrations. 3 pending.</p>
                            <a href="#" class="btn btn-sm btn-outline-warning text-dark rounded-pill px-3">Review Agents</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
                                    <i class="fa-solid fa-percent fs-4 text-success"></i>
                                </div>
                                <h5 class="fw-bold mb-0">Markups & Rules</h5>
                            </div>
                            <p class="text-muted small">Configure global or agent-specific markup percentages.</p>
                            <a href="#" class="btn btn-sm btn-outline-success rounded-pill px-3">Edit Rules</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="bg-info bg-opacity-10 p-3 rounded-circle me-3">
                                    <i class="fa-solid fa-plane-arrival fs-4 text-info"></i>
                                </div>
                                <h5 class="fw-bold mb-0">Inventory Sync</h5>
                            </div>
                            <p class="text-muted small">Manage flight schedules, hotel rates, and API integrations.</p>
                            <div class="d-flex gap-2">
                                <a href="<?= base_url('admin/flights') ?>" class="btn btn-sm btn-outline-info rounded-pill px-3">Flights Inventory</a>
                                <a href="<?= base_url('admin/hotels') ?>" class="btn btn-sm btn-outline-info rounded-pill px-3">Hotels Inventory</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reporting View -->
        <div class="col-lg-4">
            <h4 class="fw-bold mb-3">Daily Reports</h4>
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span class="text-muted fw-semibold">Today's Sales</span>
                        <h4 class="fw-bold text-dark mb-0">₹4.2L</h4>
                    </div>
                    <div class="mb-4">
                        <div class="d-flex justify-content-between small mb-1">
                            <span>Flights (65%)</span>
                            <span class="fw-bold">₹2.73L</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 65%"></div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="d-flex justify-content-between small mb-1">
                            <span>Hotels (35%)</span>
                            <span class="fw-bold">₹1.47L</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 35%"></div>
                        </div>
                    </div>
                    
                    <hr>
                    <div class="d-grid gap-2">
                        <button class="btn btn-light text-start border d-flex justify-content-between align-items-center hover-lift">
                            <span><i class="fa-solid fa-file-invoice-dollar me-2 text-muted"></i>Revenue Report</span>
                            <i class="fa-solid fa-chevron-right small text-muted"></i>
                        </button>
                        <button class="btn btn-light text-start border d-flex justify-content-between align-items-center hover-lift">
                            <span><i class="fa-solid fa-chart-pie me-2 text-muted"></i>Agent Performance</span>
                            <i class="fa-solid fa-chevron-right small text-muted"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
</style>
<?= $this->endSection() ?>
