@extends('layouts.menage')

@section('title', 'Dashboard Ménage')

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

@push('scripts')
<script src="{{ asset('js/translation.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/menage/dashboard.js') }}?v={{ time() }}" defer></script>
@endpush

@section('content')
<!-- Conteneur principal du dashboard avec une structure optimisée pour mobile -->
<div class="dashboard-container">
    {{-- Message de maintenance supprimé --}}
    
    <!-- User Switch / Impersonation Controls -->
    @if(session()->has('impersonator_id'))
        <a href="{{ route('worker.switch.stop') }}" class="btn btn-outline-success mb-3">
            <i class="fas fa-user-check me-1"></i> Revenir à mon profil
        </a>
    @elseif(isset($targetUsers) && count($targetUsers))
        <div class="dropdown mb-3">
            <button class="btn btn-primary dropdown-toggle" type="button" id="userSwitchDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                Changer d'utilisateur
            </button>
            <ul class="dropdown-menu" aria-labelledby="userSwitchDropdown">
                @foreach($targetUsers as $tUser)
                    <li>
                        <a class="dropdown-item" href="{{ route('worker.switch', ['targetId' => $tUser->id]) }}">
                            {{ $tUser->prenom }} {{ $tUser->nom }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Informations de bienvenue -->
    <div class="welcome-section">
        <h1 class="welcome-title" id="greeting-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['greeting'] ?? 'Bonjour' }} {{ $user->prenom }} 👋</h1>
        <p class="welcome-subtitle" id="what-to-do-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['what_to_do'] ?? 'Que souhaitez-vous faire aujourd\'hui ?' }}</p>
    </div>
    
    <!-- Actions principales avec grille 2 colonnes et 4 boutons -->
    <div class="main-actions-grid">
        <a href="{{ route('menage.cleaning') }}" class="action-card cleaning-card">
            <div class="action-content">
                <div class="action-icon">
                    <i class="fas fa-broom"></i>
                </div>
                <h3 class="action-title" id="cleaning-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['cleaning'] ?? 'Ménage' }}</h3>
                <p class="action-description" id="cleaning-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['cleaning_description'] ?? 'Planning' }}</p>
            </div>
        </a>
        
        <a href="{{ route('menage.coffee') }}" class="action-card coffee-card">
            <div class="action-content">
                <div class="action-icon">
                    <i class="fas fa-coffee"></i>
                </div>
                <h3 class="action-title" id="coffee-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['coffee'] ?? 'Café' }}</h3>
                <p class="action-description" id="coffee-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['coffee_description'] ?? 'Réassort de cafés' }}</p>
            </div>
        </a>

        <div class="action-card babylone-card disabled">
            <div class="action-content">
                <div class="action-icon">
                    <img src="{{ asset('images/logos/Babylone.png') }}?v={{ time() }}" alt="Babylone" class="babylone-logo" />
                </div>
                <h3 class="action-title">Babylone</h3>
                <p class="action-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['coming_soon'] ?? 'Bientôt disponible' }}</p>
                <div class="unavailable-overlay">
                    <span class="unavailable-text">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['not_available'] ?? 'Indisponible' }}</span>
                </div>
            </div>
        </div>
        
        <a href="{{ route('menage.declarations') }}" class="action-card declarations-card">
            <div class="action-content">
                <div class="action-icon">
                    <i class="fas fa-euro-sign"></i>
                </div>
                <h3 class="action-title" id="declarations-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['declarations'] ?? 'Déclarations' }}</h3>
                <p class="action-description" id="declarations-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['declarations_description'] ?? 'Déclarer mes heures et forfaits' }}</p>
            </div>
        </a>
        
        <div class="action-card orders-card disabled">
            <div class="action-content">
                <div class="action-icon">
                    <i class="fas fa-shopping-cart"></i>
                </div>
                <h3 class="action-title" id="orders-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['orders'] ?? 'Commandes' }}</h3>
                <p class="action-description" id="orders-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['orders_description'] ?? 'Gestion des commandes' }}</p>
                <div class="unavailable-overlay">
                    <span class="unavailable-text" id="orders-unavailable">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['not_available'] ?? 'Non disponible' }}</span>
                </div>
            </div>
        </div>
        
        <div class="action-card interventions-card disabled">
            <div class="action-content">
                <div class="action-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <h3 class="action-title" id="interventions-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['interventions'] ?? 'Interventions' }}</h3>
                <p class="action-description" id="interventions-description">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['interventions_description'] ?? 'Gestion des interventions techniques' }}</p>
                <div class="unavailable-overlay">
                    <span class="unavailable-text" id="interventions-unavailable">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['not_available'] ?? 'Non disponible' }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Planning hebdomadaire -->
    @if(isset($weeklySchedule) && count($weeklySchedule) > 0)
    <div class="weekly-schedule">
        <h2 class="schedule-title" id="weekly-schedule-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['menage_dashboard']['weekly_schedule'] ?? 'Planning de la semaine' }}</h2>
        <div class="schedule-grid">
            @foreach($weeklySchedule as $schedule)
            <div class="schedule-card">
                <div class="schedule-day">{{ $schedule->day_name }}</div>
                <div class="schedule-time">{{ $schedule->start_time }} - {{ $schedule->end_time }}</div>
                <div class="schedule-client">{{ $schedule->client_name }}</div>
                <div class="schedule-address">{{ $schedule->address }}</div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>

<!-- Popup de notification des interventions -->
@if((isset($in_progress_count) && $in_progress_count > 0) || (isset($planned_count) && $planned_count > 0) || (isset($notifications) && $notifications->count() > 0))
<div id="interventions-popup" class="interventions-popup-overlay">
    <div class="interventions-popup">
        <div class="popup-header">
            <h3 data-translate="notifications.popup_title">Notifications</h3>
        </div>
        <div class="popup-content">
            @if((isset($in_progress_count) && $in_progress_count > 0) || (isset($planned_count) && $planned_count > 0))
            <div class="notification-section">
                <h4 class="section-title" data-translate="notifications.interventions_section">Interventions</h4>
                @if(isset($in_progress_count) && $in_progress_count > 0)
                <div class="intervention-info">
                    <i class="fas fa-clock intervention-icon in-progress"></i>
                    <span class="intervention-text">
                        <strong>{{ $in_progress_count }}</strong> 
                        <span class="translate-dynamic" data-key-singular="interventions.notification_popup_today" data-key-plural="interventions.notification_popup_today_plural" data-count="{{ $in_progress_count }}">
                            {{ $in_progress_count > 1 ? 'interventions pour aujourd\'hui' : 'intervention pour aujourd\'hui' }}
                        </span>
                    </span>
                </div>
                @endif
                @if(isset($planned_count) && $planned_count > 0)
                <div class="intervention-info">
                    <i class="fas fa-calendar-days intervention-icon planned"></i>
                    <span class="intervention-text">
                        <strong>{{ $planned_count }}</strong> 
                        <span class="translate-dynamic" data-key-singular="interventions.notification_popup_planned" data-key-plural="interventions.notification_popup_planned_plural" data-count="{{ $planned_count }}">
                            {{ $planned_count > 1 ? 'interventions planifiées' : 'intervention planifiée' }}
                        </span>
                    </span>
                </div>
                @endif
            </div>
            @endif
            
            @if(isset($notifications) && $notifications->count() > 0)
            <div class="notification-section">
                <h4 class="section-title">Notifications</h4>
                @foreach($notifications as $notification)
                <div class="notification-item" data-notification-id="{{ $notification->id }}">
                    <div class="notification-header">
                        <h5 class="notification-title">{!! $notification->title !!}</h5>
                        <small class="notification-date">{{ $notification->created_at->format('d/m/Y') }}</small>
                    </div>
                    <div class="notification-content">
                        {!! $notification->content !!}
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
        <div class="popup-footer text-center">
            <button id="close-popup" class="btn-understood" data-translate="interventions.notification_popup_understood">J'ai compris</button>
        </div>
    </div>
</div>
@endif
@endsection