@extends('admin.layouts.app')

@section('title', 'Applications | PG Finsev')

@section('page-title', 'Applications')

@section(
    'page-description',
    'Manage and review client applications'
)

@push('styles')

<style>

    /* =====================================================
       APPLICATION PAGE
    ===================================================== */

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


    .page-heading h2 {
        color: #1d3557;

        font-size: 20px;

        font-weight: 800;
    }


    .page-heading p {
        margin-top: 5px;

        color: #8b98aa;

        font-size: 10px;
    }


    /* =====================================================
       STATISTICS
    ===================================================== */

    .stats-grid {
        display: grid;

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

        gap: 15px;

        margin-bottom: 20px;
    }


    .stat-card {
        padding: 18px;

        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;

        transition: .2s;
    }


    .stat-card:hover {
        transform: translateY(-2px);

        box-shadow:
            0 8px 25px
            rgba(31, 52, 80, .06);
    }


    .stat-label {
        color: #8997aa;

        font-size: 9px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: .5px;
    }


    .stat-value {
        margin-top: 8px;

        color: #273b59;

        font-size: 24px;

        font-weight: 900;
    }


    .stat-description {
        margin-top: 4px;

        color: #9aa6b6;

        font-size: 8px;
    }


    .stat-blue .stat-value {
        color: #1769e0;
    }


    .stat-orange .stat-value {
        color: #b7791f;
    }


    .stat-green .stat-value {
        color: #287646;
    }


    .stat-purple .stat-value {
        color: #7c3aed;
    }


    /* =====================================================
       FILTER
    ===================================================== */

    .filter-card {
        padding: 17px;

        margin-bottom: 20px;

        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;
    }


    .filter-title {
        margin-bottom: 12px;

        color: #273b59;

        font-size: 12px;

        font-weight: 800;
    }


    .filter-form {
        display: grid;

        grid-template-columns:
            2fr 1fr 1fr auto auto;

        gap: 10px;

        align-items: end;
    }


    .field label {
        display: block;

        margin-bottom: 6px;

        color: #8b98aa;

        font-size: 8px;

        font-weight: 800;

        text-transform: uppercase;
    }


    .field input,
    .field select {
        width: 100%;

        height: 39px;

        padding:
            0 11px;

        border: 1px solid #dfe6ef;

        border-radius: 8px;

        background: #ffffff;

        color: #344966;

        outline: none;

        font-size: 10px;
    }


    .field input:focus,
    .field select:focus {
        border-color: #1769e0;

        box-shadow:
            0 0 0 3px
            rgba(23, 105, 224, .08);
    }


    .search-btn {
        height: 39px;

        padding:
            0 17px;

        border: 0;

        border-radius: 8px;

        background: #1769e0;

        color: #ffffff;

        cursor: pointer;

        font-size: 9px;

        font-weight: 800;
    }


    .search-btn:hover {
        background: #0f5bc7;
    }


    .reset-btn {
        height: 39px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding:
            0 14px;

        border: 1px solid #dfe6ef;

        border-radius: 8px;

        background: #ffffff;

        color: #64748b;

        font-size: 9px;

        font-weight: 800;
    }


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


    /* =====================================================
       APPLICATION TABLE
    ===================================================== */

    .table-card {
        background: #ffffff;

        border: 1px solid #e3eaf3;

        border-radius: 14px;

        overflow: hidden;
    }


    .table-header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        padding:
            17px 19px;

        border-bottom: 1px solid #edf1f6;
    }


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

        font-size: 13px;

        font-weight: 800;
    }


    .result-count {
        color: #9aa6b6;

        font-size: 9px;
    }


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

    .client {
        display: flex;

        align-items: center;

        gap: 9px;
    }


    .client-avatar {
        width: 34px;

        height: 34px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 9px;

        background: #eaf2ff;

        color: #1769e0;

        font-size: 10px;

        font-weight: 900;
    }


    .client-name {
        display: block;

        color: #344966;

        font-size: 9px;

        font-weight: 800;
    }


    .client-email {
        display: block;

        margin-top: 3px;

        color: #9aa6b6;

        font-size: 7px;
    }


    /* =====================================================
       PROGRESS
    ===================================================== */

    .progress {
        width: 85px;

        height: 6px;

        margin-bottom: 5px;

        overflow: hidden;

        border-radius: 10px;

        background: #edf2f7;
    }


    .progress-bar {
        height: 100%;

        border-radius: 10px;

        background: #1769e0;
    }


    .progress-text {
        color: #8b98aa;

        font-size: 8px;
    }


    /* =====================================================
       EMPTY
    ===================================================== */

    .empty {
        padding: 55px 20px;

        text-align: center;

        color: #9aa6b6;

        font-size: 10px;
    }


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

    @media (max-width: 1100px) {

        .filter-form {
            grid-template-columns:
                1fr 1fr;
        }

    }


    @media (max-width: 900px) {

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

    }


    @media (max-width: 550px) {

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


        .filter-form {
            grid-template-columns: 1fr;
        }

    }

</style>

@endpush



@section('content')


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

<div class="page-heading">

    <h2>
        Client Applications
    </h2>

    <p>
        Track application progress, KYC and payment status.
    </p>

</div>



<!-- =====================================================
     STATISTICS
====================================================== -->

<div class="stats-grid">


    <div class="stat-card stat-blue">

        <div class="stat-label">
            Total Applications
        </div>

        <div class="stat-value">
            {{ $totalApplications }}
        </div>

        <div class="stat-description">
            Registered client applications
        </div>

    </div>


    <div class="stat-card stat-orange">

        <div class="stat-label">
            Pending KYC
        </div>

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

        <div class="stat-description">
            Awaiting verification
        </div>

    </div>


    <div class="stat-card stat-green">

        <div class="stat-label">
            KYC Verified
        </div>

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

        <div class="stat-description">
            Verified applications
        </div>

    </div>


    <div class="stat-card stat-purple">

        <div class="stat-label">
            Payment Completed
        </div>

        <div class="stat-value">
            {{ $paidApplications }}
        </div>

        <div class="stat-description">
            Successfully paid
        </div>

    </div>


</div>



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

<div class="filter-card">


    <div class="filter-title">

        Search & Filter Applications

    </div>


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


        <div class="field">

            <label>
                Search
            </label>

            <input
                type="text"
                name="search"
                value="{{ $search }}"
                placeholder="Name, email or mobile..."
            >

        </div>


        <div class="field">

            <label>
                KYC Status
            </label>

            <select name="kyc_status">

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

                <option
                    value="pending"
                    {{ $kycStatus === 'pending'
                        ? 'selected'
                        : ''
                    }}
                >
                    Pending
                </option>

                <option
                    value="verified"
                    {{ $kycStatus === 'verified'
                        ? 'selected'
                        : ''
                    }}
                >
                    Verified
                </option>

                <option
                    value="rejected"
                    {{ $kycStatus === 'rejected'
                        ? 'selected'
                        : ''
                    }}
                >
                    Rejected
                </option>

            </select>

        </div>


        <div class="field">

            <label>
                Payment Status
            </label>

            <select name="payment_status">

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

                <option
                    value="paid"
                    {{ $paymentStatus === 'paid'
                        ? 'selected'
                        : ''
                    }}
                >
                    Paid
                </option>

                <option
                    value="pending"
                    {{ $paymentStatus === 'pending'
                        ? 'selected'
                        : ''
                    }}
                >
                    Pending
                </option>

                <option
                    value="failed"
                    {{ $paymentStatus === 'failed'
                        ? 'selected'
                        : ''
                    }}
                >
                    Failed
                </option>

            </select>

        </div>


        <button
            type="submit"
            class="search-btn"
        >

            🔎 Search

        </button>


        <a
            href="{{ route('admin.applications') }}"
            class="reset-btn"
        >

            Reset

        </a>


    </form>

</div>



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

<div class="table-card">


    <div class="table-header">

        <h3>
            Applications
        </h3>


        <span class="result-count">

            Showing

            {{ $applications->firstItem() ?? 0 }}

            -

            {{ $applications->lastItem() ?? 0 }}

            of

            {{ $applications->total() }}

        </span>

    </div>



    <div class="table-wrap">


        @if($applications->count())


            <table>


                <thead>

                    <tr>

                        <th>
                            Client
                        </th>

                        <th>
                            Application
                        </th>

                        <th>
                            KYC
                        </th>

                        <th>
                            Payment
                        </th>

                        <th>
                            Employment
                        </th>

                        <th>
                            Progress
                        </th>

                        <th>
                            Action
                        </th>

                    </tr>

                </thead>


                <tbody>


                    @foreach($applications as $application)


                        @php

                            /*
                            |--------------------------------------------------------------------------
                            | Application data
                            |--------------------------------------------------------------------------
                            */

                            $profile =
                                $application->clientProfile;

                            $kyc =
                                $application->clientKyc;

                            $employment =
                                $application->clientEmployment;

                            $payment =
                                $application->payments
                                    ->sortByDesc('created_at')
                                    ->first();


                            /*
                            |--------------------------------------------------------------------------
                            | Completion
                            |--------------------------------------------------------------------------
                            */

                            $profileDone =
                                $profile !== null;

                            $kycDone =
                                $kyc &&
                                $kyc->status === 'verified';

                            $employmentDone =
                                $employment !== null;

                            $paymentDone =
                                $payment &&
                                $payment->status === 'paid';


                            $completed = 0;


                            if ($profileDone) {
                                $completed++;
                            }


                            if ($kycDone) {
                                $completed++;
                            }


                            if ($employmentDone) {
                                $completed++;
                            }


                            if ($paymentDone) {
                                $completed++;
                            }


                            $progress = round(
                                ($completed / 4) * 100
                            );

                        @endphp


                        <tr>


                            <!-- CLIENT -->

                            <td>

                                <div class="client">


                                    <div class="client-avatar">

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

                                    </div>


                                    <div>

                                        <span class="client-name">

                                            {{
                                                $application->name
                                            }}

                                        </span>


                                        <span class="client-email">

                                            {{
                                                $application->email
                                            }}

                                        </span>

                                    </div>


                                </div>

                            </td>



                            <!-- APPLICATION -->

                            <td>

                                @if($profileDone)

                                    <span class="badge badge-green">

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

                                        Started

                                    </span>

                                @else

                                    <span class="badge badge-gray">

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

                                        Not Started

                                    </span>

                                @endif

                            </td>



                            <!-- KYC -->

                            <td>

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

                                    <span class="badge badge-green">

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

                                        Verified

                                    </span>


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

                                    <span class="badge badge-red">

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

                                        Rejected

                                    </span>


                                @elseif($kyc)

                                    <span class="badge badge-orange">

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

                                        Pending

                                    </span>


                                @else

                                    <span class="badge badge-gray">

                                        Not Submitted

                                    </span>

                                @endif

                            </td>



                            <!-- PAYMENT -->

                            <td>

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

                                    <span class="badge badge-green">

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

                                        Paid

                                    </span>


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

                                    <span class="badge badge-orange">

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

                                        Pending

                                    </span>


                                @elseif(
                                    $payment &&
                                    in_array(
                                        $payment->status,
                                        [
                                            'failed',
                                            'cancelled',
                                            'cancelled_by_user'
                                        ]
                                    )
                                )

                                    <span class="badge badge-red">

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

                                        Failed

                                    </span>


                                @else

                                    <span class="badge badge-gray">

                                        Not Paid

                                    </span>

                                @endif

                            </td>



                            <!-- EMPLOYMENT -->

                            <td>

                                @if($employmentDone)

                                    <span class="badge badge-green">

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

                                        Completed

                                    </span>

                                @else

                                    <span class="badge badge-gray">

                                        Pending

                                    </span>

                                @endif

                            </td>



                            <!-- PROGRESS -->

                            <td>

                                <div class="progress">

                                    <div
                                        class="progress-bar"
                                        style="
                                            width: {{ $progress }}%;
                                        "
                                    ></div>

                                </div>


                                <div class="progress-text">

                                    {{ $progress }}% Complete

                                </div>

                            </td>



                            <!-- ACTION -->

                            <td>

                                <a
                                    href="{{ route(
                                        'admin.clients.show',
                                        $application
                                    ) }}"
                                    class="view-btn"
                                >

                                    View

                                </a>

                            </td>


                        </tr>


                    @endforeach


                </tbody>


            </table>


        @else


            <div class="empty">

                No applications found.

            </div>


        @endif


    </div>



    <!-- PAGINATION -->

    @if($applications->hasPages())

        <div class="pagination-area">

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

                Page

                {{ $applications->currentPage() }}

                of

                {{ $applications->lastPage() }}

            </div>


            {{ $applications->onEachSide(1)->links() }}

        </div>

    @endif


</div>


@endsection