@extends('layouts.app')

@section('title', 'Détails Capteur')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item"><a href="{{ route('sensors.index') }}">Capteurs</a></li>
    <li class="breadcrumb-item active">Détails</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-1 mb-3 {{ $sensor->is_active ? 'text-primary' : 'text-muted' }}">
                    @switch($sensor->type)
                        @case('temperature') <i class="bi bi-thermometer-half"></i> @break
                        @case('humidity') <i class="bi bi-moisture"></i> @break
                        @case('light') <i class="bi bi-brightness-high"></i> @break
                        @case('co2') <i class="bi bi-cloud-haze"></i> @break
                        @case('ammonia') <i class="bi bi-wind"></i> @break
                        @case('water_level') <i class="bi bi-water"></i> @break
                        @default <i class="bi bi-broadcast"></i>
                    @endswitch
                </div>
                <h3>{{ $sensor->name }}</h3>
                <p class="badge {{ $sensor->is_active ? 'bg-success' : 'bg-secondary' }}">
                    {{ $sensor->is_active ? 'Actif' : 'Inactif' }}
                </p>
                <p class="text-muted">{{ $sensor->code }}</p>

                <hr>
                
                <div class="text-start">
                    <p><strong>Type:</strong> {{ ucfirst($sensor->type) }}</p>
                    <p><strong>Bâtiment:</strong> {{ $sensor->building->name ?? 'Non assigné' }}</p>
                    <p><strong>Lieu:</strong> {{ $sensor->location ?? '-' }}</p>
                    <p><strong>Seuils:</strong> {{ $sensor->min_threshold ?? '∞' }} - {{ $sensor->max_threshold ?? '∞' }}</p>
                </div>
                
                <div class="d-grid gap-2 mt-4">
                    <a href="{{ route('sensors.edit', $sensor) }}" class="btn btn-warning">
                        <i class="bi bi-pencil"></i> Modifier Configuration
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0">Dernières Lectures</h5>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Date / Heure</th>
                            <th>Valeur</th>
                            <th>Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sensor->readings as $reading)
                        <tr>
                            <td>{{ $reading->recorded_at->format('d/m/Y H:i:s') }}</td>
                            <td class="fw-bold">{{ $reading->value }}</td>
                            <td>
                                @if(($sensor->min_threshold && $reading->value < $sensor->min_threshold) || 
                                    ($sensor->max_threshold && $reading->value > $sensor->max_threshold))
                                    <span class="badge bg-danger">Hors limites</span>
                                @else
                                    <span class="badge bg-success">OK</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="text-center py-4 text-muted">
                                Aucune lecture enregistrée pour le moment.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection