@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="row">
    <!-- Welcome Card -->
    <div class="col-12 mb-4">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-1">Welcome back, {{ auth()->user()->first_name ?: auth()->user()->username }}!</h4>
                        <p class="mb-0 opacity-75">{{ now()->format('l, F j, Y') }}</p>
                    </div>
                    <div class="text-end">
                        <h2 class="mb-1">{{ $wallet_balance }} {{ config('app.currency') }}</h2>
                        <p class="mb-0 opacity-75">Available Balance</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Orders</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $total_orders }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Completed Orders</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $completed_orders }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Total Spent</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($total_spent, 2) }} {{ config('app.currency') }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Pending Orders</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pending_orders }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-clock fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="col-xl-8 col-lg-7 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Spending Overview</h6>
            </div>
            <div class="card-body">
                <canvas id="spendingChart"></canvas>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-lg-5 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Orders Status</h6>
            </div>
            <div class="card-body">
                <canvas id="ordersChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Orders -->
    <div class="col-12 mb-4">
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">Recent Orders</h6>
                <a href="{{ route('orders.index') }}" class="btn btn-sm btn-primary">View All</a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Service</th>
                                <th>Link</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_orders as $order)
                                <tr>
                                    <td>{{ $order->order_id }}</td>
                                    <td>{{ $order->service->name }}</td>
                                    <td>
                                        <a href="{{ $order->link }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 150px;">
                                            {{ $order->link }}
                                        </a>
                                    </td>
                                    <td>{{ number_format($order->quantity) }}</td>
                                    <td>{{ number_format($order->price, 2) }} {{ config('app.currency') }}</td>
                                    <td>
                                        @php
                                            $statusColors = [
                                                'pending' => 'warning',
                                                'processing' => 'info',
                                                'in_progress' => 'primary',
                                                'completed' => 'success',
                                                'cancelled' => 'danger',
                                                'refunded' => 'secondary',
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $statusColors[$order->status] ?? 'secondary' }}">
                                            {{ ucfirst($order->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $order->created_at->diffForHumans() }}</td>
                                    <td>
                                        <a href="{{ route('orders.show', $order->order_id) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center">No orders yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Transactions and Referrals -->
    <div class="col-md-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Recent Transactions</h6>
            </div>
            <div class="card-body">
                <div class="list-group">
                    @forelse($recent_transactions as $transaction)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-{{ $transaction->type_badge['icon'] }} me-2"></i>
                                    <strong>{{ $transaction->type_badge['text'] }}</strong>
                                    <p class="mb-0 small text-muted">{{ $transaction->description }}</p>
                                </div>
                                <div class="text-end">
                                    <span class="fw-bold {{ $transaction->amount > 0 ? 'text-success' : 'text-danger' }}">
                                        {{ $transaction->formatted_amount }}
                                    </span>
                                    <br>
                                    <span class="badge bg-{{ $transaction->status_badge['color'] }} small">
                                        {{ $transaction->status_badge['text'] }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No transactions yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">Recent Referrals</h6>
                <span class="badge bg-success">{{ $referral_count }} Total</span>
            </div>
            <div class="card-body">
                <div class="list-group">
                    @forelse($recent_referrals as $referral)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <div>
                                    <i class="fas fa-user-plus me-2 text-success"></i>
                                    <strong>{{ $referral->referred->username }}</strong>
                                    <p class="mb-0 small text-muted">
                                        Joined {{ $referral->joined_at->diffForHumans() }}
                                    </p>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-info">Earned: {{ number_format($referral->total_earned, 2) }} {{ config('app.currency') }}</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No referrals yet. Share your referral link to earn!</p>
                        <div class="mt-3">
                            <div class="input-group">
                                <input type="text" class="form-control" value="{{ auth()->user()->referral_link }}" id="referralLink" readonly>
                                <button class="btn btn-primary" type="button" onclick="copyReferralLink()">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Spending Chart
    const spendingCtx = document.getElementById('spendingChart').getContext('2d');
    new Chart(spendingCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($spending_chart['labels']) !!},
            datasets: [{
                label: 'Spending',
                data: {!! json_encode($spending_chart['data']) !!},
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

    // Orders Chart
    const ordersCtx = document.getElementById('ordersChart').getContext('2d');
    new Chart(ordersCtx, {
        type: 'doughnut',
        data: {
            labels: ['Pending', 'Processing', 'Completed', 'Cancelled'],
            datasets: [{
                data: [
                    {{ $orders_chart['pending'] ?? 0 }},
                    {{ $orders_chart['processing'] ?? 0 }},
                    {{ $orders_chart['completed'] ?? 0 }},
                    {{ $orders_chart['cancelled'] ?? 0 }}
                ],
                backgroundColor: [
                    'rgb(255, 205, 86)',
                    'rgb(54, 162, 235)',
                    'rgb(75, 192, 192)',
                    'rgb(255, 99, 132)'
                ]
            }]
        }
    });

    // Copy Referral Link
    function copyReferralLink() {
        const input = document.getElementById('referralLink');
        input.select();
        document.execCommand('copy');
        
        // Show toast or alert
        alert('Referral link copied to clipboard!');
    }
</script>
@endpush
@endsection