@extends('user.layout')

@section('content')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <style>
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        table.dataTable th,
        table.dataTable td {
            text-align: center;
            vertical-align: middle;
        }

        .status-active {
            color: #28a745;
            font-weight: bold;
        }

        .status-inactive {
            color: #dc3545;
            font-weight: bold;
        }
    </style>
    <div class="container my-4">
        <!-- Search Section -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <form action="{{ route('search_team') }}" method="POST">
                @csrf
                <div class="d-flex gap-2 align-items-end">
                    <div>
                        <label for="packageDropdown" class="form-label fw-bold">Select Team</label>
                        <select id="packageDropdown" name="position" class="form-select">
                            <option value="" disabled selected>Select Position</option>
                            <option value="left">Left</option>
                            <option value="right">Right</option>
                        </select>

                    </div>

                    <button type="submit" class="btn btn-primary">Search</button>
                    <a href="{{ route('user.level_team') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
        <div class="container my-4">
            <!-- Card with Datatable -->
            <div class="card p-3">
                <div class="table-responsive">
                    <table id="userTable" class="table table-hover table-borderless">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>Join Date</th>
                                <th>User ID</th>
                                <th>Name</th>
                                <!-- <th>Position</th> -->
                                <th>Earnings</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        @php
                            $sn = 1;
                        @endphp
                        <tbody>
                            @foreach ($datatables as $data)
                                @php
                                    $user = DB::table('users')->where('user_id', $data->child_id)->first();
                                    $earnings = DB::table('income_wallets')->where('user_id', $data->child_id)->first();
                                @endphp
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $data->created_at }}</td>
                                    <td>{{ $user->created_at }}</td>
                                    <td>{{ $data->child_id }}</td>
                                    <td>{{ $user->name }}</td>
                                    <!-- <td>{{ $data->position }}</td> -->
                                    <td>{{ $earnings->total_earnings ?? 0 }}</td>
                                    <td>{{ $user->is_active == 0 ? 'Inactive' : 'Active' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- jQuery and DataTables JS -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#userTable').DataTable();
            });
        </script>
    @endsection