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

@section('content')
@php
  $input = 'w-full h-12 px-4 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500 focus:bg-white dark:focus:bg-slate-900';
  $label = 'block text-sm font-semibold mb-2';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.products.index') }}" class="hover:text-brand-500">Products</a><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Edit product</span>
</div>

<form method="POST" action="{{ route('admin.products.update', $product) }}" enctype="multipart/form-data"
      class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
  @csrf
  @method('PUT')

  <div class="grid md:grid-cols-2 gap-6">

    <div>
      <label class="{{ $label }}">Name <span class="text-red-500">*</span></label>
      <input type="text" name="name" value="{{ old('name', $product->name) }}" class="{{ $input }}">
      @error('name') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Product Image</label>
      <div class="flex items-center gap-4">
        @if ($product->image)
          <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-12 h-12 rounded-xl object-cover shrink-0">
        @endif
        <input type="file" name="image" accept="image/*"
               class="block w-full h-12 text-sm rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 file:mr-4 file:h-12 file:px-5 file:border-0 file:bg-slate-200 dark:file:bg-slate-700 file:text-slate-800 dark:file:text-slate-100 file:font-semibold cursor-pointer overflow-hidden">
      </div>
      <p class="text-xs text-slate-500 mt-1.5">Notun chobi na dile purono chobi-i thakbe.</p>
      @error('image') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Product Code <span class="text-red-500">*</span></label>
      <input type="text" name="code" value="{{ old('code', $product->code) }}" class="{{ $input }}">
      @error('code') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Category <span class="text-red-500">*</span></label>
      <select name="category_id" class="{{ $input }}">
        <option value="">Choose Category</option>
        @foreach ($categories as $c)
          <option value="{{ $c->id }}" @selected(old('category_id', $product->category_id) == $c->id)>{{ $c->name }}</option>
        @endforeach
      </select>
      @error('category_id') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Brand</label>
      <select name="brand_id" class="{{ $input }}">
        <option value="">Choose Brand</option>
        @foreach ($brands as $b)
          <option value="{{ $b->id }}" @selected(old('brand_id', $product->brand_id) == $b->id)>{{ $b->name }}</option>
        @endforeach
      </select>
      @error('brand_id') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Stock Alert</label>
      <input type="number" min="0" name="stock_alert" value="{{ old('stock_alert', $product->stock_alert) }}" class="{{ $input }}">
      @error('stock_alert') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Product Cost <span class="text-red-500">*</span></label>
      <div class="flex">
        <span class="h-12 px-4 grid place-items-center rounded-l-xl border border-r-0 border-slate-300 dark:border-slate-700 bg-slate-200 dark:bg-slate-700 text-sm font-semibold">AED</span>
        <input type="number" step="0.01" min="0" name="cost" value="{{ old('cost', $product->cost) }}" class="{{ $input }} !rounded-l-none">
      </div>
      @error('cost') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    <div>
      <label class="{{ $label }}">Product Price <span class="text-red-500">*</span></label>
      <div class="flex">
        <span class="h-12 px-4 grid place-items-center rounded-l-xl border border-r-0 border-slate-300 dark:border-slate-700 bg-slate-200 dark:bg-slate-700 text-sm font-semibold">AED</span>
        <input type="number" step="0.01" min="0" name="price" value="{{ old('price', $product->price) }}" class="{{ $input }} !rounded-l-none">
      </div>
      @error('price') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>
  </div>

  <div class="mt-8 flex flex-wrap gap-3">
    <button type="submit" class="h-12 px-8 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold shadow-lg shadow-brand-500/25 hover:opacity-90">Update Product</button>
    <a href="{{ route('admin.products.index') }}" class="h-12 px-8 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">Cancel</a>
  </div>
</form>
@endsection