@extends('layouts.app')
@php($m = config('madrasa'))
@section('title', 'ফি জমা ও রসিদ — '.$m['name'])
@section('body_style', 'background: #f4f0e4')

@php($r = $receipt)
@php($typeVal = old('type', $r?->type ?? 'মাসিক ফি'))

@section('content')
@include('partials.simple-header', ['subtitle' => 'ফি জমা ও রসিদ', 'back' => [route('khata', ['tab' => 'rasid']), 'শিক্ষক প্যানেল']])

<div class="print-wrap r-wrap" style="max-width: 1240px; margin: 0 auto; padding: 30px 24px 48px; display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start">

<form method="POST" action="{{ route('rasid.store') }}" id="rc-form" class="grid2 no-print r-form" style="flex: 1 1 400px; background: #ffffff; border-radius: 22px; padding: 30px; box-shadow: 0 8px 24px rgba(7,42,24,0.06)">
@csrf
<div class="full" style="display: flex; align-items: center; gap: 10px; margin-bottom: 4px"><svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="#c9a227"><path d="M12 1 L14.8 9.2 L23 12 L14.8 14.8 L12 23 L9.2 14.8 L1 12 L9.2 9.2 Z"/></svg><h1 style="margin: 0; font-size: 22px; color: #072a18">{{ $r ? 'নতুন রসিদ লিখুন' : 'রসিদের তথ্য লিখুন' }}</h1></div>
@if (session('ok'))<div class="alert alert-ok full" role="status">{{ session('ok') }} এখন WhatsApp-এ পাঠাতে বা প্রিন্ট করতে পারেন।</div>@endif
@if ($errors->any())<div class="alert alert-err full" role="alert">ফরমের কিছু তথ্য ঠিক নেই, নিচে দেখুন।</div>@endif
@include('partials.field', ['id' => 'rc-no', 'name' => 'receipt_no', 'label' => 'রসিদ নম্বর', 'ph' => 'যেমন: ০০১', 'value' => bn($nextNo), 'req' => true])
@include('partials.field', ['id' => 'rc-date', 'name' => 'date', 'label' => 'তারিখ', 'type' => 'date', 'value' => now()->toDateString(), 'req' => true])
@include('partials.field', ['id' => 'rc-student', 'name' => 'student_name', 'label' => 'শিক্ষার্থীর নাম', 'ph' => 'শিক্ষার্থীর নাম', 'req' => true])
@include('partials.field', ['id' => 'rc-guardian', 'name' => 'guardian_name', 'label' => 'পিতা/অভিভাবকের নাম', 'ph' => 'অভিভাবকের নাম'])
@include('partials.field', ['id' => 'rc-phone', 'name' => 'phone', 'label' => 'অভিভাবকের WhatsApp নম্বর (ঐচ্ছিক)', 'ph' => 'যেমন: 8801XXXXXXXXX', 'type' => 'tel', 'full' => true])
<div class="field"><label for="rc-type">জমার ধরন</label><select id="rc-type" name="type">@foreach ($types as $t)<option @selected(old('type') === $t)>{{ $t }}</option>@endforeach</select></div>
@include('partials.field', ['id' => 'rc-amount', 'name' => 'amount', 'label' => 'জমার পরিমাণ (টাকা)', 'ph' => 'যেমন: ৫০০', 'req' => true])
@include('partials.field', ['id' => 'rc-words', 'name' => 'amount_words', 'label' => 'কথায় টাকার পরিমাণ', 'ph' => 'যেমন: পাঁচশত টাকা মাত্র'])
@include('partials.field', ['id' => 'rc-month', 'name' => 'month', 'label' => 'কোন মাস/বিবরণ', 'ph' => 'যেমন: '.bn_month(now()->month).' '.bn(now()->year)])
<div class="field full"><label for="rc-remarks">মন্তব্য (ঐচ্ছিক)</label><textarea id="rc-remarks" name="remarks" rows="2" placeholder="প্রয়োজন হলে লিখুন">{{ old('remarks') }}</textarea></div>
<button type="submit" class="btn btn-green full" style="font-size: 16px; padding: 15px">রসিদ তৈরি করুন</button>
</form>

<div style="flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px">
<span class="no-print" style="font-size: 14px; color: #6b7a70; font-weight: 600">{{ $r ? 'রসিদ নং '.bn($r->receipt_no) : 'রসিদের প্রিভিউ (লিখতে লিখতে দেখুন)' }}</span>
<section aria-label="রসিদ" class="print-area" style="position: relative; background: #fffdf6; border: 2px solid #0b4d2c; padding: 8px; box-shadow: 0 16px 36px rgba(7,42,24,0.12)">
<div class="r-inner" style="position: relative; overflow: hidden; border: 1px solid #c9a227; padding: 26px 28px; display: flex; flex-direction: column; gap: 4px">
<img src="{{ asset('images/logo.jpg') }}" alt="" aria-hidden="true" style="position: absolute; left: 50%; top: 52%; width: 280px; height: 280px; margin-left: -140px; margin-top: -140px; opacity: 0.06; border-radius: 50%">
<div style="position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 14px">
<span class="arabic" style="font-size: 17px; color: #8a6d12">بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</span>
<img src="{{ asset('images/logo.jpg') }}" alt="লোগো" style="width: 70px; height: 70px; border-radius: 50%">
<strong class="serif" style="font-size: 23px; color: #072a18">{{ $m['name'] }}</strong>
<span style="font-size: 13px; color: #56665b">{{ $m['address'] }} · {{ $m['phone'] }}</span>
<div style="display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px">
<span style="flex: 1; height: 1px; background: #c9a227"></span>
<span style="background: #0b4d2c; color: #ffffff; padding: 5px 22px; border-radius: 999px; font-weight: 700; font-size: 14px">টাকা জমার রসিদ</span>
<span style="flex: 1; height: 1px; background: #c9a227"></span>
</div>
</div>
<div style="position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #56665b; padding-bottom: 6px"><span>রসিদ নং: <strong style="color: #1b2a21" data-show="rc-no">{{ $r ? bn($r->receipt_no) : '[০০১]' }}</strong></span><span>তারিখ: <strong style="color: #1b2a21" data-show="rc-date" data-fmt="date">{{ $r ? bn_date($r->date) : '[দিন/মাস/বছর]' }}</strong></span></div>
@foreach ([['শিক্ষার্থীর নাম', 'rc-student', $r?->student_name, '[শিক্ষার্থী]'], ['পিতা/অভিভাবক', 'rc-guardian', $r?->guardian_name, '[অভিভাবক]'], ['জমার ধরন', 'rc-type', $r?->type, 'মাসিক ফি'], ['মাস/বিবরণ', 'rc-month', $r?->month, '[মাস]']] as $row)
<div style="position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dotted #a9b4a3"><span style="color: #56665b">{{ $row[0] }}</span><strong data-show="{{ $row[1] }}">{{ $r ? ($row[2] ?: '—') : $row[3] }}</strong></div>
@endforeach
<div style="position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 4px; background: #e4f1e8; border-radius: 12px; padding: 14px 16px"><span style="color: #0b4d2c; font-weight: 600">জমার পরিমাণ</span><strong style="font-size: 24px; color: #072a18">৳ <span data-show="rc-amount" data-fmt="bn">{{ $r ? bn(number_format($r->amount)) : '[পরিমাণ]' }}</span></strong></div>
<div style="position: relative; padding: 6px 0; font-size: 14px; color: #56665b">কথায়: <strong style="color: #1b2a21" data-show="rc-words">{{ $r ? ($r->amount_words ?: '—') : '[কথায় পরিমাণ]' }}</strong></div>
@if ($r?->remarks)<div style="position: relative; padding: 4px 0; font-size: 14px; color: #56665b">মন্তব্য: {{ $r->remarks }}</div>@endif
<div style="position: relative; display: flex; justify-content: space-between; gap: 24px; margin-top: 36px">
<span style="flex: 1; border-top: 1px solid #555555; padding-top: 6px; text-align: center; font-size: 13px">গ্রহণকারীর স্বাক্ষর</span>
<span style="flex: 1; border-top: 1px solid #555555; padding-top: 6px; text-align: center; font-size: 13px">মাদরাসার সিল/স্বাক্ষর</span>
</div>
<p style="position: relative; margin: 14px 0 0; text-align: center; font-size: 12px; color: #6b7a70">জাযাকাল্লাহু খাইরান। রসিদটি সংরক্ষণ করুন। কোনো ভুল থাকলে মাদরাসার সঙ্গে যোগাযোগ করুন।</p>
</div>
</section>
<div class="no-print" style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px">
@if ($r)
@php($msg = "আসসালামু আলাইকুম।\n{$m['name']}\nটাকা জমার রসিদ\n\nরসিদ নং: ".bn($r->receipt_no)."\nতারিখ: ".bn_date($r->date)."\nশিক্ষার্থী: {$r->student_name}".($r->guardian_name ? "\nঅভিভাবক: {$r->guardian_name}" : '')."\nজমার ধরন: {$r->type}".($r->month ? "\nমাস/বিবরণ: {$r->month}" : '')."\nপরিমাণ: ৳ ".bn(number_format($r->amount)).($r->amount_words ? " ({$r->amount_words})" : '')."\n\nজাযাকাল্লাহু খাইরান।")
<a href="{{ wa_link($r->phone, $msg) }}" target="_blank" rel="noopener" class="btn btn-wa" style="padding: 14px"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z"/></svg>WhatsApp-এ পাঠান</a>
@else
<button type="button" class="btn btn-wa" style="padding: 14px; opacity: .55; cursor: not-allowed" disabled title="আগে রসিদ তৈরি করুন"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z"/></svg>WhatsApp-এ পাঠান</button>
@endif
<button type="button" onclick="window.print()" class="btn btn-outline" style="padding: 14px"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#072a18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V3h12v6M6 18H4v-7h16v7h-2M7 14h10v7H7z"/></svg>প্রিন্ট / PDF</button>
</div>
@unless ($r)<span class="no-print" style="font-size: 13px; color: #6b7a70">“রসিদ তৈরি করুন” চাপলে রসিদ সংরক্ষিত হবে, তারপর WhatsApp-এ পাঠানো যাবে।</span>@endunless
</div>

</div>
@endsection

@unless ($receipt)
@push('scripts')
<script>
// লাইভ প্রিভিউ
(function () {
  var bnDigits = function (s) { return String(s).replace(/[0-9]/g, function (d) { return '০১২৩৪৫৬৭৮৯'[d]; }); };
  function update(id) {
    var input = document.getElementById(id);
    document.querySelectorAll('[data-show="' + id + '"]').forEach(function (el) {
      if (!el.dataset.ph) el.dataset.ph = el.textContent;
      var v = input.value.trim();
      if (v && el.dataset.fmt === 'date') { var p = v.split('-'); v = bnDigits(p[2] + '/' + p[1] + '/' + p[0]); }
      else if (v && el.dataset.fmt === 'bn') v = bnDigits(v);
      el.textContent = v || el.dataset.ph;
    });
  }
  ['rc-no', 'rc-date', 'rc-student', 'rc-guardian', 'rc-type', 'rc-month', 'rc-amount', 'rc-words'].forEach(function (id) {
    var el = document.getElementById(id);
    if (!el) return;
    el.addEventListener('input', function () { update(id); });
    el.addEventListener('change', function () { update(id); });
    update(id);
  });
})();
</script>
@endpush
@endunless