@extends('layouts.horizontal-layout')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">{{ $kat->nama }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">CCTV</a></li>
                        <li class="breadcrumb-item active">{{ $kat->nama }}</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-8 col-lg-8">
            <div class="row">
                <div class="col-xl-8 col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ $cctv->nama }}</h4>
                            <!-- <video  preload="true" controls id="video"></video> -->
                            <div id="load">
                                <div>G</div>
                                <div>N</div>
                                <div>I</div>
                                <div>D</div>
                                <div>A</div>
                                <div>O</div>
                                <div>L</div>
                            </div>
                            <video width="640" id="video" controls autoplay=""></video>
                        </div>
                        <!-- <button type="button" class="btn btn-dark waves-effect waves-light" onclick="loadVideo()">
                            <i class="bx bxs-loader bx-spin-hover font-size-16 align-middle me-2"></i> Reload
                        </button> -->
                    </div>
                </div>
                <div class="col-xl-4 col-lg-12">
                    @foreach($kat->cctvs as $list)
                        @continue($list->id == $cctv->id)
                        <div class="col-xl-9 col-lg-4 d-lg-inline-block col-4 d-inline-block">
                            <div class="card" onclick="location.href='{{ route('cctv.detail', $list) }}';">
                                <div class="card-body" style="cursor: pointer;">
                                    <h4 class="card-title">{{ $list->nama }}</h4>
                                    <div class="position-relative">
                                        <img src="{{asset('assets/images/small/img-8.jpg')}}" alt="" class="img-thumbnail">
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-4">
            <div class="card">
                <div class="card-body p-4">
                    <div>
                        <p class="text-muted">ATCS</p>

                        <ul class="list-unstyled fw-medium">
                            @foreach($k as $a)
                                @if($a->cctvs->isNotEmpty())
                                <li><a href="{{ route('cctv.detail', $a->cctvs->first()) }}" class="text-muted py-2 d-block"><i class="mdi mdi-chevron-right me-1"></i> {{ $a->nama }}</a></li>
                                @endif
                            @endforeach
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>

@endsection
@push('head')
    <style>
        #load {
        position:absolute;
        width:500px;
        height:36px;
        left:50%;
        top:40%;
        margin-left:-300px;
        overflow:visible;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        cursor:default;
        }

        #load div {
        position:absolute;
        width:20px;
        height:36px;
        opacity:0;
        font-family:Helvetica, Arial, sans-serif;
        animation:move 2s linear infinite;
        -o-animation:move 2s linear infinite;
        -moz-animation:move 2s linear infinite;
        -webkit-animation:move 2s linear infinite;
        transform:rotate(180deg);
        -o-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        /* color:#35C4F0; */
        color:#000000;
        }

        #load div:nth-child(2) {
        animation-delay:0.2s;
        -o-animation-delay:0.2s;
        -moz-animation-delay:0.2s;
        -webkit-animation-delay:0.2s;
        }
        #load div:nth-child(3) {
        animation-delay:0.4s;
        -o-animation-delay:0.4s;
        -webkit-animation-delay:0.4s;
        -webkit-animation-delay:0.4s;
        }
        #load div:nth-child(4) {
        animation-delay:0.6s;
        -o-animation-delay:0.6s;
        -moz-animation-delay:0.6s;
        -webkit-animation-delay:0.6s;
        }
        #load div:nth-child(5) {
        animation-delay:0.8s;
        -o-animation-delay:0.8s;
        -moz-animation-delay:0.8s;
        -webkit-animation-delay:0.8s;
        }
        #load div:nth-child(6) {
        animation-delay:1s;
        -o-animation-delay:1s;
        -moz-animation-delay:1s;
        -webkit-animation-delay:1s;
        }
        #load div:nth-child(7) {
        animation-delay:1.2s;
        -o-animation-delay:1.2s;
        -moz-animation-delay:1.2s;
        -webkit-animation-delay:1.2s;
        }

        @keyframes move {
        0% {
            left:0;
            opacity:0;
        }
            35% {
                left: 41%; 
                -moz-transform:rotate(0deg);
                -webkit-transform:rotate(0deg);
                -o-transform:rotate(0deg);
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%; 
                -moz-transform:rotate(0deg); 
                -webkit-transform:rotate(0deg); 
                -o-transform:rotate(0deg);
                transform:rotate(0deg); 
                opacity:1;
            }
            100% {
                left:100%; 
                -moz-transform:rotate(-180deg); 
                -webkit-transform:rotate(-180deg); 
                -o-transform:rotate(-180deg); 
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-moz-keyframes move {
            0% {
                left:0; 
                opacity:0;
            }
            35% {
                left:41%; 
                -moz-transform:rotate(0deg); 
                transform:rotate(0deg);
                opacity:1;
            }
            65% {
                left:59%; 
                -moz-transform:rotate(0deg); 
                transform:rotate(0deg);
                opacity:1;
            }
            100% {
                left:100%; 
                -moz-transform:rotate(-180deg); 
                transform:rotate(-180deg);
                opacity:0;
            }
        }

        @-webkit-keyframes move {
            0% {
                left:0; 
                opacity:0;
            }
            35% {
                left:41%; 
                -webkit-transform:rotate(0deg); 
                transform:rotate(0deg); 
                opacity:1;
            }
            65% {
                left:59%; 
                -webkit-transform:rotate(0deg); 
                transform:rotate(0deg); 
                opacity:1;
            }
            100% {
                left:100%;
                -webkit-transform:rotate(-180deg); 
                transform:rotate(-180deg); 
                opacity:0;
            }
        }

        @-o-keyframes move {
            0% {
                left:0; 
                opacity:0;
            }
            35% {
                left:41%; 
                -o-transform:rotate(0deg); 
                transform:rotate(0deg); 
                opacity:1;
            }
            65% {
                left:59%; 
                -o-transform:rotate(0deg); 
                transform:rotate(0deg); 
                opacity:1;
            }
            100% {
                left:100%; 
                -o-transform:rotate(-180deg); 
                transform:rotate(-180deg); 
                opacity:0;
            }
        }

        video {
            max-width: 100%;
            height: auto;
        }
    </style>
@endpush
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>

    $(function() {

        $.get( "{{ route('cctv.getstreamid', $cctv->id) }}", function( data ) {

            console.log(data);
        });

        function loadVideo() {
            
            if (Hls.isSupported()) {
                var video = document.getElementById('video');
                var videoSrc = '{{asset($cctv->hls)}}';

                var hls = new Hls();
                hls.loadSource(videoSrc);
                hls.attachMedia(video);
                hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                    console.log('video and hls.js are now bound together !');
                    
                    // video.play();
                });
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                    console.log(
                    'manifest loaded, found ' + data.levels.length + ' quality level'
                    );
                    $('#load').hide();
                    video.play();
                });
                console.log('laod player');
            }
        }

        setTimeout(loadVideo, 10000);
    });

    </script>
@endpush