@extends('viartas::accounting.layout')

@section('title', 'Dashboard - ' . config('viartas-theme.name'))

@section('content')
    <!-- Page Header -->
    <div class="vt-page-header">
        <div>
            <h1 class="vt-page-title">Dashboard</h1>
            <div class="vt-page-breadcrumb">
                <a href="#">Home</a>
                <span>/</span>
                <span>Dashboard</span>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button class="vt-btn vt-btn-outline">
                <i class="bi bi-download"></i>
                Export
            </button>
            <button class="vt-btn vt-btn-primary">
                <i class="bi bi-plus-lg"></i>
                New Report
            </button>
        </div>
    </div>

    @include('viartas::accounting.partials.message')

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="vt-card vt-stats-card">
                <div class="vt-stats-icon primary">
                    <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="vt-stats-content">
                    <div class="vt-stats-label">Total Revenue</div>
                    <div class="vt-stats-value">$84,254</div>
                    <div class="vt-stats-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>12.5% vs last month</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="vt-card vt-stats-card">
                <div class="vt-stats-icon success">
                    <i class="bi bi-cart-check"></i>
                </div>
                <div class="vt-stats-content">
                    <div class="vt-stats-label">Total Orders</div>
                    <div class="vt-stats-value">1,429</div>
                    <div class="vt-stats-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>8.2% vs last month</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="vt-card vt-stats-card">
                <div class="vt-stats-icon warning">
                    <i class="bi bi-people"></i>
                </div>
                <div class="vt-stats-content">
                    <div class="vt-stats-label">Total Customers</div>
                    <div class="vt-stats-value">3,842</div>
                    <div class="vt-stats-change positive">
                        <i class="bi bi-arrow-up"></i>
                        <span>5.1% vs last month</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="vt-card vt-stats-card">
                <div class="vt-stats-icon danger">
                    <i class="bi bi-graph-down"></i>
                </div>
                <div class="vt-stats-content">
                    <div class="vt-stats-label">Pending Issues</div>
                    <div class="vt-stats-value">23</div>
                    <div class="vt-stats-change negative">
                        <i class="bi bi-arrow-down"></i>
                        <span>3.2% vs last month</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row g-4 mb-4">
        <div class="col-12 col-xl-8">
            <div class="vt-card">
                <div class="vt-card-header">
                    <div>
                        <h5 class="vt-card-title">Revenue Overview</h5>
                        <p class="vt-card-subtitle">Monthly revenue for the current year</p>
                    </div>
                    <div class="vt-dropdown">
                        <button class="vt-btn vt-btn-outline vt-btn-sm" data-vt-toggle="dropdown">
                            This Year
                            <i class="bi bi-chevron-down ms-1"></i>
                        </button>
                        <div class="vt-dropdown-menu">
                            <a href="#" class="vt-dropdown-item">This Week</a>
                            <a href="#" class="vt-dropdown-item">This Month</a>
                            <a href="#" class="vt-dropdown-item">This Year</a>
                        </div>
                    </div>
                </div>
                <div class="vt-card-body">
                    <div class="vt-chart-container">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="vt-card h-100">
                <div class="vt-card-header">
                    <div>
                        <h5 class="vt-card-title">Sales by Category</h5>
                        <p class="vt-card-subtitle">Distribution this month</p>
                    </div>
                </div>
                <div class="vt-card-body">
                    <div class="vt-chart-container">
                        <canvas id="categoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Orders Table -->
    <div class="vt-card">
        <div class="vt-card-header">
            <div>
                <h5 class="vt-card-title">Recent Orders</h5>
                <p class="vt-card-subtitle">Latest transactions from your store</p>
            </div>
            <a href="#" class="vt-btn vt-btn-outline vt-btn-sm">
                View All
                <i class="bi bi-arrow-right ms-1"></i>
            </a>
        </div>
        <div class="table-responsive">
            <table class="vt-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Product</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="fw-medium">#ORD-2024-001</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="vt-sidebar-user-avatar" style="width: 36px; height: 36px; font-size: 12px;">JD</div>
                                <div>
                                    <div class="fw-medium">John Doe</div>
                                    <small class="text-muted">john@example.com</small>
                                </div>
                            </div>
                        </td>
                        <td>Premium Package</td>
                        <td class="fw-medium">$299.00</td>
                        <td><span class="vt-badge vt-badge-success">Completed</span></td>
                        <td class="text-muted">Dec 22, 2024</td>
                        <td>
                            <div class="vt-dropdown">
                                <button class="vt-btn vt-btn-secondary vt-btn-icon vt-btn-sm" data-vt-toggle="dropdown">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <div class="vt-dropdown-menu">
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-eye"></i>
                                        View Details
                                    </a>
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-pencil"></i>
                                        Edit
                                    </a>
                                    <div class="vt-dropdown-divider"></div>
                                    <a href="#" class="vt-dropdown-item text-danger">
                                        <i class="bi bi-trash"></i>
                                        Delete
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-medium">#ORD-2024-002</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="vt-sidebar-user-avatar" style="width: 36px; height: 36px; font-size: 12px;">AS</div>
                                <div>
                                    <div class="fw-medium">Alice Smith</div>
                                    <small class="text-muted">alice@example.com</small>
                                </div>
                            </div>
                        </td>
                        <td>Basic Plan</td>
                        <td class="fw-medium">$99.00</td>
                        <td><span class="vt-badge vt-badge-warning">Pending</span></td>
                        <td class="text-muted">Dec 21, 2024</td>
                        <td>
                            <div class="vt-dropdown">
                                <button class="vt-btn vt-btn-secondary vt-btn-icon vt-btn-sm" data-vt-toggle="dropdown">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <div class="vt-dropdown-menu">
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-eye"></i>
                                        View Details
                                    </a>
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-pencil"></i>
                                        Edit
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-medium">#ORD-2024-003</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="vt-sidebar-user-avatar" style="width: 36px; height: 36px; font-size: 12px;">RJ</div>
                                <div>
                                    <div class="fw-medium">Robert Johnson</div>
                                    <small class="text-muted">robert@example.com</small>
                                </div>
                            </div>
                        </td>
                        <td>Enterprise Suite</td>
                        <td class="fw-medium">$999.00</td>
                        <td><span class="vt-badge vt-badge-info">Processing</span></td>
                        <td class="text-muted">Dec 20, 2024</td>
                        <td>
                            <div class="vt-dropdown">
                                <button class="vt-btn vt-btn-secondary vt-btn-icon vt-btn-sm" data-vt-toggle="dropdown">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <div class="vt-dropdown-menu">
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-eye"></i>
                                        View Details
                                    </a>
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-pencil"></i>
                                        Edit
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-medium">#ORD-2024-004</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="vt-sidebar-user-avatar" style="width: 36px; height: 36px; font-size: 12px;">EM</div>
                                <div>
                                    <div class="fw-medium">Emily Martinez</div>
                                    <small class="text-muted">emily@example.com</small>
                                </div>
                            </div>
                        </td>
                        <td>Starter Kit</td>
                        <td class="fw-medium">$49.00</td>
                        <td><span class="vt-badge vt-badge-danger">Cancelled</span></td>
                        <td class="text-muted">Dec 19, 2024</td>
                        <td>
                            <div class="vt-dropdown">
                                <button class="vt-btn vt-btn-secondary vt-btn-icon vt-btn-sm" data-vt-toggle="dropdown">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <div class="vt-dropdown-menu">
                                    <a href="#" class="vt-dropdown-item">
                                        <i class="bi bi-eye"></i>
                                        View Details
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
$(document).ready(function() {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Revenue',
                data: [30000, 35000, 32000, 40000, 45000, 42000, 50000, 55000, 60000, 58000, 65000, 84254],
                borderColor: '#6366f1',
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 2,
                pointBackgroundColor: '#6366f1',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    },
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Category Chart
    const categoryCtx = document.getElementById('categoryChart').getContext('2d');
    new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
            labels: ['Electronics', 'Clothing', 'Food', 'Services', 'Other'],
            datasets: [{
                data: [35, 25, 20, 15, 5],
                backgroundColor: [
                    '#6366f1',
                    '#10b981',
                    '#f59e0b',
                    '#06b6d4',
                    '#64748b'
                ],
                borderWidth: 0,
                hoverOffset: 10
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                }
            }
        }
    });
});
</script>
@endpush
