@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> Add New Loan
        </h3>
    </div>

    <form action="{{ route('payroll.loans.store') }}" method="POST">
        @csrf
        <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" 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 }}">{{ $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">Advance</option>
                    <option value="Loan">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" 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="0" 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">Term (months):</label>
                <input type="number" id="term_months" name="term_months" value="1" 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>

        <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" 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" 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> SAVE
            </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