@extends('layouts.admin.app')

@section('title', 'Dashboard')
@push('style')
    <style>
        .stat-value span.per {
            width: auto;
            float: right;
            font-size: 12px;
            color: #10B981;
            margin-top: 20px;
        }

        .stat-value span.per.down {
            color: #EF4444;
        }
    </style>
@endpush

@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">{{ $registeredPlayers ?? 0 }}
                    @php($playersChange = $playersChange ?? 0)
                    <span class="per {{ $playersChange < 0 ? 'down' : 'up' }}">{{ $playersChange >= 0 ? '+' : '' }}{{ $playersChange }}%
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="{{ $playersChange < 0 ? 'transform: scaleY(-1);' : '' }}" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.20015 4.2C6.869 4.2 6.60015 3.93115 6.60015 3.6C6.60015 3.26885 6.869 3 7.20015 3H10.2001C10.5315 3 10.8001 3.26863 10.8001 3.6V6.6C10.8001 6.93115 10.5313 7.2 10.2001 7.2C9.869 7.2 9.60015 6.93115 9.60015 6.6V5.0484L7.02435 7.6242C6.79005 7.85843 6.41025 7.85843 6.17595 7.6242L4.80015 6.2484L2.22435 8.8242C1.98892 9.05158 1.6147 9.04833 1.38326 8.81689C1.15182 8.58545 1.14856 8.21123 1.37595 7.9758L4.37595 4.9758C4.61025 4.74157 4.99005 4.74157 5.22435 4.9758L6.60015 6.3516L8.75175 4.2H7.20015Z" fill="{{ $playersChange < 0 ? '#EF4444' : '#3DCF86' }}" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="stat-card" data-color="red">
                <div class="stat-label">Registered Team Owners</div>
                <div class="stat-value">
                    {{ $registeredTeamOwners ?? 0 }}
                    @php($teamOwnersChange = $teamOwnersChange ?? 0)
                    <span class="per {{ $teamOwnersChange < 0 ? 'down' : 'up' }}">{{ $teamOwnersChange >= 0 ? '+' : '' }}{{ $teamOwnersChange }}%
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="{{ $teamOwnersChange < 0 ? 'transform: scaleY(-1);' : '' }}" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.20015 4.2C6.869 4.2 6.60015 3.93115 6.60015 3.6C6.60015 3.26885 6.869 3 7.20015 3H10.2001C10.5315 3 10.8001 3.26863 10.8001 3.6V6.6C10.8001 6.93115 10.5313 7.2 10.2001 7.2C9.869 7.2 9.60015 6.93115 9.60015 6.6V5.0484L7.02435 7.6242C6.79005 7.85843 6.41025 7.85843 6.17595 7.6242L4.80015 6.2484L2.22435 8.8242C1.98892 9.05158 1.6147 9.04833 1.38326 8.81689C1.15182 8.58545 1.14856 8.21123 1.37595 7.9758L4.37595 4.9758C4.61025 4.74157 4.99005 4.74157 5.22435 4.9758L6.60015 6.3516L8.75175 4.2H7.20015Z" fill="{{ $teamOwnersChange < 0 ? '#EF4444' : '#3DCF86' }}" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="stat-card" data-color="purple">
                <div class="stat-label">Auction Status</div>
                {{-- <div class="stat-value">Live <span class="running">RUNNING</span></div> --}}
                <div class="stat-value">{{ $auctionStatus['value'] ?? 'Idle' }} <span class="{{ $auctionStatus['class'] ?? 'running' }}">{{ $auctionStatus['label'] ?? 'NONE' }}</span></div>
            </div>
            <div class="stat-card" data-color="green">
                <div class="stat-label">Active Sponsors</div>
                <div class="stat-value">{{ $activeSponsors ?? 0 }} <span class="stable">Stable</span></div>
            </div>
        </div>
        <div class="quick-actions">
            <h3>Quick Actions</h3>

            <div class="actions">
                <div 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>
                </div>

                <div class="card" onclick="redirectTo('{{ route('admin.leagues.index') }}')">
                    <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>
                </div>

                <div class="card" onclick="redirectTo('{{ route('admin.rules.index') }}')">
                    <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>
                </div>

                <div class="card" onclick="redirectTo('{{ route('admin.report.index') }}')">
                    <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>
                </div>
            </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="{{ route('admin.leagues.index') }}">View All</a>
                    </div>
                </section>
                <section class="content-section">
                    <div class="auction-list">
                        @forelse ($upcomingAuctions as $item)
                            <div class="auction-card">
                                <div class="auction-img">
                                    <img src="{{ $item->bannerUrl() ?? asset('assets/admin/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="{{ $item->logoUrl() ?? asset('assets/admin/images/dashboard-cont.png') }}" alt="" class="cont-img">
                                            <h3>{{ $item->name }}</h3>
                                        </div>
                                        <div class="d-flex">
                                            <hr class="set-line">
                                            <p>{{ $item->formattedAuctionAt() ? 'Start: ' . $item->formattedAuctionAt() : 'To be announced' }}</p>
                                            <a href="{{ route('admin.leagues.upcoming', $item) }}" class="view-btn">View Details</a>
                                        </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">
                        
                        @foreach ($notifications as $notification)
                            <div class="notification_box {{ $notification['type'] === 'warning' ? 'warning' : 'success' }}">
                                <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>
                            
                        @endforeach
                        {{-- <div class="notification_box warning">
                            <div class="icon">
                                <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>
                            </div>
                            <div class="text">
                                12 player applications pending approval. Review and act.
                            </div>
                        </div>

                        <!-- Success -->
                        <div class="notification_box success">
                            <div class="icon">
                                <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>
                            </div>
                            <div class="text">
                                Sponsor request from MediaGroup India awaiting review.
                            </div>
                        </div>

                        <!-- Success -->
                        <div class="notification_box success">
                            <div class="icon">
                                <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>
                            </div>
                            <div class="text">
                                Auction started for Football League · 18 bids placed so far.
                            </div>
                        </div> --}}
                    </div>
                </section>
            </section>

        </div>
    </div>
@endsection

@push('script')
    <script>
        function redirectTo(route) {
            window.location.href = route;
        }
    </script>
@endpush