@extends('layouts.app')
@section('title','Artikelregister')
@section('content')
@php $tenant=auth()->user()->tenant; $products=$tenant->products()->orderBy('name')->paginate(30); @endphp
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
  <div><h2 style="font-family:'Instrument Serif',serif;font-size:26px;color:#E8EAF0;">Artikelregister</h2></div>
  <button onclick="document.getElementById('pm').classList.remove('hidden')" class="btn btn-primary">+ Ny artikel</button>
</div>
<div class="ff-card" style="padding:0;">
  <table class="ff-table">
    <thead><tr><th>Artikel</th><th>Typ</th><th class="text-right">Pris</th><th>Enhet</th><th class="text-right">Moms</th><th></th></tr></thead>
    <tbody>
    @forelse($products as $p)
    <tr><td><div style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $p->name }}</div>@if($p->article_number)<div style="font-size:11px;color:#5B6478;">{{ $p->article_number }}</div>@endif</td>
    <td style="font-size:12px;color:#8B9AB8;">{{ $p->type==='service'?'Tjänst':'Produkt' }}</td>
    <td class="text-right" style="font-size:13px;color:#E8EAF0;font-variant-numeric:tabular-nums;">{{ number_format($p->price,2,',', ' ') }} kr</td>
    <td style="font-size:13px;color:#8B9AB8;">{{ $p->unit }}</td>
    <td class="text-right" style="font-size:13px;color:#8B9AB8;">{{ intval($p->vat_rate) }}%</td>
    <td><form method="POST" action="{{ route('products.destroy',$p) }}" onsubmit="return confirm('Ta bort?')">@csrf @method('DELETE')<button type="submit" style="background:none;border:none;color:#5B6478;cursor:pointer;font-size:12px;font-family:'DM Sans',sans-serif;padding:4px 8px;">Ta bort</button></form></td></tr>
    @empty
    <tr><td colspan="6" style="text-align:center;padding:60px;color:#5B6478;">Inga artiklar. <button onclick="document.getElementById('pm').classList.remove('hidden')" style="color:#3B7DFF;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;">Lägg till →</button></td></tr>
    @endforelse
    </tbody>
  </table>
</div>
<div id="pm" class="hidden" style="position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);" onclick="if(event.target===this)this.classList.add('hidden')">
  <div style="width:90%;max-width:480px;background:#0D1220;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;">
    <div style="padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;font-weight:500;color:#E8EAF0;">Ny artikel</div>
    <form method="POST" action="{{ route('products.store') }}" style="padding:20px;">@csrf
      <div style="margin-bottom:12px;"><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Namn *</label><input type="text" name="name" class="ff-input" required placeholder="Konsulttimme"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px;">
        <div><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Art.nr</label><input type="text" name="article_number" class="ff-input" placeholder="ART-001"></div>
        <div><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Pris</label><input type="number" name="price" class="ff-input" step="0.01" min="0" required placeholder="0.00"></div>
        <div><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Enhet</label><input type="text" name="unit" class="ff-input" value="st"></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;">
        <div><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Moms</label><select name="vat_rate" class="ff-input ff-select"><option value="25">25%</option><option value="12">12%</option><option value="6">6%</option><option value="0">0%</option></select></div>
        <div><label style="font-size:11px;color:#5B6478;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:5px;">Typ</label><select name="type" class="ff-input ff-select"><option value="service">Tjänst</option><option value="product">Produkt</option></select></div>
      </div>
      <div style="display:flex;gap:10px;justify-content:flex-end;"><button type="button" onclick="document.getElementById('pm').classList.add('hidden')" style="padding:10px 18px;background:none;border:1px solid rgba(255,255,255,.08);border-radius:9px;color:#5B6478;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:14px;">Avbryt</button><button type="submit" class="btn btn-primary">Spara</button></div>
    </form>
  </div>
</div>
@endsection