@extends('frontend.layout_2')
@section('title','NID Upload')

@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">
  <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>

    {{-- Intro --}}
    <p class="mt-3 text-center text-sm text-slate-700">
      আপনি <span class="font-semibold">৳ {{ number_format($loan->amount) }}</span> টাকার লোনের জন্য আবেদন করেছেন,
      <span class="font-semibold">{{ $loan->tenure_months }}</span> মাস মেয়াদে। দয়া করে আপনার জাতীয় পরিচয়পত্রের
      <span class="font-semibold">সামনের</span> ও <span class="font-semibold">পিছনের</span> ছবি আপলোড করুন।
    </p>

    {{-- Form --}}
    <form action="{{ route('loan.nid.upload', $loan) }}" method="POST" enctype="multipart/form-data" class="mt-5">
      @csrf

      {{-- Upload tiles --}}
      <div class="grid grid-cols-2 gap-3">
        {{-- NID Front --}}
        <label
          for="nid_front"
          id="drop-front"
          class="group relative flex aspect-[4/3] cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-50 p-3 text-center transition
                 hover:border-rose-400 hover:bg-rose-50/40 focus-within:border-rose-500 focus-within:bg-rose-50/50"
        >
          <input id="nid_front" name="nid_front" type="file" accept="image/*" required class="sr-only" />

          {{-- Preview image (hidden until set) --}}
          <img id="preview-front" alt="NID Front Preview"
               class="absolute inset-0 hidden h-full w-full object-cover" />

          {{-- Placeholder --}}
          <div class="pointer-events-none flex flex-col items-center gap-1 text-slate-500 group-hover:text-rose-600">
            <span class="inline-flex size-10 items-center justify-center rounded-lg bg-white/70 text-rose-600 ring-1 ring-rose-100">
              <i class="fa-regular fa-id-card text-lg"></i>
            </span>
            <span class="text-xs font-semibold">NID Front</span>
            <span class="text-[11px]">Click or Drop</span>
          </div>
        </label>

        {{-- NID Back --}}
        <label
          for="nid_back"
          id="drop-back"
          class="group relative flex aspect-[4/3] cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-dashed border-slate-300 bg-slate-50 p-3 text-center transition
                 hover:border-rose-400 hover:bg-rose-50/40 focus-within:border-rose-500 focus-within:bg-rose-50/50"
        >
          <input id="nid_back" name="nid_back" type="file" accept="image/*" required class="sr-only" />

          {{-- Preview image (hidden until set) --}}
          <img id="preview-back" alt="NID Back Preview"
               class="absolute inset-0 hidden h-full w-full object-cover" />

          {{-- Placeholder --}}
          <div class="pointer-events-none flex flex-col items-center gap-1 text-slate-500 group-hover:text-rose-600">
            <span class="inline-flex size-10 items-center justify-center rounded-lg bg-white/70 text-rose-600 ring-1 ring-rose-100">
              <i class="fa-regular fa-id-card text-lg"></i>
            </span>
            <span class="text-xs font-semibold">NID Back</span>
            <span class="text-[11px]">Click or Drop</span>
          </div>
        </label>
      </div>

      {{-- CTA opens terms modal --}}
      <button type="button"
        class="press mt-5 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"
        onclick="openTerms()">
        <i class="fa-solid fa-file-circle-check"></i>
        ডকুমেন্ট জমা দিন
      </button>

      {{-- Real submit (hidden) --}}
      <button type="submit" id="realSubmit" class="hidden"></button>
    </form>
  </div>

  {{-- Optional back --}}
  <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>

{{-- Terms Modal --}}
<div id="termsModal"
     class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
  <div role="dialog" aria-modal="true"
       class="animate-in zoom-in-95 fade-in-0 duration-200 rounded-2xl bg-white p-5 shadow-2xl ring-1 ring-black/5 max-w-sm w-full">
    <h3 class="text-base font-extrabold text-rose-600 mb-2">বিশেষ দৃষ্টি আকর্ষণ</h3>
<p class="text-sm text-slate-700 mb-3">
  আপনি ৳ {{ number_format($loan->amount) }} লোন নিতে চাইলে আপনাকে 
  <span class="font-bold text-rose-600">৳ {{ number_format($depositAmount) }}</span> 
  জামানত জমা দিতে হবে।
</p>

    
    <h4 class="text-sm font-bold text-rose-600 mb-1">শর্তাবলী</h4>
    <p class="text-xs text-slate-600 mb-4">
      আপনার লোন অ্যাপ্রুভ হওয়ার পরে লোনের টাকা ও জামানতের টাকা একসাথে ব্যালেন্সে পেয়ে যাবেন...
    </p>

    <div class="flex items-center justify-end gap-2">
      <button type="button" onclick="closeTerms()"
        class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition">
        বাতিল
      </button>
      <button type="button" onclick="submitNid()"
        class="press inline-flex items-center gap-2 rounded-full bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:brightness-105 focus:outline-none focus:ring-2 focus:ring-rose-500">
        পরবর্তী
      </button>
    </div>
  </div>
</div>

{{-- Scripts: preview + DnD + modal --}}
<script>
  // Helpers
  function byId(id){ return document.getElementById(id); }

  function showPreview(fileInputId, imgId){
    const input = byId(fileInputId);
    const img = byId(imgId);
    if(!input || !input.files || !input.files[0]) return;
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = e => {
      img.src = e.target.result;
      img.classList.remove('hidden');
    };
    reader.readAsDataURL(file);
  }

  // Bind change events
  ['nid_front','nid_back'].forEach((id, idx) => {
    const previewId = idx === 0 ? 'preview-front' : 'preview-back';
    const input = byId(id);
    if(input){
      input.addEventListener('change', () => showPreview(id, previewId));
    }
  });

  // Drag & Drop styling + set files
  function wireDrop(zoneId, inputId){
    const zone = byId(zoneId);
    const input = byId(inputId);
    if(!zone || !input) return;

    ['dragenter','dragover'].forEach(ev => {
      zone.addEventListener(ev, e => {
        e.preventDefault(); e.stopPropagation();
        zone.classList.add('ring-2','ring-rose-400','bg-rose-50/50');
      });
    });
    ['dragleave','drop'].forEach(ev => {
      zone.addEventListener(ev, e => {
        e.preventDefault(); e.stopPropagation();
        zone.classList.remove('ring-2','ring-rose-400','bg-rose-50/50');
      });
    });
    zone.addEventListener('drop', e => {
      if(e.dataTransfer.files && e.dataTransfer.files[0]){
        input.files = e.dataTransfer.files;
        input.dispatchEvent(new Event('change'));
      }
    });
  }
  wireDrop('drop-front','nid_front');
  wireDrop('drop-back','nid_back');

  // Modal controls
  function openTerms(){ byId('termsModal').classList.remove('hidden'); byId('termsModal').classList.add('flex'); }
  function closeTerms(){ byId('termsModal').classList.add('hidden'); byId('termsModal').classList.remove('flex'); }
  function submitNid(){ closeTerms(); byId('realSubmit').click(); }
</script>
@endsection