@pushonce('style')
    <style>
        .card-custom {
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 55px;
        }

        .card-header-custom {
            border-top-left-radius: 15px !important;
            border-top-right-radius: 15px !important;
        }

        .profile-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin-top: -50px;
            border: 3px solid #ffffff;
        }

        .key {
            font-weight: bold;
            color: #ffffff;
            font-size: 18px;
        }

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

@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'];

    $profileImage = getImage(getFilePath('adminProfile') . '/' . $user->image, getFileSize('adminProfile'));

    $indicatorClass = 'bg-secondary';

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

    if ($userPayment) {
        if ($userPayment->status == Status::Approved) {
            $indicatorClass = 'bg-success';
        } elseif ($userPayment->status == Status::Rejected) {
            $indicatorClass = 'bg-danger';
        } else {
            $indicatorClass = 'bg-warning';
        }
    }
@endphp


<div class="col-md-6 col-lg-4 mb-80">
    <div class="card card-custom border-0 primary-bg">
        <div class="card-header {{ $indicatorClass }} text-white text-center card-header-custom position-relative">
            <!-- User Profile Image -->
            <img src="{{ $profileImage }}" alt="User Image" class="profile-img mx-auto d-block">
            <h6 class="mt-2 text-white">Payment Details</h6>
            <div class="d-flex justify-content-center mt-2 my-1">
                @if ($userPayment)
                    {!! $userPayment->statusBadge !!}
                @else
                <span class="badge opacity-0">Pending</span>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-2">
                <div class="col-5 key">Donor:</div>
                <div class="col-7 value">#{{ $loop->index + 1 }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">User ID:</div>
                <div class="col-7 value">{{ $user->system_id }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">Name:</div>
                <div class="col-7 value"> {{ $user->fullname }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">Contact:</div>
                <div class="col-7 value">{{ $user->mobile ?? '' }}</div>
            </div>
            <hr>
            <div class="row mb-2">
                <div class="col-5 key">Bank Name:</div>
                <div class="col-7 value">{{ $bankDetails['Bank Name'] ?? 'N/A' }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">Bank Account:</div>
                <div class="col-7 value">{{ $bankDetails['Bank Account Number'] ?? 'N/A' }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">Bank IFSC:</div>
                <div class="col-7 value">{{ $bankDetails['Bank Ifsc'] ?? 'N/A' }}</div>
            </div>
            <div class="row mb-2">
                <div class="col-5 key">UPI ID:</div>
                <div class="col-7 value">
                    <span>{{ $bankDetails['Upi Id'] ?? 'N/A' }}</span> <br>
                    <span>
                        <button type="button" class="btn btn-sm btn--info ms-3" data-userid="{{ $user->id }}"
                            onclick="copyTextToClipboard('{{ $bankDetails['Upi 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
                    </span>
                </div>
            </div>
            <hr>


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

@pushonce('script')
<script>
    function copyTextToClipboard(text) {
        var input = document.createElement('input');
        input.setAttribute('value', text);
        document.body.appendChild(input);
        input.select();
        var result = document.execCommand('copy');
        document.body.removeChild(input);
        notify('success', 'UPI ID copied to clipboard');
        return result;
    }
</script>
@endpushonce
