@if ($user->network_status == Status::NetworkPlanPurchased)
    <section id="donation-receiver-section">
        <div class="my-3">
            @if ($payments->where('payer_user_id', $user->id)->where('status', 1)->count() != 7)
                <h3 class="card-title text-center text-primary">
                    @lang('You have got :sym :amount discount to donate these :receivers_count members', [
                        'sym' => $general->cur_sym,
                        'amount' => $plan->donation * $plan->receivers_count,
                        'receivers_count' => $plan->receivers_count,
                    ])
                </h3>

                <h4 class="card-title text-center">
                    @lang('Donate :symbol:amount Each', [
                        'symbol' => $general->cur_sym,
                        'amount' => $plan->donation,
                    ])
                </h4>
            @endif
        </div>
    </section>
@elseif($user->network_status == Status::NetworkFullActivated)
    <section id="donation-receiver-section">
        <div class="my-3">
            <h3 class="card-title text-center">@lang('Your Donations')</h3>
        </div>
    </section>
@endif

<div class="col-lg-12 my-5">

    <div class="row g-3">
        @forelse($referralUsers as $user)
            <div class="col-md-6 col-xl-4">
                <div class="card custom--card primary-bg">
                    <div class="card-body donation-details">
                        @php
                            $bankDetails = collect($user->kyc_data)->mapWithKeys(function ($item) {
                                $key = $item->name;
                                $key = str($key)->headline()->toString();
                                $value = $item->value;
                                return [$key => $value];
                            });

                            $qrCodeFile = '/' . getFilePath('verify') . '/' . $bankDetails['Upi Qr Code'];

                        @endphp

                        <p class="detail"><b>@lang('Doner'):</b> <span
                                class="detail-value">#{{ $loop->index + 1 }}</span> </p>
                        <p class="detail"><b>@lang('Name'):</b> <span class="detail-value"> {{ $user->fullname }}
                            </span> </p>
                        <p class="detail"><b>@lang('Contact'):</b> <span
                                class="detail-value">+{{ $user->mobile ?? '' }}</span></p>
                        <p class="detail"><b>@lang('Bank Name'):</b>
                            <span class="detail-value">{{ $bankDetails['Bank Name'] ?? 'N/A' }}</span>
                        </p>
                        <p class="detail"><b>@lang('Bank Account Number'):</b><span class="detail-value">
                                {{ $bankDetails['Bank Account No'] ?? 'N/A' }}</span></p>
                        <p class="detail"><b>@lang('Bank IFSC Code'):</b>
                            <span class="detail-value">{{ $bankDetails['Bank Ifsc'] ?? 'N/A' }}</span>
                        </p>
                        <p class="detail"><b>@lang('UPI ID'):</b>
                            <span id="upi-id-{{ $user->id }}"
                                class="detail-value">{{ $bankDetails['Upi Id'] ?? 'N/A' }}</span>
                            <button type="button" class="btn btn-sm btn--info ms-3" data-userid="{{ $user->id }}"
                                onclick="copyToClipboard('upi-id-{{ $user->id }}')">@lang('Copy')</button>
                            @if (@$qrCodeFile)
                                <button type="button" class="btn btn-sm btn--secondary qrShowBtn"
                                    data-bs-toggle="modal" data-src="{{ url($qrCodeFile) }}"
                                    data-bs-target="#qrCodeModal" data-title="UPI QR Code">
                                    View QR
                                </button>
                            @endif
                        </p>

                        @php
                            $userPayment = $payments->where('receiver_user_id', $user->id)->first();
                        @endphp

                        @if ($userPayment)
                            <div class="d-flex justify-content-center my-4">
                                {!! $userPayment->statusBadge !!}
                            </div>
                        @endif

                        <div class="button-group text-center">
                            @if ($userPayment)
                                @php
                                    $screenshot = getFilePath('withdrawMethod') . '/' . $userPayment->screen_short;
                                    $userPayment->screen_short = getImage($screenshot, getFileSize('withdrawMethod'));
                                @endphp

                                @if ($userPayment->status != Status::Approved)
                                    <button type="button" class="btn btn--primary uploadScreenshotModalBtn"
                                        data-bs-toggle="modal" data-bs-target="#uploadScreenshotModal"
                                        data-userid="{{ $user->id }}"
                                        data-action="{{ route('user.donations.store', ['id' => $userPayment->id]) }}"
                                        data-payment="{{ $userPayment }}">
                                        <i class="las la-pen"></i>
                                    </button>
                                @endif
                                <button type="button" class="btn btn--info showDetailsModalBtn" data-bs-toggle="modal"
                                    data-bs-target="#showDetailsModal" data-userid="{{ $user->id }}"
                                    data-payment="{{ $userPayment }}">
                                    <i class="las la-eye"></i>
                                </button>
                                @if ($userPayment->status != Status::Approved)
                                    <button type="button" class="btn btn--danger deleteConfirmationBtn"
                                        data-bs-toggle="modal" data-bs-target="#deleteConfirmationModal"
                                        data-userid="{{ $user->id }}"
                                        data-action="{{ route('user.donations.delete', $userPayment->id) }}"
                                        data-payment="{{ $userPayment }}">
                                        <i class="las la-trash-alt"></i>
                                    </button>
                                @endif
                            @else
                                <button type="button" class="btn btn--primary uploadScreenshotModalBtn"
                                    data-bs-toggle="modal" data-bs-target="#uploadScreenshotModal"
                                    data-action="{{ route('user.donations.store') }}"
                                    data-userid="{{ $user->id }}">
                                    @lang('Upload Screenshot')
                                </button>
                            @endif
                        </div>

                    </div>

                </div>
            </div>

        @empty
            <div class="col-md-12">
                <p>No users found</p>
            </div>
        @endforelse
    </div>
</div>


<div class="modal fade" id="uploadScreenshotModal" tabindex="-1" aria-labelledby="verifyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="verifyModalLabel">@lang('Upload Payment Detials')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('user.donations.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="receiver_user_id" id="item_id" value="">
                    <div class="form-group">
                        <label for="utr_number">@lang('UTR Number')</label>
                        <input type="text" class="form-control" id="utr_number" name="utr_no"
                            placeholder="@lang('Enter UTR Number')" required>
                    </div>
                    <div class="form-group">
                        <label for="screen_shot">@lang('Screen Shot')</label>
                        <input type="file" class="form-control" id="screen_shot" name="screen_short"
                            accept=".png, .jpg, .jpeg" required>
                    </div>

                    <div class="form-group">
                        <label for="payment_mode">@lang('Payment Mode')</label>
                        <select class="form-control" id="payment_mode" name="payment_mode" required>
                            <option value="">@lang('Select One')</option>
                            <option value="{{ Status::PaymentModeBank }}">@lang('Bank Transfer')</option>
                            <option value="{{ Status::PaymentModeUpi }}">@lang('UPI')</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn--primary">@lang('Submit')</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showDetailsModal" tabindex="-1" aria-labelledby="showDetailsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showDetailsModalLabel">@lang('Details')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <img src="" alt="" class="img-fluid rounded-3 shadow-sm" width="300"
                            height="300">
                        <p class="text-center mt-3">
                            <span class="utr_no font-weight-bold">@lang('UTR No:')</span>
                            <span class="text-primary ms-2" id="utr_no"></span>
                        </p>
                        <p class="text-center mt-3">
                            <span class="utr_no font-weight-bold">@lang('Payment Mode:')</span>
                            <span class="text-primary ms-2" id="payment_mode"></span>
                        </p>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">@lang('Delete Confirmation')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-center">@lang('Are you sure you want to delete this payment?')</p>
            </div>
            <div class="modal-footer">
                <form id="deleteForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="receiver_user_id" id="delete_user_id" value="">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">@lang('Cancel')</button>
                    <button type="submit" class="btn btn-danger">@lang('Delete')</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="qrCodeModal" tabindex="-1" aria-labelledby="qrCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="qrCodeModalLabel">@lang('UPI QR Code')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="my-4">
                    <div class="spinner-wrapper" style="display:none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">@lang('Loading...')</span>
                        </div>
                    </div>
                    <img src="" alt="qr_code" id="qrCodeImage" width="400" height="400"
                        style="display: none; max-width:100%; height:auto;">
                </div>
            </div>
        </div>
    </div>
</div>

@push('script')
    <script>
        $(document).on('click', '.qrShowBtn', function() {
            var qrCodeSrc = $(this).data('src');
            $('#qrCodeImage').attr('src', '');
            $('#qrCodeModal .spinner-wrapper').show();
            $('#qrCodeModal').modal('show');
            $('#qrCodeImage').attr('src', qrCodeSrc);
            $('#qrCodeImage').on('load', function() {
                $('#qrCodeModal .spinner-wrapper').hide();
                $(this).show();
            });
        });
    </script>
@endpush


@push('style')
    <style>
        .card-body.donation-details {
            .detail {
                color: #fff;
                font-size: 14px;
                font-weight: 600;
            }

            .detail-value {
                color: #f99f0b;
                font-size: 18px;
                font-weight: 600;
            }
        }
    </style>
@endpush
