@extends('layouts.admin')
@section('title', 'Payments — ' . $sale->invoice_no)

@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'];
  $percent = (float) $sale->total > 0 ? min(100, round((float) $sale->paid_amount / (float) $sale->total * 100)) : 100;
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.sales.index') }}" class="hover:text-brand-500">Sales</a><span>/</span>
  <span class="text-slate-800 dark:text-slate-200 font-medium">{{ $sale->invoice_no }} payments</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

{{-- Summary --}}
<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>
      <div class="text-2xl font-extrabold">{{ $sale->invoice_no }}</div>
      <div class="mt-1 text-sm text-slate-500">
        {{ $sale->customer_name }}@if ($sale->customer_phone) · {{ $sale->customer_phone }}@endif · {{ $sale->date->format('d M Y') }}
      </div>
    </div>
    <div class="flex items-center gap-2">
      <span class="px-3 py-1.5 rounded-full text-xs font-bold uppercase {{ $badge[$sale->payment_status] }}">{{ $sale->payment_status }}</span>
      <a href="{{ route('admin.sales.show', $sale) }}" class="h-10 px-4 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">View invoice</a>
    </div>
  </div>

  <div class="mt-6 grid sm:grid-cols-3 gap-5">
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Total (with VAT)</div>
      <div class="mt-1 text-xl font-extrabold">AED {{ number_format($sale->total, 2) }}</div>
    </div>
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Paid</div>
      <div class="mt-1 text-xl font-extrabold text-emerald-500">AED {{ number_format($sale->paid_amount, 2) }}</div>
    </div>
    <div class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
      <div class="text-xs text-slate-500">Due</div>
      <div class="mt-1 text-xl font-extrabold {{ $sale->due_amount > 0 ? 'text-red-500' : '' }}">AED {{ number_format($sale->due_amount, 2) }}</div>
    </div>
  </div>

  <div class="mt-5">
    <div class="flex justify-between text-xs text-slate-500 mb-1.5"><span>Payment progress</span><span>{{ $percent }}%</span></div>
    <div class="h-2.5 rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden">
      <div class="h-full rounded-full bg-gradient-to-r from-brand-500 to-orange-500" style="width: {{ $percent }}%"></div>
    </div>
  </div>
</div>

{{-- Add payment --}}
@if ($sale->due_amount > 0)
  @if ($sale->customer_id)
    <form id="pay" method="POST" action="{{ route('admin.sales.payments.store', $sale) }}"
          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">Add payment</h2>
      <p class="text-sm text-slate-500 mt-1">Baki: <b class="text-red-500">AED {{ number_format($sale->due_amount, 2) }}</b>. Kom dile abar pore baki ta nite parbe.</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="{{ $sale->due_amount }}" id="payAmount" name="amount" value="{{ old('amount') }}" class="{{ $input }}">
            <button type="button" onclick="document.getElementById('payAmount').value = '{{ number_format($sale->due_amount, 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" class="{{ $input }}">
            @foreach ($methods as $k => $v)
              <option value="{{ $k }}" @selected(old('method', 'cash') === $k)>{{ $v }}</option>
            @endforeach
          </select>
        </div>
        <div>
          <label class="{{ $label }}">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>

      <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>
  @else
    <div class="px-4 py-3 rounded-xl bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-500/30 text-sm">
      Ei sale e customer nai, tai payment neya jabe na.
      <a href="{{ route('admin.sales.edit', $sale) }}" class="font-semibold underline">Edit</a> theke customer select koro.
    </div>
  @endif
@endif

{{-- 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">Date</th>
          <th>Method</th>
          <th>Note</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">

        {{-- Sale korar shomoy deya taka --}}
        @if ($initial > 0)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3">{{ $sale->date->format('d M Y') }}</td>
            <td>{{ $methods[$sale->payment_method] ?? $sale->payment_method }}</td>
            <td class="text-slate-500">Sale korar shomoy</td>
            <td class="text-right font-bold text-emerald-500">+{{ number_format($initial, 2) }}</td>
            <td class="px-6 text-right text-xs text-slate-400">—</td>
          </tr>
        @endif

        @foreach ($sale->payments as $p)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3">{{ $p->date->format('d M Y') }}</td>
            <td>{{ $methods[$p->method] ?? $p->method }}</td>
            <td class="text-slate-500">{{ $p->note ?: '—' }}</td>
            <td class="text-right font-bold text-emerald-500">+{{ number_format($p->amount, 2) }}</td>
            <td class="px-6 text-right">
              <form action="{{ route('admin.sales.payments.destroy', [$sale, $p]) }}" method="POST" class="inline"
                    onsubmit="return confirm('Ei payment delete korle {{ number_format($p->amount, 2) }} taka abar Due e jabe. Nishchit?')">
                @csrf
                @method('DELETE')
                <button class="h-9 px-3 rounded-lg text-red-500 font-semibold hover:bg-red-500/10">Delete</button>
              </form>
            </td>
          </tr>
        @endforeach

        @if ($initial <= 0 && $sale->payments->isEmpty())
          <tr><td colspan="5" class="px-6 py-12 text-center text-slate-500">Ekhono kono payment nai.</td></tr>
        @endif
      </tbody>
    </table>
  </div>

  <div class="p-5 border-t border-slate-200 dark:border-slate-800 flex justify-between text-sm">
    <span class="text-slate-500">Total paid</span>
    <span class="font-extrabold">AED {{ number_format($sale->paid_amount, 2) }}</span>
  </div>
</div>

<div>
  <a href="{{ route('admin.sales.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 to sales</a>
</div>
@endsection