@extends('admin.layouts.app')

@section('title', 'EMI Card Details | PG Finsev')

@section('page-title', 'EMI Card Details')

@section(
    'page-description',
    'View client EMI card information and approval details'
)


@push('styles')

<style>

    .page-heading {
        margin-bottom: 22px;
    }

    .page-heading h2 {
        color: #1d3557;
        font-size: 20px;
        font-weight: 800;
    }

    .page-heading p {
        margin-top: 5px;
        color: #8b98aa;
        font-size: 10px;
    }


    .back-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;

        height: 34px;
        padding: 0 12px;

        margin-bottom: 18px;

        border: 1px solid #dce4ef;
        border-radius: 8px;

        background: #ffffff;
        color: #64748b;

        font-size: 8px;
        font-weight: 800;

        text-decoration: none;
    }


    .back-btn:hover {
        background: #f8fafc;
    }


    /* =====================================================
       MAIN GRID
    ====================================================== */

    .card-grid {
        display: grid;
        grid-template-columns: 1.35fr .65fr;
        gap: 18px;
    }


    .panel {
        background: #ffffff;

        border: 1px solid #e3eaf3;
        border-radius: 14px;

        overflow: hidden;
    }


    .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 17px 19px;

        border-bottom: 1px solid #edf1f6;
    }


    .panel-header h3 {
        color: #273b59;

        font-size: 13px;
        font-weight: 800;
    }


    .panel-body {
        padding: 20px;
    }


    /* =====================================================
       CARD PREVIEW
    ====================================================== */

    .emi-card-preview {

        position: relative;

        min-height: 235px;

        padding: 25px;

        border-radius: 18px;

        background:
            linear-gradient(
                135deg,
                #0f2747,
                #1769e0
            );

        color: #ffffff;

        overflow: hidden;

        box-shadow:
            0 18px 40px
            rgba(23, 105, 224, .20);
    }


    .emi-card-preview::after {

        content: "";

        position: absolute;

        width: 190px;
        height: 190px;

        right: -70px;
        top: -70px;

        border-radius: 50%;

        background:
            rgba(255,255,255,.08);
    }


    .brand {
        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    .brand-name {
        font-size: 15px;
        font-weight: 900;

        letter-spacing: 1px;
    }


    .card-chip {
        width: 42px;
        height: 30px;

        border-radius: 6px;

        background:
            linear-gradient(
                135deg,
                #f7d794,
                #d6a849
            );

        opacity: .95;
    }


    .card-number-preview {

        position: relative;
        z-index: 2;

        margin-top: 45px;

        font-family:
            Consolas,
            monospace;

        font-size: 16px;

        font-weight: 800;

        letter-spacing: 2px;
    }


    .card-bottom {

        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;

        margin-top: 28px;
    }


    .card-small-label {

        display: block;

        margin-bottom: 4px;

        opacity: .65;

        font-size: 7px;

        text-transform: uppercase;
        letter-spacing: .5px;
    }


    .card-small-value {

        font-size: 10px;

        font-weight: 800;
    }


    /* =====================================================
       STATUS
    ====================================================== */

    .badge {

        display: inline-flex;

        align-items: center;

        gap: 5px;

        padding: 6px 9px;

        border-radius: 20px;

        font-size: 7px;

        font-weight: 800;
    }


    .dot {

        width: 5px;
        height: 5px;

        border-radius: 50%;

        background: currentColor;
    }


    .badge-active {

        color: #287646;

        background: #eaf8ef;
    }


    .badge-pending {

        color: #b7791f;

        background: #fff7e8;
    }


    .badge-blocked {

        color: #be123c;

        background: #fff1f2;
    }


    .badge-expired {

        color: #64748b;

        background: #f1f5f9;
    }


    /* =====================================================
       INFO GRID
    ====================================================== */

    .info-grid {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

        margin-top: 20px;
    }


    .info-item {

        padding: 13px;

        border:
            1px solid #edf1f6;

        border-radius: 9px;

        background: #fbfcfe;
    }


    .info-label {

        display: block;

        margin-bottom: 5px;

        color: #9aa6b6;

        font-size: 7px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: .4px;
    }


    .info-value {

        color: #344966;

        font-size: 10px;

        font-weight: 800;
    }


    .info-value.green {

        color: #287646;
    }


    .info-value.orange {

        color: #b7791f;
    }


    .info-value.red {

        color: #be123c;
    }


    /* =====================================================
       CLIENT
    ====================================================== */

    .client-box {

        display: flex;

        align-items: center;

        gap: 12px;

        margin-bottom: 18px;

        padding-bottom: 18px;

        border-bottom:
            1px solid #edf1f6;
    }


    .client-avatar {

        width: 45px;
        height: 45px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 11px;

        background: #eaf2ff;

        color: #1769e0;

        font-size: 13px;

        font-weight: 900;
    }


    .client-name {

        color: #273b59;

        font-size: 12px;

        font-weight: 800;
    }


    .client-contact {

        margin-top: 4px;

        color: #9aa6b6;

        font-size: 8px;

        line-height: 1.6;
    }


    /* =====================================================
       ACTIONS
    ====================================================== */

    .actions {

        display: flex;

        flex-direction: column;

        gap: 8px;

        margin-top: 20px;
    }


    .action-btn {

        width: 100%;

        min-height: 38px;

        border: 0;

        border-radius: 8px;

        font-size: 8px;

        font-weight: 800;

        cursor: pointer;
    }


    .approve-btn {

        background: #eaf8ef;

        color: #287646;
    }


    .approve-btn:hover {

        background: #d8f3e1;
    }


    .block-btn {

        background: #fff1f2;

        color: #be123c;
    }


    .limit-btn {

        background: #fff7e8;

        color: #b7791f;
    }

    .activate-btn {

        background: #eaf8ef;

        color: #287646;
    }

    .loan-summary {

        margin-top: 18px;
    }

    .loan-stat-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .loan-stat {

        padding: 12px;

        border: 1px solid #edf1f6;

        border-radius: 9px;

        background: #fbfcfe;
    }

    .loan-stat-label {

        display: block;

        margin-bottom: 5px;

        color: #9aa6b6;

        font-size: 7px;

        font-weight: 800;

        text-transform: uppercase;
    }

    .loan-stat-value {

        color: #344966;

        font-size: 10px;

        font-weight: 800;
    }


    /* =====================================================
       PAYMENT
    ====================================================== */

    .payment-row {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 11px 0;

        border-bottom:
            1px solid #edf1f6;
    }


    .payment-row:last-child {

        border-bottom: 0;
    }


    .payment-title {

        color: #344966;

        font-size: 8px;

        font-weight: 800;
    }


    .payment-date {

        margin-top: 3px;

        color: #9aa6b6;

        font-size: 7px;
    }


    .paid {

        color: #287646;

        font-size: 7px;

        font-weight: 800;
    }


    .unpaid {

        color: #b7791f;

        font-size: 7px;

        font-weight: 800;
    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 900px) {

        .card-grid {

            grid-template-columns: 1fr;

        }

    }


    @media (max-width: 600px) {

        .loan-stat-grid {
            grid-template-columns: 1fr;
        }

        .loan-stat[style*="grid-column"] {
            grid-column: auto !important;
        }

        .info-grid {

            grid-template-columns: 1fr;

        }

        .emi-card-preview {

            min-height: 210px;

        }

        .card-number-preview {

            font-size: 13px;

        }

    }

</style>

@endpush



@section('content')


{{-- =====================================================
     BACK
====================================================== --}}

<a
    href="{{ route('admin.emi-cards') }}"
    class="back-btn"
>

    ← Back to EMI Cards

</a>



{{-- =====================================================
     ALERTS
====================================================== --}}

@if(session('success'))

    <div
        style="
            padding:12px 15px;
            margin-bottom:18px;
            border-radius:9px;
            background:#ecfdf5;
            border:1px solid #bbf7d0;
            color:#166534;
            font-size:10px;
            font-weight:700;
        "
    >

        ✓ {{ session('success') }}

    </div>

@endif


@if(session('error'))

    <div
        style="
            padding:12px 15px;
            margin-bottom:18px;
            border-radius:9px;
            background:#fff1f2;
            border:1px solid #fecdd3;
            color:#be123c;
            font-size:10px;
            font-weight:700;
        "
    >

        ✕ {{ session('error') }}

    </div>

@endif



{{-- =====================================================
     PAGE HEADING
====================================================== --}}

<div class="page-heading">

    <h2>
        EMI Card Details
    </h2>

    <p>
        Complete information for this EMI card and client.
    </p>

</div>



<div class="card-grid">


    {{-- =================================================
         LEFT
    ================================================== --}}

    <div>


        {{-- CARD PREVIEW --}}

        <div class="panel">

            <div class="panel-header">

                <h3>
                    Card Preview
                </h3>


                @if(
                    $card->expires_at &&
                    $card->expires_at->isPast()
                )

                    <span class="badge badge-expired">

                        <span class="dot"></span>

                        Expired

                    </span>

                @else

                    @switch($card->status)

                        @case('active')

                            <span
                                class="badge badge-active"
                            >

                                <span class="dot"></span>

                                Active

                            </span>

                            @break


                        @case('pending')

                            <span
                                class="badge badge-pending"
                            >

                                <span class="dot"></span>

                                Pending

                            </span>

                            @break


                        @case('blocked')

                            <span
                                class="badge badge-blocked"
                            >

                                <span class="dot"></span>

                                Blocked

                            </span>

                            @break


                        @default

                            <span
                                class="badge badge-expired"
                            >

                                {{ ucfirst(
                                    $card->status
                                ) }}

                            </span>

                    @endswitch

                @endif

            </div>


            <div class="panel-body">


                <div class="emi-card-preview">


                    <div class="brand">

                        <div class="brand-name">
                            PG FINSEV
                        </div>


                        <div class="card-chip"></div>

                    </div>


                    <div class="card-number-preview">

                        {{ $card->card_number }}

                    </div>


                    <div class="card-bottom">


                        <div>

                            <span
                                class="card-small-label"
                            >
                                Card Holder
                            </span>

                            <span
                                class="card-small-value"
                            >

                                {{
                                    $card->user->name
                                    ?? 'CLIENT'
                                }}

                            </span>

                        </div>


                        <div>

                            <span
                                class="card-small-label"
                            >
                                Valid Until
                            </span>

                            <span
                                class="card-small-value"
                            >

                                {{
                                    $card->expires_at
                                        ? $card->expires_at->format(
                                            'm/Y'
                                        )
                                        : '-'
                                }}

                            </span>

                        </div>


                    </div>


                </div>


                {{-- CARD INFO --}}

                <div class="info-grid">


                    <div class="info-item">

                        <span class="info-label">
                            Card Limit
                        </span>

                        <span class="info-value">

                            ₹{{ number_format(
                                $card->card_limit ?? 0,
                                2
                            ) }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            Available Limit
                        </span>

                        <span class="info-value green">

                            ₹{{ number_format(
                                $card->available_limit ?? 0,
                                2
                            ) }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            Issued Date
                        </span>

                        <span class="info-value">

                            {{
                                $card->issued_at
                                    ? $card->issued_at->format(
                                        'd M Y'
                                    )
                                    : '-'
                            }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            Expiry Date
                        </span>

                        <span
                            class="
                                info-value
                                {{
                                    $card->expires_at &&
                                    $card->expires_at->isPast()
                                        ? 'red'
                                        : ''
                                }}
                            "
                        >

                            {{
                                $card->expires_at
                                    ? $card->expires_at->format(
                                        'd M Y'
                                    )
                                    : '-'
                            }}

                        </span>

                    </div>


                </div>


            </div>

        </div>



        {{-- CLIENT DETAILS --}}

        <div
            class="panel"
            style="margin-top:18px;"
        >

            <div class="panel-header">

                <h3>
                    Client Information
                </h3>

            </div>


            <div class="panel-body">


                <div class="client-box">


                    <div class="client-avatar">

                        {{
                            strtoupper(
                                substr(
                                    $card->user->name
                                    ?? 'C',
                                    0,
                                    1
                                )
                            )
                        }}

                    </div>


                    <div>

                        <div class="client-name">

                            {{
                                $card->user->name
                                ?? 'Unknown Client'
                            }}

                        </div>


                        <div class="client-contact">

                            {{
                                $card->user->email
                                ?? '-'
                            }}

                            <br>

                            {{
                                $card->user->mobile
                                ?? '-'
                            }}

                        </div>

                    </div>


                </div>


                <div class="info-grid">


                    <div class="info-item">

                        <span class="info-label">
                            Personal Details
                        </span>

                        <span
                            class="
                                info-value
                                {{
                                    $card->user->clientProfile
                                        ? 'green'
                                        : 'red'
                                }}
                            "
                        >

                            {{
                                $card->user->clientProfile
                                    ? '✓ Completed'
                                    : '✕ Incomplete'
                            }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            KYC
                        </span>

                        <span
                            class="
                                info-value
                                {{
                                    $card->user->clientKyc &&
                                    $card->user->clientKyc->status === 'verified'
                                        ? 'green'
                                        : 'red'
                                }}
                            "
                        >

                            {{
                                $card->user->clientKyc &&
                                $card->user->clientKyc->status === 'verified'
                                    ? '✓ Verified'
                                    : '✕ Not Verified'
                            }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            Job Details
                        </span>

                        <span
                            class="
                                info-value
                                {{
                                    $card->user->clientEmployment
                                        ? 'green'
                                        : 'red'
                                }}
                            "
                        >

                            {{
                                $card->user->clientEmployment
                                    ? '✓ Completed'
                                    : '✕ Incomplete'
                            }}

                        </span>

                    </div>


                    <div class="info-item">

                        <span class="info-label">
                            Card Status
                        </span>

                        <span class="info-value">

                            {{ ucfirst(
                                $card->status
                            ) }}

                        </span>

                    </div>


                </div>


            </div>

        </div>


    </div>



    {{-- =================================================
         RIGHT
    ================================================== --}}

    <div>


        {{-- ACTION PANEL --}}

        <div class="panel">

            <div class="panel-header">

                <h3>
                    Card Actions
                </h3>

            </div>


            <div class="panel-body">


                @php

                    $hasPaidPayment =
                        $card->user
                            ? $card->user->payments()
                                ->where(
                                    'status',
                                    'paid'
                                )
                                ->exists()
                            : false;

                    $isExpired =
                        $card->expires_at &&
                        $card->expires_at->isPast();

                @endphp


                {{-- PAYMENT STATUS --}}

                <div class="info-item">

                    <span class="info-label">
                        Payment Status
                    </span>


                    @if($hasPaidPayment)

                        <span
                            class="info-value green"
                        >

                            ✓ Payment Completed

                        </span>

                    @else

                        <span
                            class="info-value orange"
                        >

                            ⏳ Payment Pending

                        </span>

                    @endif

                </div>



                {{-- APPROVAL STATUS --}}

                <div
                    class="info-item"
                    style="margin-top:10px;"
                >

                    <span class="info-label">
                        Approval
                    </span>


                    @if($card->approved_at)

                        <span
                            class="info-value green"
                        >

                            ✓ Approved

                        </span>


                        @if($card->approver)

                            <div
                                style="
                                    margin-top:5px;
                                    color:#9aa6b6;
                                    font-size:7px;
                                "
                            >

                                By:
                                {{ $card->approver->name }}

                                <br>

                                {{
                                    $card->approved_at->format(
                                        'd M Y h:i A'
                                    )
                                }}

                            </div>

                        @endif

                    @else

                        <span
                            class="info-value orange"
                        >

                            Pending Approval

                        </span>

                    @endif

                </div>



                {{-- LIMIT UPDATE --}}

                @if(!$isExpired)

                    <form
                        method="POST"
                        action="{{ route(
                            'admin.emi-cards.limit',
                            $card
                        ) }}"
                        style="margin-top:10px;"
                    >

                        @csrf
                        @method('PUT')

                        <div
                            style="
                                display:flex;
                                gap:7px;
                                align-items:center;
                            "
                        >

                            <input
                                type="number"
                                name="card_limit"
                                value="{{ $card->card_limit ?? 0 }}"
                                min="0"
                                step="0.01"
                                required
                                style="
                                    flex:1;
                                    height:38px;
                                    padding:0 10px;
                                    border:1px solid #dce4ef;
                                    border-radius:8px;
                                    color:#344966;
                                    font-size:9px;
                                    outline:none;
                                "
                            >

                            <button
                                type="submit"
                                class="action-btn limit-btn"
                                style="width:auto;padding:0 14px;"
                                onclick="
                                    return confirm(
                                        'Update this EMI Card limit?'
                                    )
                                "
                            >
                                Update Limit
                            </button>

                        </div>

                    </form>

                @endif


                {{-- ACTIONS --}}

                <div class="actions">


                    {{-- APPROVE --}}

                    @if(
                        $card->status === 'pending'
                    )

                        @if($hasPaidPayment)

                            @if(
                                (float)
                                $card->card_limit > 0
                            )

                                <form
                                    method="POST"
                                    action="{{ route(
                                        'admin.emi-cards.approve',
                                        $card
                                    ) }}"
                                >

                                    @csrf

                                    <button
                                        type="submit"
                                        class="action-btn approve-btn"
                                        onclick="
                                            return confirm(
                                                'Approve and unlock this EMI Card?'
                                            )
                                        "
                                    >

                                        ✓ Approve & Unlock Card

                                    </button>

                                </form>

                            @else

                                <div
                                    style="
                                        padding:11px;
                                        background:#fff7e8;
                                        color:#92400e;
                                        border-radius:8px;
                                        font-size:8px;
                                        text-align:center;
                                    "
                                >

                                    Please set the loan limit
                                    before approval.

                                </div>

                            @endif

                        @else

                            <div
                                style="
                                    padding:11px;
                                    background:#fff7e8;
                                    color:#92400e;
                                    border-radius:8px;
                                    font-size:8px;
                                    text-align:center;
                                "
                            >

                                Payment must be completed
                                before approval.

                            </div>

                        @endif

                    @endif



                    {{-- BLOCK --}}

                    @if(
                        $card->status === 'active'
                    )

                        <form
                            method="POST"
                            action="{{ route(
                                'admin.emi-cards.block',
                                $card
                            ) }}"
                        >

                            @csrf

                            <button
                                type="submit"
                                class="action-btn block-btn"
                                onclick="
                                    return confirm(
                                        'Block this EMI Card?'
                                    )
                                "
                            >

                                Block EMI Card

                            </button>

                        </form>

                    @endif


                    {{-- BLOCKED → ACTIVATE --}}

                    @if(
                        $card->status === 'blocked' &&
                        !$isExpired
                    )

                        <form
                            method="POST"
                            action="{{ route(
                                'admin.emi-cards.activate',
                                $card
                            ) }}"
                        >

                            @csrf

                            <button
                                type="submit"
                                class="action-btn activate-btn"
                                onclick="
                                    return confirm(
                                        'Activate this blocked EMI Card?'
                                    )
                                "
                            >

                                ✓ Activate EMI Card

                            </button>

                        </form>

                    @endif


                </div>


            </div>

        </div>



        {{-- LOAN SUMMARY --}}

        @if(
            $card->user &&
            method_exists($card->user, 'loans')
        )

            @php
                $cardLoans = $card->user->loans()
                    ->latest('created_at')
                    ->get();
            @endphp

            <div
                class="panel loan-summary"
            >

                <div class="panel-header">

                    <h3>
                        Loan Summary
                    </h3>

                </div>

                <div class="panel-body">

                    @if($cardLoans->count())

                        @php
                            $activeLoans = $cardLoans->whereIn(
                                'status',
                                ['approved', 'disbursed', 'active', 'overdue']
                            );

                            $totalBorrowed = $cardLoans->sum(
                                fn ($loan) => (float) ($loan->loan_amount ?? 0)
                            );

                            $totalOutstanding = $cardLoans->sum(
                                fn ($loan) => (float) ($loan->outstanding_amount ?? 0)
                            );

                            $monthlyEmi = $activeLoans->sum(
                                fn ($loan) => (float) ($loan->emi_amount ?? 0)
                            );
                        @endphp

                        <div class="loan-stat-grid">

                            <div class="loan-stat">
                                <span class="loan-stat-label">Loans</span>
                                <span class="loan-stat-value">{{ $cardLoans->count() }}</span>
                            </div>

                            <div class="loan-stat">
                                <span class="loan-stat-label">Active</span>
                                <span class="loan-stat-value">{{ $activeLoans->count() }}</span>
                            </div>

                            <div class="loan-stat">
                                <span class="loan-stat-label">Total Borrowed</span>
                                <span class="loan-stat-value">
                                    ₹{{ number_format($totalBorrowed, 2) }}
                                </span>
                            </div>

                            <div class="loan-stat">
                                <span class="loan-stat-label">Outstanding</span>
                                <span class="loan-stat-value">
                                    ₹{{ number_format($totalOutstanding, 2) }}
                                </span>
                            </div>

                            <div
                                class="loan-stat"
                                style="grid-column:1 / -1;"
                            >
                                <span class="loan-stat-label">Monthly EMI</span>
                                <span class="loan-stat-value">
                                    ₹{{ number_format($monthlyEmi, 2) }}
                                </span>
                            </div>

                        </div>

                        <div style="margin-top:12px;">

                            @foreach($cardLoans->take(5) as $loan)

                                <div class="payment-row">

                                    <div>
                                        <div class="payment-title">
                                            {{ $loan->loan_number ?? 'Loan #'.$loan->id }}
                                        </div>

                                        <div class="payment-date">
                                            {{ ucfirst($loan->status ?? '—') }}
                                        </div>
                                    </div>

                                    <div style="text-align:right;">
                                        <div
                                            style="
                                                color:#273b59;
                                                font-size:9px;
                                                font-weight:800;
                                            "
                                        >
                                            ₹{{ number_format($loan->outstanding_amount ?? 0, 2) }}
                                        </div>

                                        <div
                                            style="
                                                margin-top:3px;
                                                color:#9aa6b6;
                                                font-size:7px;
                                            "
                                        >
                                            Outstanding
                                        </div>
                                    </div>

                                </div>

                            @endforeach

                        </div>

                    @else

                        <div
                            style="
                                padding:25px 0;
                                text-align:center;
                                color:#9aa6b6;
                                font-size:9px;
                            "
                        >
                            No loan records found.
                        </div>

                    @endif

                </div>

            </div>

        @endif


        {{-- PAYMENT HISTORY --}}

        <div
            class="panel"
            style="margin-top:18px;"
        >

            <div class="panel-header">

                <h3>
                    Payment History
                </h3>

            </div>


            <div class="panel-body">


                @if(
                    $card->user &&
                    $card->user->payments->count()
                )


                    @foreach(
                        $card->user->payments
                            ->sortByDesc('created_at')
                            ->take(10)
                        as $payment
                    )


                        <div class="payment-row">


                            <div>

                                <div class="payment-title">

                                    Payment

                                </div>


                                <div class="payment-date">

                                    {{
                                        $payment->created_at
                                            ? $payment->created_at->format(
                                                'd M Y h:i A'
                                            )
                                            : '-'
                                    }}

                                </div>

                            </div>


                            <div>

                                <div
                                    style="
                                        text-align:right;
                                        color:#273b59;
                                        font-size:9px;
                                        font-weight:800;
                                    "
                                >

                                    ₹{{ number_format(
                                        $payment->amount ?? 0,
                                        2
                                    ) }}

                                </div>


                                @if(
                                    $payment->status === 'paid'
                                )

                                    <div
                                        class="paid"
                                        style="text-align:right;"
                                    >

                                        ✓ Paid

                                    </div>

                                @else

                                    <div
                                        class="unpaid"
                                        style="text-align:right;"
                                    >

                                        {{ ucfirst(
                                            $payment->status
                                        ) }}

                                    </div>

                                @endif

                            </div>


                        </div>


                    @endforeach


                @else


                    <div
                        style="
                            padding:25px 0;
                            text-align:center;
                            color:#9aa6b6;
                            font-size:9px;
                        "
                    >

                        No payment records found.

                    </div>


                @endif


            </div>

        </div>


    </div>


</div>


@endsection