@extends('layouts.web')

@section('portada') class="portada" @endsection

@section('contenido')

<style>
    img.layer {
        /* position: absolute; */
        /* top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; */
    }

    img.layer.decoracion {
        width: 400px;
        height: 400px;
        position: absolute;
        opacity: 0.3;
        top: 90px;
        left: 40%;
    }

    h1.layer {
        font-size: 120px;
        position: relative;
        font-family: 'OCR';
        /* top: 40vh; */
    }

    h2 {
        font-size: 40px;
    }

    div.content-parallax span {
        position: relative;
        top: 60vh;
    }
    div.content-parallax button {
        position: relative;
        top: 40vh;
    }
    
    div.content-parallax {
        /* background: yellow; */
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        /* display: flex; */
        /* justify-content: center;
        align-content: center; */
    }

    section.accesos-rapidos h4 {
        font-weight: bold; 
        font-size: 22px; 
        font-family: Arial; 
        letter-spacing: 6px;
    }
</style>


<section class="seccion1">
    <img src="{{ asset('img/background-hormigon-poligonos.jpg') }}" alt=""
         class="fondo layer" data-speed-x="-2" data-speed-y="-2" data-speed-z="0">

    <img src="{{ asset('img/costear_logo.png') }}" alt=""
         class="logo layer" data-speed-x="-3" data-speed-y="-3" data-speed-z="0">

    <img class="mira" src="{{ asset('img/mira.png') }}" alt="">
</section>


<section class="seccion1" hidden>
        <div class="content-parallax text-center">

            <img src="{{ asset('img\mira.png') }}" class="layer decoracion" data-speed-x="10" data-speed-y="10" data-speed-z="0">
            {{-- <img src="{{ asset('img\10.png') }}" class="layer decoracion" data-speed-x="5" data-speed-y="-3" data-speed-z="0"> --}}
            {{-- <img src="{{ asset('img\9.png') }}" class="layer decoracion" data-speed-x="-7" data-speed-y="-5" data-speed-z="0"> --}}

            <div class="logo" style="height:300px; width: 80%; margin-left: 10%; padding: 50px; margin-top: 120px;">
                <h1 class="layer d-inline-block" data-speed-x="1" data-speed-y="0" style="left: 30px; letter-spacing: 12px;">Cost</h1>
    
                <img style="width: 150px; height: 150px; postion: absolute;" src="{{ asset('img\e-logo-costear.png') }}" alt="" class="layer" data-speed-x="0" data-speed-y="0">
    
                <h1 class="layer d-inline-block" data-speed-x="-1" data-speed-y="0" style="right: 30px; letter-spacing: 12px;">ar</h1>
            </div>

            <h2 style="letter-spacing: 16px;">construcción</h2>
        </div>
</section>

<section class="container-fluid accesos-rapidos" style="background: black;">
    <div class="row text-center text-white">
        <div class="col p-3">
            <h4>presupuestos</h4>
        </div>
        <div class="col p-3">
            <h4>cómputos</h4>
        </div>
        <div class="col p-3">
            <h4>publicidad</h4>
        </div>
    </div>
</section>

<section class="espacios" style="background: #333;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <a href="{{ route('web.novedades') }}">
                    <div class="titulo">
                        <span class="numero">0.9</span>
                        <span class="texto">novedades</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="novedades h-100">
                    @foreach ($novedades as $novedad)
                        <a href="{{ route('web.novedades.show', $novedad->id) }}" style="text-decoration: none;">
                            <div class="card h-100 text-white m-3">
                                @if ($novedad->imagen != null)
                                    <img src="{{ asset($novedad->imagen) }}" class="card-img-top" alt="...">
                                @endif
                                <div class="card-body">
                                    <h5 class="card-title">{{ $novedad->titulo }}</h5>
                                    @if ($novedad->imagen == null)
                                        <p class="card-text">{{ $novedad->copete }}</p>
                                    @endif
                                </div>
                                <div class="card-footer">
                                    <p class="card-text"><small class="text-muted">{{ $novedad->updated_at->diffForHumans() }}</small></p>
                                </div>
                            </div>
                        </a>
                    @endforeach

                    {{-- Una novedad más para ir a novedades --}}
                    {{-- <a href="{{ route('web.novedades') }}" style="text-decoration: none;">
                        <div class="card h-100 text-white m-3">
                            <div class="card-body text-center">
                                <h2 class="mt-5" style="font-size: 80px;">+</h2>
                                <h5 class="card-title">más novedades</h5>
                            </div>
                        </div>
                    </a> --}}
                </div>
            </div>
        </div>
    </div>
</section>

<section class="espacios" style="background: #111;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <a href="{{ route('web.proveedores') }}">
                    <div class="titulo">
                        <span class="numero">0.5</span>
                        <span class="texto">proveedores</span>
                    </div>
                </a>
                {{-- <h1 class="titulo titulo-link">
                    <a href="{{ route('web.proveedores') }}" class="effect-underline">
                        <span class="numero">0.5</span>
                        <span class="texto">proveedores</span>
                    </a>
                </h1> --}}
            </div>
        </div>

        <style>
            div.proveedores div.proveedor { 
                height:200px;
                filter: grayscale(100%);
            }
            
            div.proveedores div.proveedor:hover {
                filter: grayscale(0%);
            }
        </style>

        <div class="row">
            <div class="col">
                <div class="proveedores h-100">
                    @foreach ($proveedores as $proveedor)
                        @if ($proveedor->logo != null)
                        <div class="p-3">
                            <a href="{{ route('web.proveedores.show', $proveedor->id) }}" style="text-decoration: none;">
                                <div class="proveedor" style="background: url('{{ asset($proveedor->logo) }}') no-repeat center; background-size: contain;"></div>
                                {{-- <img src="{{ asset($proveedor->logo) }}" alt="..." width="100%"> --}}
                            </a>
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
    // Slick
    
    $('.novedades').slick({
        infinite: false,
        slidesToShow: 3,
        // autoplay: true,
        // autoplaySpeed: 2000,
    });
    
    $('.proveedores').slick({
        infinite: true,
        slidesToShow: 5,
        autoplay: true,
        autoplaySpeed: 1000,
    });
</script>
@endsection