@extends('layouts.admin')
@section('page-title', isset($product) ? 'Edit Product' : 'New 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="{{ isset($product) ? route('admin.products.update',$product) : route('admin.products.store') }}"
        enctype="multipart/form-data">
    @csrf
    @if(isset($product)) @method('PUT') @endif

    <div class="card" style="margin-bottom:20px">
      <div class="card-title">{{ isset($product) ? '✏️ Edit' : '➕ New' }} Product</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 (auto-generated)</label>
          <input type="text" name="slug" class="form-input"
                 value="{{ old('slug', $product->slug ?? '') }}" placeholder="leave-blank-to-auto-generate">
        </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 Icon</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>
          @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </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>
          @error('cost_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Old / Compare 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 Quantity *</label>
          <input type="number" name="stock" class="form-input @error('stock') is-invalid @enderror"
                 value="{{ old('stock', $product->stock ?? 0) }}" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Low-Stock Alert Threshold</label>
          <input type="number" name="low_stock_threshold" class="form-input"
                 value="{{ old('low_stock_threshold', $product->low_stock_threshold ?? 10) }}" min="1">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Badge Label</label>
          <input type="text" name="badge" class="form-input"
                 value="{{ old('badge', $product->badge ?? '') }}" placeholder="New, Sale, Popular…">
        </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 ?? true) ? 'checked' : '' }}
                   style="width:18px;height:18px;accent-color:var(--green)">
            Active (visible on storefront)
          </label>
        </div>
      </div>
    </div>

    {{-- IMAGE UPLOAD --}}
    <div class="card" style="margin-bottom:20px">
      <div class="card-title">🖼️ Product Image</div>
      @if(isset($product) && $product->image_url)
        <div style="margin-bottom:16px">
          <img src="{{ $product->image_url }}" style="width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--border)">
          <div style="font-size:12px;color:var(--ink2);margin-top:6px">Current image — upload a new one to replace it</div>
        </div>
      @endif
      <input type="file" name="image" class="form-input @error('image') is-invalid @enderror"
             accept="image/jpg,image/jpeg,image/png,image/webp" style="padding:8px">
      @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <div style="font-size:12px;color:var(--ink2);margin-top:6px">JPG, PNG, WebP · Max 5 MB</div>
    </div>

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