@extends('layouts.admin')

@section('heading', $addon->exists ? 'Edit addon' : 'New addon')
@section('subheading', 'Set the name and price staff will see when adding this to a garment.')

@section('content')

<div class="card p-6 max-w-lg">
  <form method="POST" action="{{ $addon->exists ? route('shop.addons.update', $addon) : route('shop.addons.store') }}">
    @csrf
    @if($addon->exists) @method('PUT') @endif

    @if ($errors->any())
      <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
        {{ $errors->first() }}
      </div>
    @endif

    <div class="space-y-4">
      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Name (English) *</label>
        <input type="text" name="name" value="{{ old('name', $addon->name) }}" placeholder="e.g. Extra Buttons" required
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Name (Tamil)</label>
        <input type="text" name="name_ta" value="{{ old('name_ta', $addon->name_ta) }}" placeholder="e.g. கூடுதல் பட்டன்"
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Price ₹ *</label>
        <input type="number" name="price" value="{{ old('price', $addon->price) }}" min="0" step="0.01" required
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>
      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Applies to garments *</label>
        @if($garmentTypes->isEmpty())
          <p class="text-xs" style="color:#a19a8f;">No garments offered yet — <a href="{{ route('shop.garments.index') }}" style="color:#C2185B;">turn some on first</a>.</p>
        @else
          <div class="flex flex-wrap gap-2">
            @foreach($garmentTypes as $type)
              <label class="flex items-center gap-2 text-xs px-3 py-2 rounded-lg cursor-pointer" style="background:#FFF9F0;">
                <input type="checkbox" name="garment_type_ids[]" value="{{ $type->id }}"
                  {{ in_array($type->id, old('garment_type_ids', $selected)) ? 'checked' : '' }}
                  style="accent-color:#C2185B;">
                {{ $type->name }}{{ $type->name_ta ? ' / '.$type->name_ta : '' }}
              </label>
            @endforeach
          </div>
        @endif
      </div>
      <div class="flex items-center gap-2">
        <input type="hidden" name="is_active" value="0">
        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $addon->is_active ?? true) ? 'checked' : '' }} style="accent-color:#C2185B;">
        <label class="text-xs font-medium" style="color:#1A1625;">Active</label>
      </div>
    </div>

    <div class="flex items-center gap-3 mt-6">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">
        {{ $addon->exists ? 'Update addon' : 'Create addon' }}
      </button>
      <a href="{{ route('shop.addons.index') }}" class="text-sm" style="color:#6b6470;">Cancel</a>
    </div>
  </form>
</div>

@endsection