@extends('layout.app')

@section('title', __('Dashboard'))
@section('data_col', "2-columns")
@section('body_class', "2-columns")
@section('active_dashboard', "active")

@push('styles')
    <style>
        .floating-download-buttons {
            position: fixed;
            bottom: 150px;
            right: 30px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .floating-download-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            background: transparent;
        }
        .floating-download-btn img {
            width: 125px;
        }
        .floating-download-btn .tooltip-text {
            visibility: hidden;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px 12px;
            position: absolute;
            right: 75px;
            white-space: nowrap;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        /* Styles pour les badges */
        .category-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.3px;
        }
        .badge-todo {
            background-color: #fff3e0;
            color: #e65100;
            border: 1px solid #ffe0b2;
        }
        .badge-wait {
            background-color: #e0f7f7;
            color: #00695c;
            border: 1px solid #b2ebf2;
        }
        
        @media (max-width: 768px) {
            .floating-download-buttons {
                bottom: 100px;
                right: 20px;
                gap: 10px;
            }
            .floating-download-btn img {
                width: 100px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="floating-download-buttons">
        <a href="{{ route('download.ios') }}" class="floating-download-btn ios-btn shadow-lg" target="_blank" title="{{ __('Download iOS App') }}">
            <img src="{{ asset('image/ios.svg') }}" alt="iOS Download">
        </a>
        <a href="{{ route('download.android') }}" class="floating-download-btn android-btn shadow-lg" target="_blank" title="{{ __('Download Android App') }}">
            <img src="{{ asset('image/android.svg') }}" alt="Android Download">
        </a>
    </div>
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-header row mb-1">
                <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                    <h3 class="content-header-title mb-0 d-inline-block">{{ __('Dashboard') }}</h3>
                </div>
                <div class="content-header-right col-md-6 col-12"></div>
            </div>
            
            <div class="content-body pb-5">
                <div class="row match-height">
                    @foreach ($stats as $stat)
                        <div class="col-xl-4 col-md-6 col-12 h-100">
                            <div class="card border-dark">
                                <div class="card-content">
                                    <div class="card-body">
                                        @if(($stat['category'] ?? '') === 'to_do')
                                            <span class="badge badge-pill badge-success">
                                                <i class="fas fa-clipboard-list"></i> {{ __('À faire') }}
                                            </span>
                                        @elseif(($stat['category'] ?? '') === 'wait')
                                            <span class="badge badge-pill badge-warning">
                                                <i class="fas fa-hourglass-half"></i> {{ __('En attente') }}
                                            </span>
                                        @elseif(($stat['category'] ?? '') === 'to_do_retard')
                                            <span class="badge badge-pill badge-success">
                                                <i class="fas fa-clipboard-list"></i> {{ __('À faire') }}
                                            </span>
                                            <span class="badge badge-pill badge-danger">
                                                <i class="fas fa-times"></i> {{ __('Retard') }}
                                            </span>
                                        @elseif(($stat['category'] ?? '') === 'wait_retard')
                                            <span class="badge badge-pill badge-warning">
                                                <i class="fas fa-hourglass-half"></i> {{ __('En attente') }}
                                            </span>
                                            <span class="badge badge-pill badge-danger">
                                                <i class="fas fa-times"></i> {{ __('Retard') }}
                                            </span>
                                        @elseif(($stat['category'] ?? '') === 'general_retard')
                                            <span class="badge badge-pill badge-danger">
                                                <i class="fas fa-times"></i> {{ __('Retard') }}
                                            </span>
                                        @endif
                                        
                                        <div class="media d-flex">
                                            <div class="align-self-center">
                                                <i class="{{ $stat['icon']??'' }} font-large-2 float-left"></i>
                                            </div>
                                            <div class="media-body text-right">
                                                <h3 class="font-large-2 text-bold-600">{{ $stat['value'] }}</h3>
                                                <span class="dark">{{ $stat['name'] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection