@extends('layouts.admin')

@section('title', 'Tableau de bord administrateur')

@section('styles')
<link href="{{ asset('css/pages/admin/dashboard.css') }}?v={{ time() }}" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid dashboard-container">
    <div class="dashboard-grid">
        <!-- Section d'accueil (pleine largeur) -->
        <div class="welcome-section full-width">
            <h1 class="welcome-title">{{ $welcomeMessage }}<span class="welcome-emoji">👋</span></h1>
            <h2 class="welcome-subtitle">{{ $description }}</h2>
            <p class="welcome-description">Alfadesk vous permet de gérer l'ensemble de vos activités depuis une interface unique et intuitive.</p>
        </div>
        
        <!-- Section des fonctionnalités (colonne gauche) -->
        <div class="features-section">
            <h3 class="features-title"><i class="fas fa-star mr-2"></i> Fonctionnalités disponibles</h3>
            <ul class="features-list">
                @php
                    $icons = [
                        'Gestion du personnel et des ouvriers' => 'fas fa-users',
                        'Gestion des clients' => 'fas fa-user-tie',
                        'Suivi des interventions et des chantiers' => 'fas fa-hard-hat',
                        'Gestion des commandes et des devis' => 'fas fa-shopping-cart',
                        'Suivi des services de ménage' => 'fas fa-broom',
                        'Gestion des commandes de café' => 'fas fa-coffee'
                    ];
                @endphp
                
                @foreach($features as $feature)
                <li class="feature-item">
                    <div class="feature-icon">
                        <i class="{{ $icons[$feature] ?? 'fas fa-check-circle' }}"></i>
                    </div>
                    <div class="feature-content">
                        <div class="feature-name">{{ $feature }}</div>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
        
        <!-- Section en construction (colonne droite) -->
        <div class="construction-section">
            <h4 class="construction-title"><i class="fas fa-tools"></i>Tableau de bord en développement</h4>
            <p class="construction-message">{{ $message }}</p>
            <div class="construction-date">Disponibilité prévue : {{ $date }}</div>
        </div>
    </div>
</div>
@endsection