@extends('layouts.app')

@section('titre', 'Salariés')

@section('contenu')
    <h1 class="mb-1 text-xl font-semibold">Salariés</h1>
    <p class="mb-4 text-sm text-slate-500">
        Chaque salarié appartient à un pôle. Il figure au planning des effectifs de ce pôle et,
        s'il est de la logistique, peut être affecté aux tournées.
    </p>

    @if ($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('equipiers.enregistrer') }}" class="carte mb-4 flex flex-wrap items-end gap-3">
        @csrf
        <label class="min-w-40 flex-1"><span class="etiquette">Prénom</span>
            <input name="prenom" required value="{{ old('prenom') }}" class="champ"></label>
        <label class="min-w-40 flex-1"><span class="etiquette">Nom (facultatif)</span>
            <input name="nom" value="{{ old('nom') }}" class="champ"></label>
        <label class="min-w-40 flex-1"><span class="etiquette">Pôle</span>
            <select name="pole_id" required class="champ">
                @foreach ($poles as $pole)
                    <option value="{{ $pole->id }}" @selected((int) old('pole_id') === $pole->id)>{{ $pole->nom }}</option>
                @endforeach
            </select>
        </label>
        <button type="submit" class="bouton-principal">Ajouter</button>
    </form>

    @forelse ($equipiers as $nomPole => $salaries)
        <h2 class="mt-6 mb-2 text-sm font-semibold text-slate-500 uppercase">{{ $nomPole }}</h2>

        @foreach ($salaries as $equipier)
            <div class="carte mb-2 {{ $equipier->actif ? '' : 'opacity-60' }}">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <p class="font-medium">
                            {{ $equipier->prenom }} {{ $equipier->nom }}
                            @unless ($equipier->actif)
                                <span class="ml-1 text-sm font-normal text-slate-500">ne figure plus au planning</span>
                            @endunless
                        </p>
                        @if ($equipier->compte)
                            <p class="text-sm text-slate-600">Accès personnel : {{ $equipier->compte->email }}</p>
                        @else
                            <p class="text-sm text-slate-500">Pas d'accès personnel.</p>
                        @endif
                    </div>
                    <form method="POST" action="{{ route('equipiers.basculer', $equipier) }}">
                        @csrf
                        <button type="submit" class="text-sm font-medium text-marque-700 hover:underline">
                            {{ $equipier->actif ? 'Retirer du planning' : 'Remettre au planning' }}
                        </button>
                    </form>
                </div>

                @unless ($equipier->compte)
                    <details class="mt-3 border-t border-slate-100 pt-3">
                        <summary class="cursor-pointer text-sm font-medium text-marque-700">Ouvrir un accès personnel</summary>
                        <form method="POST" action="{{ route('equipiers.acces', $equipier) }}"
                              class="mt-3 flex flex-wrap items-end gap-3">
                            @csrf
                            <label class="min-w-48 flex-1"><span class="etiquette">Adresse e-mail</span>
                                <input name="email" type="email" required class="champ"></label>
                            <label class="min-w-40 flex-1"><span class="etiquette">Mot de passe</span>
                                <input name="mot_de_passe" type="password" autocomplete="new-password"
                                       required class="champ"></label>
                            <label class="min-w-40 flex-1"><span class="etiquette">Répéter</span>
                                <input name="mot_de_passe_confirmation" type="password" autocomplete="new-password"
                                       required class="champ"></label>
                            <button type="submit" class="bouton-secondaire">Ouvrir l'accès</button>
                            <p class="w-full text-sm text-slate-500">
                                Dix caractères au minimum. Le salarié verra son planning et celui de son pôle,
                                et sa tournée s'il est de la logistique.
                            </p>
                        </form>
                    </details>
                @endunless
            </div>
        @endforeach
    @empty
        <p class="text-sm text-slate-500">Aucun salarié enregistré dans vos pôles.</p>
    @endforelse
@endsection