@extends('employee_loan.base_template')

@section('page_title', 'Pending Loans')
@section('page_heading', 'Pending Loan Applications')
@section('page_description', 'Review and process pending loan applications')

@section('page_icon')
    <i class="fas fa-hourglass-half"></i>
@endsection

@section('kpi_section')
<!-- Modern KPI Dashboard with Glassmorphism - Pending Focused -->
<div class="kpi-dashboard-modern mb-3">
    <div class="kpi-backdrop"></div>
    <div class="row g-3">
        <!-- Total Pending -->
        <div class="col-md-3">
            <div class="kpi-card-modern glass-card animate-float-1" onclick="showKPIDetails('pending')" style="cursor: pointer;">
                <div class="kpi-glow pending-glow"></div>
                <div class="kpi-content-modern">
                    <div class="kpi-header-modern">
                        <div class="kpi-icon-modern pending-icon">
                            <i class="fas fa-hourglass-half"></i>
                            <div class="icon-pulse-ring"></div>
                        </div>
                        <div class="kpi-badge-modern">PENDING</div>
                    </div>
                    <div class="kpi-value-wrapper">
                        <h2 class="kpi-value-modern">
                            <span class="number-animate">{{ $stats['total'] ?? 0 }}</span>
                        </h2>
                        <div class="kpi-trend-modern">
                            <span class="trend-icon pending-trend">
                                <i class="fas fa-clock"></i>
                            </span>
                            <span class="trend-text">Total Pending</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Amount -->
        <div class="col-md-3">
            <div class="kpi-card-modern glass-card animate-float-2" onclick="showKPIDetails('pending')" style="cursor: pointer;">
                <div class="kpi-glow info-glow"></div>
                <div class="kpi-content-modern">
                    <div class="kpi-header-modern">
                        <div class="kpi-icon-modern info-icon">
                            <i class="fas fa-coins"></i>
                            <div class="icon-pulse-ring"></div>
                        </div>
                        <div class="kpi-badge-modern info-badge">AMOUNT</div>
                    </div>
                    <div class="kpi-value-wrapper">
                        <h2 class="kpi-value-modern">
                            <span class="number-animate">{{ number_format($stats['total_amount'] ?? 0, 0) }}</span>
                        </h2>
                        <div class="kpi-trend-modern">
                            <span class="trend-text text-info">Total TZS</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Average Amount -->
        <div class="col-md-3">
            <div class="kpi-card-modern glass-card animate-float-3" onclick="showKPIDetails('pending')" style="cursor: pointer;">
                <div class="kpi-glow purple-glow"></div>
                <div class="kpi-content-modern">
                    <div class="kpi-header-modern">
                        <div class="kpi-icon-modern purple-icon">
                            <i class="fas fa-chart-line"></i>
                            <div class="icon-pulse-ring"></div>
                        </div>
                        <div class="kpi-badge-modern purple-badge">AVERAGE</div>
                    </div>
                    <div class="kpi-value-wrapper">
                        <h2 class="kpi-value-modern">
                            <span class="number-animate">{{ number_format($stats['average_amount'] ?? 0, 0) }}</span>
                        </h2>
                        <div class="kpi-trend-modern">
                            <span class="trend-text">Avg Amount TZS</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-md-3">
            <div class="kpi-card-modern glass-card animate-float-4" onclick="showQuickActions()" style="cursor: pointer;">
                <div class="kpi-glow success-glow"></div>
                <div class="kpi-content-modern">
                    <div class="kpi-header-modern">
                        <div class="kpi-icon-modern success-icon">
                            <i class="fas fa-tasks"></i>
                            <div class="icon-pulse-ring"></div>
                        </div>
                        <div class="kpi-badge-modern success-badge">ACTIONS</div>
                    </div>
                    <div class="kpi-value-wrapper">
                        <div class="quick-action-buttons">
                            <button class="btn btn-sm btn-success" onclick="bulkApprove()">
                                <i class="fas fa-check-circle"></i> Bulk Approve
                            </button>
                            <button class="btn btn-sm btn-danger" onclick="bulkReject()">
                                <i class="fas fa-times-circle"></i> Bulk Reject
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('search_section')
<!-- Search and Filter Section -->
<div class="modern-search-container mb-3">
    <div class="search-backdrop"></div>
    <div class="row g-3">
        <div class="col-lg-6">
            <div class="search-input-group">
                <span class="search-icon">
                    <i class="fas fa-search"></i>
                </span>
                <input type="text" 
                       id="searchInput" 
                       class="modern-search-input" 
                       placeholder="Search by name, application number, or employee ID..."
                       value="{{ request('search') }}">
                <button class="search-clear-btn" onclick="clearSearch()" style="display: none;">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="filter-buttons">
                <button class="filter-btn active" onclick="filterByStatus('pending')">
                    <i class="fas fa-hourglass-half"></i> All Pending
                </button>
                <button class="filter-btn" onclick="filterByDateRange('today')">
                    <i class="fas fa-calendar-day"></i> Today
                </button>
                <button class="filter-btn" onclick="filterByDateRange('week')">
                    <i class="fas fa-calendar-week"></i> This Week
                </button>
                <button class="filter-btn" onclick="filterByDateRange('month')">
                    <i class="fas fa-calendar-alt"></i> This Month
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('table_content')
@forelse($loanOffers as $offer)
    <tr class="table-row-modern clickable-row" data-loan='{{ json_encode($offer) }}'>
        <td class="checkbox-column">
            <div class="form-check modern-checkbox">
                <input class="form-check-input loan-checkbox" 
                       type="checkbox" 
                       value="{{ $offer->id }}"
                       id="loan{{ $offer->id }}">
                <label class="form-check-label" for="loan{{ $offer->id }}"></label>
            </div>
        </td>
        <td>
            <div class="employee-simple">
                <div class="employee-name fw-semibold">
                    {{ $offer->first_name ?? $offer->employee_name }} {{ $offer->last_name ?? '' }}
                </div>
                <div class="employee-id text-muted small">
                    Check #: {{ $offer->check_number ?? $offer->employee_number }}
                </div>
            </div>
        </td>
        <td class="text-end">
            <div class="amount-cell">
                <div class="amount-primary">{{ number_format($offer->basic_salary ?? 0, 0) }}</div>
                <div class="amount-secondary">Net: {{ number_format($offer->net_salary ?? 0, 0) }}</div>
            </div>
        </td>
        <td class="text-end">
            <div class="amount-deductible">{{ number_format($offer->desired_deductible_amount ?? 0, 0) }}</div>
        </td>
        <td class="text-end">
            <div class="amount-requested">{{ number_format($offer->requested_amount ?? 0, 0) }}</div>
        </td>
        <td class="text-end">
            <div class="amount-takehome">{{ number_format($offer->take_home_amount ?? $offer->net_loan_amount ?? 0, 0) }}</div>
        </td>
        <td class="text-center">
            @if($offer->tenure)
                <span class="modern-badge badge-tenure">{{ $offer->tenure }} mo</span>
            @else
                <span class="text-muted">-</span>
            @endif
        </td>
        <td class="text-center">
            <span class="modern-status-badge status-pending" title="Pending Approval" data-bs-toggle="tooltip">
                <i class="fas fa-clock"></i> Pending
            </span>
        </td>
        <td class="text-center">
            <span class="modern-status-badge status-new">
                <i class="fas fa-sparkles"></i> New
            </span>
        </td>
        <td class="text-center">
            <div class="action-buttons">
                <button type="button"
                        class="action-btn btn-view view-loan-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#loanDetailsModal"
                        title="View Details"
                        data-loan='{{ json_encode($offer) }}'>
                    <i class="fas fa-eye"></i>
                </button>
                <a class="action-btn btn-edit"
                   href="{{ route('loan-offers.edit', $offer->id) }}"
                   title="Edit">
                    <i class="fas fa-edit"></i>
                </a>
                <button class="action-btn btn-approve"
                        onclick="approveLoan({{ $offer->id }})"
                        title="Approve">
                    <i class="fas fa-check"></i>
                </button>
                <button class="action-btn btn-reject"
                        onclick="rejectLoan({{ $offer->id }})"
                        title="Reject">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="10" class="text-center">
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-folder-open"></i>
                </div>
                <h5>No Pending Loan Applications</h5>
                <p>All loan applications have been processed</p>
            </div>
        </td>
    </tr>
@endforelse
@endsection

@section('pagination_section')
@if($loanOffers->hasPages())
    <div class="modern-table-footer">
        <div class="row align-items-center">
            <div class="col-md-4">
                <div class="d-flex align-items-center">
                    <span class="text-muted">Showing {{ $loanOffers->firstItem() }} to {{ $loanOffers->lastItem() }} of {{ $loanOffers->total() }} entries</span>
                </div>
            </div>
            <div class="col-md-8">
                <div class="d-flex justify-content-end">
                    {{ $loanOffers->withQueryString()->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@section('additional_scripts')
<script>
// Filter by status for pending page
function filterByStatus(status) {
    window.location.href = '{{ route("loans.pending") }}';
}

// Filter by date range
function filterByDateRange(range) {
    window.location.href = '{{ route("loans.pending") }}?date_range=' + range;
}
</script>
@endsection