@extends('layouts.app')

@section('title', 'Paramétrage équipe · ' . $organization->name)
@section('eyebrow', 'Onboarding')
@section('heading', 'Configurer l’équipe')

@section('content')
<div class="team-setup-page">
    <section class="team-setup-hero">
        <div>
            <span class="team-setup-kicker">PARAMÉTRAGE OBLIGATOIRE</span>
            <h2>Préparer le futur planning</h2>
            <p>
                Configure les sections, les postes horaires et les salariées
                avant d’activer le planning mensuel.
            </p>
        </div>

        <div class="team-setup-progress">
            <strong>{{ collect($steps)->filter()->count() }}/3</strong>
            <span>étapes terminées</span>
        </div>
    </section>

    <div class="team-setup-steps">
        @foreach([
            ['key' => 'sections', 'number' => 1, 'title' => 'Sections'],
            ['key' => 'shifts', 'number' => 2, 'title' => 'Postes horaires'],
            ['key' => 'employees', 'number' => 3, 'title' => 'Salariées'],
        ] as $step)
            <div class="team-step {{ $steps[$step['key']] ? 'done' : '' }}">
                <span>{{ $steps[$step['key']] ? '✓' : $step['number'] }}</span>
                <div>
                    <b>{{ $step['title'] }}</b>
                    <small>
                        {{ $steps[$step['key']]
                            ? 'Configuré'
                            : 'À compléter' }}
                    </small>
                </div>
            </div>
        @endforeach
    </div>

    @if($isComplete)
        <div class="team-setup-ready">
            <span class="team-state-dot"></span>
            <div>
                <b>Le socle équipe est configuré.</b>
                <p>
                    Les données sont prêtes pour la prochaine étape :
                    planning mensuel et calcul d’encadrement.
                </p>
            </div>
        </div>
    @endif

    <section class="team-setup-section">
        <div class="team-setup-section-head">
            <div>
                <span>ÉTAPE 1</span>
                <h2>Sections d’accueil</h2>
                <p>
                    Création libre, sans limite prédéfinie.
                    Le nombre de places est obligatoire.
                </p>
            </div>
            <button
                class="btn primary"
                type="button"
                onclick="document.getElementById('section-create').showModal()"
            >
                + Ajouter une section
            </button>
        </div>

        <div class="team-setup-card-grid">
            @forelse($sections as $section)
                <details class="team-config-card {{ $section->is_active ? '' : 'inactive' }}">
                    <summary>
                        <span
                            class="team-config-color"
                            style="background: {{ $section->color }}"
                        ></span>
                        <div>
                            <b>{{ $section->name }}</b>
                            <small>
                                {{ $section->capacity }} place(s)
                                · ordre {{ $section->sort_order }}
                            </small>
                        </div>
                        <span class="team-config-status">
                            {{ $section->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </summary>

                    <form
                        method="post"
                        action="{{ route('tenant.team-setup.sections.update', $section->id) }}"
                        class="team-config-form"
                    >
                        @csrf
                        @method('PATCH')

                        <label>
                            Nom
                            <input name="name" value="{{ $section->name }}" required>
                        </label>

                        <label>
                            Nombre de places
                            <input
                                type="number"
                                name="capacity"
                                min="1"
                                value="{{ $section->capacity }}"
                                required
                            >
                        </label>

                        <label>
                            Couleur
                            <select name="color">
                                @foreach([
                                    '#3D3A6B' => 'Violet profond',
                                    '#5B51A8' => 'Violet',
                                    '#7A6DD4' => 'Lavande',
                                    '#9B8CEC' => 'Lavande claire',
                                    '#B7ACF2' => 'Lilas',
                                    '#6A6880' => 'Gris violet',
                                ] as $value => $label)
                                    <option
                                        value="{{ $value }}"
                                        @selected($section->color === $value)
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        <label>
                            Ordre
                            <input
                                type="number"
                                name="sort_order"
                                min="0"
                                value="{{ $section->sort_order }}"
                            >
                        </label>

                        <label class="team-check full">
                            <input type="hidden" name="is_active" value="0">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                @checked($section->is_active)
                            >
                            Section active
                        </label>

                        <button class="btn primary full">
                            Enregistrer
                        </button>
                    </form>
                </details>
            @empty
                <div class="team-setup-empty">
                    Aucune section. Commence par créer les espaces
                    d’accueil de la structure.
                </div>
            @endforelse
        </div>
    </section>

    <section class="team-setup-section">
        <div class="team-setup-section-head">
            <div>
                <span>ÉTAPE 2</span>
                <h2>Postes horaires types</h2>
                <p>
                    Matin, soir, petite coupure, grande coupure ou tout
                    autre modèle propre à la crèche.
                </p>
            </div>
            <button
                class="btn primary"
                type="button"
                onclick="document.getElementById('shift-create').showModal()"
            >
                + Ajouter un poste
            </button>
        </div>

        <div class="team-shift-list">
            @forelse($shifts as $shift)
                <details class="team-shift-row {{ $shift->is_active ? '' : 'inactive' }}">
                    <summary>
                        <span
                            class="team-shift-code"
                            style="background: {{ $shift->color }}"
                        >
                            {{ $shift->code }}
                        </span>

                        <div class="team-shift-main">
                            <b>{{ $shift->name }}</b>
                            <small>
                                {{ substr($shift->start_time, 0, 5) }}
                                –
                                {{ substr($shift->end_time, 0, 5) }}

                                @if($shift->break_start && $shift->break_end)
                                    · pause
                                    {{ substr($shift->break_start, 0, 5) }}
                                    –
                                    {{ substr($shift->break_end, 0, 5) }}
                                @endif
                            </small>
                        </div>

                        <span class="team-config-status">
                            {{ $shift->is_active ? 'Actif' : 'Inactif' }}
                        </span>
                    </summary>

                    <form
                        method="post"
                        action="{{ route('tenant.team-setup.shifts.update', $shift->id) }}"
                        class="team-config-form"
                    >
                        @csrf
                        @method('PATCH')

                        <label>
                            Code
                            <input name="code" value="{{ $shift->code }}" required>
                        </label>

                        <label>
                            Nom
                            <input name="name" value="{{ $shift->name }}" required>
                        </label>

                        <label>
                            Début
                            <input
                                type="time"
                                name="start_time"
                                value="{{ substr($shift->start_time, 0, 5) }}"
                                required
                            >
                        </label>

                        <label>
                            Fin
                            <input
                                type="time"
                                name="end_time"
                                value="{{ substr($shift->end_time, 0, 5) }}"
                                required
                            >
                        </label>

                        <label>
                            Début de pause
                            <input
                                type="time"
                                name="break_start"
                                value="{{ $shift->break_start ? substr($shift->break_start, 0, 5) : '' }}"
                            >
                        </label>

                        <label>
                            Fin de pause
                            <input
                                type="time"
                                name="break_end"
                                value="{{ $shift->break_end ? substr($shift->break_end, 0, 5) : '' }}"
                            >
                        </label>

                        <label>
                            Couleur
                            <select name="color">
                                @foreach([
                                    '#3D3A6B' => 'Violet profond',
                                    '#5B51A8' => 'Violet',
                                    '#7A6DD4' => 'Lavande',
                                    '#9B8CEC' => 'Lavande claire',
                                    '#B7ACF2' => 'Lilas',
                                    '#6A6880' => 'Gris violet',
                                ] as $value => $label)
                                    <option
                                        value="{{ $value }}"
                                        @selected($shift->color === $value)
                                    >
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        <label>
                            Ordre
                            <input
                                type="number"
                                name="sort_order"
                                min="0"
                                value="{{ $shift->sort_order }}"
                            >
                        </label>

                        <label class="team-check full">
                            <input type="hidden" name="is_active" value="0">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                @checked($shift->is_active)
                            >
                            Poste actif
                        </label>

                        <button class="btn primary full">
                            Enregistrer
                        </button>
                    </form>
                </details>
            @empty
                <div class="team-setup-empty">
                    Aucun poste horaire. Ajoute au minimum les modèles
                    réellement utilisés par l’équipe.
                </div>
            @endforelse
        </div>
    </section>

    <section class="team-setup-section">
        <div class="team-setup-section-head">
            <div>
                <span>ÉTAPE 3</span>
                <h2>Salariées et droits</h2>
                <p>
                    Contrat hebdomadaire, congés, poste, section,
                    compte et droit de modifier le planning.
                </p>
            </div>
            <button
                class="btn primary"
                type="button"
                onclick="document.getElementById('employee-create').showModal()"
                @disabled($sections->isEmpty() || $shifts->isEmpty())
            >
                + Ajouter une salariée
            </button>
        </div>

        @if($sections->isEmpty() || $shifts->isEmpty())
            <div class="team-setup-warning">
                Crée au moins une section et un poste horaire avant
                d’ajouter les salariées.
            </div>
        @endif

        <div class="team-employee-list">
            @forelse($employees as $employee)
                <details class="team-employee-row {{ $employee->is_active ? '' : 'inactive' }}">
                    <summary>
                        <span class="team-avatar">
                            {{ mb_strtoupper(mb_substr($employee->first_name, 0, 1)) }}
                            {{ mb_strtoupper(mb_substr($employee->last_name, 0, 1)) }}
                        </span>

                        <div class="team-employee-main">
                            <b>
                                {{ $employee->first_name }}
                                {{ $employee->last_name }}
                            </b>
                            <small>
                                {{ $employee->job_type }}
                                · {{ number_format($employee->weekly_hours, 2, ',', ' ') }} h/semaine
                                · {{ number_format($employee->annual_leave_days, 2, ',', ' ') }} j de congés
                            </small>
                        </div>

                        <div class="team-employee-tags">
                            @if($employee->section)
                                <span>{{ $employee->section->name }}</span>
                            @endif

                            @if($employee->defaultShift)
                                <span>{{ $employee->defaultShift->code }}</span>
                            @endif

                            @if($employee->can_manage_planning)
                                <span class="manager">Gestion planning</span>
                            @endif

                            @if($employee->user_id)
                                <span class="account">Compte actif</span>
                            @endif
                        </div>
                    </summary>

                    <form
                        method="post"
                        action="{{ route('tenant.team-setup.employees.update', $employee->id) }}"
                        class="team-config-form team-employee-form"
                    >
                        @csrf
                        @method('PATCH')

                        <label>
                            Prénom
                            <input
                                name="first_name"
                                value="{{ $employee->first_name }}"
                                required
                            >
                        </label>

                        <label>
                            Nom
                            <input
                                name="last_name"
                                value="{{ $employee->last_name }}"
                                required
                            >
                        </label>

                        <label class="full">
                            Adresse de connexion
                            <input
                                type="email"
                                name="email"
                                value="{{ $employee->email }}"
                                required
                            >
                        </label>

                        <label>
                            Type de poste
                            <input
                                name="job_type"
                                value="{{ $employee->job_type }}"
                                placeholder="Directrice, EJE, AP, CAP AEPE…"
                                required
                            >
                        </label>

                        <label>
                            Durée hebdomadaire
                            <input
                                type="number"
                                step="0.25"
                                min="1"
                                max="60"
                                name="weekly_hours"
                                value="{{ $employee->weekly_hours }}"
                                required
                            >
                        </label>

                        <label>
                            Jours de congés annuels
                            <input
                                type="number"
                                step="0.5"
                                min="0"
                                name="annual_leave_days"
                                value="{{ $employee->annual_leave_days }}"
                                required
                            >
                        </label>

                        <label>
                            Section principale
                            <select name="section_id">
                                <option value="">Aucune / polyvalente</option>
                                @foreach($sections->where('is_active', true) as $section)
                                    <option
                                        value="{{ $section->id }}"
                                        @selected($employee->section_id === $section->id)
                                    >
                                        {{ $section->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        <label>
                            Poste horaire par défaut
                            <select name="default_shift_template_id">
                                <option value="">Aucun</option>
                                @foreach($shifts->where('is_active', true) as $shift)
                                    <option
                                        value="{{ $shift->id }}"
                                        @selected($employee->default_shift_template_id === $shift->id)
                                    >
                                        {{ $shift->code }} · {{ $shift->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        @if(!$employee->user_id)
                            <label class="team-check full">
                                <input
                                    type="checkbox"
                                    name="create_account"
                                    value="1"
                                    data-account-toggle
                                >
                                Créer le compte de connexion
                            </label>

                            <label class="full team-password-field" hidden>
                                Mot de passe temporaire
                                <input
                                    type="password"
                                    name="temporary_password"
                                    minlength="8"
                                    autocomplete="new-password"
                                >
                            </label>
                        @endif

                        <label class="team-check full">
                            <input
                                type="checkbox"
                                name="can_manage_planning"
                                value="1"
                                @checked($employee->can_manage_planning)
                            >
                            Autoriser cette salariée à modifier le planning
                        </label>

                        <label class="team-check full">
                            <input type="hidden" name="is_active" value="0">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                @checked($employee->is_active)
                            >
                            Salariée active
                        </label>

                        <button class="btn primary full">
                            Enregistrer la fiche
                        </button>
                    </form>
                </details>
            @empty
                <div class="team-setup-empty">
                    Aucune salariée n’est encore configurée.
                </div>
            @endforelse
        </div>
    </section>
</div>

<dialog id="section-create" class="team-dialog">
    <form
        method="post"
        action="{{ route('tenant.team-setup.sections.store') }}"
        class="team-dialog-form"
    >
        @csrf

        <div class="team-dialog-head">
            <div>
                <span>SECTION</span>
                <h2>Nouvelle section</h2>
            </div>
            <button
                type="button"
                onclick="this.closest('dialog').close()"
            >
                ×
            </button>
        </div>

        <div class="team-config-form">
            <label>
                Nom
                <input name="name" placeholder="Bébés" required>
            </label>

            <label>
                Nombre de places
                <input type="number" min="1" name="capacity" required>
            </label>

            <label>
                Couleur
                <select name="color">
                    <option value="#3D3A6B">Violet profond</option>
                    <option value="#5B51A8">Violet</option>
                    <option value="#7A6DD4" selected>Lavande</option>
                    <option value="#9B8CEC">Lavande claire</option>
                    <option value="#B7ACF2">Lilas</option>
                    <option value="#6A6880">Gris violet</option>
                </select>
            </label>

            <label>
                Ordre
                <input type="number" min="0" name="sort_order" value="0">
            </label>

            <button class="btn primary full">
                Créer la section
            </button>
        </div>
    </form>
</dialog>

<dialog id="shift-create" class="team-dialog">
    <form
        method="post"
        action="{{ route('tenant.team-setup.shifts.store') }}"
        class="team-dialog-form"
    >
        @csrf

        <div class="team-dialog-head">
            <div>
                <span>POSTE HORAIRE</span>
                <h2>Nouveau poste type</h2>
            </div>
            <button
                type="button"
                onclick="this.closest('dialog').close()"
            >
                ×
            </button>
        </div>

        <div class="team-config-form">
            <label>
                Code
                <input name="code" placeholder="M" required>
            </label>

            <label>
                Nom
                <input name="name" placeholder="Matin" required>
            </label>

            <label>
                Début
                <input type="time" name="start_time" required>
            </label>

            <label>
                Fin
                <input type="time" name="end_time" required>
            </label>

            <label>
                Début de pause
                <input type="time" name="break_start">
            </label>

            <label>
                Fin de pause
                <input type="time" name="break_end">
            </label>

            <label>
                Couleur
                <select name="color">
                    <option value="#3D3A6B">Violet profond</option>
                    <option value="#5B51A8" selected>Violet</option>
                    <option value="#7A6DD4">Lavande</option>
                    <option value="#9B8CEC">Lavande claire</option>
                    <option value="#B7ACF2">Lilas</option>
                    <option value="#6A6880">Gris violet</option>
                </select>
            </label>

            <label>
                Ordre
                <input type="number" min="0" name="sort_order" value="0">
            </label>

            <button class="btn primary full">
                Créer le poste
            </button>
        </div>
    </form>
</dialog>

<dialog id="employee-create" class="team-dialog team-dialog-wide">
    <form
        method="post"
        action="{{ route('tenant.team-setup.employees.store') }}"
        class="team-dialog-form"
    >
        @csrf

        <div class="team-dialog-head">
            <div>
                <span>SALARIÉE</span>
                <h2>Nouvelle fiche</h2>
            </div>
            <button
                type="button"
                onclick="this.closest('dialog').close()"
            >
                ×
            </button>
        </div>

        <div class="team-config-form team-employee-form">
            <label>
                Prénom
                <input name="first_name" required>
            </label>

            <label>
                Nom
                <input name="last_name" required>
            </label>

            <label class="full">
                Adresse de connexion
                <input type="email" name="email" required>
            </label>

            <label>
                Type de poste
                <input
                    name="job_type"
                    placeholder="Directrice, EJE, AP, CAP AEPE…"
                    required
                >
            </label>

            <label>
                Durée hebdomadaire
                <input
                    type="number"
                    step="0.25"
                    min="1"
                    max="60"
                    name="weekly_hours"
                    value="35"
                    required
                >
            </label>

            <label>
                Jours de congés annuels
                <input
                    type="number"
                    step="0.5"
                    min="0"
                    name="annual_leave_days"
                    value="25"
                    required
                >
            </label>

            <label>
                Section principale
                <select name="section_id">
                    <option value="">Aucune / polyvalente</option>
                    @foreach($sections->where('is_active', true) as $section)
                        <option value="{{ $section->id }}">
                            {{ $section->name }}
                        </option>
                    @endforeach
                </select>
            </label>

            <label>
                Poste horaire par défaut
                <select name="default_shift_template_id">
                    <option value="">Aucun</option>
                    @foreach($shifts->where('is_active', true) as $shift)
                        <option value="{{ $shift->id }}">
                            {{ $shift->code }} · {{ $shift->name }}
                        </option>
                    @endforeach
                </select>
            </label>

            <label class="team-check full">
                <input
                    type="checkbox"
                    name="create_account"
                    value="1"
                    checked
                    data-account-toggle
                >
                Créer immédiatement le compte de connexion
            </label>

            <label class="full team-password-field">
                Mot de passe temporaire
                <input
                    type="password"
                    name="temporary_password"
                    minlength="8"
                    autocomplete="new-password"
                >
            </label>

            <label class="team-check full">
                <input
                    type="checkbox"
                    name="can_manage_planning"
                    value="1"
                >
                Autoriser cette salariée à modifier le planning
            </label>

            <button class="btn primary full">
                Ajouter la salariée
            </button>
        </div>
    </form>
</dialog>
@endsection