{{-- Output type (photo/video) --}}
<div class="section-hdr">
  {{ __('output_type') }}
  <button class="hint-btn" data-hint="output" aria-label="Help" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  </button>
</div>

<div class="field">
  <label id="outputTypeLabel">{{ __('output_type') }}</label>
  <div class="toggle" id="toggle" role="radiogroup" aria-labelledby="outputTypeLabel">
    <button data-out="image" class="on" role="radio" aria-checked="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.5-3.5-5 5L8 13l-5 5"/></svg>
      {{ __('photo') }}
    </button>
    <button data-out="video" role="radio" aria-checked="false">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m22 8-6 4 6 4V8z"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
      {{ __('video_reel') }} <span class="vtag">{{ __('video_tag') }}</span>
    </button>
  </div>
</div>

{{-- Motion (photo group) --}}
<div class="field" id="motionField" style="display:none">
  <label>{{ __('reel_motion') }}</label>
  <div class="opts" data-group="motion">
    @foreach(['Model Turn','Slow Zoom','Fabric Sway','Catwalk','Hair Movement','Wind Effect','Camera Orbit','Look Back','Smile Animation'] as $v)
      @php $slug = Str::slug($v) @endphp
      <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
        <span class="opt-thumb" aria-hidden="true">
          <img loading="lazy" alt="" src="{{ asset('img/options/motion/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
        </span>
        <span class="opt-label">{{ __('opt.'.$v) }}</span>
      </span>
    @endforeach
  </div>
</div>

{{-- Garment type (photo group) --}}
<div class="section-hdr" style="margin-top:12px">
  {{ __('garment_type') }}
  <button class="hint-btn" data-hint="garment" aria-label="Help" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  </button>
</div>

<div class="field">
  <div class="opts" data-group="garment">
    @foreach(['Kurti','Saree','Shirt','Polo','Panjabi','T-Shirt','Three Piece','Lehenga','Abaya','Kaftan','Blazer','Suit','Hoodie','Jacket','Dress','Gown','Skirt','Jeans','Co-ord Set','Kids Wear'] as $v)
      @php $slug = Str::slug($v) @endphp
      <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
        <span class="opt-thumb" aria-hidden="true">
          <img loading="lazy" alt="" src="{{ asset('img/options/garment/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
        </span>
        <span class="opt-label">{{ __('garment.'.$v) }}</span>
      </span>
    @endforeach
  </div>
</div>

{{-- Garment details (collapsible) — #advancedContent wraps fg--garment only --}}
<div class="adv-hdr">
  <button class="advanced-toggle" id="advancedToggle" type="button">
    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
    <span class="adv-thumb" aria-hidden="true">
      <img loading="lazy" alt="" src="{{ asset('img/options/garment-details.webp') }}" onerror="this.closest('.adv-thumb').classList.add('opt-thumb--fallback')">
    </span>
    <span id="advancedLabel">{{ __('advanced.toggle') }}</span>
  </button>
  <button class="hint-btn hint-btn--adv" data-hint="advanced" aria-label="Help" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  </button>
</div>

<div class="advanced-fields" id="advancedContent">

  {{-- fg--garment --}}
  <div class="field-group fg--garment">
    <div class="field-group-label">
      <span class="fg-thumb" aria-hidden="true">
        <img loading="lazy" alt="" src="{{ asset('img/options/garment-details.webp') }}" onerror="this.closest('.fg-thumb').classList.add('opt-thumb--fallback')">
      </span>
      <span>{{ __('adv.garment_details') }}</span>
      <span class="fg-sel-count"></span>
    </div>

    {{-- Fabric (photo group) --}}
    <div class="field">
      <label>{{ __('label.Fabric') }} <button class="hint-btn hint-btn--label" data-hint="fabric" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="fabric">
        @foreach(['Silk','Cotton','Linen','Georgette','Velvet','Denim','Lace','Satin','Organza','Net','Muslin','Khadi','Chiffon','Rayon','Viscose','Polyester','Jersey','Twill'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/fabric/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('fabric.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    {{-- Pattern (photo group) --}}
    <div class="field">
      <label>{{ __('label.Pattern') }} <button class="hint-btn hint-btn--label" data-hint="pattern" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="pattern">
        @foreach(['Solid','Floral','Printed','Striped','Checked','Embroidered','Paisley','Abstract','Geometric','Block Print','Jamdani','Hand Painted'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/pattern/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('pattern.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    {{-- Fit (photo group) --}}
    <div class="field">
      <label>{{ __('label.Fit') }} <button class="hint-btn hint-btn--label" data-hint="fit" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="fit">
        @foreach(['Slim Fit','Regular Fit','Relaxed Fit','Oversized','Tailored','Flowy','A-Line','Straight Cut'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/fit/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('fit.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    {{-- Sleeve (photo group) --}}
    <div class="field">
      <label>{{ __('label.Sleeve') }} <button class="hint-btn hint-btn--label" data-hint="sleeve" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="sleeve">
        @foreach(['Sleeveless','Short Sleeve','Half Sleeve','Three Quarter','Full Sleeve','Puff Sleeve','Bell Sleeve'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/sleeve/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('sleeve.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    {{-- Neckline (photo group) --}}
    <div class="field">
      <label>{{ __('label.Neckline') }} <button class="hint-btn hint-btn--label" data-hint="neckline" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="neckline">
        @foreach(['Round Neck','V Neck','Collar','Mandarin Collar','Boat Neck','Square Neck','High Neck','Off Shoulder'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/neckline/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('neckline.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    {{-- Embellishment (photo group) --}}
    <div class="field">
      <label>{{ __('label.Embellishment') }} <button class="hint-btn hint-btn--label" data-hint="embellishment" aria-label="Help" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></button></label>
      <div class="opts" data-group="embellishment">
        @foreach(['Embroidery','Sequins','Beads','Mirror Work','Stone Work','Zari','Thread Work','Applique','Pearls','Lace Detailing'] as $v)
          @php $slug = Str::slug($v) @endphp
          <span class="opt opt--thumb" data-v="{{ $v }}" role="checkbox" aria-checked="false" tabindex="0">
            <span class="opt-thumb" aria-hidden="true">
              <img loading="lazy" alt="" src="{{ asset('img/options/embellishment/'.$slug.'.webp') }}" onerror="this.closest('.opt-thumb').classList.add('opt-thumb--fallback')">
            </span>
            <span class="opt-label">{{ __('embellishment.'.$v) }}</span>
          </span>
        @endforeach
      </div>
    </div>

    <div class="field">
      <label for="colorInput">{{ __('label.Color') }}</label>
      <input type="text" class="text-input" id="colorInput" placeholder="{{ __('color') ?? 'e.g. Pastel pink & gold, navy & silver' }}">
    </div>
  </div>

</div>{{-- /advancedContent --}}