@extends('layouts.app')
@section('content')
    <style>
        .swiper {
            /* width: 800px; */
            height: 600px;
        }

        img {
            width: 200px;
        }

        .monitor-card {
            width: 160px;
            margin: auto;
        }

        .monitor-card_img {
            display: flex;
            justify-content: center;
        }

        .offline {
            filter: grayscale(100%);
        }

        .container {
            max-height: 700px;
        }
    </style>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <div class="row" style="justify-content: center; ">
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md-4">
                                <span>monitores online:</span>
                                <span id="qtyOnline">0</span>
                            </div>
                            <div class="col-md-4">
                                <span>monitores offline:</span>
                                <span id="qtyOffline">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2" style="display: flex; justify-content: flex-end;">
                        <button id="update-status" class="btn btn-primary">atualizar</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" style="text-align: center; overflow-x: auto;">
                    <div style="padding: 10px; max-height: 650px;">
                        @foreach ($monitors as $monitor)
                            <div id="{{ $monitor->id }}" class="monitors"
                                style="display: flex; justify-content: flex-start; align-items: center;">
                                <div
                                    style="border-radius: 50%; width: 8px; height: 8px; background-color: green; margin-right: 10px;">
                                </div>
                                <span>{{ $monitor->name }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-8">
                    <div style="padding: 10px;">
                        <div class="swiper">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->

                                @foreach ($monitors as $monitor)
                                    <div class="swiper-slide">
                                        <div id="thumbnail-{{ $monitor->id }}" class="monitor-card">
                                            <div class="monitor-card_img">
                                                <img src="{{ asset('img/img-example.png') }}" alt="Imagem de exemplo"
                                                    class="@if ($monitor->status ?? 0) offline @endif">
                                            </div>
                                            <p class="@if ($monitor->status ?? 0) offline @endif">{{ $monitor->name }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                            <!-- If we need pagination -->
                            <div class="swiper-pagination"></div>

                            <!-- If we need navigation buttons -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const swiper = new Swiper('.swiper', {
            autoplay: {
                delay: 10000
            },
            loopAddBlankSlides: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // Configuração específica para o modo de grade
            grid: {
                fill: 'row', // Pode ser 'row' ou 'column'
                rows: 3, // Número de linhas de slides
            },

            breakpoints: {
                320: {
                    slidesPerView: 1,
                    slidesPerColumn: 1,
                    slidesPerGroup: 1,
                    spaceBetween: 10
                },
                768: {
                    slidesPerView: 2,
                    slidesPerColumn: 2,
                    slidesPerGroup: 2,
                    spaceBetween: 10
                },
                1024: {
                    slidesPerView: 3,
                    slidesPerColumn: 3,
                    slidesPerGroup: 3,
                    spaceBetween: 10
                }
            }
        });


        $(document).ready(() => {
            getStatus();
        });

        $('#update-status').on('click', function() {
            getStatus();
        });

        function getStatus() {
            const MONITOR = document.querySelectorAll('.monitors');
            var total = MONITOR.length;
            var online = 0;
            var offline = 0;

            MONITOR.forEach(element => {
                $.ajax({
                    method: "POST",
                    url: "/multimedia-api/get-status",
                    data: {
                        "_token": $('meta[name="csrf-token"]').attr('content'),
                        'id': element.id,
                    }
                }).done(function(resp) {
                    let status = resp == 1 ? 'green' : 'red';
                    let statusThumbnail = resp == 1 ? '0%' : '100%';
                    $(`#${element.id} div`).css('background-color', status)

                    if (resp == 1) {
                        online++;
                        console.log(online);

                        $(`#thumbnail-${element.id} img`).removeClass('offline');
                    } else {
                        $(`#thumbnail-${element.id} img`).addClass('offline');
                    }
                    offline = total - online;
                    $('#qtyOnline').html(online);
                    $('#qtyOffline').html(offline);
                });
            });

            setTimeout(() => {
                getStatus();
            }, 60000);
        }
    </script>
@endsection