@extends('layouts.app')
@section('title',$product->name)
@section('content')
<div class="mb-6 flex items-start justify-between gap-4"><div><h1 class="text-2xl font-semibold">{{ $product->name }}</h1><p class="text-sm text-muted-foreground">{{ $product->duration }} {{ $product->duration_unit }} · {{ str_replace('_',' ',$product->repayment_frequency) }} · {{ ucfirst($product->status) }}</p></div>@if(auth()->user()->can('loan-products.manage'))<a class="mf-btn" href="{{ route('loan-products.edit',$product) }}">Edit product</a>@endif</div>
<div class="grid gap-4 md:grid-cols-4"><div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Limits</div><div class="mt-1 font-semibold">{{ $product->minimum_amount }} – {{ $product->maximum_amount }}</div></div><div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Interest</div><div class="mt-1 font-semibold">{{ rtrim(rtrim($product->interest_rate,'0'),'.') }}% · {{ str_replace('_',' ',$product->interest_calculation_method) }}</div></div><div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Processing fee</div><div class="mt-1 font-semibold">{{ $product->processing_fee_type==='percentage'?rtrim(rtrim($product->processing_fee_value,'0'),'.').'%':number_format((float)$product->processing_fee_value,2) }}</div><div class="mt-1 text-xs text-muted-foreground">{{ $product->processingFeePaymentModeLabel() }}</div></div><div class="mf-card mf-card-body"><div class="text-xs text-muted-foreground">Requirements</div><div class="mt-1 text-sm">Collateral: {{ $product->collateral_required?'Yes':'No' }} · Guarantor: {{ $product->guarantor_required?'Yes':'No' }}</div></div></div>
<div class="mt-5 grid gap-4 lg:grid-cols-[340px_1fr]"><form id="preview-form" class="mf-card mf-card-body space-y-3"><h2 class="font-semibold">Calculation preview</h2><div><label class="mf-field-label">Principal</label><input id="principal" type="number" step="0.01" min="{{ $product->minimum_amount }}" max="{{ $product->maximum_amount }}" value="{{ $product->minimum_amount }}" class="mf-input"></div><div><label class="mf-field-label">Start date</label><input id="start_date" type="date" value="{{ now()->toDateString() }}" class="mf-input"></div>@if($product->repayment_frequency==='custom')<div><label class="mf-field-label">Custom dates</label><textarea id="custom_dates" class="mf-input" placeholder="One YYYY-MM-DD date per line"></textarea></div>@endif<button class="mf-btn mf-btn-primary" type="submit">Calculate schedule</button><p id="preview-message" class="text-xs text-muted-foreground"></p></form><div class="mf-card"><div class="mf-card-header"><h2 class="mf-card-title">Repayment schedule</h2><p id="preview-summary" class="mf-card-subtitle">Enter a principal to calculate.</p></div><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b text-left"><th class="p-3">#</th><th class="p-3">Due</th><th class="p-3">Principal</th><th class="p-3">Interest</th><th class="p-3">Fees</th><th class="p-3">Amount due</th></tr></thead><tbody id="preview-rows"><tr><td colspan="6" class="p-6 text-center text-muted-foreground">No preview calculated.</td></tr></tbody></table></div></div></div>
<script>document.getElementById('preview-form').addEventListener('submit',async(e)=>{e.preventDefault();const msg=document.getElementById('preview-message'),rows=document.getElementById('preview-rows'),summary=document.getElementById('preview-summary');msg.textContent='Calculating…';const custom=document.getElementById('custom_dates');const body={principal:document.getElementById('principal').value,start_date:document.getElementById('start_date').value};if(custom)body.custom_dates=custom.value.split(/\n+/).map(v=>v.trim()).filter(Boolean);const r=await fetch(@json(route('loan-products.preview',$product)),{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':@json(csrf_token())},body:JSON.stringify(body)});const data=await r.json();if(!r.ok){msg.textContent=data.message||'Calculation failed.';return;}msg.textContent='';summary.textContent=`Principal ${data.summary.principal} + Interest ${data.summary.interest} + Repayable fees ${data.summary.fees} = ${data.summary.total_repayment} · Processing fee ${data.summary.processing_fee}: ${data.summary.processing_fee_payment_mode_label} · Customer receives ${data.summary.net_disbursement}`;rows.innerHTML=data.installments.map(i=>`<tr class="border-b"><td class="p-3">${i.number}</td><td class="p-3">${i.due_date}</td><td class="p-3">${i.principal}</td><td class="p-3">${i.interest}</td><td class="p-3">${i.fees}</td><td class="p-3 font-medium">${i.amount_due}</td></tr>`).join('');});</script>
@endsection
