@extends('layouts.client')

@section('header_title', 'Minhas Aparelhagens')
@section('header_subtitle', 'Câmeras e equipamentos associados às suas instalações.')

@section('content')
    <div class="space-y-6">
        @forelse($installations as $installation)
            <section class="bg-slate-900 border border-white/5 rounded-2xl overflow-hidden shadow-xl">
                <div class="px-6 py-5 border-b border-white/5 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
                    <div>
                        <h3 class="text-lg font-semibold text-white">{{ $installation->address }}</h3>
                        <p class="text-sm text-slate-500">Estado: {{ $installation->status }} · {{ $installation->installation_date?->format('d/m/Y') ?? 'Data por definir' }}</p>
                    </div>
                    <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-500/10 text-blue-400">
                        {{ $installation->cameras->count() + $installation->devices->count() }} item(ns)
                    </span>
                </div>

                <div class="grid grid-cols-1 xl:grid-cols-2 gap-0">
                    <div class="p-6 border-b xl:border-b-0 xl:border-r border-white/5">
                        <h4 class="text-sm font-semibold uppercase tracking-wider text-slate-400 mb-4">Câmeras</h4>
                        <div class="space-y-3">
                            @forelse($installation->cameras as $camera)
                                <div class="flex items-center justify-between rounded-xl bg-slate-950/60 border border-white/5 px-4 py-3">
                                    <div>
                                        <p class="text-white font-medium">{{ $camera->name }}</p>
                                        <p class="text-xs text-slate-500">{{ $camera->model ?? 'Sem modelo' }} · {{ $camera->ip_address ?? 'Sem IP' }}</p>
                                    </div>
                                    <span class="text-xs font-semibold text-slate-300">{{ $camera->status }}</span>
                                </div>
                            @empty
                                <p class="text-sm text-slate-500">Nenhuma câmera registada nesta instalação.</p>
                            @endforelse
                        </div>
                    </div>

                    <div class="p-6">
                        <h4 class="text-sm font-semibold uppercase tracking-wider text-slate-400 mb-4">Equipamentos</h4>
                        <div class="space-y-3">
                            @forelse($installation->devices as $device)
                                <div class="flex items-center justify-between rounded-xl bg-slate-950/60 border border-white/5 px-4 py-3">
                                    <div>
                                        <p class="text-white font-medium">{{ $device->name }}</p>
                                        <p class="text-xs text-slate-500">{{ $device->type }} · Série: {{ $device->serial_number ?? '---' }}</p>
                                    </div>
                                    <span class="text-xs font-semibold text-slate-300">{{ $device->status }}</span>
                                </div>
                            @empty
                                <p class="text-sm text-slate-500">Nenhum equipamento registado nesta instalação.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </section>
        @empty
            <div class="p-10 rounded-2xl border border-dashed border-white/10 text-center">
                <p class="text-slate-500">Ainda não existem aparelhagens associadas à sua conta.</p>
            </div>
        @endforelse
    </div>
@endsection