@extends('layouts.app')

@section('title', 'Individual Payment')

@section('content')
<div class="max-w-7xl mx-auto py-2 px-2">
    <div class="max-w-7xl mx-auto">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h2 class="h5 mb-0 text-dark fw-semibold">
                        <i class="fas fa-money-bill-wave text-primary me-2"></i>
                        Individual Payment Processing
                    </h2>
                </div>
                <div>
                    <a href="{{ route('cashier.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>Back to Cashier
                    </a>
                </div>
            </div>

            <!-- Alert Messages -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show py-2 small mb-2" role="alert">
                    <i class="fas fa-check-circle me-1"></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 py-2 small mb-2" role="alert">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    <ul class="mb-0 ps-3">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Loan Search Section -->
            <div class="card border mb-3 shadow-sm">
                <div class="card-header bg-white py-2 px-3 border-bottom">
                    <span class="fw-semibold small text-secondary">
                        <i class="fas fa-search me-1"></i>Search Loan
                    </span>
                </div>
                <div class="card-body py-3">
                    <form action="{{ route('cashier.search-loan') }}" method="GET">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label for="loan_type" class="form-label small mb-1">Loan Type <span class="text-danger">*</span></label>
                                <select name="loan_type" id="loan_type" class="form-select form-select-sm" required>
                                    <option value="">Select Loan Type</option>
                                    <option value="business_loan" {{ request('loan_type') == 'business_loan' ? 'selected' : '' }}>Business Loan</option>
                                    <option value="lease_loan" {{ request('loan_type') == 'lease_loan' ? 'selected' : '' }}>Lease Loan</option>
                                    <option value="micro_loan" {{ request('loan_type') == 'micro_loan' ? 'selected' : '' }}>Micro Loan</option>
                                    <option value="interest_only" {{ request('loan_type') == 'interest_only' ? 'selected' : '' }}>Interest Only</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="search_term" class="form-label small mb-1">Loan ID or Member NIC <span class="text-danger">*</span></label>
                                <input type="text" name="search_term" id="search_term" class="form-control form-control-sm" 
                                       value="{{ request('search_term') }}" placeholder="Enter Loan ID or NIC" required>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-primary btn-sm w-100">
                                    <i class="fas fa-search me-1"></i>Search Loan
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            

            @if(isset($loanDetails) && $loanDetails)
                <!-- Loan Details Section -->
                <div class="card border mb-3 shadow-sm">
                    <div class="card-header bg-white py-2 px-3 border-bottom">
                        <span class="fw-semibold small text-secondary">
                            <i class="fas fa-info-circle me-1"></i>Loan Details
                        </span>
                    </div>
                    <div class="card-body py-3">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-borderless table-sm mb-0">
                                    <tbody>
                                        <!-- First Row -->
                                        <tr>
                                            <!-- Column 1 -->
                                            <td class="text-muted small" style="width: 15%;">Loan ID:</td>
                                            <td class="fw-semibold small" style="width: 20%;">{{ $loanDetails->loan_id ?? $loanDetails->id }}</td>
                                            
                                            <!-- Column 2 -->
                                            <td class="text-muted small" style="width: 15%;">Member Name:</td>
                                            <td class="small" style="width: 20%;">{{ $loanDetails->member->initials ?? 'N/A' }}</td>
                                            
                                            <!-- Column 3 -->
                                            <td class="text-muted small" style="width: 15%;">Loan Amount:</td>
                                            <td class="fw-semibold text-success small" style="width: 15%;">Rs. {{ number_format($loanDetails->loan_amount ?? 0, 2) }}</td>
                                        </tr>
                                        
                                        <!-- Second Row -->
                                        <tr>
                                            <!-- Column 1 -->
                                            <td class="text-muted small">NIC:</td>
                                            <td class="small">{{ $loanDetails->member->nic ?? 'N/A' }}</td>
                                            
                                            <!-- Column 2 -->
                                            <td class="text-muted small">Loan Type:</td>
                                            <td>
                                                <span class="badge bg-primary small">{{ ucwords(str_replace('_', ' ', $loanType)) }}</span>
                                            </td>
                                            
                                            <!-- Column 3 -->
                                            <td class="text-muted small">Total Due:</td>
                                            <td>
                                                <span class="badge bg-danger small">Rs. {{ number_format($loanDetails->total_due ?? 0, 2) }}</span>
                                            </td>
                                            
                                            <!-- Column 4 -->
                                            <td class="text-muted small">Status:</td>
                                            <td>
                                                @php
                                                    $status = $loanDetails->status ?? 'unknown';
                                                    $statusClass = match($status) {
                                                        'approved' => 'bg-success',
                                                        'pending' => 'bg-warning',
                                                        'rejected' => 'bg-danger',
                                                        'disbursed' => 'bg-info',
                                                        'settled' => 'bg-secondary',
                                                        default => 'bg-secondary'
                                                    };
                                                @endphp
                                                <span class="badge {{ $statusClass }} small">{{ ucfirst($status) }}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Payment Form -->
            <div class="card border shadow-sm mb-3">
                <div class="card-header bg-white py-2 px-3 border-bottom">
                    <span class="fw-semibold small text-secondary">
                        <i class="fas fa-credit-card me-1"></i>Process Payment
                    </span>
                </div>
                <div class="card-body py-3">
                    <form action="{{ route('cashier.process-payment') }}" method="POST">
                        @csrf
                        <input type="hidden" name="loan_id" value="{{ $loanDetails->loan_id ?? $loanDetails->id }}">
                        <input type="hidden" name="loan_type" value="{{ $loanType }}">
                        
                        <!-- First Row - 4 columns -->
                        <div class="row g-3 mb-3">
                            <!-- Column 1 -->
                            <div class="col-md-3">
                                <label for="paid_amount" class="form-label small">Payment Amount <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <input type="number" name="paid_amount" id="paid_amount" class="form-control form-control-sm" 
                                            step="0.01" min="0.01" 
                                            max="{{ number_format($loanDetails->total_due ?? 0, 2, '.', '') }}" 
                                            value="{{ number_format($loanDetails->total_due ?? 0, 2, '.', '') }}" 
                                            required>
                                </div>
                            </div>
                            
                            <!-- Column 2 -->
                            <div class="col-md-3">
                                <label for="payment_date" class="form-label small">Payment Date <span class="text-danger">*</span></label>
                                <input type="date" name="payment_date" id="payment_date" class="form-control form-control-sm" 
                                        value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
                            </div>
                            
                            <!-- Column 3 -->
                            <div class="col-md-3">
                                <label for="payment_method" class="form-label small">Payment Method <span class="text-danger">*</span></label>
                                <select name="payment_method" id="payment_method" class="form-select form-select-sm" required>
                                    <option value="">Select Method</option>
                                    <option value="cash">Cash</option>
                                    <option value="cheque">Cheque</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                </select>
                            </div>
                            
                            <!-- Column 4 -->
                            <div class="col-md-3">
                                <label for="reference_number" class="form-label small">Reference No.</label>
                                <input type="text" name="reference_number" id="reference_number" class="form-control form-control-sm" 
                                        placeholder="Cheque/Trans ID" style="font-size: 0.75rem;">
                                <small class="form-text text-muted" style="font-size: 0.65rem;">For non-cash payments</small>
                            </div>
                            <div class="col-md-4">
                                <label for="notes" class="form-label small">Notes</label>
                                <textarea name="notes" id="notes" class="form-control form-control-sm" rows="2" 
                                            placeholder="Additional notes about this payment"></textarea>
                            </div>
                        </div>
                        
                        <!-- Second Row - Full width button -->
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success btn-sm w-100">
                                    <i class="fas fa-save me-1"></i>Process Payment
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

                <!-- Installments Section -->
                @if(isset($installments) && $installments->count() > 0)
                    <div class="card border mb-3 shadow-sm">
                        <div class="card-header bg-white py-2 px-3 border-bottom">
                            <span class="fw-semibold small text-secondary">
                                <i class="fas fa-calendar-alt me-1"></i>Pending Installments
                            </span>
                        </div>
                        <div class="card-body py-3">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover table-sm mb-0">
                                    <thead class="table-light small">
                                        <tr>
                                            <th>Installment Date</th>
                                            <th>Interest Due</th>
                                            <th>Capital Due</th>
                                            <th>Total Due</th>
                                            <th>Paid Amount</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($installments as $installment)
                                            <tr>
                                                <td class="fw-semibold small">{{ \Carbon\Carbon::parse($installment->installment_date)->format('d/m/Y') }}</td>
                                                <td class="text-info small">Rs. {{ number_format($installment->interest_due ?? 0, 2) }}</td>
                                                <td class="text-primary small">Rs. {{ number_format($installment->capital_due ?? 0, 2) }}</td>
                                                <td><span class="fw-semibold text-danger small">Rs. {{ number_format($installment->total_due ?? 0, 2) }}</span></td>
                                                <td class="text-success small">Rs. {{ number_format($installment->paid_amount ?? 0, 2) }}</td>
                                                <td>
                                                    @php
                                                        $status = $installment->status ?? 'pending';
                                                        $statusClass = $status === 'paid' ? 'bg-success' : 'bg-warning';
                                                    @endphp
                                                    <span class="badge {{ $statusClass }} small">{{ ucfirst($status) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif

                
            @elseif(isset($message))
                <!-- No Loan Found Message -->
                <div class="card border shadow-sm mb-3">
                    <div class="card-body text-center py-4">
                        <div class="alert alert-warning mb-0 small">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            <strong>{{ $message }}</strong>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
window.maxAmount = parseFloat("{{ isset($loanDetails) && $loanDetails ? number_format($loanDetails->total_due ?? 0, 2, '.', '') : '0' }}");
document.addEventListener('DOMContentLoaded', function() {
    const searchTermInput = document.getElementById('search_term');
    if (searchTermInput) { searchTermInput.focus(); }
    const paidAmountInput = document.getElementById('paid_amount');
    if (paidAmountInput && window.maxAmount > 0) {
        paidAmountInput.addEventListener('input', function() {
            const value = parseFloat(this.value);
            if (value > window.maxAmount) {
                this.value = window.maxAmount.toFixed(2);
            }
        });
    }
    const paymentMethodSelect = document.getElementById('payment_method');
    const referenceNumberInput = document.getElementById('reference_number');
    if (paymentMethodSelect && referenceNumberInput) {
        paymentMethodSelect.addEventListener('change', function() {
            if (this.value === 'cash' && !referenceNumberInput.value) {
                const now = new Date();
                const timestamp = now.getFullYear().toString().slice(-2) +
                                now.getSeconds().toString().padStart(2, '0');
                referenceNumberInput.value = 'CASH' + timestamp;
            }
        });
    }
});
</script>
@endpush
@endsection