@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>Contact</th>
                            <th>Email</th>
                            <th>View</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $index => $user)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->contact ?? 'N/A' }}</td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <button type="button" class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#userModal{{ $user->id }}">View More
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>


                @foreach ($users as $user)
                    <!-- User Details Modal -->
                    <div class="modal fade" id="userModal{{ $user->id }}" tabindex="-1"
                        aria-labelledby="userModalLabel{{ $user->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-xl modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">User Details - {{ $user->name }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <!-- Basic Details -->
                                    <h5>Basic Details</h5>
                                    <table class="table table-bordered">
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Mobile</th>
                                            <th>Referral</th>
                                        </tr>
                                        <tr>
                                            <td>{{ $user->user_id }}</td>
                                            <td>{{ $user->name }}</td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->contact }}</td>
                                            <td>{{ $user->referral }}</td>
                                        </tr>
                                    </table>

                                    <!-- Booking List Placeholder -->
                                    <h5>Total Booking List</h5>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Sr.No</th>
                                                <th>Service Name</th>
                                                <th>Amount (₹)</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($user->bookings as $index => $booking)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ $booking->service->title ?? 'N/A' }}</td>
                                                    <td>{{ number_format($booking->amount, 2) }}</td>
                                                    <td>
                                                        @if ($booking->status == 'pending')
                                                            <span class="badge bg-warning">Pending</span>
                                                        @elseif ($booking->status == 'confirmed')
                                                            <span class="badge bg-info">Confirmed</span>
                                                        @elseif ($booking->status == 'completed')
                                                            <span class="badge bg-success">Completed</span>
                                                        @else
                                                            <span class="badge bg-danger">Cancelled</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center">No Bookings Found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>


                                    <!-- Referral List Placeholder -->
                                    <h5>Total Referral & Earn List</h5>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Sr.No</th>
                                                <th>User Name</th>
                                                <th>Coins Added (₹)</th>
                                                <th>Date/Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php $sr = 1; @endphp
                                            @forelse ($user->referredUsers as $referred)
                                                @php
                                                    // us user ke coins nikale (maan ke chal raha hu 'transactions' table me save ho raha)
                                                    $coins = $referred->transactions->sum('amount');
                                                    $time = optional($referred->transactions->first())->created_at;
                                                @endphp
                                                <tr>
                                                    <td>{{ $sr++ }}</td>
                                                    <td>{{ $referred->name }}</td>
                                                    <td>{{ $coins }}</td>
                                                    <td>{{ $time ? $time->format('d-m-Y / H:i') : 'N/A' }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="4" class="text-center">No Referrals Found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>

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

            </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: 0px 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;
        }

        th {
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;
        }

        td {
            font-size: 14px;
            font-weight: 400;
        }

        tr {
            border-bottom: 1px solid #e6eff5;
        }

        .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