@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">CCTV</h3>
                <p class="text-muted mb-0">Pengelolaan kamera pengawas Smart City: lokasi, stream, status kesehatan, dan jadwal maintenance.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach ($quickLinks as $link)
                    <a href="{{ $link['route'] }}" class="btn btn-outline-primary btn-sm">{{ $link['label'] }}</a>
                @endforeach
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-3 mb-4">
            @foreach ($summaryCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="small text-muted">{{ $card['title'] }}</div>
                            <div class="display-6 fw-semibold text-{{ $card['accent'] }}">{{ number_format($card['value']) }}</div>
                            <div class="small text-muted">{{ $card['description'] }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <form method="GET" action="{{ route('admin.smart_city.cctv') }}" class="row g-3 align-items-end">
                    <div class="col-lg-3">
                        <label class="form-label">Cari CCTV</label>
                        <input type="text" name="search" class="form-control" value="{{ $filters['search'] ?? '' }}" placeholder="Kode, nama, lokasi, IP">
                    </div>
                    <div class="col-lg-2">
                        <label class="form-label">OPD</label>
                        <select name="organization_id" class="form-select">
                            <option value="">Semua</option>
                            @foreach ($organizations as $organization)
                                <option value="{{ $organization->id }}" @selected((int) ($filters['organization_id'] ?? 0) === (int) $organization->id)>
                                    {{ $organization->short_name ?: $organization->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Semua</option>
                            @foreach (\App\Models\SmartCity\CctvCamera::STATUSES as $key => $label)
                                <option value="{{ $key }}" @selected(($filters['status'] ?? null) === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <label class="form-label">Kesehatan</label>
                        <select name="health_status" class="form-select">
                            <option value="">Semua</option>
                            @foreach (\App\Models\SmartCity\CctvCamera::HEALTH_STATUSES as $key => $label)
                                <option value="{{ $key }}" @selected(($filters['health_status'] ?? null) === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <label class="form-label">Protokol</label>
                        <select name="protocol" class="form-select">
                            <option value="">Semua</option>
                            @foreach (\App\Models\SmartCity\CctvCamera::PROTOCOLS as $key => $label)
                                <option value="{{ $key }}" @selected(($filters['protocol'] ?? null) === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-1 d-grid">
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-xl-8">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4 d-flex justify-content-between align-items-center gap-3">
                        <div>
                            <h5 class="mb-1">Daftar CCTV</h5>
                            <p class="text-muted mb-0">Kamera bisa ditautkan ke aset kota untuk inventaris dan maintenance.</p>
                        </div>
                        <a href="{{ route('admin.smart_city.cctv.create') }}" class="btn btn-primary btn-sm">Tambah CCTV</a>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Kode / Nama</th>
                                        <th>Lokasi</th>
                                        <th>OPD</th>
                                        <th>Status</th>
                                        <th>Stream</th>
                                        <th class="text-end">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($cameras as $camera)
                                        @php
                                            $statusClass = match ($camera->status) {
                                                'online' => 'bg-success-subtle text-success',
                                                'maintenance' => 'bg-warning-subtle text-warning',
                                                'offline' => 'bg-danger-subtle text-danger',
                                                default => 'bg-secondary-subtle text-secondary',
                                            };
                                            $healthClass = match ($camera->health_status) {
                                                'normal' => 'bg-success-subtle text-success',
                                                'peringatan' => 'bg-warning-subtle text-warning',
                                                'kritis' => 'bg-danger-subtle text-danger',
                                                default => 'bg-light text-dark',
                                            };
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $camera->camera_code }}</div>
                                                <div>{{ $camera->name }}</div>
                                                <div class="small text-muted">{{ $camera->asset?->asset_code ?: 'Belum ditautkan aset' }}</div>
                                            </td>
                                            <td>
                                                <div>{{ $camera->location_name ?: '-' }}</div>
                                                <div class="small text-muted">{{ $camera->address_text ?: 'Alamat belum diisi' }}</div>
                                                <div class="small text-muted">{{ $camera->latitude && $camera->longitude ? $camera->latitude . ', ' . $camera->longitude : 'Koordinat belum ada' }}</div>
                                            </td>
                                            <td>{{ $camera->organization?->short_name ?: $camera->organization?->name ?: '-' }}</td>
                                            <td>
                                                <span class="badge {{ $statusClass }}">{{ $camera->status_label }}</span>
                                                <span class="badge {{ $healthClass }}">{{ $camera->health_label }}</span>
                                                <div class="small text-muted mt-1">{{ optional($camera->last_seen_at)->format('d M Y H:i') ?: 'Belum ada heartbeat' }}</div>
                                            </td>
                                            <td>
                                                <div class="small">{{ $camera->protocol_label }}{{ $camera->ip_address ? ' | ' . $camera->ip_address : '' }}</div>
                                                <div class="small text-muted">
                                                    {{ $camera->is_recording ? 'Recording' : 'Tidak recording' }}
                                                    |
                                                    {{ $camera->is_public ? 'Publik' : 'Internal' }}
                                                </div>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end gap-2">
                                                    <a href="{{ route('admin.smart_city.cctv.show', $camera) }}" class="btn btn-outline-primary btn-sm">Detail</a>
                                                    <a href="{{ route('admin.smart_city.cctv.edit', $camera) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">Belum ada CCTV yang tercatat.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            {{ $cameras->links() }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Perlu Perhatian</h5>
                        <p class="text-muted mb-0">Prioritas kamera offline, kritis, atau maintenance dekat.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($attentionCameras as $camera)
                            <a href="{{ route('admin.smart_city.cctv.show', $camera) }}" class="d-block text-decoration-none border rounded-3 p-3 mb-2">
                                <div class="d-flex justify-content-between gap-3">
                                    <div>
                                        <div class="fw-semibold text-dark">{{ $camera->camera_code }}</div>
                                        <div class="text-dark">{{ $camera->name }}</div>
                                        <div class="small text-muted">{{ $camera->organization?->short_name ?: $camera->organization?->name ?: '-' }}</div>
                                    </div>
                                    <div class="text-end">
                                        <span class="badge bg-light text-dark">{{ $camera->status_label }}</span>
                                        <div class="small text-muted mt-1">{{ $camera->health_label }}</div>
                                    </div>
                                </div>
                            </a>
                        @empty
                            <div class="text-muted">Tidak ada kamera yang perlu perhatian khusus.</div>
                        @endforelse
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Catatan Operasional</h5>
                    </div>
                    <div class="card-body pt-2">
                        <div class="small text-muted mb-2">Credential kamera tidak disimpan sebagai password mentah di modul ini. Gunakan kolom referensi kredensial untuk menunjuk secret vault, NVR, atau dokumen internal yang aman.</div>
                        <div class="small text-muted">Tautkan CCTV ke aset kota bila ingin memanfaatkan histori maintenance aset dan inventaris lintas OPD.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection