@extends('backend.app')

@section('title', 'Admin Dashboard')

@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <!-- Dashboard Starts -->
                <section id="dashboard-ecommerce">
                    <div class="row match-height">
                        <!-- Welcome Card -->
                        <div class="col-xl-4 col-md-6 col-12">
                            <div class="card card-congratulation-medal">
                                <div class="card-body">
                                    <h5>Welcome {{ auth()->user()->name }}!</h5>
                                    <p class="card-text font-small-3">Here's your platform overview</p>
                                </div>
                            </div>
                        </div>
                        <!--/ Welcome Card -->

                        <!-- Statistics Card -->
                        <div class="col-xl-8 col-md-6 col-12">
                            <div class="card card-statistics">
                                <div class="card-header">
                                    <h4 class="card-title">Platform Statistics</h4>
                                </div>
                                <div class="card-body statistics-body">
                                    <div class="row">
                                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                            <div class="media">
                                                <div class="avatar bg-light-primary mr-2">
                                                    <div class="avatar-content">
                                                        <i data-feather="users" class="avatar-icon"></i>
                                                    </div>
                                                </div>
                                                <div class="media-body my-auto">
                                                    <h4 class="font-weight-bolder mb-0">{{ $totalUsers }}</h4>
                                                    <p class="card-text font-small-3 mb-0">Total Users</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                            <div class="media">
                                                <div class="avatar bg-light-info mr-2">
                                                    <div class="avatar-content">
                                                        <i data-feather="box" class="avatar-icon"></i>
                                                    </div>
                                                </div>
                                                <div class="media-body my-auto">
                                                    <h4 class="font-weight-bolder mb-0">{{ $totalProducts }}</h4>
                                                    <p class="card-text font-small-3 mb-0">Products</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-sm-0">
                                            <div class="media">
                                                <div class="avatar bg-light-danger mr-2">
                                                    <div class="avatar-content">
                                                        <i data-feather="award" class="avatar-icon"></i>
                                                    </div>
                                                </div>
                                                <div class="media-body my-auto">
                                                    <h4 class="font-weight-bolder mb-0">{{ $activeAuctions }}</h4>
                                                    <p class="card-text font-small-3 mb-0">Active Auctions</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 col-12">
                                            <div class="media">
                                                <div class="avatar bg-light-success mr-2">
                                                    <div class="avatar-content">
                                                        <i data-feather="dollar-sign" class="avatar-icon"></i>
                                                    </div>
                                                </div>
                                                <div class="media-body my-auto">
                                                    <h4 class="font-weight-bolder mb-0">{{ $totalBids }}</h4>
                                                    <p class="card-text font-small-3 mb-0">Total Bids</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ Statistics Card -->
                    </div>

                    <div class="row match-height">
                        <!-- Recent Products -->
                        <div class="col-lg-8 col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h4 class="card-title">Recent Products</h4>
                                    <a href="" class="btn btn-sm btn-outline-primary">View
                                        All</a>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Seller</th>
                                                    <th>Type</th>
                                                    <th>Price</th>
                                                    <th>Bids</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($recentProducts as $product)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="avatar mr-1">
                                                                    @php
                                                                        // Handle both array and string formats
                                                                        $images = is_array($product->images) ? $product->images : json_decode($product->images, true);
                                                                        $firstImage = !empty($images) ? asset($images[0]) : asset('backend/app-assets/images/elements/homepod.png');
                                                                    @endphp
                                                                    <img src="{{ $firstImage }}" alt="Product" style="object-fit: cover" width="40" height="40" />
                                                                </div>
                                                                <div>
                                                                    <div class="font-weight-bolder">{{ $product->title }}</div>
                                                                    <div class="font-small-2 text-muted">
                                                                        {{ $product->category->title }}</div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>{{ $product->user->name }}</td>
                                                        <td>
                                                            <span
                                                                class="badge badge-{{ $product->type == 'auction' ? 'warning' : 'primary' }}">
                                                                {{ ucfirst($product->type) }}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            @if($product->type == 'auction')
                                                                ${{ number_format($product->starting_price, 2) }}
                                                            @else
                                                                ${{ number_format($product->price, 2) }}
                                                            @endif
                                                        </td>
                                                        <td>{{ $product->bids_count }}</td>
                                                        <td>
                                                            <span
                                                                class="badge badge-{{ $product->status == 'active' ? 'success' : 'secondary' }}">
                                                                {{ ucfirst($product->status) }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ Recent Products -->

                        <!-- Quick Stats -->
                        <div class="col-lg-4 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Quick Stats</h4>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="text-muted">Regular Products</div>
                                        <div class="font-weight-bolder">{{ $regularProducts }}</div>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="text-muted">Auction Products</div>
                                        <div class="font-weight-bolder">{{ $auctionProducts }}</div>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="text-muted">Categories</div>
                                        <div class="font-weight-bolder">{{ $categoryCount }}</div>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="text-muted">Subcategories</div>
                                        <div class="font-weight-bolder">{{ $subCategoryCount }}</div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="text-muted">Bookmarks</div>
                                        <div class="font-weight-bolder">{{ $totalBookmarks }}</div>
                                    </div>

                                    <div class="mt-2">
                                        <div id="products-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ Quick Stats -->
                    </div>

                    <div class="row match-height">
                        <!-- Recent Bids -->
                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Recent Bids</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="timeline">
                                        @foreach($recentBids as $bid)
                                            <li class="timeline-item">
                                                <span class="timeline-point"></span>
                                                <div class="timeline-event">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <h6 class="mb-0">{{ $bid->user->name }}</h6>
                                                        <span class="text-muted">{{ $bid->created_at->diffForHumans() }}</span>
                                                    </div>
                                                    <p class="mb-0">
                                                        Bid ${{ number_format($bid->amount, 2) }} on
                                                        <a href="#">{{ $bid->product->title }}</a>
                                                    </p>
                                                    <span class="badge badge-{{ $bid->is_winner ? 'success' : 'primary' }}">
                                                        {{ $bid->is_winner ? 'Winning' : 'Active' }}
                                                    </span>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--/ Recent Bids -->

                        <!-- User Types -->
                        <div class="col-lg-6 col-md-6 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">User Distribution</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="text-center">
                                                <h2 class="font-weight-bolder">{{ $adminCount }}</h2>
                                                <p class="text-muted mb-0">Admins</p>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-center">
                                                <h2 class="font-weight-bolder">{{ $regularUserCount }}</h2>
                                                <p class="text-muted mb-0">Regular Users</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="user-type-chart" class="mt-2"></div>
                                </div>
                            </div>
                        </div>
                        <!--/ User Types -->
                    </div>
                </section>
                <!-- Dashboard ends -->
            </div>
        </div>
    </div>
@endsection