@extends('layouts.app')
@section('title', $invoice->invoice_number)
@section('back', route('invoices.index'))

@section('content')
@php
  $fiscalised = \App\Services\InvoiceFiscalisationService::isFiscalised($invoice);
  $badge = $invoice->status === 'Paid' ? 'g' : ($invoice->status === 'Overdue' ? 'r' : 'a');
  $fiscalBadge = $fiscalised ? 'g' : 's';
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  <div class="mb-4">
    <a href="{{ route('invoices.index') }}" class="text-[12px] font-semibold text-blue-600 no-underline inline-flex items-center gap-1"><i class="fa-solid fa-arrow-left"></i> Back to invoices</a>
  </div>

  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-5">
    <div>
      <div class="flex flex-wrap gap-2 items-center mb-2">
        <span class="badge {{ $badge }}" style="font-size:12px;padding:5px 12px">{{ $invoice->status }}</span>
        <span class="badge {{ $fiscalBadge }} text-[11px]"><i class="fa-solid fa-shield-halved mr-1"></i>{{ $fiscalised ? 'Fiscalised' : 'Not fiscalised' }}</span>
        @if($invoice->mra_fiscal_code)
          <span class="badge s font-mono text-[10px]">{{ $invoice->mra_fiscal_code }}</span>
        @endif
      </div>
      <h2 class="text-[22px] font-bold text-slate-900">Invoice {{ $invoice->invoice_number }}</h2>
      <p class="text-slate-600 text-[13px] mt-1"><i class="fa-solid fa-building-user text-slate-400 mr-1"></i>{{ $invoice->client?->company_name }}</p>
      <p class="text-slate-600 text-[13px]"><i class="fa-solid fa-folder-open text-slate-400 mr-1"></i>{{ $invoice->project?->name ?? '—' }}</p>
      <p class="text-slate-400 text-[12px] mt-2"><i class="fa-regular fa-calendar mr-1"></i>Issued <span class="font-semibold text-slate-700">{{ $invoice->invoice_date?->format('M j, Y') }}</span> &middot; Due <span class="font-semibold text-slate-700">{{ $invoice->due_date?->format('M j, Y') }}</span></p>
      @if($invoice->status === 'Overdue')
        <p class="text-red-600 text-[12px] font-semibold mt-2"><i class="fa-solid fa-triangle-exclamation mr-1"></i>This invoice is overdue.</p>
      @endif
    </div>
    <div class="flex flex-wrap gap-2 items-start">
      <p class="text-[13px] text-slate-500 w-full lg:text-right">Total</p>
      <p class="text-[26px] font-bold text-blue-600 w-full lg:text-right">{{ \App\Support\Format::mwkDecimal($total) }}</p>
      <a href="{{ route('invoices.pdf', $invoice) }}" class="bs no-underline inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:12px;border-radius:9px"><i class="fa-solid fa-download"></i> Download PDF</a>
      @if($invoice->status !== 'Paid')
        <button type="button" onclick="document.getElementById('inv_ov_pay').classList.add('open')" class="ba inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:12px"><i class="fa-solid fa-money-bill-wave"></i> Record Payment</button>
      @endif
      @if($canEdit ?? false)
        <button type="button" onclick="document.getElementById('inv_ov_edit').classList.add('open')" class="bs inline-flex items-center gap-1.5" style="padding:8px 14px;font-size:12px">Edit invoice</button>
      @endif
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
    <div class="card p-5 border-slate-200">
      <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Invoice description</p>
      <p class="text-[13px] text-slate-700 whitespace-pre-wrap">{{ $invoice->description ?: '—' }}</p>
      <p class="text-[12px] text-slate-500 mt-3">Client: <strong class="text-slate-800">{{ $invoice->client?->company_name }}</strong></p>
      <p class="text-[12px] text-slate-500">Project: <strong class="text-slate-800">{{ $invoice->project?->name ?? '—' }}</strong></p>
    </div>
    <div class="card p-5 border-slate-200">
      <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">MRA fiscal details</p>
      @if($fiscalised)
        <p class="text-[12px] text-slate-600">Fiscal code: <span class="font-mono font-bold text-slate-900">{{ $invoice->mra_fiscal_code }}</span></p>
        <p class="text-[12px] text-slate-600 mt-1">Fiscalised at: {{ $invoice->fiscalised_at?->format('M j, Y H:i') }}</p>
        <p class="text-[11px] text-emerald-700 mt-2"><i class="fa-solid fa-circle-check mr-1"></i>Verification: fiscal data recorded per MRA EIS integration.</p>
      @else
        <p class="text-[12px] text-slate-600">This invoice is not fiscalised yet.</p>
        <span class="badge a text-[11px] mt-2 inline-flex">Pending fiscalisation</span>
        @unless(config('dach.mra_eis_enabled'))
          <p class="text-[11px] text-slate-500 mt-2">MRA EIS is disabled in configuration. Codes will be assigned when fiscalisation is enabled.</p>
        @endunless
      @endif
    </div>
  </div>

  <div class="card p-5 card-has-table border-slate-200 mb-5">
    <p class="font-bold text-slate-900 mb-4">Line items</p>
    <table>
      <thead>
        <tr class="border-b border-slate-100">
          <th class="th">Description</th>
          <th class="th">Qty</th>
          <th class="th text-right">Rate</th>
          <th class="th text-right">Total</th>
        </tr>
      </thead>
      <tbody>
        @foreach($invoice->items as $item)
          <tr>
            <td class="td font-medium text-slate-800">{{ $item->description }}</td>
            <td class="td text-slate-600">{{ rtrim(rtrim((string) $item->quantity, '0'), '.') }}</td>
            <td class="td text-right text-slate-600 font-mono text-[12px]">{{ \App\Support\Format::mwkDecimal($item->unit_rate) }}</td>
            <td class="td text-right font-semibold text-slate-800 font-mono text-[12px]">{{ \App\Support\Format::mwkDecimal($item->total) }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
    <div class="mt-6 pt-4 border-t border-slate-100 max-w-sm ml-auto space-y-1 text-[13px]">
      <div class="flex justify-between text-slate-600"><span>Subtotal</span><span class="font-mono font-semibold">{{ \App\Support\Format::mwkDecimal($subtotal) }}</span></div>
      <div class="flex justify-between text-slate-600"><span>VAT</span><span class="font-mono font-semibold">{{ \App\Support\Format::mwkDecimal($vat) }}</span></div>
      <div class="flex justify-between text-slate-900 font-bold text-[15px]"><span>Total</span><span class="font-mono text-blue-600">{{ \App\Support\Format::mwkDecimal($total) }}</span></div>
      <div class="flex justify-between text-slate-600"><span>Paid</span><span class="font-mono font-semibold text-emerald-700">{{ \App\Support\Format::mwkDecimal($paid) }}</span></div>
      <div class="flex justify-between text-slate-600"><span>Balance due</span><span class="font-mono font-semibold {{ $balance > 0 ? 'text-amber-700' : 'text-slate-500' }}">{{ \App\Support\Format::mwkDecimal($balance) }}</span></div>
    </div>
  </div>

  @if($invoice->status === 'Paid')
    <div class="card p-4 border-emerald-100 bg-emerald-50/50 text-[13px] text-emerald-900">
      <i class="fa-solid fa-circle-check mr-1"></i> Payment recorded. @if($invoice->paymentTransaction)
        Income ledger reference: {{ $invoice->paymentTransaction->reference ?? '—' }} ({{ $invoice->paymentTransaction->transaction_date?->format('M j, Y') }}).
      @endif
    </div>
  @endif
</div>

<div id="inv_ov_pay" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="max-width:480px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Record payment</p>
      <button type="button" onclick="document.getElementById('inv_ov_pay').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      @include('invoices.partials.record-payment-modal')
    </div>
  </div>
</div>

@if($canEdit ?? false)
<div id="inv_ov_edit" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="max-width:640px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">Edit invoice</p>
      <button type="button" onclick="document.getElementById('inv_ov_edit').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      @include('invoices.partials.invoice-form', ['clients' => $clients, 'projects' => $projects, 'invoice' => $invoice])
    </div>
  </div>
</div>
@endif
@endsection

@push('scripts')
@include('invoices.partials.invoice-form-script')
<script>
(function () {
  var payForm = document.getElementById('inv-pay-form');
  if (!payForm) return;
  payForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    var err = document.getElementById('inv-pay-err');
    err.style.display = 'none';
    var btn = document.getElementById('inv-pay-submit');
    btn.disabled = true;
    var data = {
      payment_date: document.getElementById('inv_pay_date').value,
      amount: parseFloat(document.getElementById('inv_pay_amount').value),
      payment_method: document.getElementById('inv_pay_method').value || null,
      reference: document.getElementById('inv_pay_ref').value || null,
      note: document.getElementById('inv_pay_note').value || null,
    };
    try {
      var res = await fetch(payForm.dataset.url, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': window.csrfToken,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify(data),
      });
      var j = await res.json().catch(function () { return {}; });
      if (res.ok) {
        sessionStorage.setItem('dachToast', j.message || 'Payment recorded successfully.');
        window.location.reload();
        return;
      }
      if (res.status === 422 && j.errors) {
        err.textContent = Object.values(j.errors).flat().join(' ');
      } else {
        err.textContent = j.message || ('Error ' + res.status);
      }
      err.style.display = 'block';
    } catch (x) {
      err.textContent = x.message;
      err.style.display = 'block';
    } finally {
      btn.disabled = false;
    }
  });
})();
</script>
@endpush