@extends('backend.layouts.app')

@section('title')
    {{ __('Playback Interface') }}
@endsection

@section('content')
<div class="container-fluid">
    <h4 class="mb-4">{{ __('Playback Interface - Search and Replay') }}</h4>

    <!-- Recordings List -->
    <div id="recordingsList" class="mb-4">
        <h5>{{ __('Available Recordings') }}</h5>
        <ul id="recordings" class="list-group">
            <!-- Recordings will be dynamically loaded here -->
        </ul>
    </div>
</div>
@endsection

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Function to attach download buttons to recordings
        function attachDownloadButtons() {
            document.querySelectorAll('.download-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const filePath = this.getAttribute('data-filepath');

                    fetch(`/backend/cameras/download-recording`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        },
                        body: JSON.stringify({ filePath })
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.blob();
                        }
                        throw new Error('Download failed');
                    })
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = url;
                        a.download = filePath.split('/').pop(); // Extract file name
                        document.body.appendChild(a);
                        a.click();
                        window.URL.revokeObjectURL(url);
                    })
                    .catch(error => {
                        console.error('Error downloading file:', error);
                        alert('Error downloading file');
                    });
                });
            });
        }

        // Function to load recordings using ONVIF API
        async function loadRecordings() {
            const recordingsList = document.getElementById('recordings');
            recordingsList.innerHTML = '<li>Loading recordings...</li>';

            try {
                // Replace with actual ONVIF API endpoint for retrieving recordings
                const response = await fetch(`/backend/cameras/get-recordings`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    }
                });

                if (!response.ok) {
                    throw new Error('Failed to fetch recordings');
                }

                const data = await response.json();
                recordingsList.innerHTML = '';

                data.recordings.forEach(recording => {
                    const li = document.createElement('li');
                    li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
                    li.innerHTML = `
                        <span>${recording.name} (${recording.startTime} - ${recording.endTime})</span>
                        <button class="btn btn-primary btn-sm download-btn" data-filepath="${recording.filePath}">{{ __('Download') }}</button>
                    `;
                    recordingsList.appendChild(li);
                });

                // Attach download buttons to the newly created list items
                attachDownloadButtons();
            } catch (error) {
                console.error('Error loading recordings:', error);
                recordingsList.innerHTML = '<li>Error loading recordings</li>';
            }
        }

        // Load recordings on page load
        loadRecordings();
    });
</script>
@endsection