@extends('layouts.app')
@section('title', 'Familles & Catégories')
@section('breadcrumb', 'Réglages / Familles')
@section('content')
<div class="page-header"><h1 class="page-title"><i class="fas fa-layer-group" style="color:var(--primary)"></i> Familles & Catégories</h1><a href="{{ route('reglages.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Réglages</a></div>
@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
<div class="grid-2">
    {{-- Familles --}}
    <div class="card"><div class="card-header"><h3 class="card-title">Familles</h3></div>
    <div class="table-wrap"><table class="table">
        <thead><tr><th>Code</th><th>Label</th><th>Catégories</th><th></th></tr></thead>
        <tbody>
        @forelse($familles as $f)
            <tr><td><code>{{ $f->code }}</code></td><td>{{ $f->label }}</td><td>{{ $f->categories->count() }}</td>
            <td>
                <div class="table-actions">
                    <form method="POST" action="{{ route('reglages.familles.destroy', $f) }}" onsubmit="return confirm('Supprimer ?')">@csrf @method('DELETE')
                        <button type="submit" class="action-btn danger" title="Supprimer"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </td></tr>
        @empty<tr><td colspan="4" class="empty-state">Aucune famille</td></tr>@endforelse
        </tbody>
    </table></div>
    <div class="card-body" style="border-top:1px solid #e2e8f0;">
        <form method="POST" action="{{ route('reglages.familles.store') }}" style="display:flex;gap:8px;">
            @csrf
            <input type="text" name="code" class="form-control" placeholder="Code" style="max-width:100px;" required>
            <input type="text" name="label" class="form-control" placeholder="Label famille" required>
            <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i></button>
        </form>
    </div></div>

    {{-- Catégories --}}
    <div class="card"><div class="card-header"><h3 class="card-title">Catégories</h3></div>
    <div class="table-wrap" style="max-height:400px;overflow-y:auto;"><table class="table">
        <thead><tr><th>Code</th><th>Label</th><th>Famille</th><th></th></tr></thead>
        <tbody>
        @foreach($familles as $f)@foreach($f->categories as $c)
            <tr><td><code>{{ $c->code }}</code></td><td>{{ $c->label }}</td><td>{{ $f->label }}</td>
            <td>
                <div class="table-actions">
                    <form method="POST" action="{{ route('reglages.categories.destroy', $c) }}" onsubmit="return confirm('Supprimer ?')">@csrf @method('DELETE')
                        <button type="submit" class="action-btn danger" title="Supprimer"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </td></tr>
        @endforeach
        @endforeach
        </tbody>
    </table></div>
    <div class="card-body" style="border-top:1px solid #e2e8f0;">
        <form method="POST" action="{{ route('reglages.categories.store') }}" style="display:flex;gap:8px;flex-wrap:wrap;">
            @csrf
            <select name="famille_id" class="form-control" style="max-width:150px;" 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" style="max-width:90px;" required>
            <input type="text" name="label" class="form-control" placeholder="Label catégorie" required>
            <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i></button>
        </form>
    </div></div>
</div>
@endsection