@extends('layout')

@section('content')
<header class="header position-relative p-4">
    <h1 class="fw-bolder text-center text-white">{{ env('APP_NAME','APPLICATION') }}</h1>
    <img class="position-absolute top-0 end-0 d-block me-2 mt-2" src="{{ asset('statics/images/logo-asa.png') }}" alt="logo" height="80"/>
</header>
<main class="main p-4 px-5">
    <div class="p-5 bg-white w-100 rounded-5" style="height:calc(100vh - 170px);">
        <div id="content" class="row justify-content-start align-items-start h-100"></div>
    </div>
</main>
@endsection
@push('js')
<script>
document.addEventListener("DOMContentLoaded", (event) => {
    setTimeout(() => {
        $(`#page-loader`).fadeOut(500);
    }, 2000);
});

$(()=>{
    const evtSource = new EventSource(`{{ route('signs') }}`, {
        withCredentials: true,
    });
    $(`#content`).on('reloadContent', (e)=>{
        $(e.currentTarget).find('svg').each((i,svg)=>{
            let { xMin, xMax, yMin, yMax } = [...svg.children].reduce((acc, el) => {
                let { x, y, width, height } = el.getBBox({stroke: true});
                if (!acc.xMin || x < acc.xMin) acc.xMin = x;
                if (!acc.xMax || x + width > acc.xMax) acc.xMax = x + width;
                if (!acc.yMin || y < acc.yMin) acc.yMin = y;
                if (!acc.yMax || y + height > acc.yMax) acc.yMax = y + height;
                return acc;
            }, {});
            let viewbox = `${xMin} ${yMin} ${xMax - xMin} ${yMax - yMin}`;
            svg.setAttribute('viewBox', viewbox);
        })
    });
    evtSource.addEventListener("content", (event) => {
        let cards   = ``;
        let paths   = ``;
        JSON.parse(event.data).forEach((item)=>{
            let pathContent = ``;
            item.content.forEach((a)=>{
                a.forEach((b)=>{
                    b.forEach((c)=>{
                        pathContent += `${c} `;
                    });
                });
            });
            // let values = String(pathContent).replace(/[A-Za-z]/g,'').trim().replace(/\s+/g, ' ').split(' ');
            // let min = Math.min.apply(Math,values);
            // let max = Math.max.apply(Math,values);
            // let viewBox = `${min} ${max} ${min} ${max}`;
            // console.log(viewBox);
            let html = `<div class="text-center p-2" style="width:12.5%; height:20%;">
                <div class="ratio ratio-16x9">
                    <svg xmlns="http://www.w3.org/2000/svg" style="max-width:100%; max-height:100%;">
                        <path d="${pathContent}" style="fill:none;stroke:black;stroke-width:4"/>
                    </svg>
                </div>
                <h1 class="fw-bolder fs-5 mb-0">${item.name}</h1>
            </div>`;
            cards += html;
        });
        $(`#content`).html(cards);
        $(`#content`).trigger('reloadContent');
    });
});
</script>
@endpush