@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">Partner 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 ($partners as $index => $partner)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $partner->name }}</td>
                                <td>{{ $partner->email }}</td>
                                <td>{{ $partner->contact }}</td>
                                <td>₹ {{ number_format($partner->earnings, 2) }}</td>
                                <td class="text-center">
                                    <button type="button" class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#payNowModal{{ $partner->id }}">
                                        Pay Now
                                    </button>
                                </td>
                            </tr>

                            <!-- Pay Now Modal -->
                            <div class="modal fade" id="payNowModal{{ $partner->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 - {{ $partner->name }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form action="{{ route('partners.wallet.pay') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="partner_id" value="{{ $partner->id }}">
                                            <div class="modal-body">
                                                <p><strong>Partner:</strong> {{ $partner->name }}</p>
                                                <p><strong>Current Earnings:</strong> ₹
                                                    {{ number_format($partner->earnings, 2) }}</p>
                                                <div class="mt-3">
                                                    <label for="enterAmount{{ $partner->id }}" class="form-label">Enter
                                                        Amount</label>
                                                    <input type="number" class="form-control"
                                                        id="enterAmount{{ $partner->id }}" name="amount"
                                                        placeholder="Enter amount" max="{{ $partner->earnings }}" 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>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </tbody>
                </table>

            </div>

            {{-- <!-- Pay Now Modal -->
            <div class="modal fade" id="payNowModal" tabindex="-1" aria-labelledby="payNowModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="payNowModalLabel">Pay Now</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p><strong>User:</strong> Demo User</p>
                            <p><strong>Current Amount:</strong> ₹ 0.00</p>
                            <div class="mt-3">
                                <label for="enterAmount" class="form-label">Enter Amount</label>
                                <input type="number" class="form-control" id="enterAmount" placeholder="Enter amount">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="RedirectButton" data-bs-dismiss="modal">
                                Pay Now
                            </button>
                        </div>
                    </div>
                </div>
            </div> --}}

        </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