@extends('layouts.admin')
@section('title', 'Create 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';
  $plus  = 'shrink-0 w-12 h-12 grid place-items-center rounded-xl bg-brand-500 text-slate-900 hover:bg-brand-400 shadow-lg shadow-brand-500/25';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Products</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Create product</span>
</div>

{{-- Success message --}}
@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">
    {{ session('success') }}
  </div>
@endif

<form method="POST" action="{{ route('admin.products.store') }}" 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

  <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') }}" placeholder="Enter 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>
      <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">
      @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') }}" placeholder="e.g. LGT-001" class="{{ $input }}">
      @error('code') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    {{-- Category + notun add --}}
    <div>
      <label class="{{ $label }}">Category <span class="text-red-500">*</span></label>
      <div class="flex gap-2">
        <select name="category_id" class="{{ $input }} min-w-0">
          <option value="">Choose Category</option>
          @foreach ($categories as $c)
            <option value="{{ $c->id }}" @selected(old('category_id') == $c->id)>{{ $c->name }}</option>
          @endforeach
        </select>
        <button type="button" data-quick="category" title="Notun category add koro" class="{{ $plus }}">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
        </button>
      </div>
      @error('category_id') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    {{-- Brand + notun add --}}
    <div>
      <label class="{{ $label }}">Brand</label>
      <div class="flex gap-2">
        <select name="brand_id" class="{{ $input }} min-w-0">
          <option value="">Choose Brand</option>
          @foreach ($brands as $b)
            <option value="{{ $b->id }}" @selected(old('brand_id') == $b->id)>{{ $b->name }}</option>
          @endforeach
        </select>
        <button type="button" data-quick="brand" title="Notun brand add koro" class="{{ $plus }}">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
        </button>
      </div>
      @error('brand_id') <p class="text-xs text-red-500 mt-1.5">{{ $message }}</p> @enderror
    </div>

    {{-- Unit + notun add --}}
    <div>
      <label class="{{ $label }}">Unit <span class="text-red-500">*</span></label>
      <div class="flex gap-2">
        <select name="unit_id" class="{{ $input }} min-w-0">
          <option value="">Choose Unit</option>
          @foreach ($units as $u)
            <option value="{{ $u->id }}" @selected(old('unit_id') == $u->id)>{{ $u->name }} ({{ $u->short_name }})</option>
          @endforeach
        </select>
        <button type="button" data-quick="unit" title="Notun unit add koro" class="{{ $plus }}">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
        </button>
      </div>
      <p class="text-xs text-slate-500 mt-1.5">
        Product ta ei unit e kena-beca hobe (kg, meter, pcs…).
        <a href="{{ route('admin.products.units.index') }}" target="_blank" class="text-brand-600 dark:text-brand-400 font-semibold">Unit add/edit</a>
      </p>
      @error('unit_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" step="any" name="stock_alert" value="{{ old('stock_alert', 0) }}" class="{{ $input }}">
      <p class="text-xs text-slate-500 mt-1.5">Stock ei number er kom hole alert dekhabe.</p>
      @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') }}" placeholder="Enter 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') }}" placeholder="Enter 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>

  {{-- VAT note --}}
  <div class="mt-6 flex items-start gap-3 p-4 rounded-xl bg-brand-500/10 border border-brand-500/30 text-sm">
    <svg class="w-5 h-5 mt-0.5 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
    <div>Price e VAT dite hobe na. Invoice korar somoy <b>5% VAT</b> automatic add hoye jabe.</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">Save Product</button>
    <a href="{{ route('admin.dashboard') }}" 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>

{{-- Notun Category / Brand / Unit popup --}}
@include('admin.products._quick-add')
@endsection