@extends('admin.layouts.app')


@section('title', $client->name . ' | PG Finsev Admin')


@section('page-title', 'Client Details')


@section(
    'page-description',
    'View and manage complete client information'
)


@push('styles')

<style>

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

    .client-content {
        padding: 30px;
    }


    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 18px;
        color: #1769e0;
        font-size: 10px;
        font-weight: 700;
        text-decoration: none;
    }

    .back-link:hover {
        text-decoration: underline;
    }


    /* =====================================================
       ALERTS
    ====================================================== */

    .client-alert {
        margin-bottom: 18px;
        padding: 12px 15px;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 700;
    }

    .client-alert-success {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .client-alert-error {
        background: #fff1f2;
        border: 1px solid #fecdd3;
        color: #be123c;
    }

    .client-alert ul {
        margin: 5px 0 0 18px;
    }


    /* =====================================================
       PROFILE HEADER
    ====================================================== */

    .profile-header {
        background: white;
        border: 1px solid #e3eaf4;
        border-radius: 15px;
        padding: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 20px;
    }


    .profile-main {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: 0;
    }


    .big-avatar {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf2ff;
        color: #1769e0;
        font-size: 21px;
        font-weight: 800;
        flex-shrink: 0;
    }


    .profile-info {
        min-width: 0;
    }


    .profile-info h2 {
        font-size: 18px;
        color: #1d3557;
    }


    .profile-info p {
        margin-top: 4px;
        color: #8b98aa;
        font-size: 10px;
    }


    .profile-meta {
        margin-top: 8px;
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }


    .meta-item {
        color: #64748b;
        font-size: 9px;
    }


    .client-badge {
        padding: 7px 11px;
        border-radius: 20px;
        background: #eaf8ef;
        color: #287646;
        font-size: 9px;
        font-weight: 800;
        flex-shrink: 0;
    }


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

    .status-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 20px;
    }


    .status-card {
        background: white;
        border: 1px solid #e3eaf4;
        border-radius: 13px;
        padding: 16px;
    }


    .status-card-label {
        color: #8b98aa;
        font-size: 9px;
        font-weight: 700;
        margin-bottom: 9px;
    }


    .status-card-value {
        font-size: 13px;
        font-weight: 800;
    }


    .green {
        color: #287646;
    }

    .orange {
        color: #b7791f;
    }

    .gray {
        color: #64748b;
    }

    .red {
        color: #be123c;
    }


    /* =====================================================
       DETAILS GRID
    ====================================================== */

    .details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }


    .details-card {
        background: white;
        border: 1px solid #e3eaf4;
        border-radius: 15px;
        overflow: hidden;
    }


    .details-card.full {
        grid-column: 1 / -1;
    }


    .details-card-header {
        padding: 17px 20px;
        border-bottom: 1px solid #edf1f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .details-card-header h3 {
        font-size: 13px;
        color: #273b59;
    }


    .details-card-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaf2ff;
        font-size: 13px;
    }


    .details-card-body {
        padding: 20px;
    }


    .detail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    .detail-item label {
        display: block;
        margin-bottom: 6px;
        color: #9aa6b6;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .4px;
    }


    .detail-value {
        display: block;
        color: #344966;
        font-size: 11px;
        font-weight: 600;
        word-break: break-word;
    }


    .empty-value {
        color: #a7b0bd !important;
        font-weight: 500 !important;
    }


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

    .client-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 9px;
        border-radius: 20px;
        font-size: 8px;
        font-weight: 800;
    }


    .client-status.success {
        background: #eaf8ef;
        color: #287646;
    }


    .client-status.pending {
        background: #fff7e8;
        color: #b7791f;
    }


    .client-status.locked {
        background: #f1f5f9;
        color: #64748b;
    }


    .client-status.danger {
        background: #fff1f2;
        color: #be123c;
    }


    .status-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }


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

    .kyc-actions {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid #edf1f6;
    }


    .action-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }


    .verify-btn,
    .reject-btn,
    .cancel-btn,
    .confirm-reject-btn {
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 10px;
        font-weight: 800;
        cursor: pointer;
        transition: .2s;
    }


    .verify-btn {
        border: 0;
        background: #16a34a;
        color: white;
    }


    .verify-btn:hover {
        background: #15803d;
    }


    .reject-btn {
        border: 0;
        background: #dc2626;
        color: white;
    }


    .reject-btn:hover {
        background: #b91c1c;
    }


    .cancel-btn {
        border: 1px solid #d1d5db;
        background: white;
        color: #64748b;
    }


    .confirm-reject-btn {
        border: 0;
        background: #dc2626;
        color: white;
    }


    /* =====================================================
       REJECT BOX
    ====================================================== */

    .reject-box {
        display: none;
        margin-top: 15px;
        padding: 16px;
        background: #fff7f7;
        border: 1px solid #fecaca;
        border-radius: 10px;
    }


    .reject-box.show {
        display: block;
    }


    .reject-label {
        display: block;
        margin-bottom: 7px;
        font-size: 10px;
        font-weight: 800;
        color: #7f1d1d;
    }


    .reject-textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #fecaca;
        border-radius: 8px;
        resize: vertical;
        font-size: 11px;
        outline: none;
        background: white;
    }


    .reject-textarea:focus {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, .08);
    }


    .reject-buttons {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }


    /* =====================================================
       KYC NOTICE
    ====================================================== */

    .security-notice {
        margin-top: 15px;
        padding: 12px 14px;
        border-radius: 9px;
        background: #f8fafc;
        border: 1px solid #e7edf4;
        color: #64748b;
        font-size: 9px;
        line-height: 1.6;
    }


    .verified-box {
        padding: 12px 15px;
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        border-radius: 9px;
        color: #166534;
        font-size: 10px;
        font-weight: 700;
    }


    .rejected-box {
        padding: 14px 15px;
        background: #fff1f2;
        border: 1px solid #fecdd3;
        border-radius: 9px;
    }


    .rejected-title {
        color: #be123c;
        font-size: 10px;
        font-weight: 800;
    }


    .rejected-reason {
        margin-top: 7px;
        color: #7f1d1d;
        font-size: 10px;
        line-height: 1.6;
    }


    /* =====================================================
       DOCUMENT BUTTON
    ====================================================== */

    .document-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 9px;
        border-radius: 7px;
        background: #eaf2ff;
        color: #1769e0;
        font-size: 8px;
        font-weight: 800;
        text-decoration: none;
    }


    .document-link:hover {
        background: #1769e0;
        color: white;
    }


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

    .payment-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 14px 0;
        border-bottom: 1px solid #edf1f6;
    }


    .payment-row:last-child {
        border-bottom: 0;
    }


    .payment-info strong {
        display: block;
        font-size: 10px;
        color: #344966;
    }


    .payment-info span {
        display: block;
        margin-top: 4px;
        color: #9aa6b6;
        font-size: 8px;
    }


    .payment-amount {
        text-align: right;
    }


    .payment-amount strong {
        display: block;
        color: #273b59;
        font-size: 11px;
    }


    .payment-amount span {
        display: block;
        margin-top: 4px;
    }


    /* =====================================================
       CARD UNLOCK ACTION
    ====================================================== */

    .unlock-card-box {
        margin-top: 15px;
        padding: 14px;
        background: #f8fafc;
        border: 1px solid #e7edf4;
        border-radius: 10px;
    }

    .unlock-card-btn {
        border: 0;
        background: #1769e0;
        color: white;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 10px;
        font-weight: 800;
        cursor: pointer;
        transition: .2s;
    }

    .unlock-card-btn:hover {
        background: #1256b8;
    }

    .unlock-card-help {
        margin-top: 7px;
        color: #64748b;
        font-size: 8px;
    }

    /* =====================================================
       MOBILE
    ====================================================== */

    @media (max-width: 1050px) {

        .status-grid {
            grid-template-columns: repeat(2, 1fr);
        }

    }


    @media (max-width: 800px) {

        .client-content {
            padding: 18px;
        }


        .details-grid {
            grid-template-columns: 1fr;
        }


        .details-card.full {
            grid-column: auto;
        }


        .profile-header {
            align-items: flex-start;
            flex-direction: column;
        }

    }


    @media (max-width: 550px) {

        .status-grid {
            grid-template-columns: 1fr;
        }


        .detail-grid {
            grid-template-columns: 1fr;
        }


        .client-content {
            padding: 14px;
        }


        .profile-main {
            align-items: flex-start;
        }


        .payment-row {
            align-items: flex-start;
            flex-direction: column;
        }


        .payment-amount {
            text-align: left;
        }

    }

</style>

@endpush



@section('content')


<div class="client-content">


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


    @if(session('success'))

        <div class="client-alert client-alert-success">

            ✓ {{ session('success') }}

        </div>

    @endif


    @if(session('error'))

        <div class="client-alert client-alert-error">

            ✕ {{ session('error') }}

        </div>

    @endif


    @if($errors->any())

        <div class="client-alert client-alert-error">

            <strong>
                Please check the following:
            </strong>

            <ul>

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif



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


    <a
        href="{{ route('admin.clients') }}"
        class="back-link"
    >

        ← Back to Clients

    </a>



    {{-- =====================================================
         LOAD DATA
    ====================================================== --}}


    @php

        $profile =
            $client->clientProfile;

        $kyc =
            $client->clientKyc;

        $employment =
            $client->clientEmployment;

        $hasPaidPayment =
            $payments
                ->where('status', 'paid')
                ->count() > 0;

        $cardUnlockPayment =
            $payments->first(function ($payment) {
                return $payment->status === 'paid'
                    && str_starts_with(
                        (string) $payment->order_id,
                        'CARD-UNLOCK-'
                    );
            });

    @endphp



    {{-- =====================================================
         PROFILE HEADER
    ====================================================== --}}


    <section class="profile-header">


        <div class="profile-main">


            <div class="big-avatar">

                {{ strtoupper(
                    substr(
                        $client->name,
                        0,
                        1
                    )
                ) }}

            </div>


            <div class="profile-info">


                <h2>
                    {{ $client->name }}
                </h2>


                <p>
                    Client ID #{{ $client->id }}
                </p>


                <div class="profile-meta">


                    <span class="meta-item">

                        ✉ {{ $client->email }}

                    </span>


                    <span class="meta-item">

                        📱
                        {{ $client->mobile ?? 'Not available' }}

                    </span>


                </div>


            </div>


        </div>


        <div class="client-badge">

            CLIENT

        </div>


    </section>



    {{-- =====================================================
         STATUS SUMMARY
    ====================================================== --}}


    <section class="status-grid">


        {{-- PERSONAL --}}


        <div class="status-card">

            <div class="status-card-label">
                Personal Details
            </div>


            @if($profile)

                <div class="status-card-value green">

                    ✓ Complete

                </div>

            @else

                <div class="status-card-value orange">

                    ! Pending

                </div>

            @endif

        </div>



        {{-- KYC --}}


        <div class="status-card">

            <div class="status-card-label">
                KYC Verification
            </div>


            @if(!$kyc)

                <div class="status-card-value orange">

                    ! Pending

                </div>


            @elseif($kyc->status === 'verified')

                <div class="status-card-value green">

                    ✓ Verified

                </div>


            @elseif($kyc->status === 'rejected')

                <div class="status-card-value red">

                    ✕ Rejected

                </div>


            @else

                <div class="status-card-value orange">

                    ! Pending

                </div>

            @endif

        </div>



        {{-- EMPLOYMENT --}}


        <div class="status-card">

            <div class="status-card-label">
                Employment
            </div>


            @if($employment)

                <div class="status-card-value green">

                    ✓ Submitted

                </div>

            @else

                <div class="status-card-value orange">

                    ! Pending

                </div>

            @endif

        </div>



        {{-- PAYMENT --}}


        <div class="status-card">

            <div class="status-card-label">
                Card Payment
            </div>


            @if($hasPaidPayment)

                <div class="status-card-value green">

                    ✓ Paid

                </div>

            @else

                <div class="status-card-value gray">

                    Locked

                </div>

            @endif

        </div>


    </section>



    {{-- =====================================================
         DETAILS GRID
    ====================================================== --}}


    <section class="details-grid">


        {{-- =================================================
             PERSONAL DETAILS
        ================================================== --}}


        <div class="details-card">


            <div class="details-card-header">

                <h3>
                    Personal Details
                </h3>


                <div class="details-card-icon">
                    👤
                </div>

            </div>


            <div class="details-card-body">


                @if($profile)


                    <div class="detail-grid">


                        <div class="detail-item">

                            <label>
                                Full Name
                            </label>

                            <span class="detail-value">

                                {{ $profile->full_name
                                    ?? $client->name
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Date of Birth
                            </label>

                            <span class="detail-value">

                                @if($profile->date_of_birth)

                                    {{ \Carbon\Carbon::parse(
                                        $profile->date_of_birth
                                    )->format('d M Y') }}

                                @else

                                    <span class="empty-value">
                                        Not provided
                                    </span>

                                @endif

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Mobile
                            </label>

                            <span class="detail-value">

                                {{ $profile->mobile
                                    ?? $client->mobile
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                City
                            </label>

                            <span class="detail-value">

                                {{ $profile->city
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                State
                            </label>

                            <span class="detail-value">

                                {{ $profile->state
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Pincode
                            </label>

                            <span class="detail-value">

                                {{ $profile->pincode
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div
                            class="detail-item"
                            style="grid-column:1 / -1;"
                        >

                            <label>
                                Address
                            </label>

                            <span class="detail-value">

                                {{ $profile->address
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                    </div>


                @else

                    <span class="empty-value">

                        Personal details have not been
                        submitted yet.

                    </span>

                @endif


            </div>


        </div>



        {{-- =================================================
             EMPLOYMENT
        ================================================== --}}


        <div class="details-card">


            <div class="details-card-header">

                <h3>
                    Employment Details
                </h3>


                <div class="details-card-icon">
                    💼
                </div>

            </div>


            <div class="details-card-body">


                @if($employment)


                    <div class="detail-grid">


                        <div class="detail-item">

                            <label>
                                Employment Type
                            </label>

                            <span class="detail-value">

                                {{ ucfirst(
                                    str_replace(
                                        '_',
                                        ' ',
                                        $employment->employment_type
                                    )
                                ) }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Company
                            </label>

                            <span class="detail-value">

                                {{ $employment->company_name
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Job Title
                            </label>

                            <span class="detail-value">

                                {{ $employment->job_title
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Monthly Income
                            </label>

                            <span class="detail-value">

                                @if(
                                    $employment->monthly_income !== null
                                )

                                    ₹{{ number_format(
                                        $employment->monthly_income,
                                        2
                                    ) }}

                                @else

                                    Not provided

                                @endif

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Work Experience
                            </label>

                            <span class="detail-value">

                                {{ $employment->work_experience
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                        <div class="detail-item">

                            <label>
                                Office City
                            </label>

                            <span class="detail-value">

                                {{ $employment->office_city
                                    ?? 'Not provided'
                                }}

                            </span>

                        </div>


                    </div>


                @else

                    <span class="empty-value">

                        Employment details have not been
                        submitted yet.

                    </span>

                @endif


            </div>


        </div>



        {{-- =================================================
             KYC
        ================================================== --}}


        <div class="details-card full">


            <div class="details-card-header">

                <h3>
                    KYC Details
                </h3>


                <div class="details-card-icon">
                    🪪
                </div>

            </div>


            <div class="details-card-body">


                @if($kyc)


                    @php

                        $aadhaar =
                            $kyc->aadhaar_number;

                        $pan =
                            $kyc->pan_number;


                        /*
                        |--------------------------------------------------------------------------
                        | Try decrypting KYC values
                        |--------------------------------------------------------------------------
                        */

                        try {

                            if ($aadhaar) {

                                $aadhaar =
                                    \Illuminate\Support\Facades\Crypt::decryptString(
                                        $aadhaar
                                    );

                            }

                        } catch (\Throwable $e) {

                            // Keep original value.

                        }


                        try {

                            if ($pan) {

                                $pan =
                                    \Illuminate\Support\Facades\Crypt::decryptString(
                                        $pan
                                    );

                            }

                        } catch (\Throwable $e) {

                            // Keep original value.

                        }


                        /*
                        |--------------------------------------------------------------------------
                        | Aadhaar Mask
                        |--------------------------------------------------------------------------
                        */

                        if ($aadhaar) {

                            $aadhaarDigits =
                                preg_replace(
                                    '/\D/',
                                    '',
                                    $aadhaar
                                );


                            if (
                                strlen(
                                    $aadhaarDigits
                                ) >= 4
                            ) {

                                $aadhaarDisplay =
                                    'XXXX XXXX ' .
                                    substr(
                                        $aadhaarDigits,
                                        -4
                                    );

                            } else {

                                $aadhaarDisplay =
                                    'XXXX';

                            }

                        } else {

                            $aadhaarDisplay =
                                null;

                        }


                        /*
                        |--------------------------------------------------------------------------
                        | PAN Mask
                        |--------------------------------------------------------------------------
                        */

                        if ($pan) {

                            $panClean =
                                strtoupper(
                                    trim($pan)
                                );


                            if (
                                strlen(
                                    $panClean
                                ) >= 4
                            ) {

                                $panDisplay =
                                    'XXXXXX' .
                                    substr(
                                        $panClean,
                                        -4
                                    );

                            } else {

                                $panDisplay =
                                    'XXXX';

                            }

                        } else {

                            $panDisplay =
                                null;

                        }

                    @endphp



                    <div class="detail-grid">


                        {{-- STATUS --}}


                        <div class="detail-item">

                            <label>
                                KYC Status
                            </label>


                            <span class="detail-value">


                                @if(
                                    $kyc->status === 'verified'
                                )

                                    <span
                                        class="client-status success"
                                    >

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

                                        Verified

                                    </span>


                                @elseif(
                                    $kyc->status === 'rejected'
                                )

                                    <span
                                        class="client-status danger"
                                    >

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

                                        Rejected

                                    </span>


                                @else

                                    <span
                                        class="client-status pending"
                                    >

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

                                        Pending Verification

                                    </span>

                                @endif


                            </span>

                        </div>



                        {{-- AADHAAR --}}


                        <div class="detail-item">

                            <label>
                                Aadhaar Number
                            </label>


                            <span class="detail-value">

                                @if($aadhaarDisplay)

                                    {{ $aadhaarDisplay }}

                                @else

                                    <span class="empty-value">
                                        Not provided
                                    </span>

                                @endif

                            </span>

                        </div>



                        {{-- PAN --}}


                        <div class="detail-item">

                            <label>
                                PAN Number
                            </label>


                            <span class="detail-value">

                                @if($panDisplay)

                                    {{ $panDisplay }}

                                @else

                                    <span class="empty-value">
                                        Not provided
                                    </span>

                                @endif

                            </span>

                        </div>



                        {{-- AADHAAR DOCUMENT --}}


                        <div class="detail-item">

                            <label>
                                Aadhaar Document
                            </label>


                            <span class="detail-value">


                                @if(
                                    !empty(
                                        $kyc->aadhaar_document
                                    )
                                )

                                    <a
                                        href="{{ route(
                                            'admin.kyc.aadhaar',
                                            $client
                                        ) }}"
                                        target="_blank"
                                        class="document-link"
                                    >

                                        👁 View Aadhaar

                                    </a>

                                @else

                                    <span
                                        class="client-status pending"
                                    >

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

                                        Not Uploaded

                                    </span>

                                @endif


                            </span>

                        </div>



                        {{-- PAN DOCUMENT --}}


                        <div class="detail-item">

                            <label>
                                PAN Document
                            </label>


                            <span class="detail-value">


                                @if(
                                    !empty(
                                        $kyc->pan_document
                                    )
                                )

                                    <a
                                        href="{{ route(
                                            'admin.kyc.pan',
                                            $client
                                        ) }}"
                                        target="_blank"
                                        class="document-link"
                                    >

                                        👁 View PAN

                                    </a>

                                @else

                                    <span
                                        class="client-status pending"
                                    >

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

                                        Not Uploaded

                                    </span>

                                @endif


                            </span>

                        </div>



                        {{-- SUBMITTED DATE --}}


                        <div class="detail-item">

                            <label>
                                Submitted Date
                            </label>


                            <span class="detail-value">

                                @if($kyc->created_at)

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

                                @else

                                    Not available

                                @endif

                            </span>

                        </div>


                    </div>



                    {{-- =================================================
                         KYC ACTIONS
                    ================================================== --}}


                    <div class="kyc-actions">


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


                            <div class="action-row">


                                {{-- VERIFY --}}


                                <form
                                    method="POST"
                                    action="{{ route(
                                        'admin.kyc.verify',
                                        $client
                                    ) }}"
                                >

                                    @csrf


                                    <button
                                        type="submit"
                                        class="verify-btn"
                                        onclick="
                                            return confirm(
                                                'Are you sure you want to verify this KYC?'
                                            )
                                        "
                                    >

                                        ✓ Verify KYC

                                    </button>


                                </form>



                                {{-- REJECT --}}


                                <button
                                    type="button"
                                    class="reject-btn"
                                    onclick="showRejectBox()"
                                >

                                    ✕ Reject KYC

                                </button>


                            </div>



                            {{-- REJECTION FORM --}}


                            <div
                                id="rejectBox"
                                class="reject-box"
                            >


                                <form
                                    method="POST"
                                    action="{{ route(
                                        'admin.kyc.reject',
                                        $client
                                    ) }}"
                                >

                                    @csrf


                                    <label
                                        class="reject-label"
                                    >

                                        Rejection Reason

                                    </label>


                                    <textarea
                                        name="rejection_reason"
                                        class="reject-textarea"
                                        rows="4"
                                        maxlength="1000"
                                        required
                                        placeholder="Enter the reason for rejecting this KYC..."
                                    ></textarea>


                                    <div class="reject-buttons">


                                        <button
                                            type="submit"
                                            class="confirm-reject-btn"
                                        >

                                            Confirm Rejection

                                        </button>


                                        <button
                                            type="button"
                                            class="cancel-btn"
                                            onclick="hideRejectBox()"
                                        >

                                            Cancel

                                        </button>


                                    </div>


                                </form>


                            </div>


                        @elseif(
                            $kyc->status === 'verified'
                        )


                            <div class="verified-box">

                                ✓ KYC Verified


                                @if($kyc->verified_at)

                                    <span
                                        style="
                                            font-weight:500;
                                            margin-left:5px;
                                            color:#65a30d;
                                        "
                                    >

                                        on
                                        {{ $kyc->verified_at->format(
                                            'd M Y, h:i A'
                                        ) }}

                                    </span>

                                @endif

                            </div>

                            {{-- CARD UNLOCK PAYMENT --}}

                            @if($cardUnlockPayment)

                                <div
                                    class="unlock-card-box"
                                    style="background:#ecfdf3;border:1px solid #bbf7d0;"
                                >

                                    <div
                                        style="color:#15803d;font-weight:800;font-size:11px;"
                                    >
                                        ✓ Card Unlocked
                                    </div>

                                    <div
                                        class="unlock-card-help"
                                        style="color:#166534;"
                                    >
                                        Payment of ₹{{ number_format((float)$cardUnlockPayment->amount, 2) }} completed
                                        @if($cardUnlockPayment->paid_at)
                                            on {{ $cardUnlockPayment->paid_at->format('d M Y, h:i A') }}
                                        @endif
                                    </div>

                                </div>

                            @else

                                <div class="unlock-card-box">

                                    <form
                                        method="POST"
                                        action="{{ route('admin.card.unlock', $client) }}"
                                        onsubmit="return confirm('Confirm card unlock payment of ₹{{ number_format((float)($loanSettings->card_unlock_amount ?? 199), 2) }}?')"
                                    >

                                        @csrf

                                        <button
                                            type="submit"
                                            class="unlock-card-btn"
                                        >
                                            💳 Unlock Card ₹{{ number_format((float)($loanSettings->card_unlock_amount ?? 199), 2) }}
                                        </button>

                                        <div class="unlock-card-help">
                                            This uses the Card Unlock Amount configured in Loan Settings.
                                        </div>

                                    </form>

                                </div>

                            @endif


                        @elseif(
                            $kyc->status === 'rejected'
                        )


                            <div class="rejected-box">


                                <div class="rejected-title">

                                    ✕ KYC Rejected

                                </div>


                                @if(
                                    $kyc->rejection_reason
                                )

                                    <div
                                        class="rejected-reason"
                                    >

                                        <strong>
                                            Reason:
                                        </strong>

                                        {{ $kyc->rejection_reason }}

                                    </div>

                                @endif


                            </div>


                        @endif


                    </div>



                    <div class="security-notice">

                        🔒

                        <strong>
                            Privacy protected:
                        </strong>

                        Aadhaar and PAN numbers are masked
                        in the admin overview. Only the last
                        four characters are displayed.

                    </div>


                @else


                    <span class="empty-value">

                        KYC details have not been submitted yet.

                    </span>


                @endif


            </div>


        </div>



        {{-- =================================================
             PAYMENT HISTORY
        ================================================== --}}


        <div class="details-card full">


            <div class="details-card-header">

                <h3>
                    Payment History
                </h3>


                <div class="details-card-icon">
                    💰
                </div>

            </div>


            <div class="details-card-body">


                @forelse(
                    $payments as $payment
                )


                    <div class="payment-row">


                        <div class="payment-info">


                            <strong>

                                {{ $payment->order_id
                                    ?? $payment->payment_id
                                    ?? 'Payment #' . $payment->id
                                }}

                            </strong>


                            <span>

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

                            </span>


                        </div>



                        <div class="payment-amount">


                            <strong>

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

                            </strong>



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

                                <span
                                    class="client-status success"
                                >

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

                                    Paid

                                </span>


                            @elseif(
                                in_array(
                                    $payment->status,
                                    [
                                        'pending',
                                        'created'
                                    ]
                                )
                            )

                                <span
                                    class="client-status pending"
                                >

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

                                    Pending

                                </span>


                            @else

                                <span
                                    class="client-status danger"
                                >

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

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

                                </span>

                            @endif


                        </div>


                    </div>


                @empty


                    <span class="empty-value">

                        No payment records found.

                    </span>


                @endforelse


            </div>


        </div>


    </section>


</div>


@endsection



@push('scripts')

<script>

    function showRejectBox()
    {
        const box =
            document.getElementById(
                'rejectBox'
            );


        if (box) {

            box.classList.add(
                'show'
            );


            const textarea =
                box.querySelector(
                    'textarea'
                );


            if (textarea) {

                textarea.focus();

            }

        }
    }


    function hideRejectBox()
    {
        const box =
            document.getElementById(
                'rejectBox'
            );


        if (box) {

            box.classList.remove(
                'show'
            );

        }
    }

</script>

@endpush