@extends('admin.layouts.app')

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

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

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


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


@section('content')

<div class="kyc-page">


    <!-- =================================================
         HEADING
    ================================================= -->

    <div class="kyc-heading">

        <h2>
            KYC Verification
        </h2>

        <p>
            Review client identity documents and verify KYC submissions.
        </p>

    </div>



    <!-- =================================================
         SUMMARY
    ================================================= -->

    <div class="kyc-summary">


        <div class="kyc-summary-card blue">

            <div class="kyc-summary-label">
                Total Clients
            </div>

            <div class="kyc-summary-value">
                {{ $totalClients }}
            </div>

        </div>


        <div class="kyc-summary-card green">

            <div class="kyc-summary-label">
                Verified
            </div>

            <div class="kyc-summary-value">
                {{ $verifiedKyc }}
            </div>

        </div>


        <div class="kyc-summary-card orange">

            <div class="kyc-summary-label">
                Pending
            </div>

            <div class="kyc-summary-value">
                {{ $pendingKyc }}
            </div>

        </div>


        <div class="kyc-summary-card red">

            <div class="kyc-summary-label">
                Rejected
            </div>

            <div class="kyc-summary-value">
                {{ $rejectedKyc }}
            </div>

        </div>


    </div>



    <!-- =================================================
         FILTER
    ================================================= -->

    <div class="kyc-filter">


        <div class="kyc-filter-title">
            Search & Filter
        </div>


        <form
            method="GET"
            action="{{ route('admin.kyc.index') }}"
            class="kyc-filter-form"
        >


            <div class="kyc-field">

                <label>
                    Search Client
                </label>

                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Name, email or mobile..."
                >

            </div>


            <div class="kyc-field">

                <label>
                    KYC Status
                </label>

                <select name="status">

                    <option value="">
                        All Status
                    </option>

                    <option
                        value="pending"
                        {{ request('status') === 'pending'
                            ? 'selected'
                            : ''
                        }}
                    >
                        Pending
                    </option>

                    <option
                        value="verified"
                        {{ request('status') === 'verified'
                            ? 'selected'
                            : ''
                        }}
                    >
                        Verified
                    </option>

                    <option
                        value="rejected"
                        {{ request('status') === 'rejected'
                            ? 'selected'
                            : ''
                        }}
                    >
                        Rejected
                    </option>

                    <option
                        value="not_submitted"
                        {{ request('status') === 'not_submitted'
                            ? 'selected'
                            : ''
                        }}
                    >
                        Not Submitted
                    </option>

                </select>

            </div>


            <button
                type="submit"
                class="kyc-search"
            >
                🔎 Search
            </button>


            <a
                href="{{ route('admin.kyc.index') }}"
                class="kyc-reset"
            >
                Reset
            </a>


        </form>

    </div>



    <!-- =================================================
         TABLE
    ================================================= -->

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


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

            <h3>
                KYC Submissions
            </h3>

            <span class="kyc-result">

                Showing
                {{ $clients->firstItem() ?? 0 }}
                -
                {{ $clients->lastItem() ?? 0 }}
                of
                {{ $clients->total() }}

            </span>

        </div>



        <div class="kyc-table-wrap">


            @if($clients->count())


                <table class="kyc-table">

                    <thead>

                        <tr>

                            <th>
                                Client
                            </th>

                            <th>
                                Mobile
                            </th>

                            <th>
                                Documents
                            </th>

                            <th>
                                Status
                            </th>

                            <th>
                                Submitted
                            </th>

                            <th>
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>


                        @foreach($clients as $client)

                            @php

                                $kyc =
                                    $client->clientKyc;

                            @endphp


                            <tr>


                                <!-- CLIENT -->

                                <td>

                                    <div class="kyc-client">


                                        <div class="kyc-avatar">

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

                                        </div>


                                        <div>

                                            <span class="kyc-client-name">

                                                {{ $client->name }}

                                            </span>


                                            <span class="kyc-client-email">

                                                {{ $client->email }}

                                            </span>

                                        </div>

                                    </div>

                                </td>



                                <!-- MOBILE -->

                                <td>

                                   <span class="kyc-mobile">
    {{ $client->mobile ?? '-' }}
</span>

                                </td>



                                <!-- DOCUMENTS -->

                                <td>

                                    @if($kyc)

                                        <div class="kyc-documents">


                                            @if($kyc->aadhaar_document)

                                                <a
                                                    href="{{ route(
                                                        'admin.kyc.aadhaar',
                                                        $client
                                                    ) }}"
                                                    target="_blank"
                                                    class="doc-btn"
                                                >
                                                    Aadhaar
                                                </a>

                                            @endif


                                            @if($kyc->pan_document)

                                                <a
                                                    href="{{ route(
                                                        'admin.kyc.pan',
                                                        $client
                                                    ) }}"
                                                    target="_blank"
                                                    class="doc-btn"
                                                >
                                                    PAN
                                                </a>

                                            @endif


                                        </div>

                                    @else

                                        <span
                                            style="
                                                color:#a0aaba;
                                                font-size:8px;
                                            "
                                        >
                                            —
                                        </span>

                                    @endif

                                </td>



                                <!-- STATUS -->

                                <td>


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

                                        <span
                                            class="
                                                kyc-status
                                                status-verified
                                            "
                                        >

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

                                            Verified

                                        </span>


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

                                        <span
                                            class="
                                                kyc-status
                                                status-rejected
                                            "
                                        >

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

                                            Rejected

                                        </span>


                                    @elseif($kyc)

                                        <span
                                            class="
                                                kyc-status
                                                status-pending
                                            "
                                        >

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

                                            Pending

                                        </span>


                                    @else

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

                                    @endif


                                </td>



                                <!-- SUBMITTED -->

                                <td>

                                    <span class="kyc-submitted">
    @if($kyc && $kyc->created_at)
        {{ $kyc->created_at->format('d M Y') }}
    @else
        —
    @endif
</span>

                                </td>



                                <!-- ACTION -->

                                <td>


                                    <div class="kyc-actions">


                                        <a
                                            href="{{ route(
                                                'admin.kyc.show',
                                                $client
                                            ) }}"
                                            class="
                                                kyc-action
                                                kyc-view
                                            "
                                        >
                                            View
                                        </a>


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

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

                                                @csrf

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

                                            </form>

                                        @endif


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

                                            <button
                                                type="button"
                                                class="
                                                    kyc-action
                                                    kyc-reject
                                                "
                                                onclick="
                                                    openRejectModal(
                                                        {{ $client->id }}
                                                    )
                                                "
                                            >
                                                Reject
                                            </button>

                                        @endif


                                    </div>


                                </td>


                            </tr>


                        @endforeach


                    </tbody>

                </table>


            @else


                <div class="kyc-empty">

                    No KYC records found.

                </div>


            @endif


        </div>



        <!-- PAGINATION -->
@if($clients->hasPages())

    <div class="kyc-pagination">

        <div class="kyc-page-info">
            Page {{ $clients->currentPage() }}
            of {{ $clients->lastPage() }}
        </div>


        <div class="kyc-pagination-links">

            {{-- PREVIOUS --}}
            @if($clients->onFirstPage())

                <span class="kyc-page-btn disabled">
                    ‹
                </span>

            @else

                <a
                    href="{{ $clients->previousPageUrl() }}"
                    class="kyc-page-btn"
                    aria-label="Previous page"
                >
                    ‹
                </a>

            @endif


            {{-- PAGE NUMBERS --}}

            @foreach(
                $clients->getUrlRange(
                    max(1, $clients->currentPage() - 1),
                    min(
                        $clients->lastPage(),
                        $clients->currentPage() + 1
                    )
                )
                as $page => $url
            )

                @if($page == $clients->currentPage())

                    <span class="kyc-page-btn active">
                        {{ $page }}
                    </span>

                @else

                    <a
                        href="{{ $url }}"
                        class="kyc-page-btn"
                    >
                        {{ $page }}
                    </a>

                @endif

            @endforeach


            {{-- NEXT --}}
            @if($clients->hasMorePages())

                <a
                    href="{{ $clients->nextPageUrl() }}"
                    class="kyc-page-btn"
                    aria-label="Next page"
                >
                    ›
                </a>

            @else

                <span class="kyc-page-btn disabled">
                    ›
                </span>

            @endif

        </div>

    </div>

@endif


    </div>

</div>



<!-- =====================================================
     REJECT MODAL
===================================================== -->

<div
    id="kycRejectModal"
    class="kyc-modal"
>


    <div
        class="kyc-modal-overlay"
        onclick="closeRejectModal()"
    ></div>


    <div class="kyc-modal-box">


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

            <h3>
                Reject KYC
            </h3>

        </div>


        <form
            id="kycRejectForm"
            method="POST"
        >

            @csrf


            <div class="kyc-modal-content">

                <label>
                    Rejection Reason
                </label>


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

            </div>


            <div class="kyc-modal-footer">

                <button
                    type="button"
                    class="modal-cancel"
                    onclick="closeRejectModal()"
                >
                    Cancel
                </button>


                <button
                    type="submit"
                    class="modal-submit"
                >
                    Reject KYC
                </button>

            </div>


        </form>


    </div>

</div>



<script>

function openRejectModal(clientId)
{
    const modal =
        document.getElementById(
            'kycRejectModal'
        );

    const form =
        document.getElementById(
            'kycRejectForm'
        );


    form.action =
        "{{ url('/admin/clients') }}"
        + "/"
        + clientId
        + "/kyc/reject";


    modal.classList.add('show');
}


function closeRejectModal()
{
    const modal =
        document.getElementById(
            'kycRejectModal'
        );

    modal.classList.remove('show');
}

</script>

@endsection