<?php
require_once 'config/database.php';
requireAdmin(); // Ensure only admins can access this page

require_once 'templates/header.php';
require_once 'templates/navbar.php';
require_once 'templates/sidebar.php';
?>

<!-- Content Wrapper -->
<div class="content-wrapper">
    <!-- Modern Header with Welcome Message -->
    <div class="content-header bg-gradient-primary">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center text-white">
                        <div class="mr-3">
                            <i class="fas fa-tachometer-alt fa-2x"></i>
                        </div>
                        <div>
                            <h1 class="mb-1 font-weight-bold">Dashboard Overview</h1>
                            <p class="mb-0 opacity-75">Welcome back! Here's what's happening with KSO Chandigarh today.</p>
                        </div>
                        <div class="ml-auto">
                            <span class="badge badge-light p-2">
                                <i class="far fa-clock mr-1"></i>
                                <?php echo date('M d, Y - h:i A'); ?>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Statistics Section -->
    <section class="content pt-4">
        <div class="container-fluid">
            <!-- Enhanced Stats Cards with Gradients -->
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="card card-stats gradient-1">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">Total Members</h5>
                                    <span class="h2 font-weight-bold mb-0" id="totalMembers">0</span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-info text-white rounded-circle shadow">
                                        <i class="fas fa-users"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-sm">
                                <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6">
                    <div class="card card-stats gradient-2">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">Active Events</h5>
                                    <span class="h2 font-weight-bold mb-0" id="totalEvents">0</span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-success text-white rounded-circle shadow">
                                        <i class="fas fa-calendar-alt"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-sm">
                                <span class="text-warning mr-2"><i class="fa fa-arrow-down"></i> 3.48%</span>
                                <span class="text-nowrap">Since last week</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6">
                    <div class="card card-stats gradient-3">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">Total Revenue</h5>
                                    <span class="h2 font-weight-bold mb-0" id="totalIncome">₹0</span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                        <i class="fas fa-rupee-sign"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-sm">
                                <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 10.2%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-3 col-md-6">
                    <div class="card card-stats gradient-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <h5 class="card-title text-uppercase text-muted mb-0">Pending Actions</h5>
                                    <span class="h2 font-weight-bold mb-0" id="pendingApprovals">0</span>
                                </div>
                                <div class="col-auto">
                                    <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-3 mb-0 text-sm">
                                <span class="text-danger mr-2"><i class="fa fa-arrow-down"></i> 1.10%</span>
                                <span class="text-nowrap">Since yesterday</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <div class="row">
                <!-- Left Column -->
                <div class="col-lg-8">
                    <!-- Recent Members Section -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-users mr-2"></i>Recent Members
                            </h6>
                            <div class="dropdown no-arrow">
                                <select id="memberStatusFilter" class="form-control form-control-sm">
                                    <option value="">All Status</option>
                                    <option value="approved">Approved</option>
                                    <option value="pending">Pending</option>
                                    <option value="rejected">Rejected</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="membersTable" class="table table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Member</th>
                                            <th>KSO ID</th>
                                            <th>Status</th>
                                            <th>Joined</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <div class="spinner-border text-primary" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                                <p class="mt-2 text-muted">Loading members...</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Events Management Section -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold text-success">
                                <i class="fas fa-calendar-alt mr-2"></i>Event Management
                            </h6>
                            <div class="dropdown no-arrow">
                                <select id="eventFilter" class="form-control form-control-sm">
                                    <option value="upcoming">Upcoming</option>
                                    <option value="current">Current</option>
                                    <option value="past">Past</option>
                                    <option value="all">All Events</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="eventsTable" class="table table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Event Name</th>
                                            <th>Date & Time</th>
                                            <th>Location</th>
                                            <th>Status</th>
                                            <th>Participants</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                <div class="spinner-border text-success" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                                <p class="mt-2 text-muted">Loading events...</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="col-lg-4">
                    <!-- Quick Actions Panel -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-bolt mr-2"></i>Quick Actions
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <a href="member-registration.php" class="list-group-item list-group-item-action border-0">
                                    <div class="d-flex w-100 justify-content-between">
                                        <div>
                                            <i class="fas fa-user-plus text-primary mr-2"></i>
                                            Add New Member
                                        </div>
                                        <small><i class="fas fa-chevron-right"></i></small>
                                    </div>
                                </a>
                                <a href="events.php" class="list-group-item list-group-item-action border-0">
                                    <div class="d-flex w-100 justify-content-between">
                                        <div>
                                            <i class="fas fa-calendar-plus text-success mr-2"></i>
                                            Create Event
                                        </div>
                                        <small><i class="fas fa-chevron-right"></i></small>
                                    </div>
                                </a>
                                <a href="finance.php" class="list-group-item list-group-item-action border-0">
                                    <div class="d-flex w-100 justify-content-between">
                                        <div>
                                            <i class="fas fa-receipt text-warning mr-2"></i>
                                            Financial Records
                                        </div>
                                        <small><i class="fas fa-chevron-right"></i></small>
                                    </div>
                                </a>
                                <a href="reports.php" class="list-group-item list-group-item-action border-0">
                                    <div class="d-flex w-100 justify-content-between">
                                        <div>
                                            <i class="fas fa-chart-bar text-info mr-2"></i>
                                            Generate Reports
                                        </div>
                                        <small><i class="fas fa-chevron-right"></i></small>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Member Statistics Chart -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">
                                <i class="fas fa-chart-pie mr-2"></i>Member Statistics
                            </h6>
                        </div>
                        <div class="card-body">
                            <canvas id="memberChart" style="height: 200px;"></canvas>
                        </div>
                    </div>

                    <!-- Recent Transactions -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold text-warning">
                                <i class="fas fa-coins mr-2"></i>Recent Transactions
                            </h6>
                            <div class="dropdown no-arrow">
                                <select id="transactionFilter" class="form-control form-control-sm">
                                    <option value="">All Types</option>
                                    <option value="income">Income</option>
                                    <option value="expense">Expense</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="transactionsTable" class="table table-hover mb-0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Member</th>
                                            <th>Type</th>
                                            <th>Amount</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="4" class="text-center py-4">
                                                <div class="spinner-border text-warning" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                                <p class="mt-2 text-muted">Loading transactions...</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Section - Performance Metrics -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-gray-800">
                                <i class="fas fa-chart-line mr-2"></i>Performance Overview
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 text-center">
                                    <div class="border-right pb-4">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Active Members</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="activeMembersCount">0</div>
                                    </div>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="border-right pb-4">
                                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Monthly Events</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="monthlyEventsCount">0</div>
                                    </div>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="border-right pb-4">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Monthly Income</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="monthlyIncomeCount">₹0</div>
                                    </div>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="pb-4">
                                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Pending Actions</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" id="pendingActionsCount">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Custom Styles for Modern Dashboard -->
<style>
/* Gradient Cards */
.gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
.gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; }
.gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; }
.gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; }

.card-stats {
    border: none;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-stats:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.icon-shape {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Enhanced Card Shadows */
.card.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border: none;
    border-radius: 0.35rem;
}

/* Header Gradient */
.content-header.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: 0;
    padding: 2rem 0;
}

/* Table Improvements */
.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.02);
}

.thead-light th {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Quick Actions Styling */
.list-group-item-action:hover {
    background-color: #f8f9fc;
    border-left: 3px solid #4e73df;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-header h1 {
        font-size: 1.5rem;
    }
    .card-stats {
        margin-bottom: 1rem;
    }
    .border-right {
        border-right: none !important;
        border-bottom: 1px solid #e3e6f0;
        margin-bottom: 1rem;
    }
}

/* Animation for loading states */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.spinner-border {
    animation: pulse 2s infinite;
}
</style>