@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">
                <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/myAge22x22cm.png')}}" alt="Catalog Image" />
        </div>
          <h4> MYAGE</h4>
          <p> MYAGE</p>
          <a href="{{asset('documents/myAge22x22cm.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/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/7-AQT-INGENIA.png')}}" alt="Catalog Image" />
                </div>
                <h4> NEW - AQT INGENIA RELEASE APRILE 2021</h4>
                <p> AQT INGENIA</p>
                <a href="{{asset('documents/OPTOVISTA_AQT_RELASE_2021.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/zero.png')}}" alt="Catalog Image" />
                </div>
                <h4>ANTIRIFLESSO BRILLIANCE ZERO</h4>
                <p> BRILLIANCE ZERO</p>
                <a href="{{asset('documents/BRILLIANCE-ZERO-ECHNICALS.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/listino2021.png')}}" alt="Catalog Image" />
                </div>
                <h4>CATALOGO CONFIDENZIALE 2021</h4>
                <p>RELEASE APRILE 2021</p>
                <a href="{{asset('documents/LISTINO_CONFIDENZIALE_2021_3.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/confidenziale2021sept.png')}}" alt="Catalog Image" />
                </div>
                <h4>CATALOGO CONFIDENZIALE 2021</h4>
                <p>RELEASE SETTEMBRE 2021</p>
                <a href="{{asset('documents/confidenziale2021sept.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/5-LENTI-OFTALMICHE.png')}}" alt="Catalog Image" />
                </div>
                <h4>LENTI OFTALMICHE</h4>
                <p>Collezione 2020</p>
                <a href="{{asset('documents/catalogo.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/6-CATALOGO-COLORAZIONI-2020.png')}}" alt="Catalog Image" />
                </div>
                <h4>CATALOGO COLORAZIONI</h4>
                <p>Catalogo Colorazioni 2020</p>
                <a href="{{asset('documents/colori.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/1-UV400-e-AR-INTEGRA.png')}}" alt="Catalog Image" />
                </div>
                <h4>UV400 e AR INTEGRA</h4>
                <p>Introduzione Scientifica</p>
                <a href="{{asset('documents/uv400.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/3-RELAX-II.png')}}" alt="Catalog Image" />
                </div>
                <h4>RELAX II</h4>
                <p>Soluzioni visive evolute per portatori digitali</p>
                <a href="{{asset('documents/relax.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