@extends('layouts.app')

@section('title', 'Organigramme · ' . $organization->name)
@section('eyebrow', 'Vie associative')
@section('heading', 'Organigramme et mandats')

@section('content')
<div class="organization-chart-page">
    <section class="org-chart-hero">
        <div>
            <span>COMPTE UNIQUE</span>
            <h2>Une personne, plusieurs qualités</h2>
            <p>
                Chaque membre conserve un seul compte Ribambin,
                même lorsqu’il est parent, administrateur et membre
                du bureau.
            </p>
        </div>

        <button
            class="btn secondary"
            type="button"
            data-org-function-open
        >
            Ajouter une fonction
        </button>
    </section>

    <section class="org-chart-grid">
        @foreach($functions as $function)
            @php
                $current = $function->mandates
                    ->firstWhere('is_current', true);
            @endphp

            <article class="org-function-card">
                <header>
                    <span class="org-function-icon">
                        <svg viewBox="0 0 24 24">
                            <rect x="9" y="3" width="6" height="5" rx="1"/>
                            <rect x="3" y="16" width="6" height="5" rx="1"/>
                            <rect x="15" y="16" width="6" height="5" rx="1"/>
                            <path d="M12 8v4M6 16v-4h12v4"/>
                        </svg>
                    </span>

                    <div>
                        <h3>{{ $function->label }}</h3>
                        <p>
                            {{ $function->is_office_member
                                ? 'Membre du bureau'
                                : ucfirst($function->function_type) }}
                        </p>
                    </div>
                </header>

                @if($current)
                    <div class="org-holder">
                        <span class="avatar">
                            {{ mb_strtoupper(
                                mb_substr($current->user->name, 0, 2)
                            ) }}
                        </span>

                        <div>
                            <b>{{ $current->user->name }}</b>
                            <small>
                                Depuis le
                                {{ $current->starts_on->format('d/m/Y') }}
                            </small>
                        </div>
                    </div>

                    @if($function->functional_email)
                        <div class="org-functional-email">
                            <span>Adresse fonctionnelle</span>
                            <b>{{ $function->functional_email }}</b>
                        </div>
                    @endif

                    <form
                        method="post"
                        action="{{ route(
                            'tenant.organization-chart.mandates.end',
                            $current
                        ) }}"
                        class="org-end-form"
                    >
                        @csrf
                        @method('PATCH')

                        <input
                            type="date"
                            name="ends_on"
                            value="{{ now()->toDateString() }}"
                            required
                        >

                        <button class="btn secondary">
                            Clôturer le mandat
                        </button>
                    </form>
                @else
                    <div class="org-function-empty">
                        <b>Fonction vacante</b>
                        <span>
                            Attribuez-la à un membre de la structure.
                        </span>
                    </div>
                @endif

                <details class="org-assign">
                    <summary>
                        {{ $current
                            ? 'Attribuer un nouveau mandat'
                            : 'Attribuer la fonction' }}
                    </summary>

                    <form
                        method="post"
                        action="{{ route(
                            'tenant.organization-chart.mandates.assign',
                            $function
                        ) }}"
                    >
                        @csrf

                        <label>
                            Titulaire
                            <select name="user_id" required>
                                <option value="">Choisir</option>
                                @foreach($members as $member)
                                    <option value="{{ $member->id }}">
                                        {{ $member->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>

                        <label>
                            Début du mandat
                            <input
                                type="date"
                                name="starts_on"
                                value="{{ now()->toDateString() }}"
                                required
                            >
                        </label>

                        <label>
                            Fin prévue
                            <input type="date" name="ends_on">
                        </label>

                        @if($function->functional_email)
                            <label class="org-check">
                                <input
                                    type="checkbox"
                                    name="attach_functional_email"
                                    value="1"
                                    checked
                                >
                                <span>
                                    Autoriser la connexion avec
                                    {{ $function->functional_email }}
                                </span>
                            </label>
                        @endif

                        <button class="btn primary">
                            Enregistrer le mandat
                        </button>
                    </form>
                </details>

                @if($function->mandates->count())
                    <details class="org-history">
                        <summary>
                            Historique des mandats
                        </summary>

                        @foreach($function->mandates as $mandate)
                            <div>
                                <b>{{ $mandate->user->name }}</b>
                                <span>
                                    {{ $mandate->starts_on->format('d/m/Y') }}
                                    →
                                    {{ $mandate->ends_on?->format('d/m/Y')
                                        ?? 'en cours' }}
                                </span>
                            </div>
                        @endforeach
                    </details>
                @endif
            </article>
        @endforeach
    </section>

    <section class="org-people-section">
        <header>
            <div>
                <span>IDENTITÉS ET ACCÈS</span>
                <h2>Comptes et adresses</h2>
                <p>
                    Les adresses personnelles et fonctionnelles
                    rejoignent le même compte.
                </p>
            </div>
        </header>

        <div class="org-people-list">
            @foreach($members as $member)
                <details class="org-person-card">
                    <summary>
                        <span class="avatar">
                            {{ mb_strtoupper(
                                mb_substr($member->name, 0, 2)
                            ) }}
                        </span>

                        <span class="org-person-main">
                            <b>{{ $member->name }}</b>
                            <small>
                                {{ $member->accessRoleAssignments
                                    ->pluck('role.label')
                                    ->filter()
                                    ->join(' · ') ?: 'Aucun rôle' }}
                            </small>
                        </span>

                        <span class="org-address-count">
                            {{ $member->emailAddresses->count() }}
                            adresse(s)
                        </span>
                    </summary>

                    <div class="org-person-content">
                        <div class="org-address-list">
                            @foreach($member->emailAddresses as $address)
                                <div>
                                    <span>
                                        <b>{{ $address->email }}</b>
                                        <small>
                                            {{ $address->label
                                                ?: ucfirst(
                                                    $address->email_type
                                                ) }}
                                        </small>
                                    </span>

                                    <span class="org-address-flags">
                                        @if($address->can_login)
                                            <em>Connexion</em>
                                        @endif
                                        @if($address->receives_personal)
                                            <em>Personnel</em>
                                        @endif
                                        @if($address->receives_functional)
                                            <em>Fonctionnel</em>
                                        @endif
                                    </span>
                                </div>
                            @endforeach
                        </div>

                        <form
                            method="post"
                            action="{{ route(
                                'tenant.organization-chart.addresses.store',
                                $member
                            ) }}"
                            class="org-address-form"
                        >
                            @csrf

                            <input
                                type="email"
                                name="email"
                                placeholder="Nouvelle adresse"
                                required
                            >

                            <select name="email_type">
                                <option value="personal">
                                    Personnelle
                                </option>
                                <option value="functional">
                                    Fonctionnelle
                                </option>
                            </select>

                            <input
                                name="label"
                                placeholder="Libellé"
                            >

                            <label>
                                <input
                                    type="checkbox"
                                    name="can_login"
                                    value="1"
                                    checked
                                >
                                Connexion
                            </label>

                            <label>
                                <input
                                    type="checkbox"
                                    name="receives_personal"
                                    value="1"
                                >
                                Notifications personnelles
                            </label>

                            <label>
                                <input
                                    type="checkbox"
                                    name="receives_functional"
                                    value="1"
                                >
                                Notifications fonctionnelles
                            </label>

                            <button class="btn primary">
                                Ajouter l’adresse
                            </button>
                        </form>
                    </div>
                </details>
            @endforeach
        </div>
    </section>
</div>

<dialog class="org-function-dialog" data-org-function-dialog>
    <form
        method="post"
        action="{{ route(
            'tenant.organization-chart.functions.store'
        ) }}"
    >
        @csrf

        <header>
            <h2>Ajouter une fonction</h2>
            <button type="button" data-org-function-close>
                ×
            </button>
        </header>

        <label>
            Nom de la fonction
            <input name="label" required>
        </label>

        <label>
            Type
            <select name="function_type">
                <option value="association">
                    Associative
                </option>
                <option value="management">
                    Direction
                </option>
                <option value="operational">
                    Opérationnelle
                </option>
            </select>
        </label>

        <label>
            Adresse fonctionnelle
            <input
                type="email"
                name="functional_email"
                placeholder="fonction@structure.fr"
            >
        </label>

        <label class="org-check">
            <input
                type="checkbox"
                name="is_office_member"
                value="1"
            >
            <span>Membre du bureau</span>
        </label>

        <footer>
            <button
                type="button"
                class="btn secondary"
                data-org-function-close
            >
                Annuler
            </button>

            <button class="btn primary">
                Ajouter
            </button>
        </footer>
    </form>
</dialog>
@endsection