@extends('layouts.admin')
@section('page-title', 'Edit Product')

@section('topbar-actions')
  <a href="{{ route('admin.products.index') }}" class="btn btn-ghost">← Back to Products</a>
@endsection

@section('content')
<div style="max-width:760px">
  <form method="POST" action="{{ route('admin.products.update',$product) }}" enctype="multipart/form-data">
    @csrf @method('PUT')

    <div class="card" style="margin-bottom:20px">
      <div class="card-title">✏️ Edit Product — {{ $product->name }}</div>

      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Product Name *</label>
          <input type="text" name="name" class="form-input @error('name') is-invalid @enderror" value="{{ old('name',$product->name) }}" required>
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Slug</label>
          <input type="text" name="slug" class="form-input" value="{{ old('slug',$product->slug) }}">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Description</label>
        <textarea name="description" class="form-textarea">{{ old('description',$product->description) }}</textarea>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Category *</label>
          <select name="category" class="form-select">
            @foreach(['electronics','fashion','home','food'] as $cat)
              <option value="{{ $cat }}" {{ old('category',$product->category)===$cat?'selected':'' }}>{{ ucfirst($cat) }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Emoji</label>
          <input type="text" name="emoji" class="form-input" value="{{ old('emoji',$product->emoji) }}" maxlength="4">
        </div>
      </div>
      <div class="form-row3">
        <div class="form-group">
          <label class="form-label">Sale Price ($) *</label>
          <input type="number" name="price" class="form-input @error('price') is-invalid @enderror" value="{{ old('price',$product->price) }}" step="0.01" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Cost Price ($) *</label>
          <input type="number" name="cost_price" class="form-input @error('cost_price') is-invalid @enderror" value="{{ old('cost_price',$product->cost_price) }}" step="0.01" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Old Price ($)</label>
          <input type="number" name="old_price" class="form-input" value="{{ old('old_price',$product->old_price) }}" step="0.01" min="0">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Stock *</label>
          <input type="number" name="stock" class="form-input" value="{{ old('stock',$product->stock) }}" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Low-Stock Threshold</label>
          <input type="number" name="low_stock_threshold" class="form-input" value="{{ old('low_stock_threshold',$product->low_stock_threshold) }}" min="1">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Badge</label>
          <input type="text" name="badge" class="form-input" value="{{ old('badge',$product->badge) }}">
        </div>
        <div class="form-group" style="display:flex;align-items:center;gap:12px;padding-top:28px">
          <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:600">
            <input type="hidden" name="is_active" value="0">
            <input type="checkbox" name="is_active" value="1" {{ old('is_active',$product->is_active)?'checked':'' }} style="width:18px;height:18px;accent-color:var(--green)">
            Active (visible on storefront)
          </label>
        </div>
      </div>
    </div>

    <div class="card" style="margin-bottom:20px">
      <div class="card-title">🖼️ Product Image</div>
      @if($product->image_url)
        <img src="{{ $product->image_url }}" style="width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--border);margin-bottom:12px">
        <div style="font-size:12px;color:var(--ink2);margin-bottom:12px">Upload a new image to replace the current one</div>
      @endif
      <input type="file" name="image" class="form-input" accept="image/jpg,image/jpeg,image/png,image/webp" style="padding:8px">
    </div>

    <div style="display:flex;gap:12px">
      <button type="submit" class="btn btn-primary" style="font-size:16px;padding:12px 32px">💾 Save Changes</button>
      <a href="{{ route('admin.products.index') }}" class="btn btn-ghost">Cancel</a>
    </div>
  </form>
</div>
@endsection