@extends('layouts.master')
@section('title') @lang('translation.referral-requests') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.referral-requests')
@endslot
@endcomponent
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="buttons-datatables" class="display table table-bordered text-center align-middle" style="width:100%;">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Expected Referrals</th>
                                <th>Expected Investment</th>
                                <th>Referral Code</th>
                                <th>Request Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $count = 1; @endphp
                            @foreach ($referrals as $referral)
                            <tr>
                                <td>{{ $count++ }}</td>
                                <td>
                                    <ul class="list list-group list-group-flush mb-0">
                                        <li class="list-group-item d-flex justify-content-center align-items-center gap-2">
                                            
                                            <div>
                                                <h5 class="contact-name fs-13 mb-1">
                                                    <a href="#" class="link text-body">{{ $referral->user->full_name ?? 'N/A' }}</a>
                                                </h5>
                                            </div>
                                        </li>
                                    </ul>
                                </td>
                                <td>{{ $referral->referral_details['expected_referrals'] }}</td>
                                <td>{{ $referral->referral_details['expected_investment'] }}</td>
                                <td>{{ $referral->referral_code }}</td>
                                <td>{{ $referral->created_at->format('d/F/Y') }}</td>
                                <td class="status text-center align-middle">
                                    <span class="badge text-uppercase 
        {{ $referral->status === 'approved' ? 'bg-success-subtle text-success' : 
           ($referral->status === 'rejected' ? 'bg-danger-subtle text-danger' : 'bg-warning-subtle text-warning') }}"
                                        id="status-badge-{{ $referral->id }}">
                                        {{ ucfirst($referral->status) }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center gap-2">
                                        <form method="POST" action="{{ route('referrals.updateStatus', $referral->id) }}" class="status-form" data-referral-id="{{ $referral->id }}">
                                            @csrf
                                            <input type="hidden" name="status" value="approved">
                                            <button class="btn btn-sm btn-success">Approve</button>
                                        </form>

                                        <form method="POST" action="{{ route('referrals.updateStatus', $referral->id) }}" class="status-form" data-referral-id="{{ $referral->id }}">
                                            @csrf
                                            <input type="hidden" name="status" value="rejected">
                                            <button class="btn btn-sm btn-danger">Reject</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
<!--end row-->

@endsection