@extends('client.layouts.app')

@section('title', __('Profile'))

@section('content')
    <style>
        .content-wrapper main section.catalog .modal-card .imgWrapper{
            max-height: 400px;
            width: 60%;
            min-height: 269px;
            margin: 0 auto;
            height: 1000px;
        }
        .content-wrapper main section.catalog .modal-card .imgWrapper img{
            height: 100%;
            width: 100%;
            object-fit: contain;
            object-position: center;
        }
        .catalog .modal-card.new-catalog{
            position:relative;
        }
        .modal-card.text-center.new-catalog:before{
            content: "NEW";
            position: absolute;
            right: 0;
            top: 0;
            width: 20%;
            height: 30px;
            background: #276462!important;
            font-size: 25px;
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            line-height: 30px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 0;
            border-top-right-radius:20px;
        }
    </style>
    <section class="container-fluid catalog">
        <h2 class="pageTitle"><i class="ci ci-book-green"></i>CATALOGHI</h2>
        <div class="row">
             <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center new-catalog">
                    <div class="imgWrapper">
                        <img src="{{asset('img/exacta-pro.png')}}" alt="Catalog Image" />
                    </div>
                    <h4>EXACTA PRO</h4>
                    <p>EXACTA PRO</p>
                    <a href="{{asset('documents/EXACTA22x22cm_Brochure.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/catalog.jpg')}}" alt="Catalog Image" />
                    </div>
                    <h4>CATALOGO INTERATTIVO</h4>
                    <p>CATALOGO INTERATTIVO</p>
                    <a href="https://uno.optovista.it/cataloghi" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center new-catalog">
                    <div class="imgWrapper">
                        <img src="{{asset('img/ingenia-2022.jpg')}}" alt="Catalog Image" />
                    </div>
                    <h4>INGENIA </h4>
                    <p>INGENIA</p>
                    <a href="{{asset('documents/Ingenia.PDF')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center new-catalog">
                    <div class="imgWrapper">
                        <img src="{{asset('img/my-age-kid-myopia.png')}}" alt="Catalog Image" />
                    </div>
                    <h4> MY AGE KID MYOPIA</h4>
                    <p> MY AGE KID MYOPIA</p>
                    <a href="{{asset('documents/MYAGE-KID-MYOPIA-22x22cm-LOWDEF.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/myAge22x22cm.png')}}" alt="Catalog Image" />
                    </div>
                    <h4> MYAGE</h4>
                    <p> MYAGE</p>
                    <a href="{{asset('documents/MY_AGE_2023.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/myAgeCoverQuestioneer.png')}}" alt="Catalog Image" />
                    </div>
                    <h4> Questionario MYAGE</h4>
                    <p> Questionario MYAGE</p>
                    <a href="{{asset('documents/myAgeQuestionario.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/opsInova20.png')}}" alt="Catalog Image" />
                    </div>
                    <h4> OPS INOVA 2.0 </h4>
                    <p> OPS INOVA 2.0 </p>
                    <a href="{{asset('documents/opsInova20.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>

            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/confidenziale-2024.png')}}" alt="Catalog Image" />
                    </div>
                    <h4>CATALOGO CONFIDENZIALE 2024</h4>
                    <p>CATALOGO CONFIDENZIALE 2024</p>
                    <a href="{{asset('documents/LISTINO-CONFIDENZIALE-2024.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/catalogo-2024.png')}}" alt="Catalog Image" />
                    </div>
                    <h4>LENTI OFTALMICHE</h4>
                    <p>Collezione 2024</p>
                    <a href="{{asset('documents/OPTOVISTA-CATALOGO-2024.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3">
                <div class="modal-card text-center">
                    <div class="imgWrapper">
                        <img src="{{asset('img/colorazione-2024.png')}}" alt="Catalog Image" />
                    </div>
                    <h4>CATALOGO COLORAZIONI</h4>
                    <p>Catalogo Colorazioni 2024</p>
                    <a href="{{asset('documents/CATALOGO-COLORI-24.pdf')}}" target="_blank">SFOGLIA</a>
                </div>
            </div>
    

            @if($documents)
                @foreach($documents as $document)
                    <div class="col-sm-4 col-lg-3">
                        <div class="modal-card text-center">
                            <div class="imgWrapper">
                                <img src="{{asset($document->thumbnail_path)}}" alt="Catalog Image" />
                            </div>
                            <h4>{{$document->title}}</h4>
                            <p>{{$document->description}}</p>
                            <a href="{{asset($document->document_path)}}" target="_blank">SFOGLIA</a>
                        </div>
                    </div>
                @endforeach

            @endif
        </div>
        <!--<div class="loader"></div>-->
    </section>
@endsection