@extends('admin.layouts.app')

@section('title', 'KYC Verification | EMI CREDITS')

@section('page-title', 'KYC Verification')

@section(
    'page-description',
    'Review and verify client KYC documents'
)

@section('content')

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/kyc-show.css') }}">
@endpush

<div class="kyc-page">

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

    <a
        href="{{ route('admin.kyc.index') }}"
        class="kyc-back"
    >
        ← Back to KYC Verification
    </a>


    {{-- =====================================================
         CLIENT HEADER
    ====================================================== --}}

    @php

        $kyc = $client->clientKyc;

        $initial = strtoupper(
            substr(
                $client->name ?? 'C',
                0,
                1
            )
        );

    @endphp


    <div class="client-header">

        <div class="client-main">

            <div class="client-avatar-large">
                {{ $initial }}
            </div>

            <div class="client-info">

                <h2>
                    {{ $client->name ?? 'Client' }}
                </h2>

                <div class="client-contact">

                    <span>
                        ✉ {{ $client->email ?? '-' }}
                    </span>

                    <span>
                        ☎ {{ $client->mobile ?? '-' }}
                    </span>

                    <span>
                        📅 Member since
                        {{ $client->created_at
                            ? $client->created_at->format('d M Y')
                            : '-'
                        }}
                    </span>

                </div>

            </div>

        </div>


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

        <div class="client-status">

            <span class="status-label">
                KYC Status
            </span>

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

                <span class="kyc-status status-verified">
                    <span class="status-dot"></span>
                    Verified
                </span>

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

                <span class="kyc-status status-rejected">
                    <span class="status-dot"></span>
                    Rejected
                </span>

            @elseif($kyc)

                <span class="kyc-status status-pending">
                    <span class="status-dot"></span>
                    Pending
                </span>

            @else

                <span class="kyc-status status-none">
                    <span class="status-dot"></span>
                    Not Submitted
                </span>

            @endif


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

                <div class="verified-info">

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

                    @if($kyc->verified_by)
                        <br>
                        Verification completed by Admin
                    @endif

                </div>

            @endif

        </div>

    </div>


    {{-- =====================================================
         KYC DETAILS + DOCUMENTS
    ====================================================== --}}

    <div class="kyc-grid">


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

        <div class="kyc-card">

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

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

                <h3>
                    KYC Details
                </h3>

            </div>

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

                @if($kyc)

                    <div class="details-grid">


                        {{-- AADHAAR --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                Aadhaar Number
                            </span>

                            <span class="detail-value">
    {{ $kyc->masked_aadhaar }}
</span>

                        </div>


                        {{-- PAN --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                PAN Number
                            </span>

                            <span class="detail-value">
    {{ $kyc->masked_pan }}
</span>

                        </div>


                        {{-- STATUS --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                KYC Status
                            </span>

                            <span class="detail-value">
                                {{ ucfirst($kyc->status ?? '-') }}
                            </span>

                        </div>


                        {{-- SUBMITTED --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                Submitted On
                            </span>

                            <span class="detail-value">

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

                            </span>

                        </div>


                        {{-- VERIFIED ON --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                Verified On
                            </span>

                            <span class="detail-value">

                                @if($kyc->verified_at)

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

                                @else

                                    -

                                @endif

                            </span>

                        </div>


                        {{-- VERIFIED BY --}}

                        <div class="detail-item">

                            <span class="detail-label">
                                Verified By
                            </span>

                            <span class="detail-value">

                                @if($kyc->verified_by)

                                    Admin

                                @else

                                    -

                                @endif

                            </span>

                        </div>


                        {{-- REJECTION REASON --}}

                        @if($kyc->rejection_reason)

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

                                <span class="detail-label">
                                    Rejection Reason
                                </span>

                                <span class="detail-value">
                                    {{ $kyc->rejection_reason }}
                                </span>

                            </div>

                        @endif


                    </div>

                @else

                    <div class="action-message rejected">

                        KYC details have not been submitted by this client.

                    </div>

                @endif

            </div>

        </div>


        {{-- =================================================
             DOCUMENTS
        ================================================== --}}

        <div class="kyc-card">

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

                <div class="kyc-card-icon">
                    📁
                </div>

                <h3>
                    Documents
                </h3>

            </div>

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

                <div class="documents-grid">


                    {{-- =================================================
                         AADHAAR
                    ================================================== --}}

                    <div class="document-box">

                        <div class="document-title">
                            Aadhaar Document
                        </div>

                        @if(
                            $kyc &&
                            $kyc->aadhaar_document
                        )

                            <div class="document-file">

                                📄
                                {{ basename(
                                    $kyc->aadhaar_document
                                ) }}

                            </div>

                            <div class="document-date">

                                Uploaded on
                                {{ $kyc->created_at
                                    ? $kyc->created_at->format(
                                        'd M Y'
                                    )
                                    : '-'
                                }}

                            </div>

                            <a
                                href="{{ route(
                                    'admin.kyc.aadhaar',
                                    $client
                                ) }}"
                                target="_blank"
                                class="document-btn"
                            >
                                👁 &nbsp; View Aadhaar
                            </a>

                        @else

                            <div class="document-file">
                                No Aadhaar document uploaded.
                            </div>

                            <div class="document-btn disabled">
                                Document unavailable
                            </div>

                        @endif

                    </div>


                    {{-- =================================================
                         PAN
                    ================================================== --}}

                    <div class="document-box">

                        <div class="document-title">
                            PAN Document
                        </div>

                        @if(
                            $kyc &&
                            $kyc->pan_document
                        )

                            <div class="document-file">

                                📄
                                {{ basename(
                                    $kyc->pan_document
                                ) }}

                            </div>

                            <div class="document-date">

                                Uploaded on
                                {{ $kyc->created_at
                                    ? $kyc->created_at->format(
                                        'd M Y'
                                    )
                                    : '-'
                                }}

                            </div>

                            <a
                                href="{{ route(
                                    'admin.kyc.pan',
                                    $client
                                ) }}"
                                target="_blank"
                                class="document-btn"
                            >
                                👁 &nbsp; View PAN
                            </a>

                        @else

                            <div class="document-file">
                                No PAN document uploaded.
                            </div>

                            <div class="document-btn disabled">
                                Document unavailable
                            </div>





                        @endif

                    </div>


                </div>

            </div>

        </div>

    </div>

    {{-- =================================================
     CARD UNLOCK PAYMENT
================================================== --}}

<div class="kyc-card action-card">

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

        <div class="kyc-card-icon">
            💳
        </div>

        <div>

            <h3>
                Card Unlock Payment
            </h3>

            <div class="action-subtitle">
                Record EMI card unlock payment manually.
            </div>

        </div>

    </div>


    <div class="action-body">

        @if($cardUnlockPayment)

            <div
                class="action-message verified"
                style="margin-top:0;"
            >

                ✓ Card unlock payment already recorded.

                <div class="rejection-reason">

                    Amount:
                    ₹{{ number_format(
                        (float)$cardUnlockPayment->amount,
                        2
                    ) }}

                    <br>

                    Payment Method:
                    {{ ucwords(
                        str_replace(
                            '_',
                            ' ',
                            $cardUnlockPayment->payment_method ?? '-'
                        )
                    ) }}

                    <br>

                    Paid On:
                    {{ optional(
                        $cardUnlockPayment->paid_at
                    )->format('d M Y, h:i A') }}

                    @if($cardUnlockPayment->reference_number)

                        <br>

                        Reference:
                        {{ $cardUnlockPayment->reference_number }}

                    @endif

                </div>

            </div>

        @else

            <div
                style="
                    padding:13px 15px;
                    border-radius:11px;
                    background:#eaf2ff;
                    border:1px solid #d7e6ff;
                    color:#1769e0;
                    font-size:13px;
                    font-weight:900;
                "
            >

                Card Unlock Amount:
                ₹{{ number_format(
                    (float)$cardUnlockAmount,
                    2
                ) }}

            </div>


            <form
                method="POST"
                action="{{
                    route(
                        'admin.kyc.manual-card-unlock-payment',
                        $client
                    )
                }}"
                style="margin-top:15px;"
                onsubmit="
                    return confirm(
                        'Record card unlock payment of ₹{{ number_format((float)$cardUnlockAmount, 2) }} as paid?'
                    );
                "
            >

                @csrf


                <div
                    style="
                        display:grid;
                        grid-template-columns:1fr 1fr;
                        gap:12px;
                    "
                >

                    <div>

                        <label
                            style="
                                display:block;
                                margin-bottom:5px;
                                font-size:9px;
                                font-weight:800;
                                color:#8795a7;
                            "
                        >
                            Payment Method
                        </label>


                        <select
                            name="payment_method"
                            required
                            style="
                                width:100%;
                                height:40px;
                                border:1px solid #dfe6ef;
                                border-radius:9px;
                                padding:0 10px;
                                background:#fff;
                                color:#344966;
                                font-size:11px;
                            "
                        >

                            <option value="cash">
                                Cash
                            </option>

                            <option value="upi">
                                UPI
                            </option>

                            <option value="bank_transfer">
                                Bank Transfer
                            </option>

                        </select>

                    </div>


                    <div>

                        <label
                            style="
                                display:block;
                                margin-bottom:5px;
                                font-size:9px;
                                font-weight:800;
                                color:#8795a7;
                            "
                        >
                            Reference Number
                        </label>


                        <input
                            type="text"
                            name="reference_number"
                            maxlength="255"
                            placeholder="Optional"
                            style="
                                width:100%;
                                height:40px;
                                box-sizing:border-box;
                                border:1px solid #dfe6ef;
                                border-radius:9px;
                                padding:0 10px;
                                background:#fff;
                                color:#344966;
                                font-size:11px;
                            "
                        >

                    </div>

                </div>


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

                    <label
                        style="
                            display:block;
                            margin-bottom:5px;
                            font-size:9px;
                            font-weight:800;
                            color:#8795a7;
                        "
                    >
                        Remarks
                    </label>


                    <textarea
                        name="remarks"
                        maxlength="2000"
                        placeholder="Optional"
                        style="
                            width:100%;
                            min-height:70px;
                            box-sizing:border-box;
                            resize:vertical;
                            border:1px solid #dfe6ef;
                            border-radius:9px;
                            padding:10px;
                            background:#fff;
                            color:#344966;
                            font-size:11px;
                        "
                    ></textarea>

                </div>


                <button
                    type="submit"
                    class="verify-box"
                    style="
                        width:100%;
                        margin-top:13px;
                        cursor:pointer;
                    "
                >

                    <strong>
                        ✓ Record Card Unlock Payment
                    </strong>

                    <span>
                        Payment will be marked as paid
                    </span>

                </button>

            </form>

        @endif

    </div>

</div>



    {{-- =====================================================
         VERIFICATION ACTIONS
    ====================================================== --}}

    @if($kyc)

        <div class="kyc-card action-card">

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

                <div class="kyc-card-icon">
                    🛡️
                </div>

                <div>

                    <h3>
                        Verification Actions
                    </h3>

                    <div class="action-subtitle">
                        Review the submitted KYC documents and take appropriate action.
                    </div>

                </div>

            </div>


            <div class="action-body">


                {{-- =================================================
                     VERIFIED
                ================================================== --}}

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

                    <div class="action-message verified">

                        ✓ KYC has already been verified successfully.

                        @if($kyc->verified_at)

                            <div class="rejection-reason">

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

                            </div>

                        @endif

                    </div>


                {{-- =================================================
                     REJECTED
                ================================================== --}}

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

                    <div class="action-message rejected">

                        ✕ KYC has been rejected.

                        @if($kyc->rejection_reason)

                            <div class="rejection-reason">

                                <strong>
                                    Reason:
                                </strong>

                                {{ $kyc->rejection_reason }}

                            </div>

                        @endif

                    </div>


                    {{-- Re-verification --}}

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

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

                            @csrf

                            <button
                                type="submit"
                                class="document-btn"
                                style="
                                    border:1px solid #c9ecd6;
                                    background:#eaf8ef;
                                    color:#287646;
                                    cursor:pointer;
                                "
                            >

                                ✓ Verify KYC

                            </button>

                        </form>

                    </div>


                {{-- =================================================
                     PENDING
                ================================================== --}}

                @else

                    <div class="action-layout">


                        {{-- VERIFY --}}

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

                            @csrf

                            <button
                                type="submit"
                                class="verify-box"
                            >

                                <strong>
                                    ✓ Verify KYC
                                </strong>

                                <span>
                                    Approve and verify this KYC
                                </span>

                            </button>

                        </form>


                        {{-- REJECT --}}

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

                            @csrf

                            <textarea
                                name="rejection_reason"
                                placeholder="Enter rejection reason (required)"
                                required
                                maxlength="1000"
                            ></textarea>

                            <button
                                type="submit"
                                class="reject-btn"
                            >
                                ✕ Reject KYC
                            </button>

                        </form>


                    </div>

                @endif

            </div>

        </div>

    @endif

</div>

@endsection