@extends('layouts.admin.app')

@section('title', 'Finance Management')

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@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

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>

        flatpickr("#dateRange", {
            mode: "range",
            dateFormat: "M d, Y",
            defaultDate: ["2026-03-01", "2026-03-20"]
        });

        document
            .getElementById('contentType')
            .addEventListener('change', e => {
                console.log(e.target.value);
            });

        document
            .getElementById('status')
            .addEventListener('change', e => {
                console.log(e.target.value);
            });

        document
            .getElementById('league')
            .addEventListener('change', e => {
                console.log(e.target.value);
            });

    </script>
@endpush