@extends('admin.layouts.app')

@section('title', 'EMI Cards | EMI CREDITS')

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

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


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

<style>
/* =====================================================
   EMI CARD MODALS
   Unique classes - no existing CSS override
====================================================== */

.emi-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    background: rgba(15, 23, 42, 0.55);
}

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

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

    background: #ffffff;

    border-radius: 14px;

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

    overflow: hidden;

    position: relative;

    animation: emiModalShow .18s ease-out;
}

@keyframes emiModalShow {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

    gap: 12px;

    padding: 18px 20px;

    border-bottom: 1px solid #edf1f6;
}

.emi-modal-header h3 {
    margin: 0;

    color: #273b59;

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

.emi-modal-close {
    width: 31px;
    height: 31px;

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

    border: 0;
    border-radius: 8px;

    background: #f1f5f9;
    color: #64748b;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

.emi-modal-close:hover {
    background: #e2e8f0;
    color: #273b59;
}

.emi-modal-body {
    padding: 20px;
}

.emi-form-group {
    margin-bottom: 15px;
}

.emi-form-label {
    display: block;

    margin-bottom: 7px;

    color: #64748b;

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

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

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

    box-sizing: border-box;

    padding: 0 11px;

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

    outline: none;

    color: #344966;
    background: #ffffff;

    font-size: 11px;
}

.emi-form-control:focus {
    border-color: #1769e0;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.emi-modal-info-box {
    padding: 13px;

    background: #f8fafc;

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

    color: #64748b;

    font-size: 10px;
    line-height: 1.6;
}

.emi-modal-info-box strong {
    color: #344966;
}

.emi-modal-warning-box {
    padding: 12px;

    background: #fff7e8;

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

    color: #92400e;

    font-size: 10px;
    line-height: 1.5;
}

.emi-modal-footer {
    display: flex;

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

    gap: 8px;

    padding: 15px 20px;

    border-top: 1px solid #edf1f6;
}

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

    padding: 0 14px;

    border-radius: 7px;

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

    cursor: pointer;
}

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

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

.emi-cancel-btn:hover {
    background: #f8fafc;
}

.emi-save-btn {
    border: 0;

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

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


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

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

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

    gap: 10px;
}

.pagination-info {
    color: #9aa6b6;
    font-size: 10px;
    font-weight: 600;
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-btn {
    min-width: 36px;
    height: 36px;

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

    padding: 0 10px;

    box-sizing: border-box;

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

    background: #ffffff;
    color: #64748b;

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

    text-decoration: none;

    line-height: 1;
}

.page-btn:hover {
    border-color: #1769e0;
    color: #1769e0;
    background: #f8fbff;
}

.page-btn.active {
    border-color: #1769e0;

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

.page-btn.disabled {
    background: #f8fafc;
    color: #cbd5e1;

    cursor: default;
}

.page-btn.disabled:hover {
    border-color: #dce4ef;
    color: #cbd5e1;
    background: #f8fafc;
}


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

@media (max-width: 600px) {

    .emi-modal-overlay {
        padding: 14px;
    }

    .emi-modal {
        max-width: 100%;
        border-radius: 12px;
    }

    .emi-modal-header {
        padding: 15px 16px;
    }

    .emi-modal-header h3 {
        font-size: 14px;
    }

    .emi-modal-body {
        padding: 16px;
    }

    .emi-modal-footer {
        padding: 13px 16px;
    }

    .emi-modal-footer button {
        flex: 1;
    }

    .pagination-area {
        align-items: center;
    }

    .pagination-info {
        font-size: 9px;
    }

    .pagination-links {
        gap: 4px;
    }

    .page-btn {
        min-width: 34px;
        height: 34px;

        padding: 0 8px;

        font-size: 10px;
    }
}
</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">
                                        {{ money((float)($card->card_limit ?? 0)) }}
                                    </span>

                                </td>



                                {{-- AVAILABLE --}}

                                <td>

                                    <span class="money">
                                        {{ money((float)($card->available_limit ?? 0)) }}
                                    </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:10px;
                                                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 class="pagination-links">


                    {{-- PREVIOUS --}}

                    @if($cards->onFirstPage())

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

                    @else

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

                    @endif



                    {{-- PAGE NUMBERS --}}

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

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

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

                        @else

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

                        @endif

                    @endforeach



                    {{-- NEXT --}}

                    @if($cards->hasMorePages())

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

                    @else

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

                    @endif

                </div>

            </div>

        @endif


    </div>


</div>



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

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

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


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

            <h3>
                Generate EMI Card
            </h3>


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

        </div>


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

            @csrf


            <div class="emi-modal-body">


                <div class="emi-form-group">

                    <label class="emi-form-label">
                        Select Client
                    </label>


                    <select
                        name="user_id"
                        id="generateClient"
                        class="emi-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 class="emi-modal-info-box">

                    <strong>
                        New EMI Card
                    </strong>

                    <br><br>

                    Status:
                    <strong>
                        Pending
                    </strong>

                    <br>

                    Loan Limit:
                    <strong>
                        {{ money(0) }}
                    </strong>

                    <br>

                    Card will be activated only after
                    payment and admin approval.

                </div>


            </div>


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


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


                <button
                    type="submit"
                    class="emi-save-btn"
                >
                    Generate Card
                </button>


            </div>


        </form>


    </div>

</div>



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

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

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


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

            <h3>
                Update Loan Limit
            </h3>


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

        </div>


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

            @csrf

            @method('PUT')


            <div class="emi-modal-body">


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

                    Client:

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

                </div>


                <div class="emi-form-group">

                    <label class="emi-form-label">
                        Loan Limit
                    </label>


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

                </div>


                <div class="emi-modal-warning-box">

                    Changing the loan limit does not
                    activate the card.

                    <br>

                    Payment and admin approval are still
                    required.

                </div>


            </div>


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


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


                <button
                    type="submit"
                    class="emi-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');

        document.body.style.overflow = 'hidden';

    }
}


function closeGenerateModal(event = null)
{
    if (
        event &&
        event.target &&
        event.target.id !== 'generateModal'
    ) {
        return;
    }


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


    if (modal) {

        modal.classList.remove('show');

        document.body.style.overflow = '';

    }
}



/*
|--------------------------------------------------------------------------
| 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');

    document.body.style.overflow = 'hidden';
}


function closeLimitModal(event = null)
{
    if (
        event &&
        event.target &&
        event.target.id !== 'limitModal'
    ) {
        return;
    }


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


    if (modal) {

        modal.classList.remove('show');

        document.body.style.overflow = '';

    }
}



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

document.addEventListener(
    'keydown',
    function(event)
    {
        if (event.key === 'Escape') {

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

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


            if (
                generateModal &&
                generateModal.classList.contains('show')
            ) {

                closeGenerateModal();

            }


            if (
                limitModal &&
                limitModal.classList.contains('show')
            ) {

                closeLimitModal();

            }

        }
    }
);

</script>

@endpush