@extends('layout')

@section('content')
  <div class="header-actions">
    <h2>Add Product</h2>
    <div class="spacer"></div>
    <a class="btn btn-secondary" href="{{ route('products.index') }}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
      Back to List
    </a>
  </div>

  <div class="card">
    <div class="card-header" style="align-items:center;">
      <div>
        <h3>Product Details</h3>
        <div class="small text-muted">Enter accurate product info for inventory and agreements</div>
      </div>
      <div class="small text-muted">Fields marked with <span style="color:var(--accent);">*</span> are required</div>
    </div>

    <form method="post" action="{{ route('products.store') }}">
      @csrf
      <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 16px;">
        <div>
          <label for="name">Name <span style="color:var(--accent);">*</span></label>
          <input id="name" name="name" value="{{ old('name') }}" placeholder="e.g. iPhone 13" required>
          @error('name')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="category">Category</label>
          <input id="category" name="category" value="{{ old('category') }}" placeholder="e.g. Mobile">
          @error('category')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="brand">Brand</label>
          <input id="brand" name="brand" value="{{ old('brand') }}" placeholder="e.g. Apple">
          @error('brand')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="model">Model</label>
          <input id="model" name="model" value="{{ old('model') }}" placeholder="e.g. 128GB, Blue">
          @error('model')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="serial_number">Serial Number</label>
          <input id="serial_number" name="serial_number" value="{{ old('serial_number') }}" placeholder="Optional">
          @error('serial_number')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="imei">IMEI</label>
          <input id="imei" name="imei" value="{{ old('imei') }}" placeholder="Optional">
          @error('imei')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="price">Selling Price <span style="color:var(--accent);">*</span></label>
          <input id="price" name="price" type="number" step="0.01" value="{{ old('price') }}" placeholder="0.00" required>
          @error('price')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="purchase_price">Purchase Price</label>
          <input id="purchase_price" name="purchase_price" type="number" step="0.01" value="{{ old('purchase_price') }}" placeholder="0.00">
          @error('purchase_price')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div>
          <label for="stock">Stock</label>
          <input id="stock" name="stock" type="number" min="0" value="{{ old('stock', 0) }}" placeholder="0">
          @error('stock')<div class="form-error">{{ $message }}</div>@enderror
        </div>
        
        <div class="col-span-full">
          <label for="notes">Notes</label>
          <textarea id="notes" name="notes" rows="3" placeholder="Optional details">{{ old('notes') }}</textarea>
          @error('notes')<div class="form-error">{{ $message }}</div>@enderror
        </div>
      </div>

      <div style="margin-top:20px; display:flex; gap:12px; justify-content: flex-end;">
        <a class="btn btn-secondary" href="{{ route('products.index') }}">Cancel</a>
        <button class="btn btn-primary" type="submit">Save</button>
      </div>
    </form>
  </div>

  <style>
    .col-span-full { grid-column: 1 / -1; }
    .form-error { color: #b00020; font-size: 12px; margin-top: 6px; }
    @media (max-width: 768px) { .grid { gap: 16px; grid-template-columns: 1fr !important; } }
  </style>
@endsection