@extends('layouts.web')

@section('contenido')

<style>
    a div.card:hover {
        transform: scale(1.02);
    }
    button {
        z-index: 0 !important;
    }


    .banner {
        padding-top: 80px;
        margin-bottom: 80px; 
    }

    /* Banner */
    .titulo-banner {
        position: absolute;
        left: 14%;
        /* top: 15px; */
        z-index: 100;
    }

    .numero {
        display: inline;
        font-size: 50px;
        font-family: 'Baskeville Old Face';
        color: #aaa;
    }
    .numero::after {
        z-index: 0;
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        display: inline-block;
        height: 100%;
        width: 75px;
        border-bottom: 2px solid #aaa;
        /* transition: 0.25s; */
    }

    .texto {
        display: inline;
        margin-left: 20px;
        font-family: 'Century Gothic';
        font-size: 50px;
        font-weight: 600;
        letter-spacing: 8px;
    }

    .letra-e {
        position: absolute;
        bottom: -20%;
        left: -20%;
        width: 30%;
        opacity: 0.9;
    }

    .fondo {
        position: relative;
        top: 100px;
        left: 10%;
        background: #222;
        width: 80%;
        height: 380px;

        background-size: cover;
        background-position: center;
    }

    .cuadro-novedad {
        position: absolute;
        bottom: -50px;
        background: #222;
        padding: 20px;
        left: 50px;
        width: 100%;
    }
    .cuadro-titulo {
        font-size: 25px;
    }

    .mira-proveedor {
        position: absolute;
        right: -140px;
        top: 20px;
        width: 25%;
        z-index: 10;
    }
</style>

<section class="banner">
    <div class="container">
        <div class="row">
            <div class="col">
                <div style="position: relative; height: 500px;">
                    <div class="titulo-banner">
                        <h1 class="numero">0.9</h1>
                        <h1 class="texto">novedades</h1>
                    </div>

                    @if ($principal != null)
                        <a href="{{ route('web.novedades.show', $principal->id) }}">
                            <div class="fondo" @if ($principal->imagen != null) style="background-image: url({{asset($principal->imagen)}});" @endif>
                            
                                <img class="letra-e" src="{{ asset('img/letra-e.png') }}" alt="">
                                <img class="mira-proveedor" src="{{ asset('img/mira.png') }}">

                                <div class="cuadro-novedad text-white">
                                    <h5 class="cuadro-titulo">{{ $principal->titulo }}</h5>
                                    <p class="card-text">{{ $principal->copete }}</p>
                                    <p class="card-text"><small class="text-muted">{{ $principal->updated_at->diffForHumans() }}</small></p>
                                </div>
                            </div>
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container mb-5">
        <div class="row">
            {{-- Novedades DESTACADAS --}}
            @foreach ($destacadas as $destacada)
                <div class="col-lg-4">
                    <a href="{{ route('web.novedades.show', $destacada->id) }}" style="text-decoration: none;">
                        <div class="card h-100 text-white">
                            @if ($destacada->imagen != null)
                                <img src="{{ asset($destacada->imagen) }}" class="card-img-top" alt="...">
                            @endif
                        
                            <div class="card-body">
                                <h5 class="card-title">{{ $destacada->titulo }}</h5>
                                @if ($destacada->imagen == null)
                                    <p class="card-text">{{ $destacada->copete }}</p>
                                @endif
                                <p class="card-text"><small class="text-muted">{{ $destacada->updated_at->diffForHumans() }}</small></p>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <br><br>

        {{-- Novedades NORMALES --}}
        <div class="row">
            <div class="col-lg-9">
                <div class="row">
                    @foreach ($novedades as $novedad)
                        <div class="col-lg-4">
                            <a href="{{ route('web.novedades.show', $novedad->id) }}" style="text-decoration: none;">
                                <div class="card h-100 text-white">
                                    @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
                                        <p class="card-text"><small class="text-muted">{{ $novedad->updated_at->diffForHumans() }}</small></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-3">
                <div class="row">
                    @foreach ($ofertas as $oferta)
                        <div class="col">
                            <div class="card h-100 text-white">
                                @if ($oferta->imagen != null)
                                    <img src="{{ asset($oferta->imagen) }}" class="card-img-top" alt="...">
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

@endsection