@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>

    <!-- Recording Search Form -->
    <form id="searchForm" class="mb-4">
        @csrf
        <div class="row">
            <div class="col-md-5">
                <label for="startTime">{{ __('Start Time') }}</label>
                <!-- Input for start time -->
                <input type="datetime-local" id="startTime" name="startTime" class="form-control" required>
            </div>
            <div class="col-md-5">
                <label for="endTime">{{ __('End Time') }}</label>
                <!-- Input for end time -->
                <input type="datetime-local" id="endTime" name="endTime" class="form-control" required>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <!-- Button to submit search form -->
                <button type="submit" class="btn btn-primary w-100">{{ __('Search Recordings') }}</button>
            </div>
        </div>
    </form>

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

    <!-- Playback Section -->
    <div id="playbackSection" class="d-none">
        <h5>{{ __('Playback') }}</h5>
        <!-- Video.js player for playback -->
        <video id="playbackVideo" class="video-js vjs-default-skin" controls width="100%"></video>
    </div>
</div>
@endsection

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

<script>
    // Attach an event listener to the search form
    document.getElementById('searchForm').addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent default form submission

        // Get start and end times from the form
        let startTime = document.getElementById('startTime').value;
        let endTime = document.getElementById('endTime').value;

        // Send a POST request to fetch recordings
        fetch(`/backend/cameras/{{ $camera->id }}/recordings`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: JSON.stringify({ startTime, endTime })
        })
        .then(response => response.json()) // Parse JSON response
        .then(data => {
            const recordingsList = document.getElementById('recordings');
            recordingsList.innerHTML = ''; // Clear the list

            // Populate recordings dynamically
            data.recordings.forEach(recording => {
                const listItem = document.createElement('li');
                listItem.className = 'list-group-item';
                listItem.innerHTML = `
                    <span>${recording.startTime} - ${recording.endTime}</span>
                    <button class="btn btn-link play-btn" data-token="${recording.token}">{{ __('Play') }}</button>
                `;
                recordingsList.appendChild(listItem);
            });

            // Attach event listeners to play buttons
            document.querySelectorAll('.play-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const token = this.getAttribute('data-token');
                    playRecording(token); // Call the playRecording function
                });
            });
        })
        .catch(error => console.error('Error fetching recordings:', error));
    });

    // Function to play a recording
    function playRecording(token) {
        fetch(`/backend/cameras/{{ $camera->id }}/replay`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: JSON.stringify({ recordingToken: token })
        })
        .then(response => response.json()) // Parse JSON response
        .then(data => {
            if (data.replayUri) {
                // Show the playback section and initialize the player
                const playbackSection = document.getElementById('playbackSection');
                playbackSection.classList.remove('d-none');

                const player = videojs('playbackVideo', {
                    autoplay: true,
                    controls: true,
                    preload: 'auto',
                });

                // Set the video source to the replay URI and play
                player.src({ src: data.replayUri, type: 'application/x-mpegURL' });
                player.play();
            }
        })
        .catch(error => console.error('Error fetching replay URI:', error));
    }
</script>
@endsection