@extends('Branch.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