@extends('layouts.app')
@section('titre', 'Nouveau message')
@section('contenu')
    <h1>Nouveau message</h1>

    <form method="POST" action="{{ route('messages.store') }}" class="card js-message-form">
        @csrf

        <h2>Destinataires</h2>
        <div class="cible-choix">
            <label class="radio-carte">
                <input type="radio" name="cible_type" value="personne" class="js-cible" @checked(old('cible_type', 'personne') === 'personne')>
                <span>👤 Une personne</span>
            </label>
            <label class="radio-carte">
                <input type="radio" name="cible_type" value="selection" class="js-cible" @checked(old('cible_type') === 'selection')>
                <span>👥 Plusieurs personnes</span>
            </label>
            <label class="radio-carte">
                <input type="radio" name="cible_type" value="groupe" class="js-cible" @checked(old('cible_type') === 'groupe')>
                <span>🏷️ Un groupe</span>
            </label>
        </div>

        <div class="cible-bloc js-cible-personne">
            <label for="destinataire_unique">Personne</label>
            <select id="destinataire_unique" name="destinataire_unique">
                <option value="">— Choisir —</option>
                @foreach($utilisateurs as $user)
                    <option value="{{ $user->id }}" @selected((string) old('destinataire_unique') === (string) $user->id)>
                        {{ $user->name }} ({{ $user->roleLabel() }})
                    </option>
                @endforeach
            </select>
        </div>

        <div class="cible-bloc js-cible-selection" hidden>
            <label>Personnes (cocher plusieurs)</label>
            <div class="cases">
                @foreach($utilisateurs as $user)
                    <label class="case">
                        <input type="checkbox" name="destinataires[]" value="{{ $user->id }}"
                               @checked(collect(old('destinataires', []))->contains($user->id))>
                        {{ $user->name }} <span class="muted">({{ $user->roleLabel() }})</span>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="cible-bloc js-cible-groupe" hidden>
            <label for="groupe">Groupe</label>
            <select id="groupe" name="groupe">
                <option value="">— Choisir un groupe —</option>
                @foreach($groupes as $cle => $g)
                    <option value="{{ $cle }}" @selected(old('groupe') === $cle)>{{ $g['label'] }}</option>
                @endforeach
            </select>
            <p class="muted">Le message part à tous les utilisateurs actifs du groupe choisi.</p>
        </div>

        <h2>Message</h2>
        <div class="grid">
            <div>
                <label for="priorite">Priorité</label>
                <select id="priorite" name="priorite">
                    @foreach($priorites as $cle => $p)
                        <option value="{{ $cle }}" @selected(old('priorite', 'normale') === $cle)>{{ $p['picto'] }} {{ $p['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="sujet">Sujet <span class="muted">(facultatif)</span></label>
                <input type="text" id="sujet" name="sujet" value="{{ old('sujet') }}" maxlength="150" placeholder="ex. Changement de planning L1">
            </div>
        </div>

        <label for="corps">Message *</label>
        <textarea id="corps" name="corps" rows="5" maxlength="5000" required placeholder="Votre message…">{{ old('corps') }}</textarea>

        <div class="form-footer">
            <button type="submit" class="btn">Envoyer</button>
            <a href="{{ route('messages.index') }}" class="btn ghost">Annuler</a>
        </div>
    </form>
@endsection