@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-end mb-4">
        <div>
            <h1 class="h3 fw-bold mb-1">Seller Console</h1>
            <p class="text-muted small">Overview of {{ Auth::user()->shop->shop_name }}</p>
        </div>
        <a href="/seller/products/create" class="btn-amwal small py-2">
            <i class="fa-solid fa-plus"></i> New Product
        </a>
    </div>

    <div class="bento-container p-0">
        <!-- Revenue Chart -->
        <div class="bento-card col-8 row-2">
            <div class="d-flex justify-content-between mb-4">
                <h3 class="h6 fw-bold">Revenue Analytics</h3>
                <select class="form-glass py-1 px-2 small w-auto">
                    <option>Last 30 Days</option>
                </select>
            </div>
            <canvas id="revenueChart" height="200"></canvas>
        </div>

        <!-- Wallet Bento -->
        <div class="bento-card col-4 d-flex flex-column justify-content-between" style="background: hsla(var(--primary), 0.1);">
            <div>
                <span class="small text-muted">Available Balance</span>
                <h2 class="fw-bold text-white mt-1">${{ number_format($stats['balance'], 2) }}</h2>
            </div>
            <a href="/seller/earnings" class="text-primary small text-decoration-none fw-bold">Withdraw Funds <i class="fa-solid fa-arrow-up-right"></i></a>
        </div>

        <!-- Stats Bento -->
        <div class="bento-card col-4 d-flex align-items-center gap-3">
            <div class="icon-box bg-success bg-opacity-10 p-3 rounded-circle">
                <i class="fa-duotone fa-cart-shopping text-success"></i>
            </div>
            <div>
                <span class="x-small text-muted d-block">Total Sales</span>
                <span class="fw-bold">{{ $stats['total_sales'] }}</span>
            </div>
        </div>

        <!-- Order List Bento -->
        <div class="bento-card col-12">
            <h3 class="h6 fw-bold mb-4">Recent Orders</h3>
            <div class="table-responsive">
                <table class="table table-borderless text-white small">
                    <thead class="text-muted">
                        <tr>
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentOrders as $order)
                        <tr class="border-top border-white border-opacity-5">
                            <td class="py-3">#{{ $order->order_number }}</td>
                            <td class="py-3">{{ $order->buyer->name }}</td>
                            <td class="py-3">${{ $order->total }}</td>
                            <td class="py-3">
                                <span class="badge bg-{{ $order->status === 'delivered' ? 'success' : 'warning' }} bg-opacity-10 text-{{ $order->status === 'delivered' ? 'success' : 'warning' }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="py-3 text-muted">{{ $order->created_at->format('M d') }}</td>
                            <td class="py-3 text-end"><a href="/seller/orders/{{ $order->id }}" class="btn-glass py-1 px-3 x-small text-decoration-none">Details</a></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const ctx = document.getElementById('revenueChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($earningsChart->pluck('date')) !!},
            datasets: [{
                label: 'Revenue',
                data: {!! json_encode($earningsChart->pluck('amount')) !!},
                borderColor: '#8B5CF6',
                backgroundColor: 'rgba(139, 92, 246, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            plugins: { legend: { display: false } },
            scales: {
                y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#666' } },
                x: { grid: { display: false }, ticks: { color: '#666' } }
            }
        }
    });
</script>
@endpush