@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 class="col-12 col-sm-6 d-flex justify-content-lg-end header-actions">

                    <a href="#" class="btn btn-success action-btn" data-toggle="modal" data-target="#CreateLoan"><i
                            class="fas fa-plus mr-2"></i>
                        Create Loan
                    </a>

                    <div class="modal fade inventory-modal" id="CreateLoan" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                @livewire('loan-mgt.create-loan')
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-sm-6 col-md-3">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Total Active Loans</p>
                            <h2 class="metric-value"><span class="metric-amount">{{ number_format($activeLoanAmount, 2) }}
                                    <small>({{ $activeLoanCount }})</small></span></h2>
                        </div>
                        <div class="metric-icon bg-success"><i class="fas fa-boxes"></i></div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Loans Due This Week</p>
                            <h2 class="metric-value"><span class="metric-amount">{{ number_format($thisWeekDueAmount, 2) }}
                                    <small>({{ $thisWeekDueCount }})</small></span></h2>
                        </div>
                        <div class="metric-icon bg-success"><i class="fas fa-boxes"></i></div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Defaulted Loans</p>
                            <h2 class="metric-value"><span class="metric-amount">{{ number_format($defaultLoanAmount, 2) }}
                                    <small>({{ $defaultLoanCount }})</small></span></h2>
                        </div>
                        <div class="metric-icon bg-danger"><i class="fas fa-boxes"></i></div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="metric-card">
                        <div class="metric-content">
                            <p class="metric-label">Pending Approvals</p>
                            <h2 class="metric-value"><span class="metric-amount">{{ $pendingApprovalCount }} </span></h2>
                        </div>
                        <div class="metric-icon bg-warning"><i class="fas fa-boxes"></i></div>
                    </div>
                </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>Loan ID</th>
                                        <th>Borrow Name</th>
                                        <th>Loan Type</th>
                                        <th>Amount</th>
                                        <th>Repayment Mode</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($loans as $loan)
                                        <tr>
                                            <td><a href="{{ route('admin.loan.schedule', $loan->loan_application_id) }}"
                                                    class="text-link">{{ $loan->loan_no }}
                                                </a></td>
                                            <td>{{ $loan->user->fullname }}</td>
                                            <td>{{ strtoupper($loan->loanApplication?->loan_type) }}</td>
                                            <td>N{{ number_format($loan->principal_amount, 2) }}</td>
                                            <td>{{ ucwords($loan->repayment_mode) }}</td>
                                            <td>{{ $loan->disbursed_at->format('d, M Y') }} </td>
                                            <td>{{ $loan->due_date->format('d, M Y') }}</td>
                                            <td>
                                                @if ($loan->status == 'active')
                                                    <button class="badge badge-info"> {{ ucwords($loan->status) }}</button>
                                                @elseif ($loan->status == 'completed')
                                                    <button class="badge badge-success">
                                                        {{ ucwords($loan->status) }}</button>
                                                @else
                                                    <button class="badge badge-danger">
                                                        {{ ucwords($loan->status) }}</button>
                                                @endif

                                            </td>
                                        </tr>
                                        {{-- @include('admin.loanMgt.partials.show-loanId') --}}
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="card-footer bg-white ">
                        @include('components.pagination', ['records' => $loans])
                    </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