@extends('admin.layouts.app')
@section('styles')
@endsection

@section('content')
    <div class="content_area feedmanagement finance_management">
        <!-- Stats Grid -->
        <div class="stats-grid">
            <div class="stat-card box1" data-color="yellow">
                <div class="stat-label">Total Funds</div>
                <div class="stat-value">$75,00,000</div>
                <span class="per">
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M0.816667 7L0 6.18333L4.31667 1.8375L6.65 4.17083L9.68333 1.16667H8.16667V0H11.6667V3.5H10.5V1.98333L6.65 5.83333L4.31667 3.5L0.816667 7Z"
                            fill="#A0E86F" />
                    </svg>
                    +12.5% from last month</span>
            </div>
            <div class="stat-card box2" data-color="red">
                <div class="stat-label">Total Spent</div>
                <div class="stat-value">$48,00,000</div>
                <span class="per">
                    <svg width="13" height="10" viewBox="0 0 13 10" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M7.58333 5.25C7.09722 5.25 6.68403 5.07986 6.34375 4.73958C6.00347 4.39931 5.83333 3.98611 5.83333 3.5C5.83333 3.01389 6.00347 2.60069 6.34375 2.26042C6.68403 1.92014 7.09722 1.75 7.58333 1.75C8.06944 1.75 8.48264 1.92014 8.82292 2.26042C9.16319 2.60069 9.33333 3.01389 9.33333 3.5C9.33333 3.98611 9.16319 4.39931 8.82292 4.73958C8.48264 5.07986 8.06944 5.25 7.58333 5.25ZM3.5 7C3.17917 7 2.90451 6.88576 2.67604 6.65729C2.44757 6.42882 2.33333 6.15417 2.33333 5.83333V1.16667C2.33333 0.845833 2.44757 0.571181 2.67604 0.342708C2.90451 0.114236 3.17917 0 3.5 0H11.6667C11.9875 0 12.2622 0.114236 12.4906 0.342708C12.7191 0.571181 12.8333 0.845833 12.8333 1.16667V5.83333C12.8333 6.15417 12.7191 6.42882 12.4906 6.65729C12.2622 6.88576 11.9875 7 11.6667 7H3.5ZM4.66667 5.83333H10.5C10.5 5.5125 10.6142 5.23785 10.8427 5.00938C11.0712 4.7809 11.3458 4.66667 11.6667 4.66667V2.33333C11.3458 2.33333 11.0712 2.2191 10.8427 1.99063C10.6142 1.76215 10.5 1.4875 10.5 1.16667H4.66667C4.66667 1.4875 4.55243 1.76215 4.32396 1.99063C4.09549 2.2191 3.82083 2.33333 3.5 2.33333V4.66667C3.82083 4.66667 4.09549 4.7809 4.32396 5.00938C4.55243 5.23785 4.66667 5.5125 4.66667 5.83333ZM11.0833 9.33333H1.16667C0.845833 9.33333 0.571181 9.2191 0.342708 8.99063C0.114236 8.76215 0 8.4875 0 8.16667V1.75H1.16667V8.16667H11.0833V9.33333ZM3.5 5.83333V1.16667V5.83333Z"
                            fill="#BABABA" />
                    </svg>942 Total Transactions</span>
            </div>
            <div class="stat-card box3" data-color="green">
                <div class="stat-label">Available Balance</div>
                <div class="stat-value">$27,00,000</div>
                <span class="per">
                    <div class="progress-bar">
                        <div class="progress-fill"></div>
                    </div>
                </span>
            </div>
            <div class="stat-card box4" data-color="green">
                <div class="stat-label">Pending Payments</div>
                <div class="stat-value">$5,50,000</div>
                <span class="per">
                    <svg width="13" height="12" viewBox="0 0 13 12" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M0 11.0833L6.41667 0L12.8333 11.0833H0ZM2.0125 9.91667H10.8208L6.41667 2.33333L2.0125 9.91667ZM6.41667 9.33333C6.58194 9.33333 6.72049 9.27743 6.83229 9.16562C6.9441 9.05382 7 8.91528 7 8.75C7 8.58472 6.9441 8.44618 6.83229 8.33438C6.72049 8.22257 6.58194 8.16667 6.41667 8.16667C6.25139 8.16667 6.11285 8.22257 6.00104 8.33438C5.88924 8.44618 5.83333 8.58472 5.83333 8.75C5.83333 8.91528 5.88924 9.05382 6.00104 9.16562C6.11285 9.27743 6.25139 9.33333 6.41667 9.33333ZM5.83333 7.58333H7V4.66667H5.83333V7.58333Z"
                            fill="#EFAB36" />
                    </svg>
                    14 actions required</span>
            </div>
        </div>

        <div class="filter-card">

            <div class="filter-grid">

                <div class="field">

                    <div class="label">
                        Date Range
                    </div>

                    <div class="date-wrap">

                        <input id="dateRange" placeholder="Select Date Range">

                        <div class="calendar">
                            <svg width="18" height="18" viewBox="0 0 24 24">
                                <path fill="#fff" d="M19 4h-1V2h-2v2H8V2H6v2H5a2
                                2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2
                                2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0
                                15H5V9h14z" />
                            </svg>
                        </div>

                    </div>

                </div>

                <div class="field">

                    <div class="label">
                        League
                    </div>

                    <div class="select-wrap">

                        <select id="league">
                            <option>Super League 2026</option>
                            <option>Premier League</option>
                            <option>IPL 2026</option>
                        </select>

                        <div class="arrow">
                            <svg width="14" height="14" viewBox="0 0 20 20">
                                <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>

                    </div>

                </div>

                <div class="field">

                    <div class="label">
                        Content Type
                    </div>

                    <div class="select-wrap">

                        <select id="contentType">
                            <option>All Types</option>
                            <option>Video</option>
                            <option>Image</option>
                            <option>Article</option>
                        </select>

                        <div class="arrow">
                            <svg width="14" height="14" viewBox="0 0 20 20">
                                <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>

                    </div>

                </div>


                <div class="field">

                    <div class="label">
                        Status
                    </div>

                    <div class="select-wrap">

                        <select id="status">
                            <option>All Status</option>
                            <option>Published</option>
                            <option>Draft</option>
                            <option>Archived</option>
                        </select>

                        <div class="arrow">
                            <svg width="14" height="14" viewBox="0 0 20 20">
                                <path d="M5 7L10 12L15 7" stroke="white" stroke-width="2" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="final_squads">
            <div class="right-box">

                <div class="top-bar">
                    <h3>Final Squads &amp; Player List</h3>
                </div>

                <div class="table-box">
                    <div class="table-card">

                        <table>

                            <thead>
                                <tr>
                                    <th>Transaction ID</th>
                                    <th>User</th>
                                    <th>Payment Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr>
                                    <td>TXN-10234</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-purple">RS</div>
                                            <div>
                                                <div class="name">Rahul Sharma</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Player Entry Fee</td>

                                    <td class="amount">$2,000</td>

                                    <td>
                                        <span class="badge paid">Paid</span>
                                    </td>

                                    <td class="date">
                                        20<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn view">View</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10235</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-green">TS</div>
                                            <div>
                                                <div class="name">Titan Sports</div>
                                                <div class="role">Team Owner</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Owner Entry Fee</td>

                                    <td class="amount">$10,000</td>

                                    <td>
                                        <span class="badge pending">Pending</span>
                                    </td>

                                    <td class="date">
                                        20<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn remind">Remind</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10236</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-red">AV</div>
                                            <div>
                                                <div class="name">Aman Verma</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Subscription</td>

                                    <td class="amount">$499</td>

                                    <td>
                                        <span class="badge failed">Failed</span>
                                    </td>

                                    <td class="date">
                                        19<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn retry">Retry</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10237</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-purple">JD</div>
                                            <div>
                                                <div class="name">John Doe</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Player Entry Fee</td>

                                    <td class="amount">$2,000</td>

                                    <td>
                                        <span class="badge paid">Paid</span>
                                    </td>

                                    <td class="date">
                                        19<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn view">View</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10237</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-purple">JD</div>
                                            <div>
                                                <div class="name">John Doe</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Player Entry Fee</td>

                                    <td class="amount">$2,000</td>

                                    <td>
                                        <span class="badge paid">Paid</span>
                                    </td>

                                    <td class="date">
                                        19<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn view">View</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10236</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-red">AV</div>
                                            <div>
                                                <div class="name">Aman Verma</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Subscription</td>

                                    <td class="amount">$499</td>

                                    <td>
                                        <span class="badge failed">Failed</span>
                                    </td>

                                    <td class="date">
                                        19<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn retry">Retry</button>
                                    </td>
                                </tr>

                                <tr>
                                    <td>TXN-10237</td>

                                    <td>
                                        <div class="user">
                                            <div class="avatar avatar-purple">JD</div>
                                            <div>
                                                <div class="name">John Doe</div>
                                                <div class="role">Player</div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>Player Entry Fee</td>

                                    <td class="amount">$2,000</td>

                                    <td>
                                        <span class="badge paid">Paid</span>
                                    </td>

                                    <td class="date">
                                        19<br>Mar<br>2026
                                    </td>

                                    <td>
                                        <button class="btn view">View</button>
                                    </td>
                                </tr>

                            </tbody>

                        </table>

                        <div class="footer">

                            <div class="records">
                                Pagination ▼ &nbsp;&nbsp; Total Records: 06
                            </div>

                            <div class="pagination">
                                <button class="page-btn">‹</button>
                                <button class="page-btn active">1</button>
                                <button class="page-btn">2</button>
                                <button class="page-btn">3</button>
                                <button class="page-btn">›</button>
                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
@endsection