@extends('layout')

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

    <div class="managing_main_div">
        <div class="review_heading">
            <h2 class="text-3xl">Users List</h2>
        </div>

        <div class="content_div">
            <div class="user_div">
                <table id="usersTable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr.No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact</th>
                            <th>Total Amount</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $index => $user)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->contact ?? 'N/A' }}</td>
                                <td>₹ {{ number_format($user->wallet, 2) }}</td>

                                <td class="text-center">
                                    <button type="button" class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#payNowModal{{ $user->id }}">
                                        Pay Now
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>

           @foreach ($users as $index => $user)
    <!-- Pay Now Modal -->
    <div class="modal fade" id="payNowModal{{ $user->id }}" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-4">
                <div class="modal-header">
                    <h5 class="modal-title">Pay Now - {{ $user->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- ✅ Form -->
                <form action="{{ route('users.wallet.pay') }}" method="POST">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ $user->id }}">

                    <div class="modal-body">
                        <p><strong>User:</strong> {{ $user->name }}</p>
                        <p><strong>Current Amount:</strong> ₹ {{ number_format($user->wallet, 2) }}</p>

                        <div class="mt-3">
                            <label for="enterAmount{{ $user->id }}" class="form-label">Enter Amount</label>
                            <input type="number" 
                                   class="form-control" 
                                   id="enterAmount{{ $user->id }}" 
                                   name="amount" 
                                   placeholder="Enter amount" 
                                   max="{{ $user->wallet }}" 
                                   required>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit"
                            class="RedirectButton bg-red-500 text-white px-3 py-1 rounded text-xs">
                            Pay Now
                        </button>
                    </div>
                </form>
                <!-- ✅ Form end -->

            </div>
        </div>
    </div>
@endforeach

        </div>
    </div>

    <!-- jQuery + DataTables CDN -->
    <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>

    <!-- DataTables Initialization Script -->
    <script>
        $(document).ready(function() {
            $('#usersTable').DataTable({
                scrollY: '400px',
                scrollCollapse: true,
                paging: true
            });
        });
    </script>

    <!-- Styling -->
    <style>
        .managing_main_div {
            display: flex;
            gap: 20px;
            flex-direction: column;
            padding: 0 20px;
        }

        .review_heading h2 {
            font-size: 18px;
            color: #2ca5d6;
        }

        .content_div {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                0 1px 2px rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

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

        th,
        td {
            padding: 8px;
            border-bottom: 1px solid #e6eff5;
            font-size: 14px;
        }

        th {
            font-weight: 500;
            color: #2ca5d6;
            text-align: left;
        }

        td {
            font-weight: 400;
        }

        .RedirectButton {
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            border-radius: 40px;
            padding: 5px 20px;
            background: linear-gradient(100deg, #2ca5d6, #32cd32);
            color: #fff;
            border: none;
        }

        /* Optional: Fix DataTable scroll body border */
    </style>
@endsection