@extends('admin.layouts.app')

@section('title', 'EMI Cards | PG Finsev')

@section('page-title', 'EMI Cards')

@section(
    'page-description',
    'Manage client EMI cards'
)


@push('styles')

<style>

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

    .emi-page {
        width: 100%;
    }

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

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

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


    /* =====================================================
       ALERT
    ====================================================== */

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

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

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


    /* =====================================================
       STATS
    ====================================================== */

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

    .stat-card {
        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 13px;
        padding: 17px;
    }

    .stat-label {
        color: #8b98aa;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .stat-value {
        margin-top: 7px;
        color: #273b59;
        font-size: 24px;
        font-weight: 900;
    }

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

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

    .stat-red .stat-value {
        color: #be123c;
    }

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


    /* =====================================================
       GENERATE BAR
    ====================================================== */

    .generate-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;

        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 13px;

        padding: 15px 17px;
        margin-bottom: 18px;
    }

    .generate-title {
        color: #273b59;
        font-size: 11px;
        font-weight: 800;
    }

    .generate-description {
        margin-top: 4px;
        color: #9aa6b6;
        font-size: 8px;
    }


    .primary-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 35px;
        padding: 0 13px;

        border: 0;
        border-radius: 8px;

        background: #1769e0;
        color: #fff;

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

        cursor: pointer;
        text-decoration: none;
    }

    .primary-btn:hover {
        background: #1258be;
    }


    /* =====================================================
       SEARCH
    ====================================================== */

    .filter-card {
        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 13px;

        padding: 14px 16px;
        margin-bottom: 18px;
    }

    .filter-form {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .filter-input,
    .filter-select {
        height: 35px;
        border: 1px solid #dce4ef;
        border-radius: 7px;

        padding: 0 10px;

        color: #344966;
        background: #fff;

        outline: none;

        font-size: 8px;
    }

    .filter-input {
        flex: 1;
    }

    .filter-select {
        width: 150px;
    }

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

    .filter-btn {
        height: 35px;
        padding: 0 13px;

        border: 0;
        border-radius: 7px;

        background: #273b59;
        color: #fff;

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

        cursor: pointer;
    }

    .clear-btn {
        height: 35px;
        padding: 0 11px;

        display: inline-flex;
        align-items: center;

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

        background: #fff;
        color: #64748b;

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

        text-decoration: none;
    }


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

    .table-card {
        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 13px;

        overflow: hidden;
    }

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

        padding: 16px 18px;

        border-bottom: 1px solid #edf1f6;
    }

    .table-header h3 {
        margin: 0;

        color: #273b59;
        font-size: 12px;
        font-weight: 800;
    }

    .result-count {
        color: #9aa6b6;
        font-size: 8px;
    }

    .table-wrap {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        padding: 11px 14px;

        background: #fafbfd;

        border-bottom: 1px solid #edf1f6;

        color: #8b98aa;

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

        text-align: left;
        text-transform: uppercase;

        white-space: nowrap;
    }

    td {
        padding: 13px 14px;

        border-bottom: 1px solid #edf1f6;

        vertical-align: middle;
    }

    tbody tr:hover {
        background: #fcfdff;
    }


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

    .client {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 170px;
    }

    .client-avatar {
        width: 34px;
        height: 34px;

        flex-shrink: 0;

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

        border-radius: 8px;

        background: #eaf2ff;
        color: #1769e0;

        font-size: 10px;
        font-weight: 900;
    }

    .client-name {
        display: block;

        color: #344966;

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

    .client-email {
        display: block;

        margin-top: 3px;

        color: #9aa6b6;

        font-size: 7px;
    }


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

    .card-number {
        color: #344966;

        font-family: Consolas, monospace;

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

        letter-spacing: .5px;

        white-space: nowrap;
    }


    .money {
        color: #273b59;
        font-size: 8px;
        font-weight: 800;
        white-space: nowrap;
    }

    .available {
        color: #287646;
        font-size: 7px;
        font-weight: 700;

        margin-top: 3px;
    }


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

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        padding: 5px 8px;

        border-radius: 20px;

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

        white-space: nowrap;
    }

    .dot {
        width: 5px;
        height: 5px;

        border-radius: 50%;

        background: currentColor;
    }

    .badge-active {
        color: #287646;
        background: #eaf8ef;
    }

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

    .badge-blocked {
        color: #be123c;
        background: #fff1f2;
    }

    .badge-expired {
        color: #64748b;
        background: #f1f5f9;
    }


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

    .payment-paid {
        color: #287646;
        font-size: 7px;
        font-weight: 800;
        white-space: nowrap;
    }

    .payment-pending {
        color: #b7791f;
        font-size: 7px;
        font-weight: 800;
        white-space: nowrap;
    }


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

    .action-buttons {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;

        min-width: 190px;
    }

    .small-btn {
        min-height: 27px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0 8px;

        border: 0;
        border-radius: 6px;

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

        cursor: pointer;

        text-decoration: none;

        white-space: nowrap;
    }

    .view-btn {
        background: #eaf2ff;
        color: #1769e0;
    }

    .limit-btn {
        background: #fff7e8;
        color: #b7791f;
    }

    .approve-btn {
        background: #eaf8ef;
        color: #287646;
    }

    .block-btn {
        background: #fff1f2;
        color: #be123c;
    }

    .disabled-btn {
        background: #f1f5f9;
        color: #64748b;
        cursor: default;
    }


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

    .empty {
        padding: 55px 20px;

        text-align: center;

        color: #9aa6b6;

        font-size: 9px;
    }


    /* =====================================================
       PAGINATION
    ====================================================== */

    .pagination-area {
        padding: 14px 17px;

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

        gap: 10px;
    }

    .pagination-info {
        color: #9aa6b6;
        font-size: 8px;
    }


    /* =====================================================
       MODAL
    ====================================================== */

    .modal-overlay {
        display: none;

        position: fixed;
        inset: 0;

        z-index: 9999;

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

        padding: 20px;

        background: rgba(15, 23, 42, .55);
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal {
        width: 100%;
        max-width: 480px;

        background: #fff;

        border-radius: 14px;

        box-shadow:
            0 25px 70px
            rgba(0,0,0,.18);

        overflow: hidden;
    }

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

        padding: 17px 19px;

        border-bottom: 1px solid #edf1f6;
    }

    .modal-header h3 {
        margin: 0;

        color: #273b59;

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

    .modal-close {
        width: 29px;
        height: 29px;

        border: 0;
        border-radius: 7px;

        background: #f1f5f9;
        color: #64748b;

        cursor: pointer;

        font-size: 17px;
    }

    .modal-body {
        padding: 19px;
    }

    .form-group {
        margin-bottom: 14px;
    }

    .form-label {
        display: block;

        margin-bottom: 6px;

        color: #64748b;

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

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

    .form-control {
        width: 100%;
        height: 39px;

        padding: 0 10px;

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

        outline: none;

        color: #344966;

        font-size: 9px;

        background: #fff;
    }

    .form-control:focus {
        border-color: #1769e0;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 7px;

        padding: 14px 19px;

        border-top: 1px solid #edf1f6;
    }

    .cancel-btn,
    .save-btn {
        min-height: 34px;

        padding: 0 13px;

        border-radius: 7px;

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

        cursor: pointer;
    }

    .cancel-btn {
        border: 1px solid #dce4ef;

        background: #fff;
        color: #64748b;
    }

    .save-btn {
        border: 0;

        background: #1769e0;
        color: #fff;
    }


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

    @media (max-width: 1050px) {

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

    }


    @media (max-width: 700px) {

        .filter-form {
            flex-wrap: wrap;
        }

        .filter-input {
            width: 100%;
            flex-basis: 100%;
        }

        .filter-select {
            flex: 1;
        }

        .generate-bar {
            align-items: flex-start;
            flex-direction: column;
        }

    }


    @media (max-width: 500px) {

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

        .filter-select {
            width: 100%;
            flex-basis: 100%;
        }

    }

</style>

@endpush



@section('content')

<div class="emi-page">


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

    @if(session('success'))

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

            ✓ {{ session('success') }}

        </div>

    @endif


    @if(session('error'))

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

            ✕ {{ session('error') }}

        </div>

    @endif


    @if($errors->any())

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

            <strong>
                Please check:
            </strong>

            <ul style="margin:5px 0 0 18px;">

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

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

                @endforeach

            </ul>

        </div>

    @endif



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

    <div class="page-heading">

        <h2>
            EMI Card Management
        </h2>

        <p>
            Generate, activate, block and manage client EMI cards.
        </p>

    </div>



    {{-- =================================================
         STATS
    ================================================== --}}

    <div class="stats-grid">


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

            <div class="stat-label">
                Active Cards
            </div>

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

        </div>


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

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

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

        </div>


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

            <div class="stat-label">
                Blocked Cards
            </div>

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

        </div>


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

            <div class="stat-label">
                Expired Cards
            </div>

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

        </div>


    </div>



    {{-- =================================================
         GENERATE
    ================================================== --}}

    <div class="generate-bar">


        <div>

            <div class="generate-title">
                Generate New EMI Card
            </div>

            <div class="generate-description">

                Eligible clients must have completed
                Personal Details, verified KYC and Job Details.

            </div>

        </div>


        @if($eligibleClients->count())

            <button
                type="button"
                class="primary-btn"
                onclick="openGenerateModal()"
            >

                + Generate EMI Card

            </button>

        @else

            <span class="badge badge-expired">

                No Eligible Clients

            </span>

        @endif


    </div>



    {{-- =================================================
         SEARCH / FILTER
    ================================================== --}}

    <div class="filter-card">


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


            <input
                type="text"
                name="search"
                value="{{ $search }}"
                class="filter-input"
                placeholder="Search client name, email, mobile or card number..."
            >


            <select
                name="status"
                class="filter-select"
            >

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

                <option
                    value="pending"
                    @selected($status === 'pending')
                >
                    Pending
                </option>

                <option
                    value="active"
                    @selected($status === 'active')
                >
                    Active
                </option>

                <option
                    value="blocked"
                    @selected($status === 'blocked')
                >
                    Blocked
                </option>

                <option
                    value="expired"
                    @selected($status === 'expired')
                >
                    Expired
                </option>

            </select>


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

                Search

            </button>


            @if(
                $search !== '' ||
                $status
            )

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

                    Clear

                </a>

            @endif


        </form>


    </div>



    {{-- =================================================
         ELIGIBLE CLIENT LIST
    ================================================== --}}

    @if($eligibleClients->count())


        <div
            class="table-card"
            style="margin-bottom:18px;"
        >


            <div class="table-header">

                <h3>
                    Eligible Clients
                </h3>

                <span class="result-count">

                    {{ $eligibleClientCount }}
                    available

                </span>

            </div>


            <div class="table-wrap">


                <table>

                    <thead>

                        <tr>

                            <th>
                                Client
                            </th>

                            <th>
                                Verification
                            </th>

                            <th>
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>


                        @foreach(
                            $eligibleClients
                            as $client
                        )


                            <tr>


                                <td>

                                    <div class="client">


                                        <div class="client-avatar">

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

                                        </div>


                                        <div>

                                            <span
                                                class="client-name"
                                            >

                                                {{ $client->name }}

                                            </span>


                                            <span
                                                class="client-email"
                                            >

                                                {{ $client->email }}

                                                @if($client->mobile)

                                                    ·
                                                    {{ $client->mobile }}

                                                @endif

                                            </span>

                                        </div>


                                    </div>

                                </td>


                                <td>

                                    <span
                                        class="badge badge-active"
                                    >

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

                                        Personal

                                    </span>


                                    <span
                                        class="badge badge-active"
                                    >

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

                                        KYC

                                    </span>


                                    <span
                                        class="badge badge-active"
                                    >

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

                                        Job

                                    </span>

                                </td>


                                <td>

                                    <button
                                        type="button"
                                        class="small-btn approve-btn"
                                        onclick="openGenerateModal(
                                            {{ $client->id }},
                                            @js($client->name)
                                        )"
                                    >

                                        + Generate Card

                                    </button>

                                </td>


                            </tr>


                        @endforeach


                    </tbody>

                </table>


            </div>


        </div>


    @endif



    {{-- =================================================
         EMI CARDS TABLE
    ================================================== --}}

    <div class="table-card">


        <div class="table-header">

            <h3>
                EMI Cards
            </h3>


            <span class="result-count">

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

            </span>

        </div>



        <div class="table-wrap">


            @if($cards->count())


                <table>


                    <thead>

                        <tr>

                            <th>
                                Client
                            </th>

                            <th>
                                Card Number
                            </th>

                            <th>
                                Limit
                            </th>

                            <th>
                                Available
                            </th>

                            <th>
                                Payment
                            </th>

                            <th>
                                Expiry
                            </th>

                            <th>
                                Status
                            </th>

                            <th>
                                Loans
                            </th>

                            <th>
                                Actions
                            </th>

                        </tr>

                    </thead>


                    <tbody>


                        @foreach(
                            $cards as $card
                        )


                            @php

                                $user =
                                    $card->user;

                                $name =
                                    $user->name
                                    ?? 'Unknown Client';

                                $email =
                                    $user->email
                                    ?? '';

                                $initial =
                                    strtoupper(
                                        substr(
                                            $name,
                                            0,
                                            1
                                        )
                                    );


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


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

                            @endphp


                            <tr>


                                {{-- CLIENT --}}

                                <td>

                                    <div class="client">


                                        <div class="client-avatar">

                                            {{ $initial }}

                                        </div>


                                        <div>

                                            <span
                                                class="client-name"
                                            >

                                                {{ $name }}

                                            </span>


                                            @if($email)

                                                <span
                                                    class="client-email"
                                                >

                                                    {{ $email }}

                                                </span>

                                            @endif

                                        </div>


                                    </div>

                                </td>



                                {{-- CARD NUMBER --}}

                                <td>

                                    <span class="card-number">

                                        {{ $card->card_number }}

                                    </span>

                                </td>



                                {{-- LIMIT --}}

                                <td>

                                    <span class="money">

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

                                    </span>

                                </td>



                                {{-- AVAILABLE --}}

                                <td>

                                    <span class="money">

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

                                    </span>


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

                                        <div class="available">
                                            Available
                                        </div>

                                    @endif

                                </td>



                                {{-- PAYMENT --}}

                                <td>

                                    @if($hasPaidPayment)

                                        <span
                                            class="payment-paid"
                                        >

                                            ✓ Paid

                                        </span>

                                    @else

                                        <span
                                            class="payment-pending"
                                        >

                                            ⏳ Pending

                                        </span>

                                    @endif

                                </td>



                                {{-- EXPIRY --}}

                                <td>

                                    @if($card->expires_at)

                                        <span
                                            style="
                                                color:
                                                {{
                                                    $isExpired
                                                        ? '#be123c'
                                                        : '#64748b'
                                                }};
                                                font-size:7px;
                                                font-weight:800;
                                                white-space:nowrap;
                                            "
                                        >

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

                                        </span>

                                    @else

                                        -

                                    @endif

                                </td>



                                {{-- STATUS --}}

                                <td>


                                    @if($isExpired)

                                        <span
                                            class="badge badge-expired"
                                        >

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

                                            Expired

                                        </span>

                                    @else


                                        @switch($card->status)


                                            @case('pending')

                                                <span
                                                    class="badge badge-pending"
                                                >

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

                                                    Pending

                                                </span>

                                                @break


                                            @case('active')

                                                <span
                                                    class="badge badge-active"
                                                >

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

                                                    Active

                                                </span>

                                                @break


                                            @case('blocked')

                                                <span
                                                    class="badge badge-blocked"
                                                >

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

                                                    Blocked

                                                </span>

                                                @break


                                            @case('expired')

                                                <span
                                                    class="badge badge-expired"
                                                >

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

                                                    Expired

                                                </span>

                                                @break


                                            @default

                                                <span
                                                    class="badge badge-expired"
                                                >

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

                                                </span>

                                        @endswitch


                                    @endif


                                </td>



                                {{-- LOANS --}}

                                <td>

                                    @if($user && method_exists($user, 'loans'))

                                        @php
                                            $activeLoanCount = $user->loans()
                                                ->whereIn('status', ['approved', 'disbursed', 'active', 'overdue'])
                                                ->count();
                                        @endphp

                                        @if($activeLoanCount > 0)

                                            <span class="badge badge-active">
                                                <span class="dot"></span>
                                                {{ $activeLoanCount }} Active
                                            </span>

                                        @else

                                            <span class="badge badge-expired">
                                                No Active Loan
                                            </span>

                                        @endif

                                    @else

                                        <span class="badge badge-expired">
                                            —
                                        </span>

                                    @endif

                                </td>


                                {{-- ACTIONS --}}

                                <td>


                                    <div
                                        class="action-buttons"
                                    >


                                        {{-- VIEW --}}

                                        <a
                                            href="{{ route(
                                                'admin.emi-cards.show',
                                                $card
                                            ) }}"
                                            class="small-btn view-btn"
                                        >

                                            View

                                        </a>



                                        {{-- PENDING ACTIONS --}}

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


                                            {{-- LIMIT --}}

                                            <button
                                                type="button"
                                                class="small-btn limit-btn"
                                                onclick="openLimitModal(
                                                    {{ $card->id }},
                                                    @js($name),
                                                    {{ $card->card_limit ?? 0 }}
                                                )"
                                            >

                                                Limit

                                            </button>


                                            {{-- APPROVE --}}

                                            @if($hasPaidPayment)


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


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

                                                        @csrf


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

                                                            ✓ Activate

                                                        </button>

                                                    </form>


                                                @else


                                                    <span
                                                        class="small-btn disabled-btn"
                                                    >

                                                        Set Limit

                                                    </span>


                                                @endif


                                            @else


                                                <span
                                                    class="small-btn disabled-btn"
                                                >

                                                    Payment Pending

                                                </span>


                                            @endif


                                        @endif



                                        {{-- ACTIVE → BLOCK --}}

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


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

                                                @csrf


                                                <button
                                                    type="submit"
                                                    class="small-btn block-btn"
                                                    onclick="
                                                        return confirm(
                                                            'Are you sure you want to block this EMI Card?'
                                                        )
                                                    "
                                                >

                                                    Block

                                                </button>

                                            </form>


                                        @endif



                                        {{-- BLOCKED → ACTIVATE --}}

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


                                            @if(
                                                !$isExpired
                                            )


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

                                                    @csrf


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

                                                        ✓ Activate

                                                    </button>

                                                </form>


                                            @else


                                                <span
                                                    class="small-btn disabled-btn"
                                                >

                                                    Expired

                                                </span>


                                            @endif


                                        @endif



                                        {{-- EXPIRED --}}

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

                                            <span
                                                class="small-btn disabled-btn"
                                            >

                                                Expired

                                            </span>

                                        @endif


                                    </div>


                                </td>


                            </tr>


                        @endforeach


                    </tbody>


                </table>


            @else


                <div class="empty">

                    <div
                        style="
                            font-size:30px;
                            margin-bottom:8px;
                        "
                    >
                        💳
                    </div>

                    No EMI cards found.

                </div>


            @endif


        </div>



        {{-- PAGINATION --}}

        @if($cards->hasPages())

            <div class="pagination-area">

                <div class="pagination-info">

                    Page
                    {{ $cards->currentPage() }}
                    of
                    {{ $cards->lastPage() }}

                </div>


                <div>

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

                </div>

            </div>

        @endif


    </div>


</div>



{{-- =====================================================
     GENERATE MODAL
====================================================== --}}

<div
    id="generateModal"
    class="modal-overlay"
    onclick="closeGenerateModal(event)"
>


    <div
        class="modal"
        onclick="event.stopPropagation()"
    >


        <div class="modal-header">

            <h3>
                Generate EMI Card
            </h3>


            <button
                type="button"
                class="modal-close"
                onclick="closeGenerateModal()"
            >

                ×

            </button>

        </div>


        <form
            method="POST"
            action="{{ route(
                'admin.emi-cards.generate'
            ) }}"
        >

            @csrf


            <div class="modal-body">


                <div class="form-group">

                    <label class="form-label">

                        Select Client

                    </label>


                    <select
                        name="user_id"
                        id="generateClient"
                        class="form-control"
                        required
                    >

                        <option value="">
                            Select eligible client
                        </option>


                        @foreach(
                            $eligibleClients as $client
                        )

                            <option
                                value="{{ $client->id }}"
                            >

                                {{ $client->name }}
                                —
                                {{ $client->email }}

                            </option>

                        @endforeach


                    </select>

                </div>


                <div
                    style="
                        padding:12px;
                        background:#f8fafc;
                        border:1px solid #e7edf4;
                        border-radius:8px;
                        color:#64748b;
                        font-size:8px;
                        line-height:1.6;
                    "
                >

                    <strong>
                        New EMI Card
                    </strong>

                    <br><br>

                    Status:
                    <strong>
                        Pending
                    </strong>

                    <br>

                    Loan Limit:
                    <strong>
                        ₹0.00
                    </strong>

                    <br>

                    Card will be activated only after
                    payment and admin approval.

                </div>


            </div>


            <div class="modal-footer">


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

                    Cancel

                </button>


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

                    Generate Card

                </button>


            </div>


        </form>


    </div>

</div>



{{-- =====================================================
     LIMIT MODAL
====================================================== --}}

<div
    id="limitModal"
    class="modal-overlay"
    onclick="closeLimitModal(event)"
>


    <div
        class="modal"
        onclick="event.stopPropagation()"
    >


        <div class="modal-header">

            <h3>
                Update Loan Limit
            </h3>


            <button
                type="button"
                class="modal-close"
                onclick="closeLimitModal()"
            >

                ×

            </button>

        </div>


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

            @csrf

            @method('PUT')


            <div class="modal-body">


                <div
                    style="
                        margin-bottom:14px;
                        color:#64748b;
                        font-size:8px;
                    "
                >

                    Client:

                    <strong
                        id="limitClientName"
                        style="color:#273b59;"
                    ></strong>

                </div>


                <div class="form-group">

                    <label class="form-label">

                        Loan Limit

                    </label>


                    <input
                        type="number"
                        name="card_limit"
                        id="cardLimit"
                        class="form-control"
                        min="0"
                        step="0.01"
                        required
                    >

                </div>


                <div
                    style="
                        padding:11px;
                        background:#fff7e8;
                        border:1px solid #fde68a;
                        border-radius:8px;
                        color:#92400e;
                        font-size:8px;
                        line-height:1.5;
                    "
                >

                    Changing the loan limit does not
                    activate the card.

                    <br>

                    Payment and admin approval are still
                    required.

                </div>


            </div>


            <div class="modal-footer">


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

                    Cancel

                </button>


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

                    Save Limit

                </button>


            </div>


        </form>


    </div>

</div>


@endsection



@push('scripts')

<script>

    /*
    |--------------------------------------------------------------------------
    | Generate Modal
    |--------------------------------------------------------------------------
    */

    function openGenerateModal(
        clientId = ''
    ) {

        const modal =
            document.getElementById(
                'generateModal'
            );

        const select =
            document.getElementById(
                'generateClient'
            );


        if (
            select &&
            clientId
        ) {

            select.value =
                clientId;

        }


        if (modal) {

            modal.classList.add(
                'show'
            );

        }

    }


    function closeGenerateModal(
        event = null
    ) {

        if (
            event &&
            event.target &&
            event.target.id !==
                'generateModal'
        ) {

            return;

        }


        const modal =
            document.getElementById(
                'generateModal'
            );


        if (modal) {

            modal.classList.remove(
                'show'
            );

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Limit Modal
    |--------------------------------------------------------------------------
    */

    function openLimitModal(
        cardId,
        clientName,
        currentLimit
    ) {

        const modal =
            document.getElementById(
                'limitModal'
            );

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

        const name =
            document.getElementById(
                'limitClientName'
            );

        const input =
            document.getElementById(
                'cardLimit'
            );


        if (
            !modal ||
            !form
        ) {

            return;

        }


        form.action =
            "{{ url('/admin/emi-cards') }}"
            + "/"
            + cardId
            + "/limit";


        if (name) {

            name.textContent =
                clientName;

        }


        if (input) {

            input.value =
                currentLimit ?? 0;

        }


        modal.classList.add(
            'show'
        );

    }


    function closeLimitModal(
        event = null
    ) {

        if (
            event &&
            event.target &&
            event.target.id !==
                'limitModal'
        ) {

            return;

        }


        const modal =
            document.getElementById(
                'limitModal'
            );


        if (modal) {

            modal.classList.remove(
                'show'
            );

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Escape Key
    |--------------------------------------------------------------------------
    */

    document.addEventListener(
        'keydown',
        function (event) {

            if (
                event.key === 'Escape'
            ) {

                closeGenerateModal();

                closeLimitModal();

            }

        }
    );

</script>

@endpush