<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Withdraw Reports</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-start {
            justify-content: start;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            background-color: white;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th,
        td {
            padding: 8px;
            text-align: left;
        }

        success-badge {
            color: white;
            background-color: green;
            padding: 5px;
            border-radius: 100%;
        }

        warning-badge {
            color: white;
            background-color: orange;
            padding: 5px;
            border-radius: 100%;
        }

        danger-badge {
            color: white;
            background-color: red;
            padding: 5px;
            border-radius: 100%;
        }

        secondary-badge {
            color: white;
            background-color: gray;
            padding: 5px;
            border-radius: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>Withdrawals Report</h2>
        <table>
            <thead>
                <tr>
                    <th>User|ID</th>
                    <th>Tracking Id</th>
                    <th>Amount</th>
                    <th>Coins</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $item)
                    <tr>
                        <td>
                            <a href="{{ route('admin.users.edit', $item->user?->id) }}" class="flex flex-col items-start">
                                <p>{{ $item?->user?->full_name }}</p>
                                <span>{{ $item?->user?->username }}</span>
                            </a>
                        </td>
                        <td>{{ $item->track }}</td>
                        <td>{{ amountWithSymbol($item->amount) }}</td>
                        <td>{{ $item?->coins }}</td>
                        <td>
                            @if ($item->status == \App\Enums\DepositStatusEnum::CONFIRMED)
                                <span
                                    style="color: white; background-color: green; padding: 5px; padding-left: 10px; padding-right: 10px;border-radius: 100%;">{{ $item->status }}</span>
                            @elseif ($item->status == \App\Enums\DepositStatusEnum::PENDING)
                                <span
                                    style="color: white; background-color: orange; padding: 5px; padding-left: 10px; padding-right: 10px;border-radius: 100%;">{{ $item->status }}</span>
                            @elseif ($item->status == \App\Enums\DepositStatusEnum::CANCELLED)
                                <span
                                    style="color: white; background-color: red; padding: 5px; padding-left: 10px; padding-right: 10px;border-radius: 100%;">{{ $item->status }}</span>
                            @else
                                <span
                                    style="color: white; background-color: gray; padding: 5px; padding-left: 10px; padding-right: 10px;border-radius: 100%;">{{ $item->status }}</span>
                            @endif
                        </td>
                        <td>{{ $item->created_at->format('d-m-Y h:i A') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>

</html>
