@extends('Root.layout.master')
@section('title',"Dashboard")
@section('page_name',"Dashboard - ".Auth::user()->u_name)
@section('content')

        <!-- Stats Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-header">
                    <div>
                        <div class="stat-value">12,584</div>
                        <div class="stat-label">Total Users</div>
                    </div>
                    <div class="stat-icon users">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
                <div class="stat-change positive">
                    <i class="bi bi-arrow-up"></i>
                    12.5% from last month
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div>
                        <div class="stat-value">$42,850</div>
                        <div class="stat-label">Revenue</div>
                    </div>
                    <div class="stat-icon revenue">
                        <i class="bi bi-currency-dollar"></i>
                    </div>
                </div>
                <div class="stat-change positive">
                    <i class="bi bi-arrow-up"></i>
                    8.2% from last month
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div>
                        <div class="stat-value">3,254</div>
                        <div class="stat-label">Orders</div>
                    </div>
                    <div class="stat-icon orders">
                        <i class="bi bi-cart-check"></i>
                    </div>
                </div>
                <div class="stat-change negative">
                    <i class="bi bi-arrow-down"></i>
                    2.1% from last month
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-header">
                    <div>
                        <div class="stat-value">4.8%</div>
                        <div class="stat-label">Conversion Rate</div>
                    </div>
                    <div class="stat-icon conversion">
                        <i class="bi bi-graph-up"></i>
                    </div>
                </div>
                <div class="stat-change positive">
                    <i class="bi bi-arrow-up"></i>
                    1.7% from last month
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="charts-grid">
            <div class="chart-card">
                <div class="chart-header">
                    <h3 class="chart-title">Revenue Overview</h3>
                    <div class="btn-group">
                        <button class="btn btn-outline-secondary btn-sm active">Monthly</button>
                        <button class="btn btn-outline-secondary btn-sm">Quarterly</button>
                        <button class="btn btn-outline-secondary btn-sm">Yearly</button>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="revenueChart"></canvas>
                </div>
            </div>

            <div class="chart-card">
                <div class="chart-header">
                    <h3 class="chart-title">Traffic Sources</h3>
                </div>
                <div class="chart-container">
                    <canvas id="trafficChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Content Grid -->
        <div class="content-grid">
            <!-- Recent Activity -->
            <div class="content-card">
                <div class="content-header">
                    <h3 class="chart-title">Recent Activity</h3>
                    <a href="#" class="btn btn-sm btn-outline-primary">View All</a>
                </div>

                <div class="activity-list">
                    <div class="activity-item">
                        <div class="activity-icon" style="background: linear-gradient(135deg, var(--primary), var(--primary-dark));">
                            <i class="bi bi-person-plus"></i>
                        </div>
                        <div class="activity-content">
                            <h6>New User Registered</h6>
                            <p>John Doe just signed up for premium account</p>
                            <div class="activity-time">5 minutes ago</div>
                        </div>
                    </div>

                    <div class="activity-item">
                        <div class="activity-icon" style="background: linear-gradient(135deg, var(--success), #38a169);">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="activity-content">
                            <h6>New Order Placed</h6>
                            <p>Order #3254 worth $245 has been placed</p>
                            <div class="activity-time">12 minutes ago</div>
                        </div>
                    </div>

                    <div class="activity-item">
                        <div class="activity-icon" style="background: linear-gradient(135deg, var(--warning), #dd6b20);">
                            <i class="bi bi-credit-card"></i>
                        </div>
                        <div class="activity-content">
                            <h6>Payment Received</h6>
                            <p>Payment of $1,250 received from client</p>
                            <div class="activity-time">1 hour ago</div>
                        </div>
                    </div>

                    <div class="activity-item">
                        <div class="activity-icon" style="background: linear-gradient(135deg, var(--danger), #e53e3e);">
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                        <div class="activity-content">
                            <h6>Server Alert</h6>
                            <p>High CPU usage detected on server #4</p>
                            <div class="activity-time">2 hours ago</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Progress -->
            <div class="content-card">
                <div class="content-header">
                    <h3 class="chart-title">Project Progress</h3>
                </div>

                <div class="progress-item">
                    <div class="progress-header">
                        <span class="progress-label">Website Redesign</span>
                        <span class="progress-percent">78%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 78%; background: linear-gradient(90deg, var(--primary), var(--primary-dark));"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-header">
                        <span class="progress-label">Mobile App</span>
                        <span class="progress-percent">65%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 65%; background: linear-gradient(90deg, var(--success), #38a169);"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-header">
                        <span class="progress-label">Marketing Campaign</span>
                        <span class="progress-percent">45%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 45%; background: linear-gradient(90deg, var(--warning), #dd6b20);"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-header">
                        <span class="progress-label">Server Migration</span>
                        <span class="progress-percent">90%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 90%; background: linear-gradient(90deg, var(--danger), #e53e3e);"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-header">
                        <span class="progress-label">Payment Integration</span>
                        <span class="progress-percent">30%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 30%; background: linear-gradient(90deg, var(--info), #3182ce);"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Orders Table -->
        <div class="content-card mb-4">
            <div class="content-header">
                <h3 class="chart-title">Recent Orders</h3>
                <a href="#" class="btn btn-primary">View All Orders</a>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="fw-semibold">#ORD-7841</td>
                        <td>John Smith</td>
                        <td>Mar 12, 2023</td>
                        <td>$245.99</td>
                        <td><span class="status-badge status-completed">Completed</span></td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">View</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-semibold">#ORD-7840</td>
                        <td>Emma Johnson</td>
                        <td>Mar 11, 2023</td>
                        <td>$1,250.00</td>
                        <td><span class="status-badge status-pending">Pending</span></td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">View</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-semibold">#ORD-7839</td>
                        <td>Michael Brown</td>
                        <td>Mar 10, 2023</td>
                        <td>$89.99</td>
                        <td><span class="status-badge status-completed">Completed</span></td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">View</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-semibold">#ORD-7838</td>
                        <td>Sarah Williams</td>
                        <td>Mar 9, 2023</td>
                        <td>$450.50</td>
                        <td><span class="status-badge status-cancelled">Cancelled</span></td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">View</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
@endsection