@extends('layouts.admin')

@section('heading', 'Garments')
@section('subheading', 'Choose which garments your shop offers, then build the measurement form for each.')

@section('content')

@include('partials.master-tabs')

@if (session('status'))
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;">
    {{ session('status') }}
  </div>
@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="grid grid-cols-3 gap-4 mb-4">
  @foreach($garmentTypes as $type)
    <div class="card p-5 flex flex-col gap-3">
      <div class="flex items-center justify-between">
        <div>
          <p class="font-display font-semibold text-base" style="color:#1A1625;">
            {{ $type->name }} @if($type->name_ta) <span class="font-normal" style="color:#6b6470;">/ {{ $type->name_ta }}</span> @endif
          </p>
          @if($type->is_custom)
            <span class="text-[10px] font-medium px-2 py-0.5 rounded-full" style="background:#EEEDFE; color:#5E35B1;">Custom to your shop</span>
          @endif
        </div>
        <form method="POST" action="{{ route('shop.garments.toggle', $type) }}">
          @csrf
          <button type="submit" class="text-xs px-3 py-1.5 rounded-full font-medium"
            style="{{ $type->is_offered ? 'background:#E1F5EE; color:#0F6E56;' : 'background:#f2ece0; color:#6b6470;' }}">
            {{ $type->is_offered ? 'Offered' : 'Not offered' }}
          </button>
        </form>
      </div>

      @if($type->is_offered)
        <a href="{{ route('shop.garments.builder', $type) }}" class="text-xs font-medium" style="color:#C2185B;">
          Build measurement form →
        </a>
      @else
        <p class="text-xs" style="color:#a19a8f;">Turn this on to configure its measurements.</p>
      @endif
    </div>
  @endforeach
</div>

<!-- Create custom garment -->
<div class="card p-5 max-w-lg">
  <p class="text-xs font-medium mb-3" style="color:#1A1625;">Create a custom garment for your shop</p>
  <form method="POST" action="{{ route('shop.garments.store') }}" class="space-y-2">
    @csrf
    <input type="text" name="name" placeholder="Garment name (English) e.g. Sherwani" required
      class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    <input type="text" name="name_ta" placeholder="தமிழ் பெயர் (optional)"
      class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    <input type="text" name="code" placeholder="Short code (optional) e.g. SHW"
      class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">
      + Create garment
    </button>
  </form>
  <p class="text-xs mt-2" style="color:#a19a8f;">This garment will only be visible to your shop, not other shops on eTailorz.</p>
</div>

@endsection