@extends('backend.layouts.app')

@section('title') 
    {{ __('ICCC Dashboard - Camera Monitoring, Controls, and Analytics') }}
@endsection

@section('content')
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet">

<div class="container-fluid">
    <h4 class="mb-4">{{ __('ICCC Dashboard - Live Video Streams, Controls, and Analytics') }}</h4>

    <!-- Analytics Widgets -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ __('Total Uptime') }}</h5>
                    <p class="display-6">{{ $totalUptime }} Hours</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ __('Storage Usage') }}</h5>
                    <p class="display-6">{{ $storageUsage }} GB / {{ $totalStorage }} GB</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5>{{ __('Recording Stats') }}</h5>
                    <p class="display-6">{{ $totalRecordings }} {{ __('Recordings') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach ($cameras as $camera)
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
            <div class="card">
                <div class="card-body">
                    
                    
                    
                    
                    @foreach ($cameras as $camera)
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">{{ $camera->name }}</div>
                                <div class="card-body">
                                    <p>Status: <span class="badge {{ $camera->status == 'Online' ? 'bg-success' : 'bg-danger' }}">{{ $camera->status }}</span></p>
                
                                    <!-- Video Stream -->
                                    <video id="camera-{{ $camera->id }}" class="video-js vjs-default-skin" controls autoplay width="100%">
                                        <source src="{{ $camera->stream_uri }}" type="application/x-mpegURL">
                                        Your browser does not support video playback.
                                    </video>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    
                    <hr>
                    
                    
                    <h5 class="card-title">{{ $camera->name }}</h5>
                    <p>Status: <span class="badge {{ $camera->status == 'Online' ? 'bg-success' : 'bg-danger' }}">{{ $camera->status }}</span></p>

                    <!-- Video Player -->
                    @if ($camera->stream_uri)
                    <video id="video-{{ $camera->id }}" class="video-js vjs-default-skin" controls width="100%">
                        <source src="{{ $camera->stream_uri }}" type="application/x-mpegURL">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <p class="text-danger">No stream available</p>
                    @endif

                    <!-- PTZ Controls (Pan, Tilt, Zoom) -->
                    <div class="ptz-controls mt-3">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-warning ptz-btn" data-action="panLeft" data-camera="{{ $camera->id }}">&lt;</button>
                            <button type="button" class="btn btn-warning ptz-btn" data-action="panRight" data-camera="{{ $camera->id }}">&gt;</button>
                        </div>

                        <div class="d-flex justify-content-between mt-2">
                            <button type="button" class="btn btn-primary ptz-btn" data-action="tiltUp" data-camera="{{ $camera->id }}">↑</button>
                            <button type="button" class="btn btn-primary ptz-btn" data-action="tiltDown" data-camera="{{ $camera->id }}">↓</button>
                        </div>

                        <div class="mt-3">
                            <label for="zoomRange{{ $camera->id }}">{{ __('Zoom') }}</label>
                            <input type="range" class="form-control-range zoom-range" id="zoomRange{{ $camera->id }}" min="0.1" max="1" step="0.1" value="0.5" data-camera="{{ $camera->id }}">
                            <span id="zoomValue{{ $camera->id }}">50%</span>
                        </div>

                        <div class="mt-3">
                            <button type="button" class="btn btn-success record-btn" data-action="start" data-camera="{{ $camera->id }}">{{ __('Start Recording') }}</button>
                            <button type="button" class="btn btn-danger record-btn" data-action="stop" data-camera="{{ $camera->id }}">{{ __('Stop Recording') }}</button>
                            <p id="recordingStatus-{{ $camera->id }}" class="mt-2 text-muted"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

@section('scripts')
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Initialize Video.js for each camera
    document.querySelectorAll('video.video-js').forEach(video => {
        videojs(video, {
            autoplay: true,
            controls: true,
            preload: 'auto',
            width: '100%',
            height: 'auto',
            html5: {
                hls: {
                    overrideNative: true
                },
                nativeVideoTracks: false,
                nativeAudioTracks: false,
                nativeTextTracks: false
            }
        });
    });

    // Optimize database queries for camera status updates
    async function fetchCameraStatuses() {
        try {
            const response = await fetch('/backend/cameras/status');
            const statuses = await response.json();

            statuses.forEach(status => {
                const badge = document.querySelector(`#camera-status-${status.id}`);
                if (badge) {
                    badge.innerText = status.status;
                    badge.className = `badge ${status.status === 'Online' ? 'bg-success' : 'bg-danger'}`;
                }
            });
        } catch (error) {
            console.error('Error fetching camera statuses:', error);
        }
    }

    setInterval(fetchCameraStatuses, 60000); // Update every 60 seconds

    // Handle PTZ Button Clicks
    document.querySelectorAll('.ptz-btn').forEach(button => {
        button.addEventListener('click', function () {
            const action = this.getAttribute('data-action');
            const cameraId = this.getAttribute('data-camera');
            const speed = 0.5; // Default speed

            fetch(`/backend/cameras/${cameraId}/ptz`, {
                method: 'POST',
                body: new URLSearchParams({ action, speed }),
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => alert(data.message || `Action ${action} performed successfully`))
            .catch(error => console.error('Error:', error));
        });
    });

    // Handle Zoom Slider Changes
    document.querySelectorAll('.zoom-range').forEach(slider => {
        slider.addEventListener('input', function () {
            const zoomValue = this.value * 100;
            document.getElementById(`zoomValue${this.getAttribute('data-camera')}`).innerText = `${zoomValue}%`;
        });

        slider.addEventListener('change', function () {
            const cameraId = this.getAttribute('data-camera');
            fetch(`/backend/cameras/${cameraId}/ptz`, {
                method: 'POST',
                body: new URLSearchParams({ action: 'zoom', speed: this.value }),
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => alert(data.message || 'Zoom adjusted successfully'))
            .catch(error => console.error('Error:', error));
        });
    });

    // Handle Recording Actions
    document.querySelectorAll('.record-btn').forEach(button => {
        button.addEventListener('click', function () {
            const action = this.getAttribute('data-action');
            const cameraId = this.getAttribute('data-camera');
            const endpoint = action === 'start' ? `/backend/cameras/${cameraId}/start-recording` : `/backend/cameras/${cameraId}/stop-recording`;

            fetch(endpoint, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                const statusElement = document.getElementById(`recordingStatus-${cameraId}`);
                if (data.error) {
                    statusElement.innerText = `Error: ${data.error}`;
                    statusElement.classList.add('text-danger');
                } else {
                    statusElement.innerText = data.message;
                    statusElement.classList.remove('text-danger');
                    statusElement.classList.add('text-success');
                }
            })
            .catch(error => console.error('Error:', error));
        });
    });
});
</script>
@endsection