@extends('admin.layouts.app')
@section('styles')
    <style>
        .quick-actions .actions a.card {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: transform .15s ease, border-color .15s ease;
        }
        .quick-actions .actions a.card:hover {
            transform: translateY(-2px);
            border-color: rgba(123, 97, 255, .5);
        }
    </style>
@endsection

@section('content')
<div class="content_area">
                <!-- Stats Grid -->
                <div class="stats-grid">
                    <div class="stat-card" data-color="yellow">
                        <div class="stat-label">Registered Players</div>
                        <div class="stat-value">{{ number_format($registeredPlayers) }}</div>
                    </div>
                    <div class="stat-card" data-color="red">
                        <div class="stat-label">Registered
                            Team Owners</div>
                        <div class="stat-value">{{ number_format($registeredTeamOwners) }}</div>
                    </div>
                    <div class="stat-card" data-color="purple">
                        <div class="stat-label">Auction Status</div>
                        <div class="stat-value">{{ $auctionStatus['value'] }} <span class="{{ $auctionStatus['class'] }}">{{ $auctionStatus['label'] }}</span></div>
                    </div>
                    <div class="stat-card" data-color="green">
                        <div class="stat-label">Active Sponsors</div>
                        <div class="stat-value">{{ number_format($activeSponsors) }} <span class="stable">Active</span></div>
                    </div>
                </div>
                <div class="quick-actions">
                    <h3>Quick Actions</h3>

                    <div class="actions">
                        <a href="{{ route('admin.users.index') }}" class="card">
                            <div class="icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M9 12L11 14L15 10M21 12C21 16.9672 16.9672 21 12 21C7.03276 21 3 16.9672 3 12C3 7.03276 7.03276 3 12 3C16.9672 3 21 7.03276 21 12H9"
                                        stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </div>
                            <p>Approve Players</p>
                        </a>

                        <a href="{{ route('admin.myevents') }}" class="card">
                            <div class="icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.752 11.1673L11.555 9.03534C11.2478 8.83041 10.8528 8.81141 10.5274 8.98594C10.202 9.16046 9.99921 9.50009 10 9.86934V14.1323C9.99995 14.5012 10.203 14.8402 10.5282 15.0142C10.8535 15.1882 11.2481 15.1691 11.555 14.9643L14.752 12.8323C15.0302 12.6469 15.1972 12.3347 15.1972 12.0003C15.1972 11.666 15.0302 11.3538 14.752 11.1683V11.1673"
                                        stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M21 12C21 16.9672 16.9672 21 12 21C7.03276 21 3 16.9672 3 12C3 7.03276 7.03276 3 12 3C16.9672 3 21 7.03276 21 12V12"
                                        stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </div>
                            <p>Start Auction</p>
                        </a>

                        <a href="#" class="card">
                            <div class="icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 4V20M20 12H4" stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </div>
                            <p>Create Rule</p>
                        </a>

                        <a href="{{ route('admin.reports') }}" class="card">
                            <div class="icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15 12C15 13.6557 13.6557 15 12 15C10.3443 15 9 13.6557 9 12C9 10.3443 10.3443 9 12 9C13.6557 9 15 10.3443 15 12V12"
                                        stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path
                                        d="M2.45801 12C3.73201 7.943 7.52301 5 12 5C16.478 5 20.268 7.943 21.542 12C20.268 16.057 16.478 19 12 19C7.52301 19 3.73201 16.057 2.45801 12V12"
                                        stroke="#7B61FF" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </div>
                            <p>View Reports</p>
                        </a>
                    </div>
                </div>

                <!-- Sections Grid -->
                <div class="sections-grid">
                    <!-- Upcoming Auctions -->
                    <section class="full-content-section">
                        <section class="content-section cont-heading">
                            <div class="section-header">
                                <h2>Upcoming Auctions</h2>
                                <a class="view-txt" href="#">
                                    View All
                                </a>
                            </div>
                        </section>
                        <section class="content-section">
                            <div class="auction-list">
                                @forelse ($upcomingAuctions as $auction)
                                    <div class="auction-card">
                                        <div class="auction-img">
                                            <img src="{{ asset('assets/images/auction_item_1.png') }}" alt="Auction">
                                        </div>
                                        <div class="auction-info">
                                            <div class="d-flex">
                                                <div class="d-flex img-cont-full">
                                                    <img src="{{ asset('assets/images/dashboard-cont.png') }}" alt="" class="cont-img">
                                                    <h3>{{ $auction->name }}{{ $auction->season ? ' · ' . $auction->season : '' }}</h3>
                                                </div>
                                                <div class="d-flex">
                                                    <hr class="set-line">
                                                    <p>Start {{ $auction->auction_date->format('M d, Y h:i A') }}</p>
                                                    <button class="view-btn">View Details</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="auction-card">
                                        <div class="auction-info">
                                            <p style="padding:16px;color:#888;">No upcoming auctions scheduled.</p>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </section>
                    </section>

                    <!-- Notifications & Action -->

                    <section class="full-content-section notification">
                        <section class="content-section cont-heading">
                            <div class="section-header">
                                <h2>Notifications & Action</h2>
                                <a class="view-txt" href="#">
                                    Mark all as read
                                </a>
                            </div>
                        </section>
                        <section class="content-section">
                            <div class="auction-list">
                                @forelse ($notifications as $notification)
                                    <div class="notification_box {{ $notification['type'] }}">
                                        <div class="icon">
                                            @if ($notification['type'] === 'warning')
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.0002 7.49979V9.16646M10.0002 12.4998H10.0085M4.22685 15.8331H15.7735C17.0568 15.8331 17.8585 14.444 17.2168 13.3331L11.4435 3.33312C10.8018 2.22229 9.19851 2.22229 8.55685 3.33312L2.78351 13.3331C2.14185 14.444 2.94351 15.8331 4.22685 15.8331L10.0002 7.49979" stroke="#F97316" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            @else
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M4.1665 10.834L7.49984 14.1673L15.8332 5.83398" stroke="#10B981" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            @endif
                                        </div>
                                        <div class="text">
                                            {{ $notification['text'] }}
                                        </div>
                                    </div>
                                @empty
                                    <div class="notification_box success">
                                        <div class="text" style="padding:8px;">
                                            You're all caught up. No pending actions.
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </section>
                    </section>

                </div>
            </div>
@endsection

@section('scripts')

@endsection