@extends('layouts/master_hf')

@php
    $pagename = 'storia';
    $imgpath = "images/background/services1.jpg";
@endphp


@section('body')
    <div class="">
        {{-- <div class="tm-preload tm-rotate-circle">
    <div class="spinner"></div>
</div> --}}


        <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">
            @include('components.breadcrumb')

            <style>
                .btn.uk-active {
                    border-color: #ffc107;
                }

                .video-loading {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .video-loading::after {
                    content: '';
                    display: block;
                    width: 40px;
                    height: 40px;
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #ffc107;
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                }

                @keyframes spin {
                    0% {
                        transform: rotate(0deg);
                    }

                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>

            <div class="tm-page-corners"></div>

            <div id="tm-main" class="tm-block-main uk-block uk-block-default">
                <div class="tm-page-padding">



                    <div class="uk-container uk-container-center">
                        <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>

                            <div class="tm-main uk-width-medium-1-1">

                                <main id="tm-content" class="tm-content">
                                    <div id="system-message-container"></div>
                                    <article class="uk-article tm-article">

                                        <div class="tm-article-wrapper">

                                            <div class="tm-article-content">

                                                <div class="tm-article">

                                                    <div class="uk-grid pt-4">
                                                        <div class="uk-width-medium-2-10 uk-margin-large-bottom">
                                                            <h3 class="tm-title uk-h1 tm-primary-color">1964</h3>
                                                        </div>
                                                        <div class="uk-width-medium-8-10">
                                                            <h3 class="tm-caps tm-weight-regular">Fondazione della
                                                                Compagnia</h3>
                                                            <p>La ditta Interlam, nasce nel 1964, come carpenteria e produce
                                                                ricambi
                                                                agricoli per fienagione, oggi esportati anche all’estero.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="uk-grid">
                                                        <div class="uk-width-medium-2-10 uk-margin-large-bottom">
                                                            <h3 class="tm-title uk-h1 tm-primary-color">2000</h3>
                                                        </div>
                                                        <div class="uk-width-medium-8-10">
                                                            <h3 class="tm-caps tm-weight-regular">La Nascita del settore
                                                                Forestale
                                                            </h3>
                                                            <p> Nell’ anno 2000 al settore agricolo, si affianca quello
                                                                forestale
                                                                con la produzione di pinze per la movimentazione dei
                                                                tronchi. Poco
                                                                dopo, siamo stati i primi in Italia, a progettare e
                                                                costruire i
                                                                Kit-motosega, applicabili ad ogni tipo di pinza.</p>
                                                        </div>
                                                    </div>



                                                    <div class="uk-grid mb-5">
                                                        <div class="uk-width-medium-2-10 uk-margin-large-bottom">
                                                            <h3 class="tm-title uk-h1 tm-primary-color">2020</h3>
                                                        </div>
                                                        <div class="uk-width-medium-8-10">
                                                            <h3 class="tm-caps tm-weight-regular">Interlam nel Mondo</h3>
                                                            <p>Adesso le nostre pinze con motosega, sono una realtà ben
                                                                definita e
                                                                la loro affidabilità è testimoniata da una vasta clientela
                                                                nazionale
                                                                ed internazionale. A queste si aggiungono le nuove
                                                                abbattitrici con
                                                                catena, le cesoie idrauliche e le lame per i cippatori. La
                                                                tecnologia di cui disponiamo e l’esperienza raggiunta nel
                                                                settore,
                                                                ci permette di essere costruttori a 360°.</p>
                                                        </div>
                                                    </div>


                                                    <ul id="wk-6b4"
                                                        class="uk-subnav uk-subnav-line tm-grid-filters uk-flex-right hidden-s"
                                                        style="padding-right: 30px;">
                                                        <li class="uk-active d-none d-md-block" data-uk-filter="">
                                                            <a href="#">
                                                                Tutto
                                                            </a>
                                                        </li>
                                                        <li data-uk-filter="Altro" class="d-none d-md-block">
                                                            <a href="#">
                                                                Altro
                                                            </a>
                                                        </li>
                                                        <li data-uk-filter="CNC" class="d-none d-md-block">
                                                            <a href="#">
                                                                CNC
                                                            </a>
                                                        </li>
                                                        <li data-uk-filter="Laser" class="d-none d-md-block">
                                                            <a href="#">
                                                                Laser
                                                            </a>
                                                        </li>
                                                        <li data-uk-filter="Presse" class="d-none d-md-block">
                                                            <a href="#">
                                                                Pressa
                                                            </a>
                                                        </li>
                                                        <li data-uk-filter="Robot" class="d-none d-md-block">
                                                            <a href="#">
                                                                Robot
                                                            </a>
                                                        </li>

                                                        <div class="btn-group-vertical d-block d-md-none w-100 mb-3">
                                                            <button type="button" class="btn btn-default uk-active" data-uk-filter="">Tutto</button>
                                                            <button type="button" class="btn btn-default" data-uk-filter="Altro">Altro</button>
                                                            <button type="button" class="btn btn-default" data-uk-filter="CNC">CNC</button>
                                                            <button type="button" class="btn btn-default" data-uk-filter="Laser">Laser</button>
                                                            <button type="button" class="btn btn-default" data-uk-filter="Presse">Pressa</button>
                                                            <button type="button" class="btn btn-default" data-uk-filter="Robot">Robot</button>
                                                        </div>
                                                    </ul>

                                                    <div class="container-fluid pb-5">
                                                        <div id="" class="row"
                                                            data-uk-grid="{controls: '#wk-6b4'}">

                                                            @php
                                                            $imageFiles = glob(public_path('images/storia/60/*.jpg'));
                                                            $images = [];

                                                            foreach($imageFiles as $file) {
                                                                $filename = pathinfo($file, PATHINFO_FILENAME);
                                                                $filter = explode('_', $filename)[0];
                                                                $title = str_replace('(', ' ', explode('_', $filename)[1]);

                                                                $images[] = [
                                                                    'filter' => $filter,
                                                                    'src' => 'images/storia/60/' . basename($file),
                                                                    'alt' => $title,
                                                                    'title' => $title
                                                                ];
                                                            }
                                                            shuffle($images);
                                                            @endphp

                                                            @foreach($images as $image)

                                                            <div class="col-12 col-md-6" data-uk-filter="{{ $image['filter'] }}" >
                                                                <figure class="uk-overlay uk-overlay-hover mb-3 h-100" style="border: 2px solid #ddd;">
                                                                    <div class="video-container">
                                                                        <img src="{{ $image['src'] }}" alt="{{ $image['alt'] }}" class="h-100 object-fit-cover" width="640" height="480" loading="lazy">
                                                                    </div>
                                                                    <h1 style="text-align: center; font-size: clamp(1.5vmax, 1.2vmax, 2vmax); line-height: 1.5;" >{{ $image['title'] }}</h1>
                                                                    <div
                                                                        class="uk-overlay-panel uk-overlay-background uk-overlay-fade">
                                                                    </div>
                                                                    <a class="uk-link-reset"
                                                                        href="{{ $image['src'] }}"
                                                                        data-lightbox-type="image"
                                                                        data-uk-lightbox="{group:'.wk-26b4'}"
                                                                        title="{{ $image['title'] }}">
                                                                        <div class="uk-overlay-panel uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                                                        </div>
                                                                    </a>
                                                                </figure>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                    </div>



                                                </div>

                                            </div>

                                        </div>




                                    </article>
                                </main>



                            </div>


                        </div>
                    </div>
                </div>
            </div>
        @endsection