@extends('layouts.app')

@section('title', 'Loan Details - ' . $loan->loan_number)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-file-invoice-dollar me-2 text-primary"></i>Loan Details</h1>
                    <p class="text-muted mb-0">Loan Number: {{ $loan->loan_number }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('loans.edit', $loan->id) }}" class="btn btn-outline-primary">
                        <i class="fas fa-edit me-1"></i>Edit
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    <!-- Action Forms -->
                    <form id="pause-loan-form" action="{{ route('loans.pause', $loan->id) }}" method="POST" style="display: none;">
                        @csrf
                        @method('PUT')
                    </form>

                    <form id="close-loan-form" action="{{ route('loans.close', $loan->id) }}" method="POST" style="display: none;">
                        @csrf
                        @method('PUT')
                    </form>

                    <form id="resume-loan-form" action="{{ route('loans.resume', $loan->id) }}" method="POST" style="display: none;">
                        @csrf
                        @method('PUT')
                    </form>

                    <!-- Status Alert -->
                    @if($loan->status === 'pending')
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock me-2 fs-5"></i>
                            <div>
                                <h6 class="alert-heading mb-1">Pending Approval</h6>
                                <p class="mb-0">This loan application is awaiting approval.</p>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @elseif($loan->status === 'waiting')
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock me-2 fs-5"></i>
                            <div>
                                <h6 class="alert-heading mb-1">Waiting for More Information</h6>
                                <p class="mb-0">This loan application is waiting for additional information.</p>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @elseif($loan->status === 'approved')
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle me-2 fs-5"></i>
                            <div>
                                <h6 class="alert-heading mb-1">Loan Approved</h6>
                                <p class="mb-0">This loan application has been approved and is ready for disbursement.</p>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    <div class="row">
                        <!-- Loan Information -->
                        <div class="col-md-6">
                            <div class="section-wrapper mb-4">
                                <div class="section-header">
                                    <div class="icon-wrapper">
                                        <i class="fas fa-info-circle"></i>
                                    </div>
                                    <h5>Loan Information</h5>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Client</label>
                                            <div class="info-value">
                                                <a href="{{ route('clients.show', $loan->client_id) }}" class="text-decoration-none">
                                                    <i class="fas fa-user me-1 text-primary"></i>
                                                    {{ $loan->client->first_name }} {{ $loan->client->last_name }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Loan Number</label>
                                            <div class="info-value">
                                                <i class="fas fa-hashtag me-1 text-primary"></i>
                                                {{ $loan->loan_number }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Loan Amount</label>
                                            <div class="info-value text-success">
                                                <i class="fas fa-dollar-sign me-1"></i>
                                                {{ number_format($loan->amount, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Outstanding Balance</label>
                                            <div class="info-value text-primary fw-bold">
                                                <i class="fas fa-money-bill-wave me-1"></i>
                                                {{ number_format($loan->outstanding_balance, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Interest Rate</label>
                                            <div class="info-value">
                                                <i class="fas fa-percentage me-1 text-primary"></i>
                                                {{ $loan->interest_rate }}%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Loan Term</label>
                                            <div class="info-value">
                                                <i class="fas fa-calendar me-1 text-primary"></i>
                                                {{ $loan->duration_months }} months
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Monthly Payment</label>
                                            <div class="info-value">
                                                <i class="fas fa-credit-card me-1 text-primary"></i>
                                                {{ number_format($loan->monthly_payment, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Total Repayment</label>
                                            <div class="info-value">
                                                <i class="fas fa-calculator me-1 text-primary"></i>
                                                {{ number_format($loan->total_repayment, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Application Date</label>
                                            <div class="info-value">
                                                <i class="fas fa-calendar-day me-1 text-primary"></i>
                                                {{ $loan->application_date->format('M d, Y') }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Loan Type</label>
                                            <div class="info-value">
                                                <span class="loan-type-badge {{ $loan->loan_type }}">
                                                    <i class="fas fa-tag me-1"></i>
                                                    {{ ucfirst($loan->loan_type) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Purpose</label>
                                            <div class="info-value">
                                                <i class="fas fa-bullseye me-1 text-primary"></i>
                                                {{ $loan->purpose }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Status</label>
                                            <div class="info-value">
                                                <span class="status-badge status-{{ $loan->status }}">
                                                    <i class="fas fa-circle me-1"></i>
                                                    {{ ucfirst($loan->status) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons for Pending Loans -->
                                @if($loan->status === 'pending')
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="action-buttons-section">
                                            <h6 class="section-subtitle mb-3">Loan Approval Actions</h6>
                                            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                                                @if(Auth::user()->hasPermission('loans.approve', 'approve'))
                                                <form action="{{ route('loans.approve', $loan->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-success me-md-2 mb-2 mb-md-0">
                                                        <i class="fas fa-check me-2"></i>Approve Loan
                                                    </button>
                                                </form>
                                                @endif
                                                @if(Auth::user()->hasPermission('loans.reject', 'reject'))
                                                <button type="button" class="btn btn-danger me-md-2 mb-2 mb-md-0" onclick="console.log('Reject button clicked'); $('#rejectModal').modal('show');">
                                                    <i class="fas fa-times me-2"></i>Reject Loan
                                                </button>
                                                @endif
                                                @if(Auth::user()->hasPermission('loans.wait', 'wait'))
                                                <a href="{{ route('loans.wait', $loan->id) }}" class="btn btn-warning me-md-2 mb-2 mb-md-0">
                                                    <i class="fas fa-clock me-2"></i>Put on Wait
                                                </a>
                                                @endif
                                                @if(Auth::user()->hasPermission('loans.delete', 'delete'))
                                                <form action="{{ route('loans.destroy', $loan->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this loan application? This action cannot be undone.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger mb-2 mb-md-0">
                                                        <i class="fas fa-trash me-2"></i>Delete Loan
                                                    </button>
                                                </form>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Action Buttons for Active Loans -->
                                @if($loan->status === 'approved' || $loan->status === 'disbursed')
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="action-buttons-section">
                                            <h6 class="section-subtitle mb-3">Loan Management</h6>
                                            <div class="d-grid gap-2">
                                                <a href="{{ route('loans.reschedule.create', $loan->id) }}" class="btn btn-warning">
                                                    <i class="fas fa-calendar-alt me-2"></i>Reschedule Loan
                                                </a>
                                                <a href="{{ route('loans.repayment-schedule', $loan->id) }}" class="btn btn-info">
                                                    <i class="fas fa-table me-2"></i>View Repayment Schedule
                                                </a>
                                                <a href="{{ route('loans.repayments.create', $loan->id) }}" class="btn btn-success">
                                                    <i class="fas fa-money-bill-wave me-2"></i>Record Payment
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Action Buttons for Rejected Loans -->
                                @if($loan->status === 'rejected' && Auth::user()->hasPermission('loans.delete'))
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="action-buttons-section">
                                            <h6 class="section-subtitle mb-3">Loan Actions</h6>
                                            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                                                <form action="{{ route('loans.destroy', $loan->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this rejected loan? This action cannot be undone.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger">
                                                        <i class="fas fa-trash me-2"></i>Delete Loan
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>

                        <!-- Payment Summary -->
                        <div class="col-md-6">
                            <div class="section-wrapper mb-4">
                                <div class="section-header">
                                    <div class="icon-wrapper">
                                        <i class="fas fa-chart-bar"></i>
                                    </div>
                                    <h5>Payment Summary</h5>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Total Paid</label>
                                            <div class="info-value text-success fw-bold">
                                                <i class="fas fa-check-circle me-1"></i>
                                                {{ number_format($totalPaid, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Remaining Balance</label>
                                            <div class="info-value text-primary fw-bold">
                                                <i class="fas fa-money-bill-wave me-1"></i>
                                                {{ number_format($remainingBalance, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Total Interest</label>
                                            <div class="info-value">
                                                <i class="fas fa-coins me-1 text-primary"></i>
                                                {{ number_format($loan->total_repayment - $loan->amount, 2) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Next Payment Due</label>
                                            <div class="info-value">
                                                @if($nextDueDate)
                                                <i class="fas fa-calendar-check me-1 text-primary"></i>
                                                <span class="fw-bold">{{ $nextDueDate->format('M d, Y') }}</span>
                                                @else
                                                <span class="text-muted">No pending payments</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Days Until Due</label>
                                            <div class="info-value">
                                                @if($nextDueDate && $nextDueDate->gt(now()))
                                                <span class="text-info">
                                                    <i class="fas fa-clock me-1"></i>
                                                    {{ now()->diffInDays($nextDueDate) }} days
                                                </span>
                                                @elseif($nextDueDate && $nextDueDate->lt(now()))
                                                <span class="text-danger">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                                    Overdue by {{ now()->diffInDays($nextDueDate) }} days
                                                </span>
                                                @else
                                                <span class="text-muted">-</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="info-item">
                                            <label class="info-label">Collateral</label>
                                            <div class="info-value">
                                                @if($loan->collaterals->count() > 0)
                                                    <div class="collateral-list">
                                                        @foreach($loan->collaterals as $collateral)
                                                        <div class="collateral-item mb-2">
                                                            <i class="fas fa-home me-1 text-primary"></i>
                                                            <strong>{{ $collateral->type }}</strong> - {{ $collateral->description }}
                                                            <br>
                                                            <small class="text-muted ms-3">
                                                                Value: ${{ number_format($collateral->value, 2) }} |
                                                                Condition: {{ $collateral->condition }}
                                                                @if($collateral->document_path)
                                                                | <a href="{{ asset('storage/' . $collateral->document_path) }}" target="_blank" class="text-primary">View Document</a>
                                                                @endif
                                                            </small>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                <span class="text-muted">No collateral</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="info-item">
                                            <label class="info-label">Guarantors</label>
                                            <div class="info-value">
                                                @if($loan->guarantors->count() > 0)
                                                    <div class="guarantor-list">
                                                        @foreach($loan->guarantors as $guarantor)
                                                        <div class="guarantor-item mb-2">
                                                            <i class="fas fa-user-shield me-1 text-primary"></i>
                                                            <strong>{{ $guarantor->name }}</strong>
                                                            <small class="text-muted">({{ $guarantor->phone }})</small>
                                                            <br>
                                                            <small class="text-muted ms-3">
                                                                Relationship: {{ $guarantor->relationship }} |
                                                                ID: {{ $guarantor->id_number }}
                                                                @if($guarantor->id_document_path)
                                                                | <a href="{{ asset('storage/' . $guarantor->id_document_path) }}" target="_blank" class="text-primary">View ID</a>
                                                                @endif
                                                            </small>
                                                            <br>
                                                            <small class="text-muted ms-3">{{ $guarantor->address }}</small>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                <span class="text-muted">No guarantors</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Progress Bar -->
                    <div class="section-wrapper mb-4">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-tasks"></i>
                            </div>
                            <h5>Repayment Progress</h5>
                        </div>
                        <div class="progress-container">
                            @php
                                $progress = $loan->total_repayment > 0 ? (($totalPaid) / $loan->total_repayment) * 100 : 0;
                            @endphp
                            <div class="progress-bar-wrapper">
                                <div class="progress-bar-bg">
                                    <div class="progress-bar-fill" style="width: {{ $progress }}%;">
                                        <span class="progress-text">{{ number_format($progress, 1) }}%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="progress-stats">
                                <div class="progress-stat">
                                    <span class="stat-label">Paid</span>
                                    <span class="stat-value text-success">${{ number_format($totalPaid, 2) }}</span>
                                </div>
                                <div class="progress-stat">
                                    <span class="stat-label">Outstanding</span>
                                    <span class="stat-value text-primary">${{ number_format($remainingBalance, 2) }}</span>
                                </div>
                                <div class="progress-stat">
                                    <span class="stat-label">Total</span>
                                    <span class="stat-value">${{ number_format($loan->total_repayment, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Payments -->
                    <div class="section-wrapper mb-4">
                        <div class="section-header d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <div class="icon-wrapper">
                                    <i class="fas fa-history"></i>
                                </div>
                                <h5 class="mb-0">Recent Payments</h5>
                            </div>
                            @if($loan->status === 'approved' || $loan->status === 'disbursed')
                            <a href="{{ route('loans.repayments.create', $loan->id) }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-money-bill-wave me-1"></i>Record Payment
                            </a>
                            @endif
                        </div>
                        @if($loan->repayments->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th><i class="fas fa-calendar me-1"></i>Date</th>
                                        <th><i class="fas fa-dollar-sign me-1"></i>Amount</th>
                                        <th><i class="fas fa-wallet me-1"></i>Method</th>
                                        <th><i class="fas fa-hashtag me-1"></i>Reference</th>
                                        <th><i class="fas fa-sticky-note me-1"></i>Notes</th>
                                        <th><i class="fas fa-user me-1"></i>Recorded By</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($loan->repayments->sortByDesc('payment_date')->take(5) as $repayment)
                                    <tr>
                                        <td>
                                            <i class="fas fa-calendar-day text-primary me-1"></i>
                                            {{ $repayment->payment_date->format('M d, Y') }}
                                        </td>
                                        <td class="fw-bold text-success">
                                            <i class="fas fa-money-bill-wave me-1"></i>
                                            ${{ number_format($repayment->amount, 2) }}
                                        </td>
                                        <td>
                                            <span class="payment-method-badge {{ $repayment->payment_method }}">
                                                <i class="fas fa-wallet me-1"></i>
                                                {{ ucfirst(str_replace('_', ' ', $repayment->payment_method)) }}
                                            </span>
                                        </td>
                                        <td>
                                            <code>{{ $repayment->reference ?: '-' }}</code>
                                        </td>
                                        <td>
                                            <span class="text-muted">{{ $repayment->notes ?: 'No notes' }}</span>
                                        </td>
                                        <td>
                                            @if($repayment->creator)
                                            <i class="fas fa-user-circle me-1 text-primary"></i>
                                            {{ $repayment->creator->name }}
                                            @else
                                            <span class="text-muted">System</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($loan->repayments->count() > 5)
                        <div class="text-center mt-3">
                            <a href="{{ route('loans.repayment-schedule', $loan->id) }}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-list me-1"></i>View All Payments
                            </a>
                        </div>
                        @endif
                        @else
                        <div class="text-center py-4">
                            <i class="fas fa-money-bill-wave fs-1 text-muted mb-3"></i>
                            <p class="text-muted mb-0">No payments recorded yet.</p>
                        </div>
                        @endif
                    </div>

                    <!-- Loan Disbursement Section -->
                    @if($loan->status === 'approved' && Auth::user()->hasPermission('loans.disburse', 'disburse'))
                    <div class="section-wrapper">
                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-money-check"></i>
                            </div>
                            <h5>Loan Disbursement</h5>
                        </div>

                        @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h5 class="alert-heading">Please fix the following errors:</h5>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        @endif

                        <form action="{{ route('loans.disburse', $loan->id) }}" method="POST" id="disbursementForm">
                            @csrf

                            <div class="alert alert-info">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle me-2 fs-5"></i>
                                    <div>
                                        <h6 class="alert-heading mb-1">Ready for Disbursement</h6>
                                        <p class="mb-0">You are about to disburse <strong>${{ number_format($loan->amount, 2) }}</strong> to the client.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="disbursement_date" class="form-label">Disbursement Date <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control @error('disbursement_date') is-invalid @enderror"
                                               id="disbursement_date" name="disbursement_date"
                                               value="{{ old('disbursement_date', date('Y-m-d')) }}" required>
                                        @error('disbursement_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="disbursement_method" class="form-label">Disbursement Method <span class="text-danger">*</span></label>
                                        <select class="form-control @error('disbursement_method') is-invalid @enderror"
                                                id="disbursement_method" name="disbursement_method" required>
                                            <option value="">Select Method</option>
                                            <option value="cash" {{ old('disbursement_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                                            <option value="bank_transfer" {{ old('disbursement_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                            <option value="mobile_money" {{ old('disbursement_method') == 'mobile_money' ? 'selected' : '' }}>Mobile Money</option>
                                            <option value="cheque" {{ old('disbursement_method') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                                        </select>
                                        @error('disbursement_method')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Dynamic Disbursement Details -->
                            <div id="disbursementDetails">
                                <!-- Bank Transfer Details -->
                                <div class="disbursement-method-details" id="bank_transfer_details" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="bank_name" class="form-label">Bank Name <span class="text-danger">*</span></label>
                                                <select class="form-control" id="bank_name" name="bank_name">
                                                    <option value="">Select Bank</option>
                                                    <option value="ecobank" {{ old('bank_name') == 'ecobank' ? 'selected' : '' }}>EcoBank</option>
                                                    <option value="cbz" {{ old('bank_name') == 'cbz' ? 'selected' : '' }}>CBZ Bank</option>
                                                    <option value="stanbic" {{ old('bank_name') == 'stanbic' ? 'selected' : '' }}>Stanbic Bank</option>
                                                    <option value="standard_chartered" {{ old('bank_name') == 'standard_chartered' ? 'selected' : '' }}>Standard Chartered</option>
                                                    <option value="cabs" {{ old('bank_name') == 'cabs' ? 'selected' : '' }}>CABS</option>
                                                    <option value="fbc" {{ old('bank_name') == 'fbc' ? 'selected' : '' }}>FBC Bank</option>
                                                    <option value="other" {{ old('bank_name') == 'other' ? 'selected' : '' }}>Other Bank</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="account_number" class="form-label">Account Number <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="account_number" name="account_number"
                                                       value="{{ old('account_number') }}" placeholder="Enter account number">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="transaction_id" class="form-label">Transaction ID <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="transaction_id" name="transaction_id"
                                                       value="{{ old('transaction_id') }}" placeholder="Bank transaction reference">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="transfer_date" class="form-label">Transfer Date <span class="text-danger">*</span></label>
                                                <input type="date" class="form-control" id="transfer_date" name="transfer_date"
                                                       value="{{ old('transfer_date', date('Y-m-d')) }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Mobile Money Details -->
                                <div class="disbursement-method-details" id="mobile_money_details" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="mobile_provider" class="form-label">Mobile Network <span class="text-danger">*</span></label>
                                                <select class="form-control" id="mobile_provider" name="mobile_provider">
                                                    <option value="">Select Network</option>
                                                    <option value="ecocash" {{ old('mobile_provider') == 'ecocash' ? 'selected' : '' }}>EcoCash</option>
                                                    <option value="onemoney" {{ old('mobile_provider') == 'onemoney' ? 'selected' : '' }}>OneMoney</option>
                                                    <option value="telecash" {{ old('mobile_provider') == 'telecash' ? 'selected' : '' }}>TeleCash</option>
                                                    <option value="mycash" {{ old('mobile_provider') == 'mycash' ? 'selected' : '' }}>MyCash</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="mobile_number" class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="mobile_number" name="mobile_number"
                                                       value="{{ old('mobile_number') }}" placeholder="e.g., 0771234567">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="mm_transaction_id" class="form-label">Transaction ID <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="mm_transaction_id" name="mm_transaction_id"
                                                       value="{{ old('mm_transaction_id') }}" placeholder="Mobile transaction ID">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="mm_transaction_date" class="form-label">Transaction Date <span class="text-danger">*</span></label>
                                                <input type="datetime-local" class="form-control" id="mm_transaction_date" name="mm_transaction_date"
                                                       value="{{ old('mm_transaction_date') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Cheque Details -->
                                <div class="disbursement-method-details" id="cheque_details" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="cheque_number" class="form-label">Cheque Number <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="cheque_number" name="cheque_number"
                                                       value="{{ old('cheque_number') }}" placeholder="Cheque number">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="cheque_date" class="form-label">Cheque Date <span class="text-danger">*</span></label>
                                                <input type="date" class="form-control" id="cheque_date" name="cheque_date"
                                                       value="{{ old('cheque_date') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="bank_name_cheque" class="form-label">Bank Name <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="bank_name_cheque" name="bank_name_cheque"
                                                       value="{{ old('bank_name_cheque') }}" placeholder="Issuing bank">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="branch" class="form-label">Branch</label>
                                                <input type="text" class="form-control" id="branch" name="branch"
                                                       value="{{ old('branch') }}" placeholder="Bank branch">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Cash Details -->
                                <div class="disbursement-method-details" id="cash_details" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="received_by" class="form-label">Received By <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="received_by" name="received_by"
                                                       value="{{ old('received_by', auth()->user()->name) }}"
                                                       placeholder="Name of client receiving payment">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="receipt_number" class="form-label">Receipt Number <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="receipt_number" name="receipt_number"
                                                       value="{{ old('receipt_number') }}" placeholder="e.g., RCPT-001234"
                                                       required>
                                                <small class="form-text text-muted">
                                                    Enter official receipt number from receipt book
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Disbursement Information -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="disbursement_reference" class="form-label">Reference Number</label>
                                        <input type="text" class="form-control" id="disbursement_reference" name="disbursement_reference"
                                               value="{{ old('disbursement_reference') }}" placeholder="Optional reference number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="disbursement_notes" class="form-label">Disbursement Notes</label>
                                        <textarea class="form-control" id="disbursement_notes" name="disbursement_notes"
                                                  rows="2" placeholder="Any additional notes about this disbursement">{{ old('disbursement_notes') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Terms and Conditions -->
                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="confirm_disbursement" name="confirm_disbursement" required>
                                    <label class="form-check-label" for="confirm_disbursement">
                                        I confirm that I have verified all disbursement details and the funds will be transferred to the correct recipient.
                                        <span class="text-danger">*</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-success" id="disburseBtn">
                                    <i class="fas fa-money-check me-2"></i>Process Disbursement
                                </button>
                            </div>
                        </form>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Loan Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-times-circle text-danger me-2"></i>
                    Reject Loan Application
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('loans.reject', $loan->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Are you sure you want to reject this loan application? This action cannot be undone.
                    </div>
                    <div class="mb-3">
                        <label for="rejection_reason" class="form-label">Reason for Rejection <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="rejection_reason" name="rejection_reason" rows="4" required
                                  placeholder="Please provide a detailed reason for rejecting this loan application..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-times-circle me-1"></i>Reject Loan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>



<style>
:root {
    --primary-green: #198754;
    --primary-green-dark: #146c43;
    --accent-yellow: #fbbf24;
    --accent-yellow-light: #fef3c7;
    --success-green: #198754;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --info-blue: #0dcaf0;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

/* Navigation Bar Styles */
.navigation-bar {
    background: white;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-title h1 {
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.page-title h1 i {
    color: var(--primary-green);
}

.page-title p {
    color: var(--gray-600);
    margin-bottom: 0;
}

.action-buttons-nav .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.action-buttons-nav .btn-outline-secondary {
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.action-buttons-nav .btn-outline-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

.action-buttons-nav .btn-outline-primary {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
}

.action-buttons-nav .btn-outline-primary:hover {
    background: var(--primary-green);
    color: white;
    transform: translateY(-1px);
}

/* Action Buttons Section */
.action-buttons-section {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    margin-top: 1rem;
}

.section-subtitle {
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 0.5rem;
}

.action-buttons-section .btn {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.action-buttons-section .btn-warning {
    background: var(--warning-orange);
    border: none;
    color: white;
}

.action-buttons-section .btn-warning:hover {
    background: #e06a0e;
    transform: translateY(-1px);
}

.action-buttons-section .btn-info {
    background: var(--info-blue);
    border: none;
    color: white;
}

.action-buttons-section .btn-info:hover {
    background: #0ba8d1;
    transform: translateY(-1px);
}

.action-buttons-section .btn-success {
    background: var(--success-green);
    border: none;
    color: white;
}

.action-buttons-section .btn-success:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
}

/* Form Card */
.form-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: none;
    overflow: hidden;
}

.form-card .card-body {
    padding: 2rem;
}

/* Section Styles */
.section-wrapper {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 14px;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.section-wrapper:hover {
    border-color: var(--primary-green);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12);
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    border-image: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
    border-image-slice: 1;
    border-bottom: 3px solid;
}

.section-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-header .icon-wrapper {
    width: 36px;
    height: 36px;
    background: var(--primary-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

/* Info Items */
.info-item {
    margin-bottom: 1rem;
}

.info-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-value {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--gray-900);
    font-weight: 500;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-pending {
    background: var(--accent-yellow-light);
    color: var(--warning-orange);
    border: 1px solid var(--accent-yellow);
}

.status-approved {
    background: #e7f5ff;
    color: #0d6efd;
    border: 1px solid #b3d9ff;
}

.status-active {
    background: #e8f5e8;
    color: var(--success-green);
    border: 1px solid #b8e0b8;
}

.status-disbursed {
    background: #e7f5ff;
    color: #0dcaf0;
    border: 1px solid #b3e8f5;
}

.status-completed {
    background: #e8f5e8;
    color: var(--success-green);
    border: 1px solid #b8e0b8;
}

.status-rejected {
    background: #ffe6e6;
    color: var(--danger-red);
    border: 1px solid #ffb3b3;
}

.status-paused {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-closed {
    background: var(--gray-200);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
}

/* Loan Type Badges */
.loan-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

/* Progress Bar */
.progress-container {
    padding: 1rem 0;
}

.progress-bar-wrapper {
    margin-bottom: 1rem;
}

.progress-bar-bg {
    height: 25px;
    background: var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
    border-radius: 12px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-text {
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.progress-stat {
    text-align: center;
    padding: 0.5rem;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

/* Table Styles */
.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background: var(--gray-100);
    border-bottom: 2px solid var(--gray-300);
    font-weight: 600;
    color: var(--gray-700);
    padding: 0.75rem 1rem;
}

.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--gray-50);
}

/* Payment Method Badges */
.payment-method-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

/* Disbursement Method Details */
.disbursement-method-details {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Form Controls */
.form-control, .form-select {
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger-red);
}

.invalid-feedback {
    font-size: 0.875rem;
    color: var(--danger-red);
    margin-top: 0.25rem;
}

/* Buttons */
.btn-success {
    background: var(--primary-green);
    border: none;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
}

.btn-success:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.35);
}

/* Responsive Design */
@media (max-width: 768px) {
    .navigation-bar {
        padding: 1rem 0;
    }

    .page-title h1 {
        font-size: 1.5rem;
    }

    .action-buttons-nav {
        margin-top: 1rem;
    }

    .action-buttons-nav .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-card .card-body {
        padding: 1.5rem;
    }

    .section-wrapper {
        padding: 1rem;
    }

    .progress-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .disbursement-method-details {
        padding: 1rem;
    }

    .action-buttons-section {
        padding: 1rem;
    }
}
</style>

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

    // Auto-focus on rejection reason textarea when modal opens
    var rejectModal = document.getElementById('rejectModal');
    if (rejectModal) {
        rejectModal.addEventListener('shown.bs.modal', function () {
            document.getElementById('rejection_reason').focus();
        });
    }

    // Disbursement method selection handler
    const disbursementMethod = document.getElementById('disbursement_method');
    const disbursementDetails = document.querySelectorAll('.disbursement-method-details');

    if (disbursementMethod) {
        disbursementMethod.addEventListener('change', function() {
            // Hide all disbursement details
            disbursementDetails.forEach(detail => {
                detail.style.display = 'none';
            });

            // Show selected disbursement details
            const selectedMethod = this.value;
            const detailsElement = document.getElementById(selectedMethod + '_details');
            if (detailsElement) {
                detailsElement.style.display = 'block';
            }
        });

        // Trigger change on page load if method is already selected
        if (disbursementMethod.value) {
            disbursementMethod.dispatchEvent(new Event('change'));
        }
    }

    // Auto-generate receipt number for cash disbursements
    const receiptNumberInput = document.getElementById('receipt_number');
    if (receiptNumberInput && !receiptNumberInput.value) {
        const timestamp = new Date().getTime().toString().slice(-6);
        receiptNumberInput.value = 'DISB-' + timestamp;
    }

    // Mobile number formatting for Zimbabwe
    const mobileNumberInput = document.getElementById('mobile_number');
    if (mobileNumberInput) {
        mobileNumberInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '');
            if (value.startsWith('0')) {
                 value = value.substring(1);
            }
            if (value.length > 0) {
                this.value = '0' + value;
            }
        });
    }

    // Disbursement form validation
    const disbursementForm = document.getElementById('disbursementForm');
    const disburseBtn = document.getElementById('disburseBtn');

    if (disbursementForm) {
        disbursementForm.addEventListener('submit', function(e) {
            e.preventDefault();
            console.log('Disbursement form submitted');

            const disbursementDate = document.getElementById('disbursement_date').value;
            const disbursementMethod = document.getElementById('disbursement_method').value;
            const confirmDisbursement = document.getElementById('confirm_disbursement').checked;

            // Check disbursement date
            if (!disbursementDate) {
                alert('Please select a disbursement date.');
                return;
            }

            // Check disbursement method is selected
            if (!disbursementMethod) {
                alert('Please select a disbursement method.');
                return;
            }

            // Check confirmation
            if (!confirmDisbursement) {
                alert('Please confirm that you have verified all disbursement details.');
                return;
            }

            // Method-specific validation
            let isValid = true;
            let errorMessage = '';

            if (disbursementMethod === 'bank_transfer') {
                const bankName = document.getElementById('bank_name').value;
                const accountNumber = document.getElementById('account_number').value;
                const transactionId = document.getElementById('transaction_id').value;

                if (!bankName || !accountNumber || !transactionId) {
                    isValid = false;
                    errorMessage = 'Please fill all required bank transfer details';
                }
            } else if (disbursementMethod === 'mobile_money') {
                const provider = document.getElementById('mobile_provider').value;
                const mobileNumber = document.getElementById('mobile_number').value;
                const transactionId = document.getElementById('mm_transaction_id').value;

                if (!provider || !mobileNumber || !transactionId) {
                    isValid = false;
                    errorMessage = 'Please fill all required mobile money details';
                }
            } else if (disbursementMethod === 'cheque') {
                const chequeNumber = document.getElementById('cheque_number').value;
                const chequeDate = document.getElementById('cheque_date').value;
                const bankName = document.getElementById('bank_name_cheque').value;

                if (!chequeNumber || !chequeDate || !bankName) {
                    isValid = false;
                    errorMessage = 'Please fill all required cheque details';
                }
            } else if (disbursementMethod === 'cash') {
                const receivedBy = document.getElementById('received_by').value;
                const receiptNumber = document.getElementById('receipt_number').value;

                if (!receivedBy || !receiptNumber) {
                    isValid = false;
                    errorMessage = 'Please fill all required cash disbursement details';
                }
            } else {
                isValid = false;
                errorMessage = 'Invalid disbursement method selected';
            }

            if (!isValid) {
                alert(errorMessage);
                console.error('Validation failed:', errorMessage);
                return;
            }

            // If all validations pass, submit the form
            console.log('All validations passed, submitting form...');
            disburseBtn.disabled = true;
            disburseBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';

            try {
                // Submit the form
                this.submit();
            } catch (error) {
                console.error('Form submission error:', error);
                alert('An error occurred while submitting the form. Please try again.');
                disburseBtn.disabled = false;
                disburseBtn.innerHTML = '<i class="fas fa-money-check me-2"></i>Process Disbursement';
            }
        });
    }
});
</script>
@endsection