@extends('layouts.admin')

@section('styles')
    <style>
        #dayPicker:focus, #hourPicker:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="card" style="height: auto; overflow: hidden;">
            <div class="card-header">
                Playback for CCTV: {{ $cctv->name }}
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <input type="date" id="dayPicker" class="form-control mb-3">
                    </div>
                    <div class="col-md-12">
                        <select id="hourPicker" class="form-control mb-3">
                            @for($i = 0; $i < 24; $i++)
                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">
                                    {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}:00
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <a class="btn btn-default" href="{{ route('admin.cctvs.show', $cctv->id) }}">
                        Back To: {{ $cctv->name }}
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <div id="selectionIndicator" class="p-2 text-center" style="display: none;">
                    Selected: <span style="font-size: 2em;" id="selectedDateTime" class="badge bg-primary"></span>
                </div>
            </div>
            <div class="card-body">
                <div id="streamContainer" style="display: none;">
                    <iframe id="cameraStream" src="" style="width:100%; height:600px; border:none;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dayPicker = document.getElementById('dayPicker');
        const hourPicker = document.getElementById('hourPicker');
        const indicator = document.getElementById('selectionIndicator');
        const selectedSpan = document.getElementById('selectedDateTime');
        const streamContainer = document.getElementById('streamContainer');

        [dayPicker, hourPicker].forEach(picker => {
            picker.addEventListener('change', function() {
                if(dayPicker.value && hourPicker.value) {
                    // Update selection indicator
                    selectedSpan.textContent = `${dayPicker.value} ${hourPicker.value}:00`;
                    indicator.style.display = 'block';
                    
                    // Show and update stream iframe
                    const streamUrl = `{{ $cctv->stream_url }}?datetime=${dayPicker.value}T${hourPicker.value}:00`;
                    document.getElementById('cameraStream').src = streamUrl;
                    streamContainer.style.display = 'block';
                } else {
                    // Hide both indicator and stream
                    indicator.style.display = 'none';
                    streamContainer.style.display = 'none';
                    document.getElementById('cameraStream').src = '';
                }
            });
        });
    });
</script>
@endsection