@extends('frontend.layout_2')
@section('title','কিস্তি জমা — অবস্থা')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
.page-card{border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06);border:1px solid rgba(2,8,23,.06)}
.badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.25rem .6rem;font-weight:800;font-size:12px;line-height:1}
.badge-pending{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.badge-paid{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.meta{display:flex;flex-wrap:wrap;gap:.8rem}
.meta > div{border:1px solid #e5e7eb;border-radius:12px;padding:.6rem .75rem;background:#fff}
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.7rem 1rem;font-weight:800;color:#fff;background:linear-gradient(90deg,#6366f1,#06b6d4)}
</style>
@endpush

@section('sub_layout')
<div class="mx-auto max-w-md px-4 py-6">
  <div class="page-card p-6">
    @php $isPaid = $installment->status === 'paid'; @endphp

    <div class="flex items-center gap-3">
      <div class="flex h-11 w-11 items-center justify-center rounded-2xl text-white" style="background:{{ $isPaid ? '#10b981' : '#f59e0b' }}">
        <i class="fa-solid {{ $isPaid ? 'fa-circle-check' : 'fa-hourglass-half' }}"></i>
      </div>
      <div>
        <div class="text-lg font-extrabold text-slate-900">
          কিস্তি #{{ $installment->id }} — {{ $isPaid ? 'Paid' : 'Pending Review' }}
        </div>
        <div class="mt-1 text-sm text-slate-500">
          Loan #{{ $loan->id }} • Amount: ৳ {{ number_format($installment->amount) }}
        </div>
      </div>
      <div class="ms-auto">
        <span class="badge {{ $isPaid ? 'badge-paid':'badge-pending' }}">
          <i class="fa-solid {{ $isPaid ? 'fa-badge-check' : 'fa-clock' }}"></i>
          {{ $isPaid ? 'Approved' : 'Waiting Admin' }}
        </span>
      </div>
    </div>

    <div class="mt-4 meta">
      <div>
        <div class="text-xs text-slate-500">Transaction ID</div>
        <div class="font-semibold">{{ $installment->payment_trx_id }}</div>
      </div>
      <div>
        <div class="text-xs text-slate-500">Paid Amount</div>
        <div class="font-semibold">৳ {{ number_format($installment->paid_amount ?? 0) }}</div>
      </div>
      <div>
        <div class="text-xs text-slate-500">Method</div>
        <div class="font-semibold text-slate-800">{{ strtoupper($installment->payment_method ?? '-') }}</div>
      </div>
    </div>

    <div class="mt-5 grid grid-cols-2 gap-3">
      <a href="{{ route('loan.installments.index') }}" class="btn justify-center"><i class="fa-solid fa-list-check"></i> কিস্তি তালিকা</a>
      <a href="{{ route('transactions') }}" class="btn justify-center" style="background:linear-gradient(90deg,#22c55e,#16a34a)"><i class="fa-regular fa-rectangle-list"></i> ট্রানজ্যাকশন</a>
    </div>

    @unless($isPaid)
      <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-sm text-amber-800">
        <i class="fa-solid fa-circle-info"></i> আপনার কিস্তির তথ্য পাঠানো হয়েছে। Admin যাচাই করলে স্ট্যাটাস “Paid” হবে।
      </div>
    @endunless
  </div>
</div>
@endsection
