@extends('admin.layout')

@section('title', 'Nouvelle catégorie')

@section('content')
<style>
    .form-card { max-width: 560px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-size: 0.85rem; font-weight: 500; color: #374151; margin-bottom: 0.35rem; }
    .form-group input, .form-group select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; }
    .form-group input:focus { outline: none; border-color: #DC143C; }
    .form-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
    .btn { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; }
    .btn-primary { background: #DC143C; color: #fff; }
    .btn-outline { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
</style>

<div class="form-card">
    <h2 style="margin:0 0 1rem 0; font-size:1.25rem;">Nouvelle catégorie</h2>
    <form action="{{ route('admin.groups.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="name">Nom *</label>
            <input type="text" id="name" name="name" value="{{ old('name') }}" required maxlength="100">
            @error('name')<span style="color:#dc2626;font-size:0.8rem;">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label for="detail">Détail / Description (sous-titre)</label>
            <input type="text" id="detail" name="detail" value="{{ old('detail') }}" maxlength="255" placeholder="ex: Find people with similar relationship goals">
            @error('detail')<span style="color:#dc2626;font-size:0.8rem;">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label for="section">Section *</label>
            <input type="text" id="section" name="section" value="{{ old('section', 'general') }}" maxlength="80" placeholder="ex: goal_dating, plans_lifestyle, interests">
            @error('section')<span style="color:#dc2626;font-size:0.8rem;">{{ $message }}</span>@enderror
        </div>
        @include('admin.partials.image-upload', ['label' => 'Image de la catégorie'])
        <div class="form-group">
            <label for="overlay_color">Couleur overlay (hex ou nom)</label>
            <input type="text" id="overlay_color" name="overlay_color" value="{{ old('overlay_color') }}" maxlength="20" placeholder="ex: #8B4513 ou brown">
            @error('overlay_color')<span style="color:#dc2626;font-size:0.8rem;">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label for="sort_order">Ordre d’affichage</label>
            <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
            @error('sort_order')<span style="color:#dc2626;font-size:0.8rem;">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label><input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}> Catégorie active (visible dans l’app)</label>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Créer</button>
            <a href="{{ route('admin.groups.index') }}" class="btn btn-outline">Annuler</a>
        </div>
    </form>
</div>
@endsection