@extends('layouts.admin.app')

@section('title', 'My Event Auction Details')

@push('style')
@endpush

@section('content')
    <div class="upcoming_auction_detail users_list">
        <div class="breadcrumb">
            <a href="#">Dashboard</a>
            <span>›</span>
            <a href="#">Auction Events</a>
            <span>›</span>
            <span class="active">Upcoming Detail</span>
        </div>
        <div class="upcoming_header">

            <!-- LEFT -->
            <div class="left">
                <h2>International T20 Cup - Auction Detail</h2>

                <div class="meta">
                    <span>
                        <!-- Calendar Icon -->
                        <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2" />
                            <line x1="16" y1="2" x2="16" y2="6" />
                            <line x1="8" y1="2" x2="8" y2="6" />
                        </svg>
                        28 Nov 2025
                    </span>

                    <span>
                        <!-- Clock Icon -->
                        <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2">
                            <circle cx="12" cy="12" r="10" />
                            <polyline points="12 6 12 12 16 14" />
                        </svg>
                        10:30 AM
                    </span>
                </div>
            </div>

            <!-- RIGHT -->
            <div class="right">

                <!-- EDIT -->
                <a href="{{ route('admin.leagues.edit', $league) }}" class="btn btn-edit">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                        <path d="M12 20h9" />
                        <path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z" />
                    </svg>
                    Edit Event
                </a>

                <!-- CONTROL -->
                <a href="{{ route('admin.leagues.live-auction', $league) }}" class="btn btn-control">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#6b7a90" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3" />
                    </svg>
                    Control Auction
                </a>

            </div>

        </div>
        <div class="upcoming_stats">

            <div class="card">
                <div class="icon purple">
                    <svg width="30" height="15" viewBox="0 0 30 15" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M0 15V13.0312C0 12.1354 0.458333 11.4062 1.375 10.8438C2.29167 10.2812 3.5 10 5 10C5.27083 10 5.53125 10.0052 5.78125 10.0156C6.03125 10.026 6.27083 10.0521 6.5 10.0938C6.20833 10.5312 5.98958 10.9896 5.84375 11.4688C5.69792 11.9479 5.625 12.4479 5.625 12.9688V15H0ZM7.5 15V12.9688C7.5 12.3021 7.68229 11.6927 8.04688 11.1406C8.41146 10.5885 8.92708 10.1042 9.59375 9.6875C10.2604 9.27083 11.0573 8.95833 11.9844 8.75C12.9115 8.54167 13.9167 8.4375 15 8.4375C16.1042 8.4375 17.1198 8.54167 18.0469 8.75C18.974 8.95833 19.7708 9.27083 20.4375 9.6875C21.1042 10.1042 21.6146 10.5885 21.9688 11.1406C22.3229 11.6927 22.5 12.3021 22.5 12.9688V15H7.5ZM24.375 15V12.9688C24.375 12.4271 24.3073 11.9167 24.1719 11.4375C24.0365 10.9583 23.8333 10.5104 23.5625 10.0938C23.7917 10.0521 24.026 10.026 24.2656 10.0156C24.5052 10.0052 24.75 10 25 10C26.5 10 27.7083 10.276 28.625 10.8281C29.5417 11.3802 30 12.1146 30 13.0312V15H24.375ZM10.1562 12.5H19.875C19.6667 12.0833 19.0885 11.7188 18.1406 11.4062C17.1927 11.0938 16.1458 10.9375 15 10.9375C13.8542 10.9375 12.8073 11.0938 11.8594 11.4062C10.9115 11.7188 10.3438 12.0833 10.1562 12.5ZM5 8.75C4.3125 8.75 3.72396 8.50521 3.23438 8.01562C2.74479 7.52604 2.5 6.9375 2.5 6.25C2.5 5.54167 2.74479 4.94792 3.23438 4.46875C3.72396 3.98958 4.3125 3.75 5 3.75C5.70833 3.75 6.30208 3.98958 6.78125 4.46875C7.26042 4.94792 7.5 5.54167 7.5 6.25C7.5 6.9375 7.26042 7.52604 6.78125 8.01562C6.30208 8.50521 5.70833 8.75 5 8.75ZM25 8.75C24.3125 8.75 23.724 8.50521 23.2344 8.01562C22.7448 7.52604 22.5 6.9375 22.5 6.25C22.5 5.54167 22.7448 4.94792 23.2344 4.46875C23.724 3.98958 24.3125 3.75 25 3.75C25.7083 3.75 26.3021 3.98958 26.7812 4.46875C27.2604 4.94792 27.5 5.54167 27.5 6.25C27.5 6.9375 27.2604 7.52604 26.7812 8.01562C26.3021 8.50521 25.7083 8.75 25 8.75ZM15 7.5C13.9583 7.5 13.0729 7.13542 12.3438 6.40625C11.6146 5.67708 11.25 4.79167 11.25 3.75C11.25 2.6875 11.6146 1.79688 12.3438 1.07812C13.0729 0.359375 13.9583 0 15 0C16.0625 0 16.9531 0.359375 17.6719 1.07812C18.3906 1.79688 18.75 2.6875 18.75 3.75C18.75 4.79167 18.3906 5.67708 17.6719 6.40625C16.9531 7.13542 16.0625 7.5 15 7.5ZM15 5C15.3542 5 15.651 4.88021 15.8906 4.64062C16.1302 4.40104 16.25 4.10417 16.25 3.75C16.25 3.39583 16.1302 3.09896 15.8906 2.85938C15.651 2.61979 15.3542 2.5 15 2.5C14.6458 2.5 14.349 2.61979 14.1094 2.85938C13.8698 3.09896 13.75 3.39583 13.75 3.75C13.75 4.10417 13.8698 4.40104 14.1094 4.64062C14.349 4.88021 14.6458 5 15 5Z"
                            fill="#7B61FF" />
                    </svg>

                </div>
                <div class="card-content">
                    <span>Total Registered Players</span>
                    <h3>84</h3>
                </div>
            </div>

            <div class="card">
                <div class="icon green">
                    <svg width="28" height="27" viewBox="0 0 28 27" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.5 26.25L7.125 22.25L2.625 21.25L3.0625 16.625L0 13.125L3.0625 9.625L2.625 5L7.125 4L9.5 0L13.75 1.8125L18 0L20.375 4L24.875 5L24.4375 9.625L27.5 13.125L24.4375 16.625L24.875 21.25L20.375 22.25L18 26.25L13.75 24.4375L9.5 26.25ZM10.5625 23.0625L13.75 21.6875L17 23.0625L18.75 20.0625L22.1875 19.25L21.875 15.75L24.1875 13.125L21.875 10.4375L22.1875 6.9375L18.75 6.1875L16.9375 3.1875L13.75 4.5625L10.5 3.1875L8.75 6.1875L5.3125 6.9375L5.625 10.4375L3.3125 13.125L5.625 15.75L5.3125 19.3125L8.75 20.0625L10.5625 23.0625ZM12.4375 17.5625L19.5 10.5L17.75 8.6875L12.4375 14L9.75 11.375L8 13.125L12.4375 17.5625Z"
                            fill="#10B981" />
                    </svg>
                </div>
                <div class="card-content">
                    <span>Confirmed Teams</span>
                    <h3>8</h3>
                </div>
            </div>

            <div class="card">
                <div class="icon orange">
                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M7.5 2.5V0H15V2.5H7.5ZM10 16.25H12.5V8.75H10V16.25ZM11.25 26.25C9.70833 26.25 8.25521 25.9531 6.89062 25.3594C5.52604 24.7656 4.33333 23.9583 3.3125 22.9375C2.29167 21.9167 1.48438 20.724 0.890625 19.3594C0.296875 17.9948 0 16.5417 0 15C0 13.4583 0.296875 12.0052 0.890625 10.6406C1.48438 9.27604 2.29167 8.08333 3.3125 7.0625C4.33333 6.04167 5.52604 5.23438 6.89062 4.64062C8.25521 4.04688 9.70833 3.75 11.25 3.75C12.5417 3.75 13.7812 3.95833 14.9688 4.375C16.1562 4.79167 17.2708 5.39583 18.3125 6.1875L20.0625 4.4375L21.8125 6.1875L20.0625 7.9375C20.8542 8.97917 21.4583 10.0938 21.875 11.2812C22.2917 12.4688 22.5 13.7083 22.5 15C22.5 16.5417 22.2031 17.9948 21.6094 19.3594C21.0156 20.724 20.2083 21.9167 19.1875 22.9375C18.1667 23.9583 16.974 24.7656 15.6094 25.3594C14.2448 25.9531 12.7917 26.25 11.25 26.25ZM11.25 23.75C13.6667 23.75 15.7292 22.8958 17.4375 21.1875C19.1458 19.4792 20 17.4167 20 15C20 12.5833 19.1458 10.5208 17.4375 8.8125C15.7292 7.10417 13.6667 6.25 11.25 6.25C8.83333 6.25 6.77083 7.10417 5.0625 8.8125C3.35417 10.5208 2.5 12.5833 2.5 15C2.5 17.4167 3.35417 19.4792 5.0625 21.1875C6.77083 22.8958 8.83333 23.75 11.25 23.75Z"
                            fill="#F59E0B" />
                    </svg>
                </div>
                <div class="card-content">
                    <span>Estimated Duration</span>
                    <h3>4h 00m</h3>
                </div>
            </div>

        </div>
        <div class="timeline-box">

            <div class="title">Auction Preparation Timeline</div>

            <div class="timeline">

                <div class="progress"></div>

                <!-- STEP 1 -->
                <div class="step completed">
                    <div class="circle">
                        <svg width="17" height="13" viewBox="0 0 17 13" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.7 12.025L0 6.325L1.425 4.9L5.7 9.175L14.875 0L16.3 1.425L5.7 12.025Z"
                                fill="white" />
                        </svg>
                    </div>
                    <p>Player Registration Closed</p>
                    <span>COMPLETED</span>
                </div>

                <!-- STEP 2 -->
                <div class="step active">
                    <div class="circle">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M0 16V14H2.75L2.35 13.65C1.48333 12.8833 0.875 12.0083 0.525 11.025C0.175 10.0417 0 9.05 0 8.05C0 6.2 0.554167 4.55417 1.6625 3.1125C2.77083 1.67083 4.21667 0.716667 6 0.25V2.35C4.8 2.78333 3.83333 3.52083 3.1 4.5625C2.36667 5.60417 2 6.76667 2 8.05C2 8.8 2.14167 9.52917 2.425 10.2375C2.70833 10.9458 3.15 11.6 3.75 12.2L4 12.45V10H6V16H0ZM10 15.75V13.65C11.2 13.2167 12.1667 12.4792 12.9 11.4375C13.6333 10.3958 14 9.23333 14 7.95C14 7.2 13.8583 6.47083 13.575 5.7625C13.2917 5.05417 12.85 4.4 12.25 3.8L12 3.55V6H10V0H16V2H13.25L13.65 2.35C14.4667 3.16667 15.0625 4.05417 15.4375 5.0125C15.8125 5.97083 16 6.95 16 7.95C16 9.8 15.4458 11.4458 14.3375 12.8875C13.2292 14.3292 11.7833 15.2833 10 15.75Z"
                                fill="white" />
                        </svg>
                    </div>
                    <p>Owner Verification</p>
                    <span>In Progress</span>
                </div>

                <!-- STEP 3 -->
                <div class="step pending">
                    <div class="circle">
                        <svg width="16" height="20" viewBox="0 0 16 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M4 18H12V15C12 13.9 11.6083 12.9583 10.825 12.175C10.0417 11.3917 9.1 11 8 11C6.9 11 5.95833 11.3917 5.175 12.175C4.39167 12.9583 4 13.9 4 15V18ZM8 9C9.1 9 10.0417 8.60833 10.825 7.825C11.6083 7.04167 12 6.1 12 5V2H4V5C4 6.1 4.39167 7.04167 5.175 7.825C5.95833 8.60833 6.9 9 8 9ZM0 20V18H2V15C2 13.9833 2.2375 13.0292 2.7125 12.1375C3.1875 11.2458 3.85 10.5333 4.7 10C3.85 9.46667 3.1875 8.75417 2.7125 7.8625C2.2375 6.97083 2 6.01667 2 5V2H0V0H16V2H14V5C14 6.01667 13.7625 6.97083 13.2875 7.8625C12.8125 8.75417 12.15 9.46667 11.3 10C12.15 10.5333 12.8125 11.2458 13.2875 12.1375C13.7625 13.0292 14 13.9833 14 15V18H16V20H0Z"
                                fill="#64748B" />
                        </svg>
                    </div>
                    <p>Final Queue Setup</p>
                    <span>PENDING</span>
                </div>
                <!-- STEP 4 -->
                <div class="step pending">
                    <div class="circle">
                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.6 7.99556L5.55 8.82056C5.78333 8.3539 6.025 7.9039 6.275 7.47056C6.525 7.03723 6.8 6.6039 7.1 6.17056L5.7 5.89556L3.6 7.99556ZM7.15 10.0706L10 12.8956C10.7 12.6289 11.45 12.2206 12.25 11.6706C13.05 11.1206 13.8 10.4956 14.5 9.79556C15.6667 8.6289 16.5792 7.33306 17.2375 5.90806C17.8958 4.48306 18.1833 3.17056 18.1 1.97056C16.9 1.88723 15.5833 2.17473 14.15 2.83306C12.7167 3.4914 11.4167 4.4039 10.25 5.57056C9.55 6.27056 8.925 7.02056 8.375 7.82056C7.825 8.62056 7.41667 9.37056 7.15 10.0706ZM11.6 8.44556C11.2167 8.06223 11.025 7.5914 11.025 7.03306C11.025 6.47473 11.2167 6.0039 11.6 5.62056C11.9833 5.23723 12.4583 5.04556 13.025 5.04556C13.5917 5.04556 14.0667 5.23723 14.45 5.62056C14.8333 6.0039 15.025 6.47473 15.025 7.03306C15.025 7.5914 14.8333 8.06223 14.45 8.44556C14.0667 8.8289 13.5917 9.02056 13.025 9.02056C12.4583 9.02056 11.9833 8.8289 11.6 8.44556ZM12.075 16.4706L14.175 14.3706L13.9 12.9706C13.4667 13.2706 13.0333 13.5414 12.6 13.7831C12.1667 14.0247 11.7167 14.2622 11.25 14.4956L12.075 16.4706ZM19.9 0.145565C20.2167 2.16223 20.0208 4.12473 19.3125 6.03306C18.6042 7.9414 17.3833 9.76223 15.65 11.4956L16.15 13.9706C16.2167 14.3039 16.2 14.6289 16.1 14.9456C16 15.2622 15.8333 15.5372 15.6 15.7706L11.4 19.9706L9.3 15.0456L5.025 10.7706L0.1 8.67056L4.275 4.47056C4.50833 4.23723 4.7875 4.07056 5.1125 3.97056C5.4375 3.87056 5.76667 3.8539 6.1 3.92056L8.575 4.42056C10.3083 2.68723 12.125 1.46223 14.025 0.745565C15.925 0.0288979 17.8833 -0.171102 19.9 0.145565ZM1.875 13.9456C2.45833 13.3622 3.17083 13.0664 4.0125 13.0581C4.85417 13.0497 5.56667 13.3372 6.15 13.9206C6.73333 14.5039 7.02083 15.2164 7.0125 16.0581C7.00417 16.8997 6.70833 17.6122 6.125 18.1956C5.70833 18.6122 5.0125 18.9706 4.0375 19.2706C3.0625 19.5706 1.71667 19.8372 0 20.0706C0.233333 18.3539 0.5 17.0081 0.8 16.0331C1.1 15.0581 1.45833 14.3622 1.875 13.9456ZM3.3 15.3456C3.13333 15.5122 2.96667 15.8164 2.8 16.2581C2.63333 16.6997 2.51667 17.1456 2.45 17.5956C2.9 17.5289 3.34583 17.4164 3.7875 17.2581C4.22917 17.0997 4.53333 16.9372 4.7 16.7706C4.9 16.5706 5.00833 16.3289 5.025 16.0456C5.04167 15.7622 4.95 15.5206 4.75 15.3206C4.55 15.1206 4.30833 15.0247 4.025 15.0331C3.74167 15.0414 3.5 15.1456 3.3 15.3456Z" fill="#64748B" />
                        </svg>
                    </div>
                    <p>Live Auction Start</p>
                    <span>SCHEDULED</span>
                </div>
            </div>
        </div>
        <div class="wrapper_box2">
            <!-- LEFT -->
            <div class="team_owners">

                <div class="left-header">
                    <h4>Participating Team Owners</h4>
                    <div class="view-all">View All</div>
                </div>

                <div class="card">
                    <div class="card-top">
                        <div class="user">
                            <img src="https://i.pravatar.cc/40">
                            <div>
                                <strong>Delhi Strikers</strong>
                                <span>Amit Patel</span>
                            </div>
                        </div>
                        <span class="badge verified">Verified</span>
                    </div>
                    <div class="line"></div>
                    <div class="bottom">Budget: <strong>5,00,000</strong></div>
                </div>
                <div class="card">
                    <div class="card-top">
                        <div class="user">
                            <img src="https://i.pravatar.cc/41">
                            <div>
                                <strong>Mumbai Titans</strong>
                                <span>Vikram Singh</span>
                            </div>
                        </div>
                        <span class="badge verified">Verified</span>
                    </div>
                    <div class="line"></div>
                    <div class="bottom">Budget: <strong>4,50,000</strong></div>
                </div>
                <div class="card">
                    <div class="card-top">
                        <div class="user">
                            <img src="https://i.pravatar.cc/42">
                            <div>
                                <strong>Bangalore Blasters</strong>
                                <span>Rajesh Kumar</span>
                            </div>
                        </div>
                        <span class="badge pending">Pending</span>
                    </div>
                    <div class="line"></div>
                    <div class="bottom">Budget: <strong>5,20,000</strong></div>
                </div>
            </div>
            <!-- RIGHT -->
            <div class="right-box">
                <div class="top-bar">
                    <h3>Registered Player List</h3>
                    <div class="filter">
                        All Role
                        <svg viewBox="0 0 24 24">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th>Player</th>
                                <th>Category</th>
                                <th>Role</th>
                                <th>Base Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/50">Rohit Sharma</td>
                                <td><span class="tag core">Core</span></td>
                                <td>Batsman</td>
                                <td>2,00,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/51">Sam Curran</td>
                                <td><span class="tag star">Star</span></td>
                                <td>All-Rounder</td>
                                <td>1,50,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/52">David Warner</td>
                                <td><span class="tag icon">Icon</span></td>
                                <td>Batsman</td>
                                <td>1,00,000</td>
                            </tr>
                                <tr>
                                <td class="player"><img src="https://i.pravatar.cc/50">Rohit Sharma</td>
                                <td><span class="tag core">Core</span></td>
                                <td>Batsman</td>
                                <td>2,00,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/51">Sam Curran</td>
                                <td><span class="tag star">Star</span></td>
                                <td>All-Rounder</td>
                                <td>1,50,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/52">David Warner</td>
                                <td><span class="tag icon">Icon</span></td>
                                <td>Batsman</td>
                                <td>1,00,000</td>
                            </tr>
                                <tr>
                                <td class="player"><img src="https://i.pravatar.cc/50">Rohit Sharma</td>
                                <td><span class="tag core">Core</span></td>
                                <td>Batsman</td>
                                <td>2,00,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/51">Sam Curran</td>
                                <td><span class="tag star">Star</span></td>
                                <td>All-Rounder</td>
                                <td>1,50,000</td>
                            </tr>
                            <tr>
                                <td class="player"><img src="https://i.pravatar.cc/52">David Warner</td>
                                <td><span class="tag icon">Icon</span></td>
                                <td>Batsman</td>
                                <td>1,00,000</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
@endpush