@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h1 class="h2">Dashboard</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
        </div>
    </div>
</div>

<!-- Filter Tabs -->
<div class="mb-4">
    <ul class="nav nav-pills filter-tabs">
        <li class="nav-item">
            <a class="nav-link {{ $filter == 'all' ? 'active' : '' }}" href="{{ route('dashboard', ['filter' => 'all']) }}">All Time</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $filter == 'today' ? 'active' : '' }}" href="{{ route('dashboard', ['filter' => 'today']) }}">Today</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $filter == 'week' ? 'active' : '' }}" href="{{ route('dashboard', ['filter' => 'week']) }}">Last Week</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $filter == 'month' ? 'active' : '' }}" href="{{ route('dashboard', ['filter' => 'month']) }}">Monthly</a>
        </li>
    </ul>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Dollar Amount</h6>
                        <h3 class="mb-0">${{ number_format($stats['total_dollar_amount'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-dollar-sign fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card blue">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Available Dollar</h6>
                        <h3 class="mb-0">${{ number_format($stats['available_dollar'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-wallet fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card green">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Profit</h6>
                        <h3 class="mb-0">৳{{ number_format($stats['total_profit'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-chart-line fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card orange">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Cost</h6>
                        <h3 class="mb-0">৳{{ number_format($stats['total_cost'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-receipt fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card purple">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Sales</h6>
                        <h3 class="mb-0">৳{{ number_format($stats['total_sales'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-shopping-cart fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Fee</h6>
                        <h3 class="mb-0">${{ number_format($stats['total_fee'], 2) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-percentage fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card blue">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Transactions</h6>
                        <h3 class="mb-0">{{ number_format($stats['total_transactions']) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-exchange-alt fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card green">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="card-title">Total Users</h6>
                        <h3 class="mb-0">{{ number_format($totalUsers) }}</h3>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-users fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Recent Transactions</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>User</th>
                                <th>Ad Account</th>
                                <th>Amount (USD)</th>
                                <th>Amount (BDT)</th>
                                <th>Profit</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentTransactions as $transaction)
                            <tr>
                                <td>{{ $transaction->transaction_date->format('M d, Y') }}</td>
                                <td>{{ $transaction->user->name ?? 'N/A' }}</td>
                                <td>{{ $transaction->adAccount->name ?? 'N/A' }}</td>
                                <td>${{ number_format($transaction->amount_usd, 2) }}</td>
                                <td>৳{{ number_format($transaction->amount_bdt, 2) }}</td>
                                <td>৳{{ number_format($transaction->profit, 2) }}</td>
                                <td>{{ Str::limit($transaction->description, 50) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center">No transactions found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection