@extends('layouts.app')

@section('title', 'Détails Bâtiment')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item"><a href="{{ route('buildings.index') }}">Bâtiments</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-3 text-secondary mb-3">
                    <i class="bi bi-building"></i>
                </div>
                <h3>{{ $building->name }}</h3>
                <p class="badge {{ $building->is_active ? 'bg-success' : 'bg-secondary' }}">
                    {{ $building->is_active ? 'Actif' : 'Inactif' }}
                </p>
                <p class="text-muted">{{ $building->type }} ({{ $building->code }})</p>
                
                <hr>
                
                <div class="text-start">
                    <p><strong>Capacité:</strong> {{ $building->capacity ?? '-' }} têtes</p>
                    <p><strong>Surface:</strong> {{ $building->area ?? '-' }} m²</p>
                    <p><strong>Description:</strong> {{ $building->description ?? '-' }}</p>
                </div>
                
                <div class="d-grid gap-2 mt-4">
                    <a href="{{ route('buildings.edit', $building) }}" class="btn btn-warning">
                        <i class="bi bi-pencil"></i> Modifier
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="row g-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Capteurs installés</h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Nom</th>
                                    <th>Type</th>
                                    <th>Dernière lecture</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($building->sensors as $sensor)
                                <tr>
                                    <td>
                                        <a href="{{ route('sensors.show', $sensor) }}">{{ $sensor->name }}</a>
                                    </td>
                                    <td>{{ ucfirst($sensor->type) }}</td>
                                    <td>
                                        @if($sensor->readings->isNotEmpty())
                                            {{ $sensor->readings->last()->value }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if($sensor->is_active)
                                            <span class="badge bg-success">Actif</span>
                                        @else
                                            <span class="badge bg-secondary">Inactif</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-muted">
                                        Aucun capteur installé. <a href="{{ route('sensors.create') }}">Ajouter un capteur</a>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Lots hébergés (Exemple)</h5>
                    </div>
                    <div class="card-body">
                         <p class="text-muted text-center py-3">Fonctionnalité de gestion des lots à venir.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection