@extends('layouts.app')

@section('title', $title)
@section('hi', $title)
@section('hi_sub', 'Catálogo')

@section('content')
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ $title }}</h1>
            <p class="page-sub">{{ $sub }}</p>
        </div>
    </div>

    @unless(auth()->user()->company_id)
        <div class="card"><div class="empty">Ingresa como usuario de una empresa para gestionar estas opciones.</div></div>
    @else
    <div class="attr-grid">
        @foreach($types as $type => $label)
            <div class="card panel">
                <div class="panel__title" style="margin-bottom:14px">{{ $label }}</div>

                <form method="POST" action="{{ route('attributes.store') }}" class="attr-add">
                    @csrf
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input class="inp" name="value" placeholder="{{ $type === 'color' ? 'Ej: Rojo' : ($type === 'material' ? 'Ej: Oro 18k' : 'Ej: '.($type==='shoe_size'?'38':'M')) }}" required style="flex:1">
                    @if($type === 'color')
                        <input class="inp" type="color" name="extra" value="#e91e63" title="Color">
                    @endif
                    <button class="btn-primary">@include('partials.icon', ['name' => 'plus', 'class' => 'ic-sm'])</button>
                </form>

                <div class="chips">
                    @forelse($items[$type] as $a)
                        <span class="chip-a">
                            @if($type === 'color' && $a->extra)<span class="sw" style="background:{{ $a->extra }}"></span>@endif
                            {{ $a->value }}
                            <form method="POST" action="{{ route('attributes.destroy', $a) }}" onsubmit="return confirm('¿Eliminar «{{ $a->value }}»?')">
                                @csrf @method('DELETE')
                                <button title="Eliminar">&times;</button>
                            </form>
                        </span>
                    @empty
                        <div class="chips-empty">Aún no hay opciones. Agrega la primera arriba.</div>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>

    <p class="hint" style="margin-top:16px">Estas opciones sirven como referencia rápida al crear las variantes de tus productos (talla, color, numeración, material).</p>
    @endunless
@endsection