<template>
    <div>
        <portal-header />

        <div class="page-wrapper">

            <div class="page-body" style="min-height: 79vh">
                <div class="container-fluid">
                    <div class="row row-deck row-cards">

                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <h3 class="text-danger fst-italic">
                                            Click pada gambar untuk fullscreen !
                                        </h3>
                                        <button class="btn btn-primary ms-3" @click="fetchCCTVStreams">
                                            <i class="fa fa-refresh me-1"></i> Refresh
                                        </button>
                                    </div>
                                    <div v-if="loading" class="row justify-content-center"
                                        style="min-height: 55vh; padding-top: 200px">
                                        <div class="text-center loader"></div>
                                    </div>

                                    <div v-else class="row mt-1">
                                        <div v-for="(stream, index) in cctvStreams" :key="index"
                                            class="col-md-6 col-lg-3 mb-4">
                                            <div class="card shadow h-100">
                                                <div class="card-header p-2 pb-1">
                                                    <strong>
                                                        {{ stream.camera_name }} ({{ stream.resolution }})
                                                    </strong>
                                                </div>
                                                <div class="card-body p-0">
                                                    <img :src="stream.ip_address" class="img-fluid" alt="CCTV Stream"
                                                        @click="goFullScreen($event)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <portal-footer />
    </div>
</template>

<script>
import PortalHeader from '@/views/portal/header.vue'
import PortalFooter from '@/views/portal/footer.vue'
import axios from 'axios';

export default {
    name: 'PortalCCTVStreams',
    components: {
        PortalHeader,
        PortalFooter
    },
    data() {
        return {
            cctvStreams: [],
            loading: false
        };
    },
    methods: {
        fetchCCTVStreams() {
            this.loading = true;
            axios.get('/api/cctv/all')
                .then(response => {
                    this.cctvStreams = response.data;
                })
                .catch(error => {
                    console.error('Error fetching CCTV streams:', error);
                    this.loading = false;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        goFullScreen(event) {
            const img = event.target;

            // Check if we are currently in fullscreen mode
            if (!document.fullscreenElement && // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods
                if (img.requestFullscreen) {
                    img.requestFullscreen();
                } else if (img.webkitRequestFullscreen) {
                    img.webkitRequestFullscreen();
                } else if (img.msRequestFullscreen) {
                    img.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        }
    },
    mounted() {
        this.fetchCCTVStreams();
    }
};
</script>

<style scoped>
.img-fluid {
    width: 100%;
    height: auto;
    cursor: pointer;
}
</style>
