@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <h2 class="h3 mb-1">
                <i class="fas fa-file-invoice-dollar me-2 text-primary"></i>
                Loan Applications from ESS
            </h2>
            <p class="text-muted mb-0">
                Process and disburse employee loans via NMB Bank
            </p>
        </div>
        <div class="col-lg-4 text-lg-end">
            <div class="btn-group">
                <button class="btn btn-ura-primary" onclick="refreshFromESS()">
                    <i class="fas fa-sync-alt me-2"></i>Sync with ESS
                </button>
                <button class="btn btn-outline-primary" onclick="exportReport()">
                    <i class="fas fa-download me-2"></i>Export
                </button>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="ura-card p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                            <i class="fas fa-clock text-primary fs-5"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="mb-0">{{ $pendingCount ?? 0 }}</h5>
                        <small class="text-muted">Pending Approval</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="ura-card p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-success bg-opacity-10 p-3">
                            <i class="fas fa-check-circle text-success fs-5"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="mb-0">{{ $approvedCount ?? 0 }}</h5>
                        <small class="text-muted">Ready to Disburse</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="ura-card p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-info bg-opacity-10 p-3">
                            <i class="fas fa-university text-info fs-5"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="mb-0">{{ $pendingNMBCount ?? 0 }}</h5>
                        <small class="text-muted">Pending NMB</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="ura-card p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-circle bg-warning bg-opacity-10 p-3">
                            <i class="fas fa-coins text-warning fs-5"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="mb-0">{{ number_format($totalDisbursed ?? 0) }}</h5>
                        <small class="text-muted">TZS Disbursed Today</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="ura-card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('loan-offers.index') }}" id="filter-form">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small text-muted">Search</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" name="search" class="form-control" 
                                   placeholder="Name, Application #, Check #..." 
                                   value="{{ request('search') }}">
                        </div>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label small text-muted">Status</label>
                        <select name="status" class="form-select">
                            <option value="">All Statuses</option>
                            <option value="pending_approval">Pending Approval</option>
                            <option value="approved">Approved</option>
                            <option value="disbursement_pending">Pending NMB</option>
                            <option value="disbursed">Disbursed</option>
                            <option value="DISBURSEMENT_FAILED">Failed</option>
                            <option value="FULL_SETTLED">Settled</option>
                        </select>
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label small text-muted">Date From</label>
                        <input type="date" name="date_from" class="form-control" 
                               value="{{ request('date_from') }}">
                    </div>
                    
                    <div class="col-md-2">
                        <label class="form-label small text-muted">Date To</label>
                        <input type="date" name="date_to" class="form-control" 
                               value="{{ request('date_to') }}">
                    </div>
                    
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-ura-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Loan Applications Table -->
    <div class="ura-card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-ura align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4">
                                <input type="checkbox" class="form-check-input" id="select-all">
                            </th>
                            <th>Employee Details</th>
                            <th>Application Info</th>
                            {{-- <th class="text-end">Amount (TZS)</th>--}}
                            <th>Approval</th> 
                            <th>Status</th>
                            <th>Timeline</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($loanOffers as $offer)
                            <tr>
                                <td class="ps-4">
                                    <input type="checkbox" class="form-check-input loan-checkbox" 
                                           value="{{ $offer->id }}">
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle bg-primary bg-opacity-10 me-3">
                                            <span class="text-primary fw-semibold">
                                                {{ strtoupper(substr($offer->first_name, 0, 1)) }}{{ strtoupper(substr($offer->last_name, 0, 1)) }}
                                            </span>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ $offer->first_name }} {{ $offer->middle_name }} {{ $offer->last_name }}</h6>
                                            <small class="text-muted">
                                                <i class="fas fa-id-card me-1"></i>{{ $offer->check_number }}
                                                @if($offer->bank_account_number)
                                                    <br><i class="fas fa-university me-1"></i>NMB: {{ $offer->bank_account_number }}
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <strong>{{ $offer->application_number }}</strong>
                                    <small class="text-muted d-block">
                                        ESS Ref: {{ $offer->ess_reference ?? 'N/A' }}
                                    </small>
                                </td>
                                {{-- <td class="text-end">
                                    <strong>{{ number_format($offer->total_amount_to_pay, 2) }}</strong>
                                    @if($offer->other_charges > 0)
                                        <small class="text-muted d-block">
                                            +{{ number_format($offer->other_charges, 2) }} charges
                                        </small>
                                    @endif
                                </td> --}}
                                <td>
                                    @switch($offer->approval)
                                        @case('APPROVED')
                                            <span class="badge badge-ura-success">
                                                <i class="fas fa-check-circle me-1"></i>Approved
                                            </span>
                                            @break
                                        @case('REJECTED')
                                            <span class="badge badge-ura-danger">
                                                <i class="fas fa-times-circle me-1"></i>Rejected
                                            </span>
                                            @break
                                        @default
                                            <span class="badge badge-ura-warning">
                                                <i class="fas fa-hourglass-half me-1"></i>Pending
                                            </span>
                                    @endswitch
                                </td>
                                <td>
                                    @switch($offer->status)
                                        @case('disbursement_pending')
                                            <span class="badge badge-ura-info">
                                                <i class="fas fa-spinner fa-spin me-1"></i>NMB Processing
                                            </span>
                                            @if($offer->nmb_batch_id)
                                                <small class="text-muted d-block mt-1">
                                                    Batch: {{ $offer->nmb_batch_id }}
                                                </small>
                                            @endif
                                            @break
                                        @case('disbursed')
                                            <span class="badge badge-ura-success">
                                                <i class="fas fa-check-double me-1"></i>Disbursed
                                            </span>
                                            @break
                                        @case('DISBURSEMENT_FAILED')
                                            <span class="badge badge-ura-danger">
                                                <i class="fas fa-exclamation-triangle me-1"></i>Failed
                                            </span>
                                            @if($offer->reason)
                                                <small class="text-danger d-block mt-1">
                                                    {{ Str::limit($offer->reason, 30) }}
                                                </small>
                                            @endif
                                            @break
                                        @case('FULL_SETTLED')
                                            <span class="badge bg-dark">
                                                <i class="fas fa-handshake me-1"></i>Settled
                                            </span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary">
                                                {{ $offer->status ?: 'New' }}
                                            </span>
                                    @endswitch
                                </td>
                                <td>
                                    <small class="text-muted">
                                        Applied: {{ $offer->created_at->format('d/m/Y') }}
                                        <br>
                                        Updated: {{ $offer->updated_at->diffForHumans() }}
                                    </small>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="{{ route('loan-offers.edit', $offer->id) }}" 
                                           class="btn btn-sm btn-outline-primary" 
                                           data-bs-toggle="tooltip" 
                                           title="View/Edit">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        
                                        @if($offer->approval === 'APPROVED' && !in_array($offer->status, ['disbursed', 'disbursement_pending']))
                                            <button class="btn btn-sm btn-ura-success" 
                                                    onclick="quickDisburse({{ $offer->id }})"
                                                    data-bs-toggle="tooltip" 
                                                    title="Quick Disburse">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        @endif
                                        
                                        <button class="btn btn-sm btn-outline-secondary" 
                                                onclick="viewTimeline({{ $offer->id }})"
                                                data-bs-toggle="tooltip" 
                                                title="Activity Log">
                                            <i class="fas fa-history"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <img src="/images/no-loans.svg" alt="No loans" style="height: 150px;" class="mb-3">
                                    <p class="text-muted">No loan applications found</p>
                                    <button class="btn btn-ura-primary" onclick="refreshFromESS()">
                                        <i class="fas fa-sync-alt me-2"></i>Sync from ESS
                                    </button>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            @if($loanOffers->hasPages())
                <div class="card-footer bg-light">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <small class="text-muted">
                                Showing {{ $loanOffers->firstItem() }} to {{ $loanOffers->lastItem() }} 
                                of {{ $loanOffers->total() }} applications
                            </small>
                        </div>
                        <div class="col-md-6 d-flex justify-content-end">
                            {{ $loanOffers->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Bulk Actions Modal -->
<div class="modal fade" id="bulkActionsModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Bulk Actions</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Select an action for <span id="selected-count">0</span> selected loans:</p>
                <div class="d-grid gap-2">
                    <button class="btn btn-ura-success" onclick="bulkDisburse()">
                        <i class="fas fa-paper-plane me-2"></i>Disburse Selected
                    </button>
                    <button class="btn btn-outline-danger" onclick="bulkReject()">
                        <i class="fas fa-times me-2"></i>Reject Selected
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.avatar-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.table-ura tbody tr {
    transition: all 0.2s ease;
}

.table-ura tbody tr:hover {
    background-color: rgba(0, 51, 102, 0.02);
}
</style>
@endpush

@push('scripts')
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
});

// Select all functionality
document.getElementById('select-all')?.addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.loan-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
    updateBulkActions();
});

// Update bulk actions count
function updateBulkActions() {
    const selected = document.querySelectorAll('.loan-checkbox:checked').length;
    document.getElementById('selected-count').textContent = selected;
    
    if (selected > 0) {
        // Show bulk actions button
    }
}

// Quick disburse
function quickDisburse(loanId) {
    Swal.fire({
        title: 'Confirm Disbursement',
        text: 'Send this loan to NMB for processing?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes, Disburse',
        confirmButtonColor: '#1e8449',
        cancelButtonColor: '#6c757d'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Processing...',
                text: 'Sending to NMB Bank',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            // Make AJAX call
            $.ajax({
                url: `{{ route('loan-offers.update', '') }}/${loanId}`,
                method: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    status: 'SUBMITTED_FOR_DISBURSEMENT'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Loan sent to NMB',
                        timer: 3000
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Failed to process disbursement'
                    });
                }
            });
        }
    });
}

// Sync with ESS
function refreshFromESS() {
    toastr.info('Syncing with ESS system...');
    // Add your ESS sync logic here
}

// View timeline
function viewTimeline(loanId) {
    // Load and show activity timeline
    fetch(`/loan-offers/${loanId}/timeline`)
        .then(response => response.json())
        .then(data => {
            // Show timeline in modal
        });
}
</script>
@endpush