@extends('layouts.user')

@section('content')
@push('styles')
<style>
.stat-grid-vertical { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
.stat-card-clean { background: #fff; padding: 20px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display: flex; align-items: center; gap: 15px; }
.stat-icon-wrap { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 4px; border: 1px solid #f1f5f9; }
.stat-value { font-size: 24px; font-weight: bold; color: #1e293b; margin-top: 2px; }
.stat-label { color: #64748b; font-size: 13px; font-weight: 500; }
.card-section { background: #fff; padding: 20px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.02); margin-top: 20px; margin-bottom: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-title { font-size: 18px; font-weight: bold; color: #1e293b; }
.filter-icon { cursor: pointer; color: #666; }
.svg-icon { width: 24px; height: 24px; color: #4f46e5; }
</style>
@endpush

<div class="card" style="border-radius: 6px; border: 1px solid #e5e7eb;">
    <div class="card-title" style="display: flex; align-items: center; gap: 12px;">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        Welcome back, {{ $user->username }}
    </div>
</div>

<div class="stat-grid-vertical" style="margin-top: 16px;">
    <div class="stat-card-clean">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
        </div>
        <div>
            <div class="stat-label">Current Balance</div>
            <div class="stat-value">{{ format_money($user->balance) }}</div>
        </div>
    </div>

    <div class="stat-card-clean">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" style="color: #10b981;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        </div>
        <div>
            <div class="stat-label">Total Orders</div>
            <div class="stat-value">{{ (int) $totalOrders }}</div>
        </div>
    </div>
</div>

<div class="card" style="margin-top:16px; border-radius: 6px; border: 1px solid #e5e7eb;">
    <div class="card-title" style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        Quick Actions
    </div>
    <div class="grid-2">
        <a href="/order/new" class="btn btn-primary">New Order</a>
        <a href="/wallet/add-funds" class="btn btn-outline">Add Funds</a>
    </div>
</div>

<div class="card" style="margin-top: 16px; border-radius: 6px; border: 1px solid #e5e7eb;">
    <div class="card-title" style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
        </div>
        Recent Orders
    </div>
    @if ($recentOrders->isEmpty())
    <div class="empty">No orders yet. <a href="/order/new">Place your first order</a>.</div>
    @else
    <div class="table-wrap">
        <table>
            <thead><tr><th>Order</th><th>Service</th><th>Qty</th><th>Charge</th><th>Status</th></tr></thead>
            <tbody>
            @foreach ($recentOrders as $o)
            <tr>
                <td>#{{ $o->order_uid }}</td>
                <td>{{ $o->service_name }}</td>
                <td>{{ (int) $o->quantity }}</td>
                <td>{{ format_money($o->charge) }}</td>
                <td><span class="badge badge-{{ $o->status }}">{{ ucfirst($o->status) }}</span></td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

<div class="card-section">
    <div class="card-header">
        <div class="card-title" style="display: flex; align-items: center; gap: 12px;">
            <div class="stat-icon-wrap">
                <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path></svg>
            </div>
            Market Statistics
        </div>
        <div class="filter-icon">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 4h18M6 10h12M10 16h4"></path></svg>
        </div>
    </div>
    <div style="position: relative; height: 250px; width: 100%;">
        <canvas id="transactionChart"></canvas>
    </div>
</div>

<div class="card-section">
    <div class="card-header">
        <div class="card-title" style="display: flex; align-items: center; gap: 12px;">
            <div class="stat-icon-wrap">
                <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 3.055A9 9 0 1020.945 13H11V3.055z"></path><path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg>
            </div>
            Gateway Statistics
        </div>
        <div class="filter-icon">
            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 4h18M6 10h12M10 16h4"></path></svg>
        </div>
    </div>
    <div style="position: relative; height: 250px; width: 100%; display: flex; justify-content: center;">
        <canvas id="gatewayChart" style="max-width: 250px;"></canvas>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctxTx = document.getElementById('transactionChart').getContext('2d');
    new Chart(ctxTx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Total Payments',
                data: [50, 60, 48, 80, 220, 50, 100, 150, 230, 110, 140, 210],
                borderColor: '#6f42c1',
                tension: 0.3,
                fill: true,
                backgroundColor: 'rgba(111, 66, 193, 0.05)'
            }, {
                label: 'Completed Orders',
                data: [40, 50, 30, 70, 180, 40, 90, 130, 200, 90, 120, 190],
                borderColor: '#28a745',
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } }
        }
    });

    const ctxGateway = document.getElementById('gatewayChart').getContext('2d');
    new Chart(ctxGateway, {
        type: 'doughnut',
        data: {
            labels: ['bKash', 'Nagad', 'Rocket'],
            datasets: [{
                data: [60, 25, 15],
                backgroundColor: ['#28a745', '#6f42c1', '#ffc107']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } }
        }
    });
</script>
@endpush
@endsection