@extends('layouts.app')

@section('title', 'Disburse Loan - ' . $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-money-check me-2 text-primary"></i>Disburse Loan</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.show', $loan->id) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to Loan
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    @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 method="POST" action="{{ route('loans.disburse', $loan->id) }}" id="disburseLoanForm">
                        @csrf

                        <!-- Loan Summary -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <h5>Loan Summary</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="info-item text-center">
                                        <label class="info-label">Client</label>
                                        <div class="info-value">
                                            <strong>{{ $loan->client->first_name }} {{ $loan->client->last_name }}</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-item text-center">
                                        <label class="info-label">Loan Amount</label>
                                        <div class="info-value text-success">
                                            <strong>${{ number_format($loan->amount, 2) }}</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-item text-center">
                                        <label class="info-label">Interest Rate</label>
                                        <div class="info-value">
                                            <strong>{{ $loan->interest_rate }}%</strong>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-item text-center">
                                        <label class="info-label">Total Repayment</label>
                                        <div class="info-value">
                                            <strong>${{ number_format($loan->total_repayment, 2) }}</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Disbursement Details -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <h5>Disbursement Details</h5>
                            </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" name="disbursement_date" id="disbursement_date"
                                               class="form-control @error('disbursement_date') is-invalid @enderror"
                                               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_amount" class="form-label">Disbursement Amount <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="disbursement_amount" id="disbursement_amount"
                                                   class="form-control @error('disbursement_amount') is-invalid @enderror"
                                                   value="{{ old('disbursement_amount', $loan->amount) }}" min="0.01" step="0.01" required>
                                        </div>
                                        @error('disbursement_amount')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Disbursement Method -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-wallet"></i>
                                </div>
                                <h5>Disbursement Method</h5>
                            </div>
                            <div class="row">
                                <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 name="disbursement_method" id="disbursement_method"
                                                class="form-select @error('disbursement_method') is-invalid @enderror" required>
                                            <option value="">Select Disbursement 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>
                                            <option value="direct_deposit" {{ old('disbursement_method') == 'direct_deposit' ? 'selected' : '' }}>Direct Deposit</option>
                                            <option value="wallet_transfer" {{ old('disbursement_method') == 'wallet_transfer' ? 'selected' : '' }}>Wallet Transfer</option>
                                        </select>
                                        @error('disbursement_method')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="disbursement_reference" class="form-label">Reference Number</label>
                                        <input type="text" name="disbursement_reference" id="disbursement_reference"
                                               class="form-control @error('disbursement_reference') is-invalid @enderror"
                                               value="{{ old('disbursement_reference') }}" placeholder="Enter reference number">
                                        @error('disbursement_reference')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Bank Transfer Details -->
                            <div class="row" id="bankTransferDetails" style="display: none;">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="bank_name" class="form-label">Bank Name</label>
                                        <input type="text" name="bank_name" id="bank_name"
                                               class="form-control @error('bank_name') is-invalid @enderror"
                                               value="{{ old('bank_name') }}" placeholder="Bank name">
                                        @error('bank_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="account_number" class="form-label">Account Number</label>
                                        <input type="text" name="account_number" id="account_number"
                                               class="form-control @error('account_number') is-invalid @enderror"
                                               value="{{ old('account_number') }}" placeholder="Account number">
                                        @error('account_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="account_name" class="form-label">Account Name</label>
                                        <input type="text" name="account_name" id="account_name"
                                               class="form-control @error('account_name') is-invalid @enderror"
                                               value="{{ old('account_name') }}" placeholder="Account holder name">
                                        @error('account_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Mobile Money Details -->
                            <div class="row" id="mobileMoneyDetails" style="display: none;">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="mobile_provider" class="form-label">Mobile Provider</label>
                                        <select name="mobile_provider" id="mobile_provider"
                                                class="form-select @error('mobile_provider') is-invalid @enderror">
                                            <option value="">Select Provider</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>
                                        @error('mobile_provider')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="mobile_number" class="form-label">Mobile Number</label>
                                        <input type="text" name="mobile_number" id="mobile_number"
                                               class="form-control @error('mobile_number') is-invalid @enderror"
                                               value="{{ old('mobile_number') }}" placeholder="Mobile number">
                                        @error('mobile_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Cheque Details -->
                            <div class="row" id="chequeDetails" style="display: none;">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cheque_number" class="form-label">Cheque Number</label>
                                        <input type="text" name="cheque_number" id="cheque_number"
                                               class="form-control @error('cheque_number') is-invalid @enderror"
                                               value="{{ old('cheque_number') }}" placeholder="Cheque number">
                                        @error('cheque_number')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cheque_date" class="form-label">Cheque Date</label>
                                        <input type="date" name="cheque_date" id="cheque_date"
                                               class="form-control @error('cheque_date') is-invalid @enderror"
                                               value="{{ old('cheque_date') }}">
                                        @error('cheque_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Fees and Charges -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-receipt"></i>
                                </div>
                                <h5>Fees and Charges</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="processing_fee" class="form-label">Processing Fee</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="processing_fee" id="processing_fee"
                                                   class="form-control @error('processing_fee') is-invalid @enderror"
                                                   value="{{ old('processing_fee', 0) }}" min="0" step="0.01">
                                        </div>
                                        @error('processing_fee')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="insurance_fee" class="form-label">Insurance Fee</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="insurance_fee" id="insurance_fee"
                                                   class="form-control @error('insurance_fee') is-invalid @enderror"
                                                   value="{{ old('insurance_fee', 0) }}" min="0" step="0.01">
                                        </div>
                                        @error('insurance_fee')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="other_fees" class="form-label">Other Fees</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="other_fees" id="other_fees"
                                                   class="form-control @error('other_fees') is-invalid @enderror"
                                                   value="{{ old('other_fees', 0) }}" min="0" step="0.01">
                                        </div>
                                        @error('other_fees')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Net Disbursement Amount:</strong>
                                        <span id="netAmount">${{ number_format($loan->amount, 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Information -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-sticky-note"></i>
                                </div>
                                <h5>Additional Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="disbursement_notes" class="form-label">Disbursement Notes</label>
                                        <textarea name="disbursement_notes" id="disbursement_notes"
                                                  class="form-control @error('disbursement_notes') is-invalid @enderror"
                                                  rows="4" placeholder="Any additional notes about the disbursement...">{{ old('disbursement_notes') }}</textarea>
                                        @error('disbursement_notes')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-1"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-money-check me-1"></i> Process Disbursement
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Include the same CSS styles from show.blade.php */
: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;
}

/* Include all the navigation, form card, section, and input styles from show.blade.php */
.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;
}

.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-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;
}

.form-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.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;
}

.input-group {
    border-radius: 8px;
}

.input-group-text {
    background: var(--gray-100);
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
    font-weight: 500;
}

.input-group .form-control {
    border-left: none;
}

.input-group .form-control:focus {
    border-left: 2px solid var(--primary-green);
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

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

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

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

.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;
}

@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;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const disbursementMethod = document.getElementById('disbursement_method');
    const bankTransferDetails = document.getElementById('bankTransferDetails');
    const mobileMoneyDetails = document.getElementById('mobileMoneyDetails');
    const chequeDetails = document.getElementById('chequeDetails');

    const disbursementAmount = document.getElementById('disbursement_amount');
    const processingFee = document.getElementById('processing_fee');
    const insuranceFee = document.getElementById('insurance_fee');
    const otherFees = document.getElementById('other_fees');
    const netAmount = document.getElementById('netAmount');

    // Toggle method-specific details
    function toggleMethodDetails() {
        const method = disbursementMethod.value;

        // Hide all details first
        bankTransferDetails.style.display = 'none';
        mobileMoneyDetails.style.display = 'none';
        chequeDetails.style.display = 'none';

        // Show relevant details
        if (method === 'bank_transfer' || method === 'direct_deposit') {
            bankTransferDetails.style.display = 'flex';
        } else if (method === 'mobile_money' || method === 'wallet_transfer') {
            mobileMoneyDetails.style.display = 'flex';
        } else if (method === 'cheque') {
            chequeDetails.style.display = 'flex';
        }
    }

    // Calculate net disbursement amount
    function calculateNetAmount() {
        const amount = parseFloat(disbursementAmount.value) || 0;
        const processing = parseFloat(processingFee.value) || 0;
        const insurance = parseFloat(insuranceFee.value) || 0;
        const other = parseFloat(otherFees.value) || 0;

        const totalFees = processing + insurance + other;
        const net = amount - totalFees;

        netAmount.textContent = '$' + net.toFixed(2);
    }

    // Event listeners
    disbursementMethod.addEventListener('change', toggleMethodDetails);
    disbursementAmount.addEventListener('input', calculateNetAmount);
    processingFee.addEventListener('input', calculateNetAmount);
    insuranceFee.addEventListener('input', calculateNetAmount);
    otherFees.addEventListener('input', calculateNetAmount);

    // Initialize
    toggleMethodDetails();
    calculateNetAmount();
});
</script>
@endsection