@extends('frontend.layout_2')
@section('title', 'Loan Details')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
@media (prefers-reduced-motion: no-preference){
  .press:active{ transform:translateY(1px); }
}
</style>
@endpush

@section('sub_layout')
<div class="mx-auto max-w-md px-4 py-6">

  {{-- Card --}}
  <div class="bg-white/90 backdrop-blur rounded-2xl shadow-lg ring-1 ring-black/5 p-6">

    {{-- Title --}}
    <h2 class="text-center text-xl font-extrabold tracking-wide">
      <span class="bg-gradient-to-r from-rose-600 to-red-600 bg-clip-text text-transparent">
        অ্যামাউন্ট বিস্তারিত
      </span>
    </h2>

    {{-- Summary stats --}}
    <div class="mt-5 grid grid-cols-2 gap-3">
      {{-- Loan Amount --}}
      <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex items-center gap-3">
          <span class="inline-flex size-9 items-center justify-center rounded-lg bg-rose-50 text-rose-600 ring-1 ring-rose-100">
            <i class="fa-solid fa-sack-dollar"></i>
          </span>
          <div class="min-w-0">
            <div class="text-xs text-slate-500">লোন</div>
            <div class="truncate text-[15px] font-semibold text-slate-800">
              ৳ {{ number_format($loan->amount) }}
            </div>
          </div>
        </div>
      </div>

      {{-- Total Payable --}}
      <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex items-center gap-3">
          <span class="inline-flex size-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100">
            <i class="fa-solid fa-receipt"></i>
          </span>
          <div class="min-w-0">
            <div class="text-xs text-slate-500">মোট পরিশোধযোগ্য</div>
            <div class="truncate text-[15px] font-semibold text-slate-800">
              ৳ {{ number_format($loan->total_payable) }}
            </div>
          </div>
        </div>
      </div>

      {{-- Installments --}}
      <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex items-center gap-3">
          <span class="inline-flex size-9 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100">
            <i class="fa-solid fa-list-ol"></i>
          </span>
          <div>
            <div class="text-xs text-slate-500">মোট ইন্সটলমেন্ট</div>
            <div class="text-[15px] font-semibold text-slate-800">
              {{ $loan->tenure_months }}
            </div>
          </div>
        </div>
      </div>

      {{-- Interest --}}
      <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="flex items-center gap-3">
          <span class="inline-flex size-9 items-center justify-center rounded-lg bg-amber-50 text-amber-600 ring-1 ring-amber-100">
            <i class="fa-solid fa-percent"></i>
          </span>
          <div>
            <div class="text-xs text-slate-500">ইন্টারেস্ট রেট</div>
            <div class="text-[15px] font-semibold text-slate-800">
              {{ $loan->interest_rate }}%
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- CTA --}}
    <form action="{{ route('loan.confirm', $loan) }}" method="POST" class="mt-6">
      @csrf
      <button type="submit"
        class="press inline-flex w-full items-center justify-center gap-2 rounded-full
               bg-gradient-to-r from-rose-600 to-red-600 px-5 py-3 text-sm font-semibold text-white
               shadow-lg shadow-rose-600/20 ring-1 ring-white/10
               transition hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
        <i class="fa-solid fa-arrow-right-to-bracket"></i>
        এগিয়ে যান
      </button>
    </form>

    {{-- Schedule --}}
    <h4 class="mt-2 text-sm font-bold text-slate-800">পরিশোধের সময়সূচি</h4>

    <ol class="relative ms-4 mt-3 space-y-4 border-s border-slate-200">
      @foreach($installments as $ins)
        <li class="ps-4">
          {{-- timeline dot --}}
          <span class="absolute -start-2.5 mt-2 inline-flex size-2.5 rounded-full bg-rose-600 ring-4 ring-rose-100"></span>

          <div class="flex items-center justify-between gap-3">
            <div class="text-[13px] font-medium text-slate-700">
              {{ \Carbon\Carbon::parse($ins->due_date)->format('M d, Y') }}
            </div>
            <div class="text-[15px] font-semibold text-slate-900">
              ৳ {{ number_format($ins->amount) }}
            </div>
          </div>

          <div class="mt-1 text-xs text-slate-600">
            <span class="inline-flex items-center gap-1">
              <i class="fa-solid fa-circle text-[6px] text-slate-400"></i>
              আসল ৳ {{ number_format($ins->principal_part) }}
            </span>
            <span class="mx-1 text-slate-400">+</span>
            <span class="inline-flex items-center gap-1">
              <i class="fa-solid fa-circle text-[6px] text-slate-400"></i>
              ইন্টারেস্ট ৳ {{ number_format($ins->interest_part) }}
            </span>
          </div>
        </li>
      @endforeach
    </ol>

  </div>

  {{-- Optional back link under the card --}}
  <div class="mt-4 text-center">
    <a href="{{ url()->previous() }}"
       class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 hover:text-slate-800 transition">
       <i class="fa-solid fa-arrow-left-long"></i> Back
    </a>
  </div>

</div>
@endsection