@extends('layouts.admin')
@section('title', $purchase->reference)

@section('content')
@php
  $input = 'w-full h-11 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500 focus:bg-white dark:focus:bg-slate-900';
  $label = 'block text-sm font-semibold mb-2';
  $badge = [
    'paid'    => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    'partial' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
    'due'     => 'bg-red-500/10 text-red-500',
  ];
  $methods = ['cash' => 'Cash', 'card' => 'Card', 'bank' => 'Bank Transfer', 'cheque' => 'Cheque / PDC'];
  $pendingPdc = round((float) $purchase->payments->where('status', 'pending')->sum('amount'), 2);
  $available  = round((float) $purchase->due_amount - $pendingPdc, 2);
  $stBadge = [
    'pending' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
    'cleared' => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
    'bounced' => 'bg-red-500/10 text-red-500',
  ];
  $rate = rtrim(rtrim(number_format($purchase->vat_rate, 2), '0'), '.');
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.purchases.index') }}" class="hover:text-brand-500">All Purchases</a><span>/</span>
  <span class="text-slate-800 dark:text-slate-200 font-medium">{{ $purchase->reference }}</span>
</div>

@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">{{ session('success') }}</div>
@endif

@if ($errors->any())
  <div class="px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
  </div>
@endif

{{-- Info --}}
<div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div class="text-2xl font-extrabold">{{ $purchase->reference }}</div>
    <span class="px-3 py-1.5 rounded-full text-xs font-bold uppercase {{ $badge[$purchase->payment_status] }}">{{ $purchase->payment_status }}</span>
  </div>

  <div class="mt-5 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 text-sm">
    <div>
      <div class="text-slate-500">Supplier</div>
      <div class="mt-1 font-semibold">{{ $purchase->supplier->name }}</div>
      @if ($purchase->supplier->phone)<div class="text-xs text-slate-500">{{ $purchase->supplier->phone }}</div>@endif
    </div>
    <div>
      <div class="text-slate-500">Date</div>
      <div class="mt-1 font-semibold">{{ $purchase->date->format('d M Y') }}</div>
    </div>
    <div>
      <div class="text-slate-500">Supplier invoice no</div>
      <div class="mt-1 font-semibold">{{ $purchase->supplier_invoice_no ?: '—' }}</div>
    </div>
    <div>
      <div class="text-slate-500">Note</div>
      <div class="mt-1 font-semibold">{{ $purchase->note ?: '—' }}</div>
    </div>
  </div>
</div>

{{-- Items --}}
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
  <div class="p-6 pb-3 font-bold text-lg">Products</div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-6 py-3">Product</th>
          <th class="text-right">Net Unit Cost</th>
          <th class="text-right">Qty</th>
            <th class="pl-3">Unit</th>
          <th class="text-right">Discount</th>
          <th class="text-right">Tax</th>
          <th class="px-6 text-right">Subtotal</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @foreach ($purchase->items as $item)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3"><div class="font-semibold">{{ $item->product_name }}</div><div class="text-xs text-slate-500">{{ $item->product_code }}</div></td>
            <td class="text-right">{{ number_format($item->unit_cost, 2) }}</td>
            <td class="text-right">{{ $item->quantity }}</td>
            <td class="pl-3 text-slate-500">{{ $item->unit ?: '—' }}</td>
            <td class="pl-3 text-slate-500">{{ $item->unit ?: '—' }}</td>
            <td class="text-right">{{ number_format($item->discount, 2) }}</td>
            <td class="text-right">{{ number_format($item->vat_amount, 2) }}</td>
            <td class="px-6 text-right font-semibold">{{ number_format($item->line_total, 2) }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <div class="p-6 flex justify-end border-t border-slate-200 dark:border-slate-800">
    <div class="w-full sm:w-80 space-y-2 text-sm">
      <div class="flex justify-between"><span class="text-slate-500">Subtotal (before VAT)</span><span>AED {{ number_format($purchase->subtotal, 2) }}</span></div>
      <div class="flex justify-between"><span class="text-slate-500">Tax ({{ $rate }}%)</span><span>AED {{ number_format($purchase->vat_amount, 2) }}</span></div>
      <div class="flex justify-between pt-2 border-t border-slate-200 dark:border-slate-800 text-lg font-extrabold"><span>Grand Total</span><span>AED {{ number_format($purchase->total, 2) }}</span></div>
      <div class="flex justify-between pt-2"><span class="text-slate-500">Paid</span><span>AED {{ number_format($purchase->paid_amount, 2) }}</span></div>
      <div class="flex justify-between font-bold {{ $purchase->due_amount > 0 ? 'text-red-500' : '' }}"><span>Due</span><span>AED {{ number_format($purchase->due_amount, 2) }}</span></div>
      @if ($pendingPdc > 0)
        <div class="flex justify-between text-amber-600 dark:text-amber-400"><span>PDC pending</span><span>AED {{ number_format($pendingPdc, 2) }}</span></div>
        <div class="flex justify-between text-slate-500"><span>Still to schedule</span><span>AED {{ number_format($available, 2) }}</span></div>
      @endif
    </div>
  </div>
</div>

{{-- Pay supplier --}}
@if ($available > 0)
  <form method="POST" action="{{ route('admin.purchases.payments.store', $purchase) }}"
        class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-brand-500/40">
    @csrf
    <h2 class="font-bold text-lg">Make a payment to supplier</h2>
    <p class="text-sm text-slate-500 mt-1">
      Due: <b class="text-red-500">AED {{ number_format($purchase->due_amount, 2) }}</b>
      @if ($pendingPdc > 0) · PDC pending: <b class="text-amber-500">AED {{ number_format($pendingPdc, 2) }}</b> @endif
      · Available to pay: <b>AED {{ number_format($available, 2) }}</b>
    </p>

    <div class="mt-5 grid md:grid-cols-4 gap-5">
      <div>
        <label class="{{ $label }}">Amount (AED) <span class="text-red-500">*</span></label>
        <div class="flex gap-2">
          <input type="number" step="0.01" min="0.01" max="{{ $available }}" id="payAmount" name="amount" value="{{ old('amount') }}" class="{{ $input }}">
          <button type="button" onclick="document.getElementById('payAmount').value = '{{ number_format($available, 2, '.', '') }}'" class="h-11 px-4 shrink-0 rounded-xl border border-slate-300 dark:border-slate-700 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">Full</button>
        </div>
      </div>
      <div>
        <label class="{{ $label }}">Method <span class="text-red-500">*</span></label>
        <select name="method" id="payMethod" class="{{ $input }}">
          @foreach ($methods as $k => $v)
            <option value="{{ $k }}" @selected(old('method', 'cash') === $k)>{{ $v }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Payment date <span class="text-red-500">*</span></label>
        <input type="date" name="date" value="{{ old('date', now()->format('Y-m-d')) }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Note</label>
        <input type="text" name="note" value="{{ old('note') }}" maxlength="255" class="{{ $input }}">
      </div>
    </div>

    {{-- Cheque / PDC fields --}}
    <div id="chequeFields" class="mt-5 grid md:grid-cols-3 gap-5 hidden">
      <div>
        <label class="{{ $label }}">Cheque no <span class="text-red-500">*</span></label>
        <input type="text" name="cheque_no" value="{{ old('cheque_no') }}" maxlength="50" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Bank <span class="text-red-500">*</span></label>
        <input type="text" name="bank_name" value="{{ old('bank_name') }}" maxlength="100" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Cheque date (PDC date) <span class="text-red-500">*</span></label>
        <input type="date" name="cheque_date" value="{{ old('cheque_date') }}" class="{{ $input }}">
      </div>
    </div>

    <button type="submit" class="mt-6 h-11 px-8 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold shadow-lg shadow-brand-500/25 hover:opacity-90">Save Payment</button>
  </form>
@endif

{{-- Payment history --}}
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
  <div class="p-6 pb-3 font-bold text-lg">Payment history</div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-6 py-3">Voucher</th>
          <th>Date</th>
          <th>Method</th>
          <th>Cheque details</th>
          <th>Status</th>
          <th class="text-right">Amount</th>
          <th class="px-6 text-right">Action</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse ($purchase->payments as $pay)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 {{ $pay->status === 'bounced' ? 'opacity-60' : '' }}">
            <td class="px-6 py-3 font-semibold whitespace-nowrap">#{{ $pay->voucher_no }}</td>
            <td class="whitespace-nowrap">{{ $pay->date->format('d M Y') }}</td>
            <td>
              {{ $methods[$pay->method] ?? $pay->method }}
              @if ($pay->is_pdc)<span class="ml-1 px-1.5 py-0.5 rounded bg-sky-500/10 text-sky-500 text-[10px] font-bold">PDC</span>@endif
            </td>
            <td class="text-slate-500">
              @if ($pay->method === 'cheque')
                <div class="text-slate-800 dark:text-slate-200 font-medium">No: {{ $pay->cheque_no }} · {{ $pay->bank_name }}</div>
                <div class="text-xs">Cheque date: {{ $pay->cheque_date?->format('d M Y') }}</div>
              @else
                {{ $pay->note ?: '—' }}
              @endif
            </td>
            <td><span class="px-2.5 py-1 rounded-full text-xs font-semibold capitalize {{ $stBadge[$pay->status] ?? '' }}">{{ $pay->status }}</span></td>
            <td class="text-right font-bold {{ $pay->status === 'bounced' ? 'line-through' : '' }}">{{ number_format($pay->amount, 2) }}</td>
            <td class="px-6 text-right whitespace-nowrap">
              <a href="{{ route('admin.purchases.payments.voucher', [$purchase, $pay]) }}" target="_blank" class="inline-flex items-center h-8 px-3 rounded-lg text-brand-600 dark:text-brand-400 font-semibold hover:bg-brand-500/10">Voucher</a>
              @if ($pay->status === 'pending')
                <form method="POST" action="{{ route('admin.purchases.payments.clear', [$purchase, $pay]) }}" class="inline" onsubmit="return confirm('Has this cheque cleared at the bank?')">
                  @csrf <button class="h-8 px-3 rounded-lg text-emerald-600 font-semibold hover:bg-emerald-500/10">Cleared</button>
                </form>
                <form method="POST" action="{{ route('admin.purchases.payments.bounce', [$purchase, $pay]) }}" class="inline" onsubmit="return confirm('Has this cheque bounced?')">
                  @csrf <button class="h-8 px-3 rounded-lg text-red-500 font-semibold hover:bg-red-500/10">Bounced</button>
                </form>
              @endif
            </td>
          </tr>
        @empty
          <tr><td colspan="7" class="px-6 py-12 text-center text-slate-500">No payments have been made yet</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div>
  <a href="{{ route('admin.purchases.index') }}" class="h-11 px-6 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">← Back</a>
</div>
@endsection

@push('scripts')
<script>
  const method = document.getElementById('payMethod');
  const box = document.getElementById('chequeFields');
  if (method && box) {
    const toggle = () => box.classList.toggle('hidden', method.value !== 'cheque');
    method.addEventListener('change', toggle);
    toggle();
  }
</script>
@endpush