@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-xl-row bg-white">
    <div class="left-image-section company-image-section d-none d-xl-block"></div>
    <div class="page-section company-section">
        <div class="page-header white-header">
            <div class="menu-root d-none d-xl-block">{{ $page['title'] }}@if($page['subTitle']) <i class="fa-solid fa-chevron-right"></i> {{ $page['subTitle'] }}@endif</div>
            <div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
            <div class="header-mobile-logo d-block d-xl-none m-0 padding-b-2"><img src="/images/word-logo-white.png" class="img-fluid"></div>
        </div>
        <div class="page-body">
            <div class="list-section">
                @if($data)
                    <section class="company-column">
                        @foreach($data as $i => $row)
                            @if($i > 0 && $i % 2 == 0)
                    </section>
                    <section class="company-column">
                            @endif
                        <div class="company-item">
                            <a href="@if($row->link){{ $row->link }}@else{{ '#' }}@endif" target="_blank">
                                <img src="@if($row->image){{ route('image', [$row->image], false) }}@else{{ '/images/no-img.png' }}@endif" class="img-fluid"/>
                                <div class="company-title">{{ $row->title }}</div>
                            </a>
                        </div>
                        @endforeach
                    </section>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
const bodyContainer = document.querySelector('body');
const scrollContainer = document.querySelector('.list-section');

var ww = window.innerWidth;
var scrollEventHandler = function(evt){
    var maxWidth = scrollContainer.scrollWidth - $('.list-section').innerWidth();
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
    var scrolled = (scrollContainer.scrollLeft / maxWidth) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
    if(scrollContainer.scrollLeft == maxWidth){
        // console.log('scrollEnd');
    }
}

initEvent(ww);

$(window).resize(function () {
    ww = window.innerWidth;
    initEvent(ww);
});

function initEvent(ww){
    if(ww >= 1200){
        bodyContainer.addEventListener('wheel',scrollEventHandler, {passive: false});
    }else{
        bodyContainer.removeEventListener('wheel',scrollEventHandler, {passive: false});
    }
}
</script>
@endpush