@extends('layouts.frontend')

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-white sidebar collapse">
            <div class="position-sticky pt-3">
                <h4 class="px-3 mb-3">CCTV</h4>
                
                <div class="px-3 mb-3">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Cari...">
                        <button class="btn btn-outline-secondary" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="px-3 mb-3">
                    <div class="btn-group w-100">
                        <button class="btn btn-outline-secondary active">All</button>
                        <button class="btn btn-outline-secondary">Online</button>
                        <button class="btn btn-outline-secondary">Offline</button>
                    </div>
                </div>
                
                <ul class="nav flex-column px-3">
                    <li class="nav-item camera-list-item active mb-2 p-2 rounded">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="status-indicator status-active"></span>
                                <strong>{{ $cctvs[0]->name }}</strong>
                            </div>
                            <i class="fas fa-video"></i>
                        </div>
                        <div class="text-muted small">{{ $cctvs[0]->location }}</div>
                    </li>
                    @foreach($cctvs as $cctv)
                    <li class="nav-item camera-list-item mb-2 p-2 rounded">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="status-indicator status-active"></span>
                                <strong>{{ $cctv->name }}</strong>
                            </div>
                            <i class="fas fa-video"></i>
                        </div>
                        <div class="text-muted small">{{ $cctv->location }}</div>
                    </li>
                    @endforeach
                    @foreach($devices as $device)
                    <li class="nav-item camera-list-item mb-2 p-2 rounded">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                @if($device->status == 'on')
                                    <span class="status-indicator status-active"></span>
                                @else
                                    <span class="status-indicator status-inactive"></span>
                                @endif
                                <strong>{{ $device->name }}</strong>
                            </div>
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="text-muted small">{{ $device->imei }}</div>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="position-sticky pt-3">
                <div class="px-3 mt-3 text-end">
                    <small class="text-muted">Last updated: <span id="update-time">Just now</span></small>
                </div>
            </div>            
        </div>
        
        <!-- Main Content -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4 bg-secondary">
            <!-- Stats Cards -->
            <div class="row">
                <div class="col-md-8 mb-3 mb-md-0">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="card stat-card online-card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">Device Online</h5>
                                    <div class="value" id="online-count">{{ $cctvs->where('status', 'active')->count() + $devices->where('status', 'on')->count() }}</div>
                                    <div class="text-success small">
                                        <i class="fas fa-arrow-up"></i> 100% operational
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="card stat-card offline-card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">Device Offline</h5>
                                    <div class="value" id="offline-count">0</div>
                                    {{-- <div class="text-danger small">
                                        <i class="fas fa-exclamation-circle"></i> 0 unresolved issues
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 mb-4">
                            <div class="card h-100">
                                <div class="card-body p-0">
                                    <div id="map"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card stat-card">
                        <div class="card-body">
                            <h4 class="text-center"><strong>Report Hari Ini</strong></h4>
                            <div class="alert alert-warning">
                                <table class="">
                                    <tbody>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Mobil</strong></td>
                                            <td align="right">53</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Truk</strong></td>
                                            <td align="right">1</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Bus</strong></td>
                                            <td align="right">7</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Motor</strong></td>
                                            <td align="right">12</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Sepeda</strong></td>
                                            <td align="right">0</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Kerumunan</strong></td>
                                            <td align="right">2</td>
                                        </tr>
                                        <tr>
                                            <td>Jumlah Deteksi <strong>Pencurian JPO</strong></td>
                                            <td align="right">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <a class="btn btn-outline-primary" href="{{ route('frontend.reports') }}">Lihat Selengkapnya</a>
                        </div>
                    </div>                
                </div>
            </div>
            
            <!-- Camera Grid -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Latest Capture & Alert</h5>
                            <div class="row g-3">
                                @foreach($media as $image)
                                <div class="col-sm-6 col-md-4 col-lg-3">
                                    <div class="card camera-card h-100">
                                        <div class="camera-thumbnail">
                                            <img src="{{ $image->getUrl() }}" alt="Live Feed">
                                        </div>
                                        <div class="card-body">
                                            <h6 class="card-title">{{ $image->model->name }}</h6>
                                            <p class="card-text small text-muted">{{ $image->model->location }}</p>
                                            <div class="timestamp">{{ $image->created_at->format('h:i:s A') }}</div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<div class="modal fade" id="cameraModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cameraModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="cameraDetails"></div>
                <iframe id="cameraStream" width="100%" height="480" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    
    <script>
        // Initialize the map
        const map = L.map('map').setView([-6.184281244520552, 106.82289814840406], 16);
        
        // Add tile layer (OpenStreetMap)        
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: '',
            maxZoom: 20,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
        }).addTo(map);
                
        // Add CCTV markers
        const cctvIcon = L.icon({
            iconUrl: 'https://smartpole.id/img/green-online.png',
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
        });
        
        const cameras = {!! json_encode($cctvs->map(function($cctv) {
            return [
                'name' => $cctv->name,
                'brand' => $cctv->vendor,
                'location' => $cctv->location,
                'lat' => $cctv->lat,
                'lng' => $cctv->long,
                'stream_url' => $cctv->stream_url,
                'status' => $cctv->status
            ];
        }), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}

        const devices = {!! json_encode($devices->map(function($device) {
            return [
                'name' => $device->name,
                'imei' => $device->imei,
                'lat' => $device->lat,
                'lng' => $device->long,
                'status' => $device->status
            ];
        }), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
        
        // Calculate online/offline counts
        // const onlineCount = cameras.filter(c => c.status === 'active').length;
        // const offlineCount = cameras.filter(c => c.status === 'inactive').length;
        
        // document.getElementById('online-count').textContent = onlineCount;
        // document.getElementById('offline-count').textContent = offlineCount;
        
        cameras.forEach(camera => {
            const marker = L.marker([camera.lat, camera.lng], {
                icon: cctvIcon
            }).addTo(map);
            
            // marker.bindPopup(`
            //     <div style="width: 500px">
            //         <h6>${camera.name}</h6>
            //         <b>Lokasi: </b>${camera.location}<br>
            //         <b>Merk: </b>${camera.brand}<br>
            //         <b>Jenis: </b>IP Camera<br>
            //         <b>Status: </b><span style="color: ${camera.status === 'active' ? 'green' : 'red'}">
            //         ${camera.status === 'active' ? 'Active' : 'Offline'}
            //         </span><br>
            //         ${camera.stream_url ? `
            //         <b>Live View: </b><br>
            //         <iframe src="${camera.stream_url}" width="480" height="360" frameborder="0" style="margin-top: 10px"></iframe>
            //         ` : ''}
            //     </div>
            // `, {maxWidth: 600});
                  
            if (camera.status === 'inactive') {
                marker.setOpacity(0.5);
            }

            marker.on('click', function() {
                const modal = new bootstrap.Modal(document.getElementById('cameraModal'));
                document.getElementById('cameraModalLabel').textContent = camera.name;
                document.getElementById('cameraDetails').innerHTML = `
                    <b>Lokasi: </b>${camera.location}<br>
                    <b>Merk: </b>${camera.brand}<br>
                    <b>Status: </b><span style="color: ${camera.status === 'active' ? 'green' : 'red'}">
                    ${camera.status === 'active' ? 'Active' : 'Offline'}
                    </span>`;
                
                if (camera.stream_url) {
                    document.getElementById('cameraStream').src = camera.stream_url;
                }
                modal.show();
            });

        });

        devices.forEach(device => {
            const marker = L.marker([device.lat, device.lng], {
                icon: cctvIcon
            }).addTo(map);
            
            marker.bindPopup(`
                <h6>${device.name}</h6>
                <b>IMEI: </b>${device.imei}<br>
                <b>Jenis: </b>PJU LED<br>
                <b>Status: </b><span style="color: ${device.status === 'on' ? 'green' : 'red'}">
                    ${device.status === 'on' ? 'ON' : 'OFF'}
                </span><br>
            `);
            
            if (device.status === 'off') {
                marker.setOpacity(0.5);
            }
        });

        // Fit map to markers
        const markerGroup = new L.featureGroup(
            cameras.map(c => L.marker([c.lat, c.lng]))
        );
        map.fitBounds(markerGroup.getBounds().pad(0.1));
        
        // Initialize detections chart
        // const ctx = document.getElementById('detectionsChart').getContext('2d');
        // const detectionsChart = new Chart(ctx, {
        //     type: 'line',
        //     data: {
        //         labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
        //         datasets: [{
        //             label: 'Person Detections',
        //             data: [12, 8, 45, 62, 38, 28],
        //             borderColor: '#3498db',
        //             backgroundColor: 'rgba(52, 152, 219, 0.1)',
        //             tension: 0.3,
        //             fill: true
        //         }, {
        //             label: 'Vehicle Detections',
        //             data: [5, 3, 18, 24, 15, 9],
        //             borderColor: '#e74c3c',
        //             backgroundColor: 'rgba(231, 76, 60, 0.1)',
        //             tension: 0.3,
        //             fill: true
        //         }]
        //     },
        //     options: {
        //         responsive: true,
        //         maintainAspectRatio: false,
        //         plugins: {
        //             legend: {
        //                 position: 'bottom'
        //             }
        //         },
        //         scales: {
        //             y: {
        //                 beginAtZero: true,
        //                 title: {
        //                     display: true,
        //                     text: 'Detections'
        //                 }
        //             }
        //         }
        //     }
        // });

    </script>
@endsection