@extends('layouts.admin')
@section('title', 'Spesifikasi: '.$product->name_id)
@push('breadcrumb')
<div class="breadcrumb-sep">/</div><div class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Produk</a></div><div class="breadcrumb-sep">/</div><div class="breadcrumb-item">Spesifikasi</div>
@endpush
@section('content')
<div class="flex items-center justify-between mb-4">
  <h2 class="admin-table-title">{{ $product->name_id }}</h2>
</div>
<div class="admin-table-card">
  <div class="admin-table-head"><div class="admin-table-title">Spesifikasi Teknis</div></div>
  <div class="p-4">
    <form method="POST" action="{{ route('admin.products.specs.store', $product) }}" class="flex flex-wrap gap-3 items-end mb-6 p-4 bg-crius-grey-50 rounded-xl border border-crius-grey-200">
      @csrf
      <select name="spec_group" class="form-input form-select" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);width:140px;font-size:11px;" required>
        <option value="Performance">Performance</option>
        <option value="Technical">Technical</option>
        <option value="Physical">Physical</option>
        <option value="Electrical">Electrical</option>
      </select>
      <input type="text" name="key_id" placeholder="Label (ID)" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);width:150px;font-size:12px;" required>
      <input type="text" name="key_en" placeholder="Label (EN)" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);width:150px;font-size:12px;" required>
      <input type="text" name="value" placeholder="Nilai" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);width:120px;font-size:12px;">
      <input type="text" name="unit" placeholder="Satuan" class="form-input" style="background:var(--white);color:var(--navy);border-color:var(--grey-200);width:80px;font-size:12px;">
      <button type="submit" class="btn btn--primary btn--sm">+ Tambah</button>
    </form>

    <table class="w-full">
      <thead><tr><th>Group</th><th>Label (ID)</th><th>Label (EN)</th><th>Nilai</th><th>Unit</th><th>Aksi</th></tr></thead>
      <tbody>
        @foreach($specs as $spec)
        <tr>
          <td><span class="badge badge--blue">{{ $spec->spec_group }}</span></td>
          <td>{{ $spec->key_id }}</td>
          <td>{{ $spec->key_en }}</td>
          <td style="padding:10px 12px;font-size:12px;font-weight:600;">{{ $spec->value }}</td>
          <td>{{ $spec->unit }}</td>
          <td>
            <form method="POST" action="{{ route('admin.specs.destroy', $spec) }}" onsubmit="return confirm('Hapus?')">
              @csrf @method('DELETE')
              <button type="submit" class="btn btn--sm" style="background:var(--danger-pale);color:var(--danger);border:none;font-size:10px;padding:4px 8px;">Hapus</button>
            </form>
          </td>
        </tr>
        @endforeach
        @if($specs->isEmpty())
        <tr><td colspan="6" style="padding:30px;text-align:center;color:var(--grey-400);font-size:13px;">Belum ada spesifikasi.</td></tr>
        @endif
      </tbody>
    </table>
  </div>
</div>
<a href="{{ route('admin.products.index') }}" class="btn btn--ghost mt-4">← Kembali</a>
@endsection