@extends('layouts.app')

@section('title', 'Tableau de bord · ' . $organization->name)
@section('eyebrow', 'Pilotage')
@section('heading', 'Tableau de bord')

@section('content')
@php
    $currentUserName = auth()->user()?->name
        ?? ($primaryRoleLabel === 'Trésorerie' ? 'Hugo' : $primaryRoleLabel);

    $placedKeys = $resolvedWidgets
        ->pluck('widget_key')
        ->all();

    $domains = [
        'finances' => 'Finances',
        'children' => 'Enfants',
        'team' => 'Équipe',
        'communication' => 'Communication',
        'governance' => 'Gouvernance',
    ];
@endphp

<div
    class="personal-dashboard"
    data-dashboard-root
    data-save-url="{{ route(
        'tenant.dashboard.personalized.save'
    ) }}"
>
    <section class="personal-dashboard-hero">
        <span class="personal-dashboard-halo halo-one"></span>
        <span class="personal-dashboard-halo halo-two"></span>

        <div class="personal-dashboard-hero-copy">
            <span class="personal-dashboard-kicker">
                Pilotage · {{ $primaryRoleLabel }}
            </span>

            <h2>Bonjour {{ $currentUserName }}</h2>

            <p>
                Les priorités du jour, les indicateurs utiles et les
                alertes de la structure sont réunis ici.
            </p>

            @if($milestone)
                <div class="personal-dashboard-streak">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5Z"/>
                    </svg>
                    <b>{{ $milestone }}</b>
                </div>
            @endif
        </div>

        @if($completionEnabled)
            <div
                class="personal-dashboard-ring"
                style="--completion: {{ $completion }}"
                aria-label="{{ $completion }} % des domaines à jour"
            >
                <svg viewBox="0 0 120 120" aria-hidden="true">
                    <circle
                        class="ring-bg"
                        cx="60"
                        cy="60"
                        r="50"
                        fill="none"
                        stroke-width="9"
                    />
                    <circle
                        class="ring-fg"
                        cx="60"
                        cy="60"
                        r="50"
                        fill="none"
                        stroke-width="9"
                        stroke-dasharray="314"
                        stroke-dashoffset="{{ 314 - (314 * $completion / 100) }}"
                    />
                    <text
                        class="ring-value"
                        x="60"
                        y="60"
                        text-anchor="middle"
                    >
                        {{ $completion }}%
                    </text>
                    <text
                        class="ring-label"
                        x="60"
                        y="76"
                        text-anchor="middle"
                    >
                        NIVEAU À JOUR
                    </text>
                </svg>
            </div>
        @endif
    </section>

    <section class="personal-dashboard-todo">
        <header>
            <span class="todo-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M9 11l3 3L22 4"/>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                </svg>
            </span>

            <div>
                <b>À faire aujourd’hui</b>
                <span>
                    Recommandations calculées à partir de vos modules
                </span>
            </div>

            <span class="todo-count">
                {{ count($recommendations) }}
                {{ count($recommendations) > 1
                    ? 'en attente'
                    : 'en attente' }}
            </span>
        </header>

        <div class="personal-dashboard-task-list">
            @forelse($recommendations as $recommendation)
                <a
                    class="personal-dashboard-task"
                    href="{{ $recommendation['link'] }}"
                >
                    <span
                        class="task-icon {{ $recommendation['urgency'] }}"
                    >
                        @if($recommendation['urgency'] === 'urg')
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M12 9v4M12 17h.01"/>
                                <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/>
                            </svg>
                        @elseif($recommendation['urgency'] === 'warn')
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M4 20V10M10 20V4M16 20v-7M20 20V8"/>
                            </svg>
                        @else
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="m20 6-11 11-5-5"/>
                            </svg>
                        @endif
                    </span>

                    <span class="task-copy">
                        <b>{{ $recommendation['label'] }}</b>
                        <span>{{ $recommendation['detail'] }}</span>
                    </span>

                    <span class="task-arrow">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m9 6 6 6-6 6"/>
                        </svg>
                    </span>
                </a>
            @empty
                <div class="personal-dashboard-empty-tasks">
                    <b>Tout est à jour</b>
                    <span>
                        Aucune action prioritaire n’est nécessaire.
                    </span>
                </div>
            @endforelse
        </div>
    </section>

    <div class="personal-dashboard-zone-head">
        <div>
            <b>Mes widgets</b>
            <span data-dashboard-subtitle>
                Vos indicateurs sont organisés selon votre modèle.
            </span>
        </div>

        @if($canPersonalize)
            <button
                class="btn secondary"
                type="button"
                data-dashboard-edit-toggle
            >
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M12 20h9"/>
                    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
                </svg>
                <span>Personnaliser</span>
            </button>
        @endif
    </div>

    <div
        class="personal-dashboard-grid"
        data-dashboard-grid
    >
        @foreach($resolvedWidgets as $item)
            @php
                $widget = $item['widget'];
                $data = $widgetData[$item['widget_key']];
                $allowedSizes = $widget->allowedSizeList();
            @endphp

            <article
                class="personal-widget size-{{ $item['widget_size'] }} tone-{{ $data['tone'] ?? 'neutral' }}"
                draggable="false"
                tabindex="0"
                data-dashboard-widget
                data-widget-key="{{ $item['widget_key'] }}"
                data-widget-size="{{ $item['widget_size'] }}"
                data-allowed-sizes="{{ implode(',', $allowedSizes) }}"
            >
                <div class="personal-widget-controls">
                    <button
                        type="button"
                        data-widget-size-cycle
                        aria-label="Changer la taille de {{ $widget->label }}"
                        title="Changer la taille"
                    >
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
                        </svg>
                    </button>

                    <button
                        type="button"
                        class="remove"
                        data-widget-remove
                        aria-label="Retirer {{ $widget->label }}"
                        title="Retirer"
                    >
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M18 6 6 18M6 6l12 12"/>
                        </svg>
                    </button>

                    <button
                        type="button"
                        data-widget-move-up
                        aria-label="Monter {{ $widget->label }}"
                        title="Monter"
                    >
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m18 15-6-6-6 6"/>
                        </svg>
                    </button>

                    <button
                        type="button"
                        data-widget-move-down
                        aria-label="Descendre {{ $widget->label }}"
                        title="Descendre"
                    >
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m6 9 6 6 6-6"/>
                        </svg>
                    </button>
                </div>

                <div class="personal-widget-label">
                    {{ $widget->label }}
                </div>

                <div class="personal-widget-value">
                    {{ $data['value'] }}
                </div>

                <div class="personal-widget-detail">
                    {{ $data['detail'] }}
                </div>

                @if(!empty($data['trend']))
                    <div class="personal-widget-trend">
                        {{ $data['trend'] }}
                    </div>
                @endif

                @if(
                    $item['widget_size'] === 'l'
                    && !empty($data['chart'])
                )
                    <div
                        class="personal-widget-chart"
                        data-widget-chart='@json($data["chart"])'
                    ></div>
                @endif

                <span class="personal-widget-size-badge">
                    {{ [
                        's' => 'Petit',
                        'm' => 'Moyen',
                        'l' => 'Large',
                    ][$item['widget_size']] }}
                </span>
            </article>
        @endforeach

        <button
            class="personal-widget-add size-s"
            type="button"
            data-widget-drawer-open
        >
            <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M12 5v14M5 12h14"/>
            </svg>
            <b>Ajouter un widget</b>
        </button>
    </div>

    @if($canPersonalize)
        <div
            class="personal-dashboard-edit-footer"
            data-dashboard-edit-footer
        >
            <form
                method="post"
                action="{{ route(
                    'tenant.dashboard.personalized.reset'
                ) }}"
                onsubmit="return confirm(
                    'Restaurer le modèle du rôle principal ?'
                )"
            >
                @csrf
                @method('DELETE')

                <button class="btn secondary" type="submit">
                    Réinitialiser au modèle du rôle
                </button>
            </form>

            <span data-dashboard-save-status>
                Les changements sont enregistrés automatiquement.
            </span>
        </div>
    @endif

    <div
        class="personal-widget-overlay"
        data-widget-drawer-overlay
    ></div>

    <aside
        class="personal-widget-drawer"
        data-widget-drawer
        aria-label="Catalogue de widgets"
    >
        <header>
            <b>Ajouter un widget</b>

            <button
                type="button"
                data-widget-drawer-close
                aria-label="Fermer le catalogue"
            >
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M18 6 6 18M6 6l12 12"/>
                </svg>
            </button>
        </header>

        <div class="personal-widget-drawer-note">
            <svg viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="9"/>
                <path d="M12 8h.01M11 12h1v4h1"/>
            </svg>

            <span>
                Vous ne voyez que les widgets correspondant à vos
                droits actuels.
            </span>
        </div>

        <div class="personal-widget-catalog">
            @foreach($domains as $domainKey => $domainLabel)
                @php
                    $domainWidgets = $availableWidgets
                        ->where('domain_key', $domainKey);
                @endphp

                @if($domainWidgets->isNotEmpty())
                    <div class="personal-widget-domain">
                        {{ $domainLabel }}
                    </div>

                    @foreach($domainWidgets as $widget)
                        @php
                            $alreadyPlaced = in_array(
                                $widget->widget_key,
                                $placedKeys,
                                true
                            );
                        @endphp

                        <button
                            type="button"
                            class="personal-widget-catalog-card {{ $alreadyPlaced ? 'used' : '' }}"
                            data-catalog-widget
                            data-widget-key="{{ $widget->widget_key }}"
                            data-widget-label="{{ $widget->label }}"
                            data-widget-description="{{ $widget->description }}"
                            data-widget-size="{{ $widget->default_size }}"
                            data-allowed-sizes="{{ $widget->allowed_sizes }}"
                            @disabled($alreadyPlaced)
                        >
                            <span class="catalog-widget-icon">
                                <svg viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M4 20V10M10 20V4M16 20v-7M20 20V8"/>
                                </svg>
                            </span>

                            <span class="catalog-widget-copy">
                                <b>{{ $widget->label }}</b>
                                <span>{{ $widget->description }}</span>
                            </span>

                            <span class="catalog-widget-action">
                                @if($alreadyPlaced)
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="m20 6-11 11-5-5"/>
                                    </svg>
                                @else
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M12 5v14M5 12h14"/>
                                    </svg>
                                @endif
                            </span>
                        </button>
                    @endforeach
                @endif
            @endforeach
        </div>
    </aside>
</div>
@endsection