@extends('layouts.admin')

@section('styles')
    {{-- Embed stream_url as HLS using Video.js --}}
    <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
@endsection

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card" style="height: auto; overflow: hidden;">
            <div class="card-header">
                Live View
                <div class="float-right">
                    <a class="btn btn-primary" href="{{ route('admin.cctvs.playback', $cctv->id) }}">
                        Playback
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                @if(str_starts_with($cctv->stream_url, 'rtsp://'))
                    <video id="rtspPlayer" width="100%" height="400" controls>
                        <source src="{{ route('frontend.rtsp', $cctv->id) }}" type="video/mp4">
                    </video>
                @else
                    <iframe 
                        src="{{ $cctv->stream_url }}" 
                        frameborder="0" 
                        style="width: 100%; aspect-ratio: 16/9;"
                    ></iframe>
                @endif                
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                {{ trans('global.show') }} {{ trans('cruds.cctv.title') }}
                <div class="float-right">
                    <a class="btn btn-warning" href="{{ route('admin.cctvs.edit', $cctv->id) }}">
                        Edit
                    </a>
                </div>
            </div>

            <div class="card-body">
                <div class="form-group">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.id') }}
                                </th>
                                <td>
                                    {{ $cctv->id }}
                                </td>
                            </tr>                    
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.name') }}
                                </th>
                                <td>
                                    {{ $cctv->name }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.stream_url') }}
                                </th>
                                <td>
                                    {{ $cctv->stream_url }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.lat') }}
                                </th>
                                <td>
                                    {{ $cctv->lat }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.lat') }}
                                </th>
                                <td>
                                    {{ $cctv->lat }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.vendor') }}
                                </th>
                                <td>
                                    {{ App\Models\Cctv::VENDOR_SELECT[$cctv->vendor] ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Detection Types
                                </th>
                                <td>
                                    {{ $cctv->detection_types ? implode(', ', json_decode($cctv->detection_types, true)) : '-' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.cctv.fields.status') }}
                                </th>
                                <td>
                                    {{ App\Models\Cctv::STATUS_SELECT[$cctv->status] ?? '' }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="form-group">
                        <a class="btn btn-default" href="{{ route('admin.cctvs.index') }}">
                            {{ trans('global.back_to_list') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5>Capture</h5>
            </div>
            <div class="card-body">
                <div class="row row-cols-1 row-cols-md-3 row-cols-lg-6 g-3">
                    @foreach($cctv->images as $media)
                    <div class="col">
                        <div class="card h-100">
                            <a href="{{ $media->getUrl() }}" target="_blank">
                                <img src="{{ $media->getUrl('preview') }}" class="card-img-top">
                            </a>
                            <div class="card-footer text-muted small">
                                {{ $media->created_at->format('Y-m-d H:i:s') }}
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>






@endsection