@extends('layout')

@section('content')
<header class="header position-relative p-4">
    <h1 class="fw-bolder text-center text-white">Commitment ASA 2024</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);
});
$(()=>{
    $(`#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);
        })
    });
    function fetchSigns(){
        $.get(`{{ route('signs') }}`, function(response){
            let cards   = ``;
            let paths   = ``;
            response.forEach((item)=>{
                let pathContent = ``;
                item.content.forEach((a)=>{
                    a.forEach((b)=>{
                        b.forEach((c)=>{
                            pathContent += `${c} `;
                        });
                    });
                });
                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');
        }, 'json');

    }
    fetchSigns();
    // setInterval(() => {
    //     fetchSigns();
    // }, 5000);
});
</script>
@endpush