@extends('layouts.admin')
@section('title', 'Products')

@section('content')
@php
$typeIcons = ['software'=>'💻','plugin'=>'🔌','module'=>'🧩','theme'=>'🎨','api'=>'⚡','website'=>'🌐','script'=>'📜','desktop'=>'🖥️','saas'=>'☁️'];
@endphp

<div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem">
  <div>
    <h1 style="font-size:1.25rem;font-weight:800;color:var(--foreground);letter-spacing:-.025em;margin:0 0 .25rem">Products</h1>
    <p style="font-size:.8125rem;color:var(--muted-foreground);margin:0">{{ $products->total() }} products in your catalogue</p>
  </div>
  <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">
    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/>
    </svg>
    New Product
  </a>
</div><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem">
  @forelse($products as $product)
  <div class="card" style="display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s"
       onmouseover="this.style.boxShadow='0 6px 20px rgba(0,0,0,.08)';this.style.transform='translateY(-1px)'"
       onmouseout="this.style.boxShadow='';this.style.transform=''">

    <div style="padding:1.25rem;flex:1">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.875rem">
        <div style="display:flex;align-items:center;gap:.75rem">
          <div style="width:42px;height:42px;border-radius:.625rem;background:var(--muted);
            border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
            font-size:1.125rem;flex-shrink:0">
            {{ $typeIcons[$product->type]??'-' }}
          </div>
          <div>
            <div style="font-size:.875rem;font-weight:700;color:var(--foreground)">{{ $product->name }}</div>
            <div style="font-size:.72rem;color:var(--muted-foreground);margin-top:1px">{{ ucfirst($product->type) }} · v{{ $product->version }}</div>
          </div>
        </div>
        <span class="badge {{ $product->is_active ? 'b-green' : 'b-gray' }}" style="flex-shrink:0">
          {{ $product->is_active ? 'Active' : 'Inactive' }}
        </span>
      </div>

      <p style="font-size:.78rem;color:var(--foreground);line-height:1.6;margin:0 0 1rem;
        min-height:2.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
        {{ $product->short_description ?? 'No description.' }}
      </p>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
        padding:.75rem;border-radius:.65rem;background:var(--muted);border:1px solid var(--border)">
        <div style="text-align:center">
          <div style="font-size:.9375rem;font-weight:800;color:var(--foreground)">{{ $currencySymbol }}{{ number_format($product->price,0) }}</div>
          <div style="font-size:.6rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-top:1px">Price</div>
        </div>
        <div style="text-align:center;border-left:1px solid var(--border);border-right:1px solid var(--border)">
          <div style="font-size:.9375rem;font-weight:800;color:var(--foreground)">{{ $product->licenses_count }}</div>
          <div style="font-size:.6rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-top:1px">Licenses</div>
        </div>
        <div style="text-align:center">
          <div style="font-size:.9375rem;font-weight:800;color:var(--foreground)">{{ ucfirst($product->update_channel) }}</div>
          <div style="font-size:.6rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-top:1px">Channel</div>
        </div>
      </div>
    </div>

    <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border);background:var(--muted);
      display:flex;align-items:center;justify-content:space-between">
      <a href="{{ route('admin.products.edit',$product) }}" class="btn btn-secondary btn-sm">
        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
        </svg>
        Edit
      </a>
      <a href="{{ route('admin.products.show',$product) }}" class="btn btn-primary btn-sm">Manage <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a>
    </div>
  </div>
  @empty
  <div style="grid-column:1/-1" class="card">
    <div style="padding:4rem;text-align:center">
      <div style="font-size:3rem;margin-bottom:1rem">📦</div>
      <div style="font-size:.9rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem">No products yet</div>
      <p style="font-size:.8rem;color:var(--muted-foreground);margin-bottom:1.25rem">Create your first product to start selling licenses.</p>
      <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-sm">Create Product</a>
    </div>
  </div>
  @endforelse
</div>

@if($products->hasPages())
<div style="margin-top:1.25rem">{{ $products->links() }}</div>
@endif

@endsection
