@extends('layouts.app')
@section('title', 'Catégories')
@section('breadcrumb', 'Réglages / Catégories')
@section('content')
<div class="page-header"><h1 class="page-title"><i class="fas fa-tags" style="color:var(--primary)"></i> Catégories par famille</h1><a href="{{ route('reglages.familles') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Familles</a></div>
@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
<div class="card"><div class="card-body">
    <form method="POST" action="{{ route('reglages.categories.store') }}" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
        @csrf
        <select name="famille_id" class="form-control" style="max-width:180px;" required>
            <option value="">-- Famille --</option>
            @foreach($familles as $f)<option value="{{ $f->id }}">{{ $f->label }}</option>@endforeach
        </select>
        <input type="text" name="code" class="form-control" placeholder="Code catégorie" style="max-width:120px;" required>
        <input type="text" name="label" class="form-control" placeholder="Libellé catégorie" required>
        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Ajouter</button>
    </form>
    @foreach($familles as $f)
    <div style="margin-bottom:20px;">
        <div style="font-weight:600;font-size:13px;color:#64748b;text-transform:uppercase;margin-bottom:8px;">{{ $f->label }}</div>
        <div style="display:flex;flex-wrap:wrap;gap:8px;">
            @forelse($f->categories as $c)
                <div style="display:flex;align-items:center;gap:6px;padding:6px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;">
                    <code style="font-size:11px;">{{ $c->code }}</code> {{ $c->label }}
                    <form method="POST" action="{{ route('reglages.categories.destroy', $c) }}" onsubmit="return confirm('?')" style="display:inline;">@csrf @method('DELETE')
                        <button style="background:none;border:none;color:#ef4444;cursor:pointer;padding:0;"><i class="fas fa-times"></i></button>
                    </form>
                </div>
            @empty
                <span style="color:#94a3b8;font-size:12px;">Aucune catégorie</span>
            @endforelse
        </div>
    </div>
    @endforeach
</div></div>
@endsection