@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)
            @include($activeTemplate . 'partials.dashboard.donation-card', ['user' => $user])
        @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
