@extends('layouts/master_hf')

@php
    $pagename = 'prodotti forestali';
    $imgpath = "../images/wood_prodotti.jpg";
@endphp

@section('body')
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            const images = document.querySelectorAll('.custom-button img');
            images.forEach(img => {
                const originalSrc = img.src;
                const newSrc = originalSrc.replace(/\.[^/.]+$/, 'Z$&');
                img.dataset.hoverSrc = newSrc;

                img.closest('.custom-button').addEventListener('mouseenter', function() {
                    img.src = img.dataset.hoverSrc;
                    img.style.transition = 'all 0.3s ease';
                });

                img.closest('.custom-button').addEventListener('mouseleave', function() {
                    img.src = originalSrc;
                    img.style.transition = 'all 0.3s ease';
                });
            });
        });
    </script> --}}

    <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">
        {{-- <div class="tm-preload tm-rotate-circle">
        <div class="spinner"></div>
    </div> --}}
        @include('components.breadcrumb')

        <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="container-fluid">
                                        <div class="col-12">
                                            <div class="text-center w-100">
                                                <a href="{{ route('catalogo.forestale') }}"
                                                    class="btn btn-primary w-100 pt-2 pb-2 border border-dark" style="max-height: 3.5rem; font-size: 1.3rem;" target="_blank">
                                                    <img src='images/pdf.png' class="img-fluid me-2" style="max-height: 2.3rem;"
                                                        alt="PDF Icon">
                                                    Apri il Catalogo Forestale
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="tm-article-wrapper container-fluid">
                                        <div class="tm-article row">
                                            @php
                                                $prodotti = [
                                                    [
                                                        'nome' => 'Pinze per Tronchi',
                                                        'immagine' =>
                                                            'pinzatronchi-25e27c45f01526eccd798fa6bfe6d774.png',
                                                        'link' => 'pinze',
                                                        'desc' => [
                                                            'Costruite in acciaio ad altissima resistenza',
                                                            'Perni in acciaio',
                                                            'Boccole in bronzo-acciaio',
                                                            'Ideale per movimentazione tronchi',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Kit Motosega',
                                                        'immagine' =>
                                                            'kitmotosega-dda96e2ec099b7e0e5be58c33ad4f879.png',
                                                        'link' => 'motoseghe',
                                                        'desc' => [
                                                            'Cassa con acciaio resistente ed elastico',
                                                            'Motori Parker a pistoni',
                                                            'Tendicatena automatico (optional)',
                                                            'Catene da 0.404" 2mm o 3/4" 3.1mm'
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Pinza con Kit Motosega',
                                                        'immagine' => 'pinzakit-eb338105afacc3dcb79210a00c8fb0a1.png',
                                                        'link' => 'pinzakitmotosega',
                                                        'desc' => [
                                                            'Varie combinazioni per diversi tipi di escavatori o macchine forestali',
                                                            'Tre sistemi di rotazione: a pendolo, a tavola a vite o a ralla dentata',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Traslatori',
                                                        'immagine' => 'traslatore-7ac80ad0272347b3a5f53197284b8dcb.png',
                                                        'link' => 'traslatori',
                                                        'desc' => [
                                                            'Permettono di spostare la motosega per ottenere una centratura del taglio più precisa e accurata',                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Pinza Abbattitrice',
                                                        'immagine' => 'abbatti-f28d9f59ff65c6730f280ef83d40844f.png',
                                                        'link' => 'abbattitrici',
                                                        'desc' => [
                                                            'Ideale per abbattere alberi vicino al terreno',
                                                            'Possibilità di sezionare la pianta ed effettuare il carico e scarico su camion',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Pinza Spacca Tronchi',
                                                        'immagine' =>
                                                            'spaccatronchi-c43606f3ad4b59ed9fded08e85138dce.png',
                                                        'link' => 'spaccatronchi',
                                                        'desc' => [
                                                            'Costruita in acciaio ad altissima resistenza',
                                                            'Lame intercambiabili',
                                                            'Utile per spaccare tronchi di grandi dimensioni, col fine di facilitare altre lavorazioni',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Rotatori Indexator',
                                                        'immagine' =>
                                                            'rotatoreindex-d08c57a231145fe265609701548f4a94.png',
                                                        'link' => 'rotatori',
                                                        'desc' => [
                                                            'Rotatori con rotazione a 360 gradi continui di vario tonnellaggio',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Barre e Pignoni',
                                                        'immagine' => 'barre-dc5b49ea1f1244f8ed43ae985f32c74f.png',
                                                        'link' => 'barre',
                                                        'desc' => [
                                                            'Barre e pignoni per motoseghe di ricambio',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Rotatori Interlam',
                                                        'immagine' => 'rota-int-ad8d7830246c14368b4733477825b07c.png',
                                                        'link' => 'rotatoriinterlam',
                                                        'desc' => [
                                                            'Costruiti con ralle dentate',
                                                            'Motori orbitali ad ingranaggi e riduttori',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Tavole Girevoli a vite',
                                                        'immagine' =>
                                                            'tavolegirevoli-6475e265a4a560a5952af21613f69fbb.png',
                                                        'link' => 'tavole',
                                                        'desc' => [
                                                            'Tavole con rotazione con vite senza fine',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Cesoia con Lama Fissa',
                                                        'immagine' =>
                                                            'cesoialamafissa-f9237c890043a85f5bb9bcee905ecef4.png',
                                                        'link' => 'cesoiafissa',
                                                        'desc' => [
                                                            'Costruite in acciaio ad altissima resistenza',
                                                            'Perni e cilindri di grandi dimensioni',
                                                            'Utile per il taglio di piccoli alberi vicino al terreno e anche per la potatura di rami'
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Cesoie con Lama a Scomparsa',
                                                        'immagine' => 'pinzapinza-00517734e99af7e9ec17e7768a0a9a6c.png',
                                                        'link' => 'cesoiascomparsa',
                                                        'desc' => [
                                                            'Costruite in acciaio ad altissima resistenza',
                                                            'Perni e cilindri di grandi dimensioni',
                                                            'Adatta alla pulizia di argini e viali',
                                                            'Con la lama retratta permette la movimentazione di materiali vari'
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Cesoia',
                                                        'immagine' => 'cesoia333-3ab9e33aca98dfaddb6f1f176e9e7696.png',
                                                        'link' => 'cesoia',
                                                        'desc' => [
                                                            'Costruite in acciaio ad altissima resistenza',
                                                            'Perni e cilindri di grandi dimensioni',
                                                            'Utile per potare e abbattere alberi di grandi dimensioni ',
                                                        ],
                                                    ],
                                                    [
                                                        'nome' => 'Cavaceppi',
                                                        'immagine' =>
                                                            'cavaceppi22-c01f97433adac9c511b470b4f1fb27e7.png',
                                                        'link' => 'cavaceppi',
                                                        'desc' => [
                                                            'Costruite in acciaio ad altissima resistenza',
                                                            'Punte riportate con saldatura anti-usura',
                                                            'Utile per cavare i ceppi dal terreno e triturarli'
                                                        ],
                                                    ],
                                                ];
                                            @endphp

                                            @foreach ($prodotti as $p)
                                                <div class="col-md-6 col-lg-6 mb-4 d-none d-md-block">

                                                    <a href="{{ route($p['link']) }}" class="h-100 px-0">
                                                        <div class="custom-button h-100">
                                                            <div class="container-fluid">
                                                                <div class="row text-left">
                                                                    <div class="col-5 pl-0">
                                                                        <img src="media/widgetkit/{{ $p['immagine'] }}"
                                                                            alt="Immagine {{ $p['nome'] }}">
                                                                    </div>
                                                                    <div class="col-7">
                                                                        <div class="text-container">
                                                                            <div class="title"
                                                                                style="font-size: clamp(16px, 2vw, 20px)">
                                                                                {{ $p['nome'] }}</div>
                                                                            <div class="highlight"></div>
                                                                            @foreach ($p['desc'] as $desc)
                                                                            <ul class="subtitle my-0" style="font-size: clamp(10px, 2vw, 14px); text-align: left;">
                                                                                <li>{{ $desc }}</li>
                                                                            </ul>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            @endforeach

                                            @foreach ($prodotti as $p)
                                                <div class="col-md-6 col-lg-6 mb-4 d-md-none">

                                                    <a href="{{ route($p['link']) }}" class="h-100 px-0">
                                                        <div class="custom-button h-100">
                                                            <div class="container-fluid">
                                                                <div class="row text-left">
                                                                    <div class="col-12 pl-0">
                                                                        <img src="../media/widgetkit/{{ $p['immagine'] }}"
                                                                            alt="Immagine {{ $p['nome'] }}">
                                                                    </div>
                                                                    <div class="col-12">
                                                                        <div class="text-container">
                                                                            <div class="highlight"></div>
                                                                            <div class="title"
                                                                                style="font-size: clamp(16px, 2vw, 20px)">
                                                                                {{ $p['nome'] }}</div>


                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                </article>
                            </main>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection