@extends('admin.layouts.app')

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

@section('content')

<div class="loan-show-page">
    <div class="loan-show-container">

        <a href="{{ route('admin.loans') }}" class="loan-back">
            ← Back to Loans
        </a>

        @if(session('success'))
            <div class="loan-alert loan-alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="loan-alert loan-alert-error">
                {{ session('error') }}
            </div>
        @endif

@php
    $clientName = $loan->user->name ?? 'Unknown Client';

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

    $paidTotal = (float) $loan->installments->sum('paid_amount');

    $outstanding = $loan->status === 'rejected'
    ? 0
    : (float) $loan->outstanding_amount;

    $totalPayable = (float) $loan->total_payable;

    $paidPercent =
        $totalPayable > 0
            ? min(
                100,
                max(
                    0,
                    ($paidTotal / $totalPayable) * 100
                )
            )
            : 0;

    $currencySymbol =
        preg_replace(
            '/[0-9.,\s-]+$/',
            '',
            money(0)
        );

    /*
    |--------------------------------------------------------------------------
    | Bank Details
    |--------------------------------------------------------------------------
    */

    $bankDetail = $loan->user?->bankDetail;

@endphp


<div class="loan-head">

    <div>

        <h1>
            Loan Details
        </h1>

        <p>
            Review the application, financial terms and repayment schedule.
        </p>

    </div>


    <div class="loan-head-actions">

        <a
            href="{{ route('admin.loans') }}"
            class="ls-btn ls-btn-light"
        >
            All Loans
        </a>


        @if($loan->status === 'pending')

            <form
                method="POST"
                action="{{ route('admin.loans.approve',$loan) }}"
                onsubmit="return confirm('Approve this loan?')"
            >

                @csrf

                <button
                    class="ls-btn ls-btn-green"
                    type="submit"
                >
                    ✓ Approve Loan
                </button>

            </form>

        @elseif($loan->status === 'approved')

            @if(
                (float)$loan->processing_fee <= 0
                ||
                $loan->processing_fee_paid_at
            )

                <form
                    method="POST"
                    action="{{ route('admin.loans.disburse',$loan) }}"
                    onsubmit="return confirm('Disburse this loan and generate the EMI schedule?')"
                >

                    @csrf

                    <button
                        class="ls-btn ls-btn-blue"
                        type="submit"
                    >
                        {{ $currencySymbol }} Disburse Loan
                    </button>

                </form>

            @else

                <span
                    class="ls-btn ls-btn-light"
                    style="
                        cursor:default;
                        color:#b36b00
                    "
                >
                    Processing Fee Unpaid
                </span>

            @endif

        @endif

    </div>

</div>



<div class="loan-grid">


<div>


{{-- ==========================================================
     LOAN HERO
=========================================================== --}}

<div class="loan-hero ls-card">

    <div class="loan-hero-top">

        <div>

            <div class="loan-hero-label">
                Loan Number
            </div>

            <div class="loan-number">
                {{ $loan->loan_number }}
            </div>

        </div>

        <div class="loan-hero-status">
            {{ ucfirst($loan->status) }}
        </div>

    </div>


    <div class="loan-hero-bottom">

        <div class="loan-hero-stat">

            <span>
                Loan Amount
            </span>

            <strong>
                {{ money((float)$loan->loan_amount) }}
            </strong>

        </div>


        <div class="loan-hero-stat">

            <span>
                EMI
            </span>

            <strong>
                {{ money((float)$loan->emi_amount) }}
            </strong>

        </div>


        <div class="loan-hero-stat">

            <span>
                Tenure
            </span>

            <strong>
                {{ $loan->tenure_months }} Months
            </strong>

        </div>


        <div class="loan-hero-stat">

            <span>
                Outstanding
            </span>

            <strong>
                {{ money($outstanding) }}
            </strong>

        </div>

    </div>

</div>



{{-- ==========================================================
     LOAN FINANCIAL DETAILS
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Loan Financial Details
        </h2>

        <span>
            0% interest / configurable processing fee
        </span>

    </div>


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

        <div class="detail-grid">

            <div class="detail-item">

                <small>
                    Principal
                </small>

                <strong>
                    {{ money((float)$loan->loan_amount) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Interest Rate
                </small>

                <strong class="green">
                    {{ number_format((float)$loan->interest_rate,2) }}%
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Interest Amount
                </small>

                <strong>
                    {{ money((float)$loan->interest_amount) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Processing Fee
                </small>

                <strong>
                    {{ money((float)$loan->processing_fee) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Processing Fee Status
                </small>

                @if($loan->processing_fee_paid_at)

                    <strong class="green">
                        ✓ Paid
                    </strong>

                @elseif(
                    $loan->status === 'approved'
                    &&
                    (float)$loan->processing_fee > 0
                )

                    <strong style="color:#b36b00">
                        Unpaid
                    </strong>

                @elseif(
                    (float)$loan->processing_fee <= 0
                )

                    <strong class="green">
                        No Fee
                    </strong>

                @else

                    <strong>
                        After Approval
                    </strong>

                @endif

            </div>


            <div class="detail-item">

                <small>
                    Total Payable
                </small>

                <strong class="blue">
                    {{ money($totalPayable) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    EMI Amount
                </small>

                <strong>
                    {{ money((float)$loan->emi_amount) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Disbursed Amount
                </small>

                <strong>
                    {{ money((float)$loan->disbursed_amount) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Outstanding
                </small>

                <strong>
                    {{ money($outstanding) }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Tenure
                </small>

                <strong>
                    {{ $loan->tenure_months }} months
                </strong>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     LOAN TYPE & DETAILS
=========================================================== --}}

@if($loan->loanDetail)

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Loan Type & Details
        </h2>

        <span>
            {{ $loan->loanDetail->loanType->name ?? '—' }}
        </span>

    </div>


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


        {{-- Loan Type --}}

        <div
            class="detail-item"
            style="margin-bottom:12px;"
        >

            <small>
                Loan Type
            </small>

            <strong>
                {{ $loan->loanDetail->loanType->name ?? '—' }}
            </strong>

        </div>



        {{-- Dynamic Details --}}

        @if(
            is_array($loan->loanDetail->details) &&
            count($loan->loanDetail->details)
        )

            <div class="detail-grid">

                @foreach(
                    $loan->loanDetail->details
                    as $key => $value
                )

                    @if(
                        !is_null($value)
                        &&
                        $value !== ''
                    )

                        <div class="detail-item">

                            <small>

                                {{
                                    ucwords(
                                        str_replace(
                                            '_',
                                            ' ',
                                            $key
                                        )
                                    )
                                }}

                            </small>

                            <strong>

                                @if(is_array($value))

                                    {{ implode(', ', $value) }}

                                @else

                                    {{ $value }}

                                @endif

                            </strong>

                        </div>

                    @endif

                @endforeach

            </div>

        @else

            <div
                style="
                    padding:13px;
                    border-radius:11px;
                    background:#f7f9fc;
                    border:1px solid #e5ebf2;
                    color:#8392a4;
                    font-size:11px;
                "
            >
                No additional loan details available.
            </div>

        @endif

    </div>

</div>

@endif



{{-- ==========================================================
     PROCESSING FEE
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Processing Fee
        </h2>

        <span>
            Separate from EMI
        </span>

    </div>


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


        <div
            style="
                display:grid;
                grid-template-columns:repeat(2,1fr);
                gap:10px
            "
        >

            <div class="detail-item">

                <small>
                    Fee Amount
                </small>

                <strong style="color:#b36b00">

                    {{
                        money(
                            (float)$loan->processing_fee
                        )
                    }}

                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Status
                </small>

                @if($loan->processing_fee_paid_at)

                    <strong class="green">
                        ✓ Paid
                    </strong>

                @elseif(
                    $loan->status === 'approved'
                    &&
                    (float)$loan->processing_fee > 0
                )

                    <strong style="color:#b36b00">
                        Unpaid
                    </strong>

                @elseif(
                    (float)$loan->processing_fee <= 0
                )

                    <strong class="green">
                        No Fee
                    </strong>

                @else

                    <strong>
                        After Approval
                    </strong>

                @endif

            </div>

        </div>


        @if($loan->processing_fee_paid_at)

            <div
                style="
                    margin-top:11px;
                    padding:11px 13px;
                    border-radius:10px;
                    background:#eaf8f0;
                    border:1px solid #ccebd9;
                    color:#287646;
                    font-size:10px;
                    line-height:1.6
                "
            >

                <strong>
                    ✓ Processing fee paid
                </strong>

                <br>

                Paid on
                {{ $loan->processing_fee_paid_at->format('d M Y h:i A') }}

                @if($loan->processingFeePayer)

                    · By
                    {{ $loan->processingFeePayer->name }}

                @endif

            </div>

        @elseif(
            $loan->status === 'approved'
            &&
            (float)$loan->processing_fee > 0
        )

            <div
                style="
                    margin-top:11px;
                    padding:11px 13px;
                    border-radius:10px;
                    background:#fff7e8;
                    border:1px solid #f1dfb7;
                    color:#8b610b;
                    font-size:10px;
                    line-height:1.6
                "
            >

                <strong>
                    Processing fee is unpaid.
                </strong>

                <br>

                Mark the fee as paid before disbursing this loan.

            </div>


            <form
                method="POST"
                action="{{ route('admin.loans.pay-processing-fee',$loan) }}"
                style="margin-top:11px"
            >

                @csrf


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

                    <div>

                        <label
                            style="
                                display:block;
                                margin-bottom:4px;
                                color:#63758c;
                                font-size:8px;
                                font-weight:800
                            "
                        >
                            Payment Method
                        </label>


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

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

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

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

                        </select>

                    </div>


                    <div>

                        <label
                            style="
                                display:block;
                                margin-bottom:4px;
                                color:#63758c;
                                font-size:8px;
                                font-weight:800
                            "
                        >
                            Reference Number
                        </label>


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

                    </div>

                </div>


                <div style="margin-top:8px">

                    <label
                        style="
                            display:block;
                            margin-bottom:4px;
                            color:#63758c;
                            font-size:8px;
                            font-weight:800
                        "
                    >
                        Remarks
                    </label>


                    <input
                        type="text"
                        name="remarks"
                        maxlength="2000"
                        placeholder="Optional"
                        style="
                            width:100%;
                            height:40px;
                            border:1px solid #dfe6ee;
                            border-radius:9px;
                            padding:0 9px;
                            background:#fff;
                            color:#304761;
                            font-size:9px
                        "
                    >

                </div>


                <button
                    type="submit"
                    class="ls-btn ls-btn-green"
                    style="
                        width:100%;
                        margin-top:9px
                    "
                    onclick="return confirm('Mark processing fee of {{ money((float)$loan->processing_fee) }} as paid?')"
                >

                    ✓ Mark Processing Fee Paid ·
                    {{ money((float)$loan->processing_fee) }}

                </button>

            </form>

        @elseif(
            $loan->status === 'pending'
            &&
            (float)$loan->processing_fee > 0
        )

            <div
                style="
                    margin-top:11px;
                    padding:11px 13px;
                    border-radius:10px;
                    background:#f7f9fc;
                    border:1px solid #e5ebf2;
                    color:#65778d;
                    font-size:10px;
                    line-height:1.6
                "
            >

                Processing fee payment becomes available after loan approval.

            </div>

        @elseif(
            (float)$loan->processing_fee <= 0
        )

            <div
                style="
                    margin-top:11px;
                    padding:11px 13px;
                    border-radius:10px;
                    background:#eaf8f0;
                    border:1px solid #ccebd9;
                    color:#287646;
                    font-size:10px;
                    line-height:1.6
                "
            >

                No processing fee is due for this loan.

            </div>

        @endif

    </div>

</div>



{{-- ==========================================================
     EMI REPAYMENT SCHEDULE
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            EMI Repayment Schedule
        </h2>

        <span>
            {{ $loan->installments->count() }} installments
        </span>

    </div>


    @if($loan->installments->count())

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

            <table class="emi-table">

                <thead>

                    <tr>

                        <th>
                            #
                        </th>

                        <th>
                            Due Date
                        </th>

                        <th>
                            Principal
                        </th>

                        <th>
                            Interest
                        </th>

                        <th>
                            EMI
                        </th>

                        <th>
                            Paid
                        </th>

                        <th>
                            Outstanding
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Action
                        </th>

                    </tr>

                </thead>


                <tbody>

                @foreach(
                    $loan->installments
                    as $emi
                )

                    @php

                        $emiStatus =
                            match($emi->status) {

                                'paid'
                                    => 'emi-paid',

                                'partial'
                                    => 'emi-partial',

                                'overdue'
                                    => 'emi-overdue',

                                'cancelled'
                                    => 'emi-cancelled',

                                default
                                    => 'emi-pending'

                            };

                    @endphp


                    <tr>

                        <td class="emi-no">
                            #{{ $emi->installment_number }}
                        </td>


                        <td>
                            {{ optional($emi->due_date)->format('d M Y') }}
                        </td>


                        <td class="emi-money">
                            {{ money((float)$emi->principal_amount) }}
                        </td>


                        <td>
                            {{ money((float)$emi->interest_amount) }}
                        </td>


                        <td class="emi-money">
                            {{ money((float)$emi->emi_amount) }}
                        </td>


                        <td>
                            {{ money((float)$emi->paid_amount) }}
                        </td>


                        <td>
                            {{ money((float)$emi->outstanding_amount) }}
                        </td>


                        <td>

                            <span
                                class="
                                    emi-status
                                    {{ $emiStatus }}
                                "
                            >

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

                            </span>

                        </td>


                        <td>

                            @if(
                                in_array(
                                    $loan->status,
                                    [
                                        'active',
                                        'disbursed',
                                        'overdue'
                                    ],
                                    true
                                )
                                &&
                                !in_array(
                                    $emi->status,
                                    [
                                        'paid',
                                        'cancelled'
                                    ],
                                    true
                                )
                                &&
                                (float)$emi->outstanding_amount > 0
                            )

                                <button
                                    type="button"
                                    class="emi-pay-btn"
                                    data-installment-id="{{ $emi->id }}"
                                    data-installment-number="{{ $emi->installment_number }}"
                                    data-amount="{{ (float) $emi->outstanding_amount }}"
                                    data-formatted-amount="{{ money((float) $emi->outstanding_amount) }}"
                                >
                                    💳 Pay
                                </button>

                            @else

                                —

                            @endif

                        </td>

                    </tr>

                @endforeach

                </tbody>

            </table>

        </div>

    @else

        <div
            class="ls-card-body"
            style="
                color:#8392a4;
                font-size:12px
            "
        >

            EMI schedule has not been generated yet.
            It will be created when the approved loan is disbursed.

        </div>

    @endif

</div>



{{-- ==========================================================
     REJECTION REASON
=========================================================== --}}

@if($loan->rejection_reason)

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Rejection Reason
        </h2>

    </div>


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

        <div class="rejection-box">
            {{ $loan->rejection_reason }}
        </div>

    </div>

</div>

@endif



{{-- ==========================================================
     ADMIN NOTES
=========================================================== --}}

@if($loan->admin_notes)

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Admin Notes
        </h2>

    </div>


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

        <div class="notes-box">
            {{ $loan->admin_notes }}
        </div>

    </div>

</div>

@endif


</div>



{{-- ==========================================================
     RIGHT SIDE
=========================================================== --}}

<div>


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

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Client
        </h2>

        <span>
            ID #{{ $loan->user_id }}
        </span>

    </div>


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

        <div class="client-box">

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


            <div>

                <div class="client-name">
                    {{ $clientName }}
                </div>


                <div class="client-sub">
                    {{ $loan->user->mobile ?? 'No mobile' }}
                </div>


                <div class="client-sub">
                    {{ $loan->user->email ?? 'No email' }}
                </div>

            </div>

        </div>


        <div class="client-links">

            <a
                href="{{ route('admin.clients.show',$loan->user) }}"
                class="client-link"
            >
                View Client Profile →
            </a>

        </div>

    </div>

</div>



{{-- ==========================================================
     BANK ACCOUNT
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Bank Account
        </h2>

        <span>
            Client bank details
        </span>

    </div>


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

        @if($bankDetail)

            <div
                class="detail-grid"
                style="
                    grid-template-columns:1fr
                "
            >


                <div class="detail-item">

                    <small>
                        Bank Name
                    </small>

                    <strong>
                        {{ $bankDetail->bank_name ?? '—' }}
                    </strong>

                </div>



                <div class="detail-item">

                    <small>
                        Branch
                    </small>

                    <strong>
                        {{ $bankDetail->branch ?? '—' }}
                    </strong>

                </div>



                <div class="detail-item">

                    <small>
                        Account Number
                    </small>

                    <strong>
                        {{ $bankDetail->account_number ?? '—' }}
                    </strong>

                </div>



                <div class="detail-item">

                    <small>
                        IFSC Code
                    </small>

                    <strong>
                        {{ $bankDetail->ifsc_code ?? '—' }}
                    </strong>

                </div>


            </div>

        @else

            <div
                style="
                    padding:13px;
                    border-radius:11px;
                    background:#f7f9fc;
                    border:1px solid #e5ebf2;
                    color:#8392a4;
                    font-size:11px;
                "
            >

                Bank details have not been submitted yet.

            </div>

        @endif

    </div>

</div>



{{-- ==========================================================
     EMI CARD
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            EMI Card
        </h2>

        <span>
            {{ ucfirst($loan->emiCard->status ?? 'Unknown') }}
        </span>

    </div>


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

        <div
            class="detail-grid"
            style="
                grid-template-columns:1fr
            "
        >

            <div class="detail-item">

                <small>
                    Card Number
                </small>

                <strong>
                    {{ $loan->emiCard->card_number ?? '—' }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Card Limit
                </small>

                <strong>

                    {{
                        money(
                            (float)(
                                $loan->emiCard->card_limit
                                ?? 0
                            )
                        )
                    }}

                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Available Limit
                </small>

                <strong class="green">

                    {{
                        money(
                            (float)(
                                $loan->emiCard->available_limit
                                ?? 0
                            )
                        )
                    }}

                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Validity
                </small>

                <strong>

                    {{
                        optional(
                            $loan->emiCard->issued_at
                        )->format('d M Y')
                    }}

                    —

                    {{
                        optional(
                            $loan->emiCard->expires_at
                        )->format('d M Y')
                    }}

                </strong>

            </div>

        </div>

    </div>

</div>



{{-- ==========================================================
     REPAYMENT PROGRESS
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Repayment Progress
        </h2>

    </div>


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

        <div class="side-summary">

            <div class="side-row">

                <span>
                    Total Payable
                </span>

                <strong>
                    {{ money($totalPayable) }}
                </strong>

            </div>


            <div class="side-row">

                <span>
                    Paid
                </span>

                <strong style="color:#198754">
                    {{ money($paidTotal) }}
                </strong>

            </div>


            <div class="side-row">

                <span>
                    Outstanding
                </span>

                <strong>
                    {{ money($outstanding) }}
                </strong>

            </div>


            <div class="side-row">

                <span>
                    Progress
                </span>

                <strong>
                    {{ number_format($paidPercent,1) }}%
                </strong>

            </div>

        </div>


        <div class="progress">

            <span
                style="
                    width:{{ $paidPercent }}%
                "
            ></span>

        </div>

    </div>

</div>



{{-- ==========================================================
     LOAN ACTIONS
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Loan Actions
        </h2>

        <span>

            {{
                $loan->isClosed()
                    ? 'No further action'
                    : 'Manage loan'
            }}

        </span>

    </div>


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


        @if($loan->isClosed())


            <div
                style="
                    padding:15px;
                    border-radius:12px;
                    background:#eef8f2;
                    border:1px solid #ccebd9;
                "
            >

                <div
                    style="
                        display:flex;
                        align-items:center;
                        gap:10px;
                        margin-bottom:12px;
                    "
                >

                    <div
                        style="
                            width:36px;
                            height:36px;
                            border-radius:10px;
                            background:#198754;
                            color:#fff;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            font-size:16px;
                            font-weight:900;
                        "
                    >
                        ✓
                    </div>


                    <div>

                        <div
                            style="
                                font-size:13px;
                                font-weight:900;
                                color:#176b45;
                            "
                        >
                            Loan Closed
                        </div>


                        <div
                            style="
                                font-size:9px;
                                color:#6d8a7b;
                                margin-top:2px;
                            "
                        >
                            This loan is marked as closed.
                        </div>

                    </div>

                </div>


                <div class="side-summary">

                    <div class="side-row">

                        <span>
                            Closed On
                        </span>

                        <strong>

                            {{
                                optional(
                                    $loan->closed_at
                                )->format(
                                    'd M Y h:i A'
                                )
                                ?? '—'
                            }}

                        </strong>

                    </div>


                    <div class="side-row">

                        <span>
                            Closed By
                        </span>

                        <strong>
                            {{ $loan->closer->name ?? 'Admin' }}
                        </strong>

                    </div>


                    <div class="side-row">

                        <span>
                            Close Reason
                        </span>

                        <strong
                            style="
                                max-width:65%;
                            "
                        >
                            {{ $loan->close_reason ?: '—' }}
                        </strong>

                    </div>

                </div>

            </div>


        @else


            <div class="action-stack">


                @if(
                    $outstanding > 0
                    &&
                    in_array(
                        $loan->status,
                        [
                            'active',
                            'disbursed',
                            'overdue'
                        ],
                        true
                    )
                )

                    <button
                        type="button"
                        class="ls-btn ls-btn-blue"
                        onclick="openOutstandingPaymentModal()"
                    >

                        💳 Pay Outstanding
                        {{ money($outstanding) }}

                    </button>

                @endif



                {{-- Close Loan --}}

                <button
                    type="button"
                    class="ls-btn ls-btn-red"
                    onclick="openCloseLoanModal()"
                >

                    🔒 Close Loan

                </button>



                @if($loan->status === 'pending')


                    <form
                        method="POST"
                        action="{{ route('admin.loans.approve',$loan) }}"
                        onsubmit="return confirm('Approve this loan?')"
                    >

                        @csrf

                        <button
                            type="submit"
                            class="ls-btn ls-btn-green"
                        >

                            ✓ Approve Loan

                        </button>

                    </form>


                    <form
                        method="POST"
                        action="{{ route('admin.loans.reject',$loan) }}"
                        onsubmit="return rejectLoan(this)"
                    >

                        @csrf

                        <input
                            type="hidden"
                            name="rejection_reason"
                        >

                        <button
                            type="submit"
                            class="ls-btn ls-btn-red"
                        >

                            × Reject Loan

                        </button>

                    </form>


                @elseif($loan->status === 'approved')


                    @if(
                        (float)$loan->processing_fee <= 0
                        ||
                        $loan->processing_fee_paid_at
                    )

                        <form
                            method="POST"
                            action="{{ route('admin.loans.disburse',$loan) }}"
                            onsubmit="return confirm('Disburse this loan? The EMI schedule will be generated and the EMI card limit will be reduced.')"
                        >

                            @csrf

                            <button
                                type="submit"
                                class="ls-btn ls-btn-blue"
                            >

                                {{ $currencySymbol }}
                                Disburse & Generate EMI

                            </button>

                        </form>

                    @else

                        <div
                            style="
                                padding:11px 12px;
                                border-radius:10px;
                                background:#fff7e8;
                                border:1px solid #f1dfb7;
                                color:#8b610b;
                                font-size:10px;
                                line-height:1.6
                            "
                        >

                            <strong>
                                Disbursement locked.
                            </strong>

                            <br>

                            Processing fee must be marked as paid first.

                        </div>

                    @endif


                    <form
                        method="POST"
                        action="{{ route('admin.loans.reject',$loan) }}"
                        onsubmit="return rejectLoan(this)"
                    >

                        @csrf

                        <input
                            type="hidden"
                            name="rejection_reason"
                        >

                        <button
                            type="submit"
                            class="ls-btn ls-btn-red"
                        >

                            × Reject Loan

                        </button>

                    </form>


                @endif



                @if(
                    in_array(
                        $loan->status,
                        [
                            'pending',
                            'approved'
                        ],
                        true
                    )
                )

                    <form
                        method="POST"
                        action="{{ route('admin.loans.cancel',$loan) }}"
                        onsubmit="return confirm('Cancel this loan?')"
                    >

                        @csrf

                        <button
                            type="submit"
                            class="ls-btn ls-btn-light"
                        >

                            Cancel Loan

                        </button>

                    </form>

                @endif

            </div>


        @endif

    </div>

</div>



{{-- ==========================================================
     CLOSED LOAN
=========================================================== --}}

@if($loan->isClosed())

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Closed Loan
        </h2>

        <span>
            Account closed
        </span>

    </div>


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

        <div
            class="detail-grid"
            style="
                grid-template-columns:1fr
            "
        >

            <div class="detail-item">

                <small>
                    Closed At
                </small>

                <strong>

                    {{
                        optional(
                            $loan->closed_at
                        )->format(
                            'd M Y h:i A'
                        )
                        ?? '—'
                    }}

                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Closed By
                </small>

                <strong>
                    {{ $loan->closer->name ?? '—' }}
                </strong>

            </div>


            <div class="detail-item">

                <small>
                    Close Reason
                </small>

                <strong>
                    {{ $loan->close_reason ?? '—' }}
                </strong>

            </div>

        </div>

    </div>

</div>

@endif



{{-- ==========================================================
     TIMELINE
=========================================================== --}}

<div class="ls-card">

    <div class="ls-card-head">

        <h2>
            Timeline
        </h2>

    </div>


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

        <div class="side-summary">


            <div class="side-row">

                <span>
                    Applied
                </span>

                <strong>

                    {{
                        optional(
                            $loan->applied_at
                            ?? $loan->created_at
                        )->format(
                            'd M Y h:i A'
                        )
                    }}

                </strong>

            </div>


            <div class="side-row">

                <span>
                    Approved
                </span>

                <strong>

                    {{
                        optional(
                            $loan->approved_at
                        )->format(
                            'd M Y h:i A'
                        )
                        ?? '—'
                    }}

                </strong>

            </div>


            <div class="side-row">

                <span>
                    First EMI
                </span>

                <strong>

                    {{
                        optional(
                            $loan->first_emi_date
                        )->format(
                            'd M Y'
                        )
                        ?? '—'
                    }}

                </strong>

            </div>


            <div class="side-row">

                <span>
                    Disbursed
                </span>

                <strong>

                    {{
                        optional(
                            $loan->disbursed_at
                        )->format(
                            'd M Y h:i A'
                        )
                        ?? '—'
                    }}

                </strong>

            </div>


            <div class="side-row">

                <span>
                    Completed
                </span>

                <strong>

                    {{
                        optional(
                            $loan->completed_at
                        )->format(
                            'd M Y'
                        )
                        ?? '—'
                    }}

                </strong>

            </div>


        </div>

    </div>

</div>


</div>

</div>

</div>



{{-- ==========================================================
     EMI PAYMENT MODAL CSS
=========================================================== --}}

<style>

.emi-pay-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:7px;
    padding:6px 9px;
    background:#eaf3ff;
    color:#1769e0;
    font-size:9px;
    font-weight:900;
    cursor:pointer
}

.emi-pay-btn:hover{
    background:#1769e0;
    color:#fff
}

.payment-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(5,18,35,.58);
    padding:20px;
    align-items:center;
    justify-content:center
}

.payment-modal{
    width:100%;
    max-width:460px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 25px 70px rgba(0,0,0,.22);
    overflow:hidden
}

.payment-modal-head{
    padding:18px 20px;
    border-bottom:1px solid #edf1f5
}

.payment-modal-head h3{
    margin:0;
    font-size:17px;
    color:#203750
}

.payment-modal-head p{
    margin:5px 0 0;
    color:#8493a5;
    font-size:10px
}

.payment-modal-body{
    padding:18px 20px
}

.payment-amount{
    padding:13px;
    border-radius:11px;
    background:#eaf2ff;
    border:1px solid #d7e6ff;
    color:#1769e0;
    font-size:13px;
    font-weight:900;
    margin-bottom:13px
}

.payment-label{
    display:block;
    font-size:9px;
    font-weight:800;
    color:#63758c;
    margin:10px 0 5px
}

.payment-input,
.payment-select,
.payment-textarea{
    width:100%;
    border:1px solid #dfe6ee;
    border-radius:9px;
    padding:10px;
    font:inherit;
    font-size:10px;
    outline:none;
    background:#fff
}

.payment-textarea{
    min-height:70px;
    resize:vertical
}

.payment-modal-actions{
    display:flex;
    gap:8px;
    margin-top:15px
}

.payment-modal-actions button{
    flex:1
}

</style>



{{-- ==========================================================
     CLOSE LOAN MODAL CSS
=========================================================== --}}

<style>

.close-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(5,18,35,.58);
    padding:20px;
    align-items:center;
    justify-content:center
}

.close-modal{
    width:100%;
    max-width:460px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 25px 70px rgba(0,0,0,.22);
    overflow:hidden
}

.close-modal-head{
    padding:18px 20px;
    border-bottom:1px solid #edf1f5
}

.close-modal-head h3{
    margin:0;
    font-size:17px;
    color:#203750
}

.close-modal-head p{
    margin:5px 0 0;
    color:#8493a5;
    font-size:10px
}

.close-modal-body{
    padding:18px 20px
}

.close-warning{
    padding:12px;
    border-radius:11px;
    background:#fff4df;
    border:1px solid #f1ddb1;
    color:#8a5b00;
    font-size:10px;
    line-height:1.6;
    margin-bottom:13px
}

.close-safe{
    padding:12px;
    border-radius:11px;
    background:#eaf8f0;
    border:1px solid #ccebd9;
    color:#287646;
    font-size:10px;
    line-height:1.6;
    margin-bottom:13px
}

.close-outstanding{
    font-size:13px;
    font-weight:900;
    color:#253b55;
    margin-bottom:12px
}

.close-label{
    display:block;
    font-size:9px;
    font-weight:800;
    color:#63758c;
    margin-bottom:5px
}

.close-reason{
    width:100%;
    min-height:85px;
    resize:vertical;
    border:1px solid #dfe6ee;
    border-radius:10px;
    padding:10px;
    font:inherit;
    font-size:10px;
    outline:none
}

.close-reason:focus{
    border-color:#1769e0
}

.close-confirm{
    display:flex;
    gap:8px;
    align-items:flex-start;
    margin-top:12px;
    color:#53667d;
    font-size:9px;
    line-height:1.5
}

.close-confirm input{
    margin-top:2px
}

.close-modal-actions{
    display:flex;
    gap:8px;
    margin-top:15px
}

.close-modal-actions button{
    flex:1
}

.close-cancel{
    background:#f4f7fa;
    color:#53667d;
    border:1px solid #dfe6ee
}

.close-submit{
    background:#dc3545;
    color:#fff;
    border:0
}

</style>



{{-- ==========================================================
     EMI PAYMENT MODAL
=========================================================== --}}

<div
    id="emiPaymentModal"
    class="payment-modal-backdrop"
    role="dialog"
    aria-modal="true"
>

    <div class="payment-modal">


        <div class="payment-modal-head">

            <h3>
                Pay EMI
            </h3>

            <p id="emiPaymentTitle">
                EMI Installment
            </p>

        </div>


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

            @csrf


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


                <div class="payment-amount">

                    Outstanding EMI:

                    <span id="emiPaymentAmount">
                        {{ money(0) }}
                    </span>

                </div>


                <label class="payment-label">

                    Payment Amount

                </label>


                <input
                    type="number"
                    name="amount"
                    id="emiPaymentInput"
                    class="payment-input"
                    min="0.01"
                    step="0.01"
                    required
                >


                <label class="payment-label">

                    Payment Method

                </label>


                <select
                    name="payment_method"
                    class="payment-select"
                    required
                >

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

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

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

                </select>


                <label class="payment-label">

                    Reference Number

                </label>


                <input
                    type="text"
                    name="reference_number"
                    class="payment-input"
                    maxlength="255"
                    placeholder="Optional"
                >


                <label class="payment-label">

                    Remarks

                </label>


                <textarea
                    name="remarks"
                    class="payment-textarea"
                    maxlength="2000"
                    placeholder="Optional"
                ></textarea>


                <div class="payment-modal-actions">


                    <button
                        type="button"
                        class="ls-btn close-cancel"
                        onclick="closeEmiPaymentModal()"
                    >
                        Cancel
                    </button>


                    <button
                        type="submit"
                        class="ls-btn ls-btn-green"
                    >
                        ✓ Confirm Payment
                    </button>


                </div>

            </div>

        </form>

    </div>

</div>



{{-- ==========================================================
     OUTSTANDING PAYMENT MODAL
=========================================================== --}}

<div
    id="outstandingPaymentModal"
    class="payment-modal-backdrop"
    role="dialog"
    aria-modal="true"
>

    <div class="payment-modal">


        <div class="payment-modal-head">

            <h3>
                Pay Outstanding Balance
            </h3>

            <p>
                {{ $loan->loan_number }}
            </p>

        </div>


        <form
            method="POST"
            action="{{ route('admin.loans.pay-outstanding',$loan) }}"
        >

            @csrf


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


                <div class="payment-amount">

                    Full Outstanding:

                    {{ money($outstanding) }}

                </div>


                <div
                    style="
                        font-size:10px;
                        color:#66798f;
                        line-height:1.6;
                        margin-bottom:8px
                    "
                >

                    This will pay the complete outstanding balance
                    and mark the remaining EMI installments as paid.

                </div>


                <label class="payment-label">

                    Payment Method

                </label>


                <select
                    name="payment_method"
                    class="payment-select"
                    required
                >

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

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

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

                </select>


                <label class="payment-label">

                    Reference Number

                </label>


                <input
                    type="text"
                    name="reference_number"
                    class="payment-input"
                    maxlength="255"
                    placeholder="Optional"
                >


                <label class="payment-label">

                    Remarks

                </label>


                <textarea
                    name="remarks"
                    class="payment-textarea"
                    maxlength="2000"
                    placeholder="Optional"
                ></textarea>


                <div class="payment-modal-actions">


                    <button
                        type="button"
                        class="ls-btn close-cancel"
                        onclick="closeOutstandingPaymentModal()"
                    >
                        Cancel
                    </button>


                    <button
                        type="submit"
                        class="ls-btn ls-btn-blue"
                    >
                        💳 Pay Outstanding
                    </button>


                </div>

            </div>

        </form>

    </div>

</div>



{{-- ==========================================================
     CLOSE LOAN MODAL
=========================================================== --}}

<div
    id="closeLoanModal"
    class="close-modal-backdrop"
    role="dialog"
    aria-modal="true"
    aria-labelledby="closeLoanTitle"
>

    <div class="close-modal">


        <div class="close-modal-head">

            <h3 id="closeLoanTitle">
                Close Loan
            </h3>

            <p>
                {{ $loan->loan_number }}
            </p>

        </div>


        <form
            method="POST"
            action="{{ route('admin.loans.close',$loan) }}"
            id="closeLoanForm"
        >

            @csrf


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


                @if($outstanding > 0)

                    <div class="close-warning">

                        ⚠

                        <strong>
                            Outstanding amount exists.
                        </strong>

                        <br>

                        This loan has an outstanding balance.
                        Closing it will preserve the EMI and payment history.

                    </div>

                @else

                    <div class="close-safe">

                        ✓ This loan has no outstanding amount.
                        You can close the loan directly.

                    </div>

                @endif


                <div class="close-outstanding">

                    Outstanding:
                    {{ money($outstanding) }}

                </div>


                @if($outstanding > 0)

                    <label
                        class="close-label"
                        for="closeReason"
                    >

                        Close Reason

                        <span style="color:#dc3545">
                            *
                        </span>

                    </label>


                    <textarea
                        name="close_reason"
                        id="closeReason"
                        class="close-reason"
                        placeholder="Enter the reason for closing this loan..."
                    ></textarea>


                    <label class="close-confirm">

                        <input
                            type="checkbox"
                            name="confirm_close"
                            id="closeConfirm"
                            value="1"
                            required
                        >

                        <span>

                            I confirm that I want to close this loan even though
                            an outstanding amount exists.

                        </span>

                    </label>

                @else

                    <label
                        class="close-label"
                        for="closeReason"
                    >

                        Close Reason

                        <span style="color:#dc3545">
                            *
                        </span>

                    </label>


                    <textarea
                        name="close_reason"
                        id="closeReason"
                        class="close-reason"
                        placeholder="Enter the reason for closing this loan..."
                    ></textarea>


                    <label class="close-confirm">

                        <input
                            type="checkbox"
                            name="confirm_close"
                            id="closeConfirm"
                            value="1"
                            required
                        >

                        <span>
                            I confirm that I want to close this loan.
                        </span>

                    </label>

                @endif


                <div class="close-modal-actions">


                    <button
                        type="button"
                        class="ls-btn close-cancel"
                        onclick="closeCloseLoanModal()"
                    >
                        Cancel
                    </button>


                    <button
                        type="submit"
                        class="ls-btn close-submit"
                    >
                        🔒 Close Loan
                    </button>


                </div>

            </div>

        </form>

    </div>

</div>



<script>

(function () {


    /* ================================
       EMI PAYMENT MODAL
    ================================= */


    document.addEventListener(
        'DOMContentLoaded',
        function () {


            document
                .querySelectorAll('.emi-pay-btn')
                .forEach(function (button) {


                    button.addEventListener(
                        'click',
                        function () {


                            console.log(
                                'PAY BUTTON CLICKED'
                            );


                            const installmentId =
                                this.dataset.installmentId;


                            const installmentNumber =
                                this.dataset.installmentNumber;


                            const amount =
                                parseFloat(
                                    this.dataset.amount
                                );


                            const formattedAmount =
                                this.dataset.formattedAmount;


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


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


                            const title =
                                document.getElementById(
                                    'emiPaymentTitle'
                                );


                            const amountText =
                                document.getElementById(
                                    'emiPaymentAmount'
                                );


                            const amountInput =
                                document.getElementById(
                                    'emiPaymentInput'
                                );


                            if (!modal || !form) {

                                console.error(
                                    'EMI payment modal/form not found'
                                );

                                alert(
                                    'EMI payment form not found.'
                                );

                                return;

                            }


                            title.textContent =
                                'EMI #' +
                                installmentNumber;


                            amountText.textContent =
                                formattedAmount;


                            amountInput.value =
                                amount.toFixed(2);


                            amountInput.max =
                                amount.toFixed(2);


                            form.action =
                                "{{ url('/admin/loans/' . $loan->id . '/installments') }}"
                                +
                                "/"
                                +
                                installmentId
                                +
                                "/pay";


                            console.log(
                                'Installment ID:',
                                installmentId
                            );


                            console.log(
                                'Payment URL:',
                                form.action
                            );


                            console.log(
                                'Amount:',
                                amount
                            );


                            modal.style.display =
                                'flex';


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

                        }
                    );

                });

        }
    );



    window.closeEmiPaymentModal =
        function () {


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


            if (modal) {

                modal.style.display =
                    'none';

            }


            document.body.style.overflow =
                '';

        };



    /* ================================
       OUTSTANDING PAYMENT MODAL
    ================================= */


    window.openOutstandingPaymentModal =
        function () {


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


            if (!modal) {

                alert(
                    'Outstanding payment modal not found.'
                );

                console.error(
                    'outstandingPaymentModal not found'
                );

                return;

            }


            modal.style.display =
                'flex';


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

        };



    window.closeOutstandingPaymentModal =
        function () {


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


            if (modal) {

                modal.style.display =
                    'none';

            }


            document.body.style.overflow =
                '';

        };



    /* ================================
       CLOSE LOAN MODAL
    ================================= */


    window.openCloseLoanModal =
        function () {


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


            if (!modal) {

                alert(
                    'Close loan modal not found.'
                );

                console.error(
                    'closeLoanModal not found'
                );

                return;

            }


            modal.style.display =
                'flex';


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

        };



    window.closeCloseLoanModal =
        function () {


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


            if (modal) {

                modal.style.display =
                    'none';

            }


            document.body.style.overflow =
                '';

        };



    /* ================================
       REJECT LOAN
    ================================= */


    window.rejectLoan =
        function (form) {


            const reason =
                prompt(
                    'Enter rejection reason:'
                );


            if (reason === null) {

                return false;

            }


            if (!reason.trim()) {

                alert(
                    'Rejection reason is required.'
                );

                return false;

            }


            const input =
                form.querySelector(
                    'input[name="rejection_reason"]'
                );


            if (input) {

                input.value =
                    reason.trim();

            }


            return true;

        };



    /* ================================
       MODAL BACKDROP CLICK
    ================================= */


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


            const emiModal =
                document.getElementById(
                    'emiPaymentModal'
                );


            const outstandingModal =
                document.getElementById(
                    'outstandingPaymentModal'
                );


            const closeModal =
                document.getElementById(
                    'closeLoanModal'
                );


            if (event.target === emiModal) {

                window.closeEmiPaymentModal();

            }


            if (
                event.target ===
                outstandingModal
            ) {

                window.closeOutstandingPaymentModal();

            }


            if (
                event.target ===
                closeModal
            ) {

                window.closeCloseLoanModal();

            }

        }
    );



    /* ================================
       CLOSE LOAN FORM VALIDATION
    ================================= */


    document.addEventListener(
        'DOMContentLoaded',
        function () {


            const closeForm =
                document.getElementById(
                    'closeLoanForm'
                );


            if (!closeForm) {

                return;

            }


            closeForm.addEventListener(
                'submit',
                function (event) {


                    const reasonElement =
                        document.getElementById(
                            'closeReason'
                        );


                    const confirmElement =
                        document.getElementById(
                            'closeConfirm'
                        );


                    const reason =
                        reasonElement
                            ? reasonElement.value.trim()
                            : '';


                    const confirmed =
                        confirmElement
                            ? confirmElement.checked
                            : false;


                    if (!reason) {

                        event.preventDefault();

                        alert(
                            'Close reason is required.'
                        );

                        return;

                    }


                    if (!confirmed) {

                        event.preventDefault();

                        alert(
                            'Please confirm that you want to close this loan.'
                        );

                        return;

                    }

                }
            );

        }
    );



    /* ================================
       ESC KEY
    ================================= */


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


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

                return;

            }


            window.closeCloseLoanModal();

            window.closeEmiPaymentModal();

            window.closeOutstandingPaymentModal();

        }
    );


})();

</script>

@endsection