@extends('admin.layouts.app')

@section('content')
<div class="bg-white p-4 shadow-sm border border-gray-200">
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  p-2 rounded-t-sm mb-6">
        <h3 class="font-semibold text-sm flex items-center">
            <i class="fa-regular fa-file-lines mr-2"></i> Edit Loan / Advance
        </h3>
    </div>

    <form action="{{ route('payroll.loans.update', $loan->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Loan Name:</label>
                <input type="text" name="loan_name" value="{{ $loan->loan_name }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20" required>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Employee:</label>
                <select name="employee_id" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-600 bg-white" required>
                    <option value="">-- Select Employee --</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" {{ $loan->user_id == $employee->user_id ? 'selected' : '' }}>{{ $employee->name }} ({{ $employee->employee_code ?? $employee->id }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Loan Type:</label>
                <select name="loan_type" id="loan_type" onchange="toggleLoanFields()" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-600 bg-white" required>
                    <option value="">-- Select Loan Type --</option>
                    <option value="Advance" {{ $loan->loan_type == 'Advance' ? 'selected' : '' }}>Advance</option>
                    <option value="Loan" {{ $loan->loan_type == 'Loan' ? 'selected' : '' }}>Loan</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Amount:</label>
                <input type="number" step="0.01" id="amount" name="amount" value="{{ $loan->amount }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20" required>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Interest Rate (%):</label>
                <input type="number" step="0.01" id="interest_rate" name="interest_rate" value="{{ $loan->interest_rate }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 {{ $loan->loan_type == 'Advance' ? 'bg-gray-100' : '' }}" {{ $loan->loan_type == 'Advance' ? 'readonly' : '' }} required>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Term (months):</label>
                <input type="number" id="term_months" name="term_months" value="{{ $loan->term_months }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 {{ $loan->loan_type == 'Advance' ? 'bg-gray-100' : '' }}" {{ $loan->loan_type == 'Advance' ? 'readonly' : '' }} required>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 items-end">
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Start Date:</label>
                <input type="date" name="start_date" value="{{ $loan->start_date }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-500" required>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-gray-800 mb-1">Total Amount (Principal + Interest):</label>
                <input type="number" step="0.01" id="total_amount" name="total_amount" value="{{ $loan->total_amount }}" class="w-full border border-gray-300 px-3 py-2 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 bg-gray-50" readonly required>
            </div>
            <div>
                <button type="button" onclick="calculateEMI()" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-4 py-2 rounded-sm text-xs font-semibold shadow transition">
                    CALCULATE EMI
                </button>
            </div>
        </div>

        <div class="flex justify-end gap-2 mt-8 pt-4 border-t border-gray-200">
            <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-2 rounded-sm text-xs font-semibold shadow transition flex items-center">
                <i class="fa-solid fa-download mr-2"></i> UPDATE
            </button>
            <a href="{{ route('payroll.loans.index') }}" class="bg-[#e53935] hover:bg-[#d32f2f] text-white px-6 py-2 rounded-sm text-xs font-semibold shadow transition flex items-center">
                <i class="fa-regular fa-circle-xmark mr-2"></i> CANCEL
            </a>
        </div>
    </form>
</div>

@push('scripts')
<script>
    function calculateEMI() {
        const amount = parseFloat(document.getElementById('amount').value) || 0;
        const interestRate = parseFloat(document.getElementById('interest_rate').value) || 0;
        
        // Simple interest formula for Total Amount
        const totalInterest = (amount * interestRate) / 100;
        const totalAmount = amount + totalInterest;
        
        document.getElementById('total_amount').value = totalAmount.toFixed(2);
    }

    function toggleLoanFields() {
        const loanType = document.getElementById('loan_type').value;
        const interestRate = document.getElementById('interest_rate');
        const termMonths = document.getElementById('term_months');

        if (loanType === 'Advance') {
            interestRate.value = 0;
            interestRate.readOnly = true;
            interestRate.classList.add('bg-gray-100');
            
            termMonths.value = 1;
            termMonths.readOnly = true;
            termMonths.classList.add('bg-gray-100');
            
            calculateEMI();
        } else {
            interestRate.readOnly = false;
            interestRate.classList.remove('bg-gray-100');
            
            termMonths.readOnly = false;
            termMonths.classList.remove('bg-gray-100');
        }
    }
</script>
@endpush
@endsection