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

@section('content')
@php
  // Settings theke company info (auto)
  $co = \App\Models\CompanySetting::current();
  $arNum = fn ($v) => \App\Models\CompanySetting::arDigits($v);
  $fmt   = fn ($v) => number_format((float) $v, 2);

  $methods = ['cash' => 'Cash', 'card' => 'Card', 'bank' => 'Bank Transfer'];
  $payLabel = $methods[$sale->payment_method] ?? ucfirst((string) $sale->payment_method);
  $statusColor = ['paid' => '#15803d', 'partial' => '#b45309', 'due' => '#b91c1c'];

  $vatRate = rtrim(rtrim(number_format($sale->vat_rate, 2), '0'), '.');
  $totalQty = $sale->items->sum('quantity');

  $minRows = 14;
  $blank   = max(0, $minRows - $sale->items->count());

  $mobiles = $co->mobiles ?? [];
@endphp

<style>
  .inv { background:#fff; color:#111; font-family: Arial, Tahoma, sans-serif; font-size:11.5px;
         max-width:860px; margin:0 auto; padding:18px 22px; border:1px solid #e5e7eb; border-radius:12px;
         -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .inv .ar { font-family: Tahoma, Arial, sans-serif; direction:rtl; unicode-bidi:embed; }
  .inv .ltr { direction:ltr; unicode-bidi:embed; }

  /* Header */
  .inv .hd { display:grid; grid-template-columns: 1fr 190px 1fr; gap:10px; align-items:start; padding-bottom:6px; }
  .inv .hd .en { line-height:1.45; font-size:11px; }
  .inv .hd .en .nm { font-size:12.5px; font-weight:800; text-transform:uppercase; }
  .inv .hd .tg { font-size:10.5px; font-weight:700; text-transform:uppercase; color:#333; }
  .inv .hd .ar-box { line-height:1.55; font-size:12px; text-align:right; }
  .inv .hd .ar-box .nm { font-size:13px; font-weight:800; }
  .inv .hd .ar-box .ltr { text-align:right; }
  .inv .mid { text-align:center; }
  .inv .mid .logo { width:84px; height:84px; margin:0 auto 4px; border-radius:50%; overflow:hidden; display:grid; place-items:center; }
  .inv .mid .logo img { width:100%; height:100%; object-fit:contain; }
  .inv .mid .ttl { font-size:13.5px; font-weight:800; line-height:1.3; }
  .inv .mid .trn { font-size:13px; font-weight:800; margin-top:2px; }

  /* Boxes */
  .inv .box { border:1px solid #111; }
  .inv .info { display:grid; grid-template-columns: 1fr 1fr; border-bottom:1px solid #111; }
  .inv .info > div { padding:4px 8px; }
  .inv .info > div + div { border-left:1px solid #111; }
  .inv .row { display:grid; grid-template-columns: 105px 8px 1fr; line-height:1.65; }
  .inv .row .k { color:#444; }
  .inv .row .v { font-weight:600; }
  .inv .cust { display:grid; grid-template-columns: 1fr 1fr; border-bottom:1px solid #111; }
  .inv .cust > div { padding:4px 8px; min-height:58px; }
  .inv .cust > div + div { border-left:1px solid #111; }
  .inv .cust .h { font-weight:800; font-size:11px; border-bottom:1px solid #111; margin:-4px -8px 4px; padding:3px 8px; }
  .inv .cust .cn { font-weight:800; font-size:12px; }

  /* Items */
  .inv table.items { width:100%; border-collapse:collapse; table-layout:fixed; }
  .inv .items th { border-bottom:1px solid #111; border-right:1px solid #111; font-size:10px; font-weight:800; padding:3px 3px; text-align:center; }
  .inv .items th:last-child, .inv .items td:last-child { border-right:none; }
  .inv .items td { border-right:1px solid #111; padding:2px 4px; height:19px; font-size:11px; }
  .inv .items td.r { text-align:right; }
  .inv .items td.c { text-align:center; }
  .inv .items .total td { border-top:1px solid #111; border-bottom:1px solid #111; font-weight:800; height:20px; }

  /* Bottom totals */
  .inv .bt { display:grid; grid-template-columns: 1fr 250px; border-bottom:1px solid #111; }
  .inv .bt .words { padding:6px 8px; font-size:11px; line-height:1.5; }
  .inv .bt .words b { font-weight:800; }
  .inv .bt .tot { border-left:1px solid #111; padding:4px 8px; font-size:11px; }
  .inv .bt .tot div { display:flex; justify-content:space-between; gap:10px; line-height:1.7; }
  .inv .bt .tot .net { font-weight:800; }

  .inv .pay { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 18px; padding:5px 8px; font-size:10.5px; border-bottom:1px solid #111; }
  .inv .note { padding:4px 8px; font-size:10.5px; border-bottom:1px solid #111; }

  /* Signatures */
  .inv .sign { display:grid; grid-template-columns: 1fr 1fr; min-height:70px; border-bottom:1px solid #111; }
  .inv .sign > div { padding:5px 8px; display:flex; align-items:flex-end; font-weight:800; font-size:11px; }
  .inv .sign > div + div { border-left:1px solid #111; justify-content:space-between; }
  .inv .sign > div + div span:first-child { align-self:flex-start; }

  /* Footer image */
  .inv .fimg { padding:0; line-height:0; }
  .inv .fimg img { display:block; width:100%; height:auto; }

  @media print {
    @page { size: A4; margin: 8mm; }
    aside, header, .no-print { display:none !important; }
    main { padding:0 !important; }
    body { background:#fff !important; }
    .inv { border:none !important; border-radius:0 !important; max-width:none !important; padding:0 !important; }
  }
</style>

{{-- Breadcrumb + buttons --}}
<div class="no-print flex flex-wrap items-center justify-between gap-3">
  <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 }}</span>
  </div>
  <div class="flex gap-2">
    <a href="{{ route('admin.sales.create') }}" class="h-11 px-5 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">+ New Sale</a>
    <button type="button" onclick="window.print()" class="h-11 px-6 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold text-sm shadow-lg shadow-brand-500/25 hover:opacity-90">Print Invoice</button>
  </div>
</div>

@if (session('success'))
  <div class="no-print 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

{{-- ================= INVOICE ================= --}}
<div class="inv">

  {{-- Header: English | Logo + Title | Arabic --}}
  <div class="hd">
    <div class="en">
      <div class="nm">{{ $co->name }}</div>
      @foreach (preg_split('/\r\n|\r|\n/', (string) $co->tagline) as $line)
        @if (trim($line) !== '')<div class="tg">{{ $line }}</div>@endif
      @endforeach
      @if ($co->address)<div>{{ $co->address }}</div>@endif
      @if ($co->telephone)<div>Tel: {{ $co->telephone }}</div>@endif
      @foreach ($mobiles as $m)<div>Mobile: {{ $m }}</div>@endforeach
      @if ($co->email)<div>{{ $co->email }}</div>@endif
    </div>

    <div class="mid">
      <div class="logo">
        @if ($co->logo_url)
          <img src="{{ $co->logo_url }}" alt="Logo">
        @else
          <svg width="40" height="40" viewBox="0 0 24 24" fill="#111"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>
        @endif
      </div>
      <div class="ttl">TAX INVOICE <span class="ar">فاتورة الضريبة</span></div>
      @if ($co->trn)<div class="trn">TRN: {{ $co->trn }}</div>@endif
    </div>

    <div class="ar-box ar">
      @if ($co->name_ar)<div class="nm">{{ $co->name_ar }}</div>@endif
      @foreach (preg_split('/\r\n|\r|\n/', (string) $co->tagline_ar) as $line)
        @if (trim($line) !== '')<div class="tg">{{ $line }}</div>@endif
      @endforeach
      @if ($co->address_ar)<div>{{ $co->address_ar }}</div>@endif
      @if ($co->telephone)<div class="ltr">{{ $arNum($co->telephone) }}</div>@endif
      @foreach ($mobiles as $m)<div class="ltr">{{ $arNum($m) }}</div>@endforeach
    </div>
  </div>

  <div class="box">

    {{-- Invoice info --}}
    <div class="info">
      <div>
        <div class="row"><span class="k">Invoice No.</span><span>:</span><span class="v">{{ $sale->invoice_no }}</span></div>
        <div class="row"><span class="k">Bill Type</span><span>:</span><span class="v">{{ $payLabel }}</span></div>
        <div class="row"><span class="k">Payment Term</span><span>:</span><span class="v">{{ strtoupper($payLabel) }}</span></div>
      </div>
      <div>
        <div class="row"><span class="k">Invoice Date</span><span>:</span><span class="v">{{ $sale->date->format('d/m/Y') }}</span></div>
        <div class="row"><span class="k">Due Date</span><span>:</span><span class="v">{{ $sale->date->format('d/m/Y') }}</span></div>
      </div>
    </div>

    {{-- Customer --}}
    <div class="cust">
      <div>
        <div class="h">Customer Name &amp; Billing Address</div>
        <div class="cn">{{ $sale->customer_name }}</div>
        @if ($sale->customer_trn)<div>TRN: {{ $sale->customer_trn }}</div>@endif
        @if ($sale->customer_phone)<div>Tel: {{ $sale->customer_phone }}</div>@endif
      </div>
      <div>
        <div class="h">Delivery Address</div>
      </div>
    </div>

    {{-- Items --}}
    <table class="items">
      <colgroup>
        <col style="width:5%">
        <col>
        <col style="width:7%">
        <col style="width:7%">
        <col style="width:9%">
        <col style="width:11%">
        <col style="width:6%">
        <col style="width:9%">
        <col style="width:12%">
      </colgroup>
      <thead>
        <tr>
          <th>S No</th>
          <th style="text-align:left">Description</th>
          <th>Qty</th>
          <th>Unit</th>
          <th>Unit<br>Price</th>
          <th>Taxable<br>Amount</th>
          <th>VAT %</th>
          <th>VAT<br>Amount</th>
          <th>Amount<br>(AED)</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($sale->items as $i => $item)
          @php $lineTotal = (float) $item->line_total + (float) $item->vat_amount; @endphp
          <tr>
            <td class="c">{{ $i + 1 }}</td>
            <td>{{ $item->product_name }}</td>
            <td class="c">{{ rtrim(rtrim(number_format((float) $item->quantity, 2), '0'), '.') }}</td>
            <td class="c">{{ $item->unit ?? '' }}</td>
            <td class="r">{{ $fmt($item->unit_price) }}</td>
            <td class="r">{{ $fmt($item->line_total) }}</td>
            <td class="c">{{ $vatRate }} %</td>
            <td class="r">{{ $fmt($item->vat_amount) }}</td>
            <td class="r">{{ $fmt($lineTotal) }}</td>
          </tr>
        @endforeach

        @for ($b = 0; $b < $blank; $b++)
          <tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        @endfor

        <tr class="total">
          <td></td>
          <td style="text-align:right">Total</td>
          <td class="c">{{ rtrim(rtrim(number_format((float) $totalQty, 2), '0'), '.') }}</td>
          <td colspan="6"></td>
        </tr>
      </tbody>
    </table>

    {{-- Bill amount in words + totals (Discount nai) --}}
    <div class="bt">
      <div class="words">
        <b>Bill Amount :</b> AED {{ $sale->total_in_words }}
      </div>
      <div class="tot">
        <div><b>Total Amount</b><span>{{ $fmt($sale->subtotal) }}</span></div>
        <div><b>VAT {{ $vatRate }} %</b><span>{{ $fmt($sale->vat_amount) }}</span></div>
        <div class="net"><span>Amount<br>Including VAT</span><span>{{ $fmt($sale->total) }}</span></div>
      </div>
    </div>

    {{-- Paid / Due --}}
    <div class="pay">
      <span>Payment: <b>{{ $payLabel }}</b></span>
      <span>Paid: <b>AED {{ $fmt($sale->paid_amount) }}</b></span>
      <span>Due: <b style="color:{{ $sale->due_amount > 0 ? '#b91c1c' : '#111' }}">AED {{ $fmt($sale->due_amount) }}</b></span>
      <span style="font-weight:800;text-transform:uppercase;color:{{ $statusColor[$sale->payment_status] ?? '#111' }}">{{ $sale->payment_status }}</span>
    </div>

    @if ($sale->note)
      <div class="note"><b>Note:</b> {{ $sale->note }}</div>
    @endif

    {{-- Signatures --}}
    <div class="sign">
      <div>Receiver's Signature</div>
      <div>
        <span>For {{ strtoupper($co->name) }}</span>
        <span>Authorised Signatory</span>
      </div>
    </div>

    {{-- Footer image (Settings theke) --}}
    @if ($co->footer_url)
      <div class="fimg"><img src="{{ $co->footer_url }}" alt="Brands"></div>
    @endif
  </div>
</div>
@endsection