@extends('layouts.app')

@section('title', 'Early Loan Settlement')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        <i class="fas fa-handshake me-2"></i>
                        Early Loan Settlement
                    </h4>
                    <div class="card-tools">
                        <a href="{{ route('cashier.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Cashier
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <!-- Search Form -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-search me-2"></i>Search Loan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('cashier.early-settlement.search') }}" method="GET" class="row g-3">
                                        <div class="col-md-8">
                                            <label for="search_term" class="form-label">Loan ID or Member NIC</label>
                                            <input type="text" name="search_term" id="search_term" class="form-control" 
                                                   value="{{ request('search_term') }}" placeholder="Enter Loan ID or NIC" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">&nbsp;</label>
                                            <button type="submit" class="btn btn-primary d-block w-100">
                                                <i class="fas fa-search me-2"></i>Search
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if(isset($loanDetails) && $loanDetails)
                        <!-- Loan Details Section -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-info-circle me-2"></i>Loan Details
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <table class="table table-borderless">
                                                    <tr>
                                                        <td><strong>Loan ID:</strong></td>
                                                        <td>{{ $loanDetails->loan_id ?? $loanDetails->id }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Member Name:</strong></td>
                                                        <td>{{ $loanDetails->member->name ?? 'N/A' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>NIC:</strong></td>
                                                        <td>{{ $loanDetails->member->nic ?? 'N/A' }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-md-6">
                                                <table class="table table-borderless">
                                                    <tr>
                                                        <td><strong>Loan Amount:</strong></td>
                                                        <td>Rs. {{ number_format($loanDetails->loan_amount ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Capital Due:</strong></td>
                                                        <td>Rs. {{ number_format($loanDetails->total_capital_due ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Interest Due:</strong></td>
                                                        <td>Rs. {{ number_format($loanDetails->total_interest_due ?? 0, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Total Due:</strong></td>
                                                        <td>
                                                            <span class="badge bg-danger fs-6">
                                                                Rs. {{ number_format($loanDetails->total_due ?? 0, 2) }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Settlement Form -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header bg-success text-white">
                                        <h5 class="card-title mb-0">
                                            <i class="fas fa-check-circle me-2"></i>Confirm Early Settlement
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <form action="{{ route('cashier.early-settlement.process') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="loan_id" value="{{ $loanDetails->loan_id ?? $loanDetails->id }}">
                                            <input type="hidden" name="loan_type" value="{{ $loanType }}">
                                            <input type="hidden" name="total_due" value="{{ $loanDetails->total_due ?? 0 }}">
                                            <input type="hidden" name="total_capital_due" value="{{ $loanDetails->total_capital_due ?? 0 }}">
                                            <input type="hidden" name="total_interest_due" value="{{ $loanDetails->total_interest_due ?? 0 }}">
                                            <input type="hidden" id="hidden_discount_amount" name="discount_amount" value="0">
                                            <input type="hidden" id="hidden_settlement_amount" name="settlement_amount" value="0">
                                            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Capital Due:</label>
                                                        <input type="number" id="capital_due" class="form-control" 
                                                               value="{{ number_format($loanDetails->total_capital_due ?? 0, 2, '.', '') }}" readonly step="0.01">
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">Original Interest Due:</label>
                                                        <input type="number" id="interest_due" class="form-control" 
                                                               value="{{ number_format($loanDetails->total_interest_due ?? 0, 2, '.', '') }}" readonly step="0.01">
                                                    </div>

                                                    <div class="mb-3">
                                                        <label for="discount_percentage" class="form-label">Interest Waiver (%)</label>
                                                        <input type="number" name="discount_percentage" id="discount_percentage" 
                                                               class="form-control" value="0" step="0.01" min="0" max="100" 
                                                               oninput="calculateDiscount()">
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Discount Amount:</label>
                                                        <input type="number" id="discount_amount" class="form-control" value="0" readonly step="0.01">
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">New Interest Due:</label>
                                                        <input type="number" id="new_interest_due" class="form-control" value="0" readonly step="0.01">
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">Settlement Amount:</label>
                                                        <input type="number" id="settlement_amount" class="form-control" value="0" readonly step="0.01">
                                                    </div>

                                                    <div class="mb-3">
                                                        <label for="payment_date" class="form-label">Settlement Date</label>
                                                        <input type="date" name="payment_date" id="payment_date" class="form-control" 
                                                               value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="d-grid">
                                                <button type="submit" class="btn btn-danger btn-lg">
                                                    <i class="fas fa-handshake me-2"></i>Confirm Early Settlement
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @elseif(isset($message) && $message)
                        <!-- No Loan Found Message -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    {{ $message }}
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus on search term input
    const searchTermInput = document.getElementById('search_term');
    if (searchTermInput) {
        searchTermInput.focus();
    }
    
    // Initialize calculation
    calculateDiscount();
});

function calculateDiscount() {
    const capitalDue = parseFloat(document.getElementById('capital_due').value) || 0;
    const interestDue = parseFloat(document.getElementById('interest_due').value) || 0;
    const discountPercent = parseFloat(document.getElementById('discount_percentage').value) || 0;
    
    // Validate discount percentage
    const validatedDiscountPercent = Math.min(Math.max(discountPercent, 0), 100);
    if (discountPercent !== validatedDiscountPercent) {
        document.getElementById('discount_percentage').value = validatedDiscountPercent;
    }
    
    // Calculate amounts
    const discountAmount = (interestDue * validatedDiscountPercent) / 100;
    const newInterestDue = interestDue - discountAmount;
    const settlementAmount = capitalDue + newInterestDue;
    
    // Update display fields
    document.getElementById('discount_amount').value = discountAmount.toFixed(2);
    document.getElementById('new_interest_due').value = newInterestDue.toFixed(2);
    document.getElementById('settlement_amount').value = settlementAmount.toFixed(2);
    
    // Update hidden fields
    document.getElementById('hidden_discount_amount').value = discountAmount;
    document.getElementById('hidden_settlement_amount').value = settlementAmount;
}
</script>
@endsection