@extends('layouts.app')

@section('title', 'Loan Management')

@section('content')

    @use('App\Enums\AdminRoles')

    <div class="content-header">
        <div class="container-fluid mb-5 mt-3 ">
            <div class="row align-items-center mb-4">
                <div class="col-12 col-sm-6 inventory-title">
                    <h1 class="page-title mb-1">Loan Management</h1>
                    <p class="text-muted">Manage all loan activities across the platform</p>
                </div>

            </div>


            @include('admin.loanMgt.partials.filter-option')

            @include('admin.loanMgt.partials.nav')

            <div class="container-fluid px-3 txn">

                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table txn-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th>SN</th>
                                        <th>Loan No</th>
                                        <th>User</th>
                                        <th>Amount</th>
                                        <th>Paid By</th>
                                        <th>Date Paid</th>
                                        <th>Payment Mode</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($transactions as $key => $loanTransaction)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td><a href="{{ route('admin.loan.schedule', $loanTransaction->loan->loan_application_id) }}"
                                                    class="text-link">{{ $loanTransaction->loan->loan_no }}
                                                </a></td>
                                            <td>{{ $loanTransaction->loan->user->fullname }}</td>
                                            <td>N{{ number_format($loanTransaction->amount, 2) }}</td>
                                            <td>{{ $loanTransaction->paidBy->fullname }}</td>
                                            <td>{{ $loanTransaction->paidBy->created_at->format('d M Y H:ia') }}</td>
                                            <td>{{ $loanTransaction->approveBy?->fullname }}</td>
                                            <td>{{ $loanTransaction->approve_date?->format('d M Y H:ia') }}</td>
                                            <td>{{ $loanTransaction->payment_mode }}</td>
                                            <td>
                                                @if ($loanTransaction->status == 'pending')
                                                    @if (auth()->user()->role == AdminRoles::MANAGER->value || auth()->user()->role == AdminRoles::FINANCE_MANAGER->value)
                                                        <form action="{{ route('admin.loan.confirm-payment') }}"
                                                            method="post" class="mb-2">
                                                            @csrf
                                                            <input type="hidden" name='loan_transaction_id'
                                                                value="{{ $loanTransaction->id }}">
                                                            <input type="hidden" name='status' value="approved">
                                                            <button class="btn btn-success btn-sm" type="submit"
                                                                onclick="return confirm('Approve payment?')">
                                                                Approve</button>
                                                        </form>
                                                        <form action="{{ route('admin.loan.confirm-payment') }}"
                                                            method="post">
                                                            @csrf
                                                            <input type="hidden" name='loan_transaction_id'
                                                                value="{{ $loanTransaction->id }}">
                                                            <input type="hidden" name='status' value="rejected">
                                                            <button class="badge badge-danger" type="submit"
                                                                onclick="return confirm('Reject payment?')"> Reject</button>
                                                        </form>
                                                    @endif
                                                @else
                                                    <button class="badge badge-info">
                                                        {{ ucwords($loanTransaction->status) }}</button>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6">Empty</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="card-footer bg-white ">
                        @include('components.pagination', ['records' => $transactions])
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('style')

    <style>
        .loan-create {
            font-family: 'Segoe UI', sans-serif;
        }

        .modal-header.loan-create {
            border-bottom: none;
            padding-bottom: 0;
        }

        .modal-title {
            font-weight: 600;
        }

        .subtext {
            font-size: 14px;
        }

        /* GRID */
        .option-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }

        /* CARD */
        .option-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 18px;
            cursor: pointer;
            transition: all 0.25s ease;
            background: #fff;
            position: relative;
        }

        .option-card:hover {
            border-color: #22c55e;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .option-card.selected {
            border: 2px solid #22c55e;
            background: #f0fdf4;
        }

        /* HEADER */
        .option-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .option-title {
            font-weight: 600;
            font-size: 16px;
        }

        .option-sub {
            font-size: 13px;
            color: #6b7280;
        }

        /* CHECKMARK */
        .checkmark {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }

        .option-card.selected .checkmark {
            background: #22c55e;
            border-color: #22c55e;
        }

        /* BULLETS */
        .option-bullets {
            margin-top: 12px;
            padding-left: 0;
            list-style: none;
        }

        .option-bullets li {
            font-size: 13px;
            margin-bottom: 6px;
            color: #374151;
        }

        /* HIDE RADIO */
        .option-input {
            display: none;
        }

        /* BUTTON */
        .loan-type-continue {
            border-radius: 8px;
            font-weight: 500;
            padding: 10px 30px;
            transition: all 0.2s ease;
        }

        .loan-type-continue:hover {
            transform: translateY(-1px);
        }

        .modal-body {
            padding: 25px 30px;
            font-family: 'Segoe UI', sans-serif;
        }

        /* GRID */
        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
        }

        /* FORM */
        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 6px;
            color: #374151;
        }

        /* INPUT */
        .form-control {
            height: 44px;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            padding: 0 14px;
            font-size: 14px;
            transition: all 0.2s ease;
            background: #fff;
        }

        .form-control:focus {
            border-color: #22c55e;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
            outline: none;
        }

        /* INPUT WITH ICON */
        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
        }

        .input-icon input {
            padding-left: 38px;
        }

        /* DISABLED */
        .form-control[disabled] {
            background: #f9fafb;
            color: #6b7280;
        }


        .search-item {
            padding: 10px 14px;
            cursor: pointer;
            font-size: 14px;
        }

        .search-item:hover {
            background: #f0fdf4;
        }

        /* BUTTONS */
        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 25px;
        }

        .btn-success {
            background: #166534;
            border: none;
            border-radius: 8px;
            padding: 10px 28px;
            font-weight: 500;
        }

        .btn-success:hover {
            background: #14532d;
        }

        .btn-outline-secondary {
            border-radius: 8px;
            padding: 10px 24px;
        }


        .search-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            margin-top: 6px;
            max-height: 220px;
            overflow-y: auto;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            z-index: 999;
        }

        .search-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            font-size: 14px;
        }

        .search-item:hover {
            background: #f0fdf4;
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #22c55e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        .user-info {
            display: flex;
            flex-direction: column;
        }

        .user-email {
            font-size: 12px;
            color: #6b7280;
        }

        .loading {
            padding: 10px;
            text-align: center;
            font-size: 13px;
            color: #6b7280;
        }

        /* summary */
        .summary-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .summary-item label {
            font-size: 12px;
            color: #888;
            display: block;
        }

        .summary-item strong {
            font-size: 14px;
        }

        .highlight .amount {
            font-size: 20px;
            font-weight: bold;
            color: #16a34a;
        }

        .total-box {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #ddd;
            text-align: center;
        }

        .total-box h3 {
            color: #16a34a;
            margin: 0;
        }

        .badge-soft {
            background: #e0f2fe;
            padding: 4px 10px;
            border-radius: 20px;
        }

        /* GUARANTORS */
        /*     .guarantor-row {
                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                        justify-content: space-between;
                                                                                                                                                                                                                                                                                                        align-items: center;
                                                                                                                                                                                                                                                                                                        padding: 12px 0;
                                                                                                                                                                                                                                                                                                        border-bottom: 1px solid #eee;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .guarantor-row .left {
                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                        gap: 10px;
                                                                                                                                                                                                                                                                                                        align-items: center;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .avatar {
                                                                                                                                                                                                                                                                                                        width: 35px;
                                                                                                                                                                                                                                                                                                        height: 35px;
                                                                                                                                                                                                                                                                                                        background: #16a34a;
                                                                                                                                                                                                                                                                                                        color: #fff;
                                                                                                                                                                                                                                                                                                        border-radius: 50%;
                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                        align-items: center;
                                                                                                                                                                                                                                                                                                        justify-content: center;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .name {
                                                                                                                                                                                                                                                                                                        font-weight: 500;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .email {
                                                                                                                                                                                                                                                                                                        font-size: 12px;
                                                                                                                                                                                                                                                                                                        color: #888;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .right {
                                                                                                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                                                                                                        gap: 8px;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .pill {
                                                                                                                                                                                                                                                                                                        background: #e0f2fe;
                                                                                                                                                                                                                                                                                                        padding: 4px 10px;
                                                                                                                                                                                                                                                                                                        border-radius: 999px;
                                                                                                                                                                                                                                                                                                        font-size: 12px;
                                                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                                                    .amount-pill {
                                                                                                                                                                                                                                                                                                        background: #dcfce7;
                                                                                                                                                                                                                                                                                                        padding: 4px 10px;
                                                                                                                                                                                                                                                                                                        border-radius: 999px;
                                                                                                                                                                                                                                                                                                        font-size: 12px;
                                                                                                                                                                                                                                                                                                        color: #16a34a;
                                                                                                                                                                                                                                                                                                    } */

        /* END summary */
    </style>
@endsection

@section('script')


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var container = document.getElementById('CreateLoan');
            if (!container) return;
            var cards = container.querySelectorAll('.option-card');
            var continueBtn = container.querySelector('.loan-type-continue');

            function updateTarget() {
                if (!continueBtn) return;
                var checked = container.querySelector('input[name="loan_type"]:checked');
                if (!checked) return;
                var target = checked.getAttribute('data-target');
                if (target) {
                    continueBtn.setAttribute('data-target', target);
                }
            }
            cards.forEach(function(card) {
                card.addEventListener('click', function() {
                    cards.forEach(function(c) {
                        c.classList.remove('selected');
                    });
                    card.classList.add('selected');
                    var input = card.querySelector('input.option-input');
                    if (input) {
                        input.checked = true;
                    }
                    updateTarget();
                });
            });
            updateTarget();
        });
    </script>
@endsection