@extends('layouts.web')

@section('contenido')

<style>
    section.datos-proveedor {
        min-height: 650px;
    }

    .proveedor {
        padding-top: 100px;
        margin-bottom: 30px;
    }

    .banner {
        height: 400px;
        width: 250px;
        position: absolute;
        right: 20px;
        top: 20px;
        -webkit-box-shadow: -20px -20px 0px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: -20px -20px 0px 1px rgba(0,0,0,0.3);
        box-shadow: -20px -20px 0px 1px rgba(0,0,0,0.3);
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        z-index: -2;
    }

    .letra-e {
        width: 350px;
        position: absolute;
        top: 30px;
        left: -30px;
        opacity: 0.6;
        z-index: -3;
    }

    .datos {
        padding: 20px 10px;
    }

    .mira-proveedor {
        width: 32%;
        position: absolute;
        left: 45%;
        top: -40px;
        z-index: -1;
    }

    .logo-proveedor {
        position: relative;
        width: 50%;
        z-index: 100;
        margin-right: 50%;
        margin-bottom: 30px; 
    }
    .logo-proveedor img {
        width: 100%;
    }

    .tipo-proveedor {
        /* margin-bottom: 30px; */
        display: inline;
        text-transform: lowercase;
        color: white;
        font-size: 25px;
        position: relative;
        letter-spacing: 4px;
    }
    .tipo-proveedor::before {
        z-index: -1;
        position: absolute;
        right: -12px;
        content: '';
        /* display: inline; */
        background: #222;
        width: calc(100% + 80px);
        height: 40px;
    }

    .nombre-proveedor {
        margin-top: 10px;
        font-weight: bold;
        letter-spacing: 10px;
        font-size: 80px;
    }
    .descripcion-proveedor {
        color: white;
        font-size: 18px;
    }
</style>

<section class="datos-proveedor">
    <div class="container">
        <div class="row proveedor">
            <div class="col-lg-5">
                <a class="atras" href="{{ route('web.proveedores') }}">
                    <i class="fas fa-arrow-circle-left"></i>
                </a>
                <img class="letra-e" src="{{ asset('img/letra-e.png') }}" alt="">
                <div class="banner" style="background: url('{{ asset($proveedor->tipos_proveedor->banner) }}');"></div>
            </div>
            <div class="col-lg-7">
                <div class="datos">
                    <div class="logo-proveedor">
                        <img src="{{ asset($proveedor->logo) }}" alt="">
                    </div>
                    <img class="mira-proveedor" src="{{ asset('img/mira.png') }}" alt="">
                    <span class="tipo-proveedor">{{ $proveedor->tipos_proveedor->nombre }}</span>
                    <h1 class="nombre-proveedor">{{  $proveedor->nombre }}</h1>
                    <div class="descripcion-proveedor">{!! $proveedor->descripcion !!}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
section.contacto-proveedor {
    background: #222;
    padding-top: 30px;
    padding-bottom: 30px;
}

.icono-contacto {
    font-size: 30px;
    color: #aaa;
    margin-bottom: 20px;
    display: block;
}
.texto-contacto {
    color: white;
    
}

.mapa-proveedor {
    /* height: 200px; */
    padding-top: 30px;
}
.mapa-proveedor iframe {
    height: 200px;
}
</style>

<section class="contacto-proveedor">
    <div class="container">
        <div class="row justify-content-center">

            @if ($proveedor->direccion != null)
                <div class="col-lg-3 text-center">
                    <i class="icono-contacto fas fa-map-marker-alt"></i>
                    <span class="texto-contacto">{{ $proveedor->direccion }}</span>
                </div>
            @endif

            @if ($proveedor->direccion != null)
                <div class="col-lg-3 text-center">
                    <i class="icono-contacto fas fa-phone"></i>
                    <span class="texto-contacto">{{ $proveedor->telefono }}</span>
                </div>
            @endif

            @if ($proveedor->email != null)
                <div class="col-lg-3 text-center">
                    <i class="icono-contacto fas fa-envelope"></i>
                    <span class="texto-contacto">{{ $proveedor->email }}</span>
                </div>
            @endif

            @if ($proveedor->web != null)
                <div class="col-lg-3 text-center">
                    <i class="icono-contacto fas fa-globe-americas"></i>
                    <span class="texto-contacto">{{ $proveedor->web }}</span>
                </div>
            @endif
        </div>

        @if ($proveedor->mapa != null)
            <div class="row">
                <div class="col">
                    <div class="mapa-proveedor">
                        {!! $proveedor->mapa !!}
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>

<style>
    section.novedades-proveedor {
        padding-top: 30px;
        padding-bottom: 40px;
    }
</style>

@if (count($proveedor->novedades) > 0)
<section class="novedades-proveedor">
    <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">
                    @foreach ($proveedor->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
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<style>
    section.ofertas-proveedor {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    div.ofertas div {
        height: 400px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

@if (count($proveedor->ofertas) > 0)
<section class="ofertas-proveedor">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="ofertas">
                    @foreach ($proveedor->ofertas as $oferta)
                        <div style="background-image: url({{ asset($oferta->imagen) }});"></div>
                    @endforeach
                    {{-- <div style="background-image: url({{ asset('img/arquitectura.jpg') }});"></div>
                    <div style="background-image: url({{ asset('img/escabadora.png') }});"></div> --}}
                </div>
            </div>
        </div>
    </div>
</section>
@endif


<style>
    section.equipos-proveedor {
        padding-top: 30px;
        padding-bottom: 40px;
        background: #333;
    }
</style>

<section class="equipos-proveedor">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <a href="{{ route('web.novedades') }}">
                    <div class="titulo">
                        <span class="numero">0.6</span>
                        <span class="texto">equipos</span>
                    </div>
                </a>
            </div>
        </div>
        @foreach ($proveedor->equipos as $equipo)
        <div class="row mt-4">
            <div class="col-lg-10 offset-lg-1">
                <a href="{{ route('web.equipos.show', $equipo->id) }}" style="text-decoration: none;">
                    <div class="card text-white" style="border: none; border-radius: 0; background: #222;">
                        <div class="row no-gutters">
                            @if ($equipo->imagen != null)
                            <div class="col-md-4" style="display: flex; justify-content: center; background: #222;">
                                <img src="{{ asset($equipo->imagen) }}" class="card-img-top" alt="" style="border-radius: 0; margin: auto;">
                            </div>
                            {{-- @else
                                <img src="{{ asset('img/first-slide.svg') }}" class="card-img" alt="..." style="position: absolute; top: 0; bottom: 0; margin: auto;"> --}}
                            @endif
                            @if ($equipo->imagen != null)
                            <div class="col-md-8">
                            @else
                            <div class="col-md-12">
                            @endif
                                <div class="card-body">
                                    <span class="badge badge-danger mb-2" style="font-size: 14px; font-weight: 400;">{{ $equipo->tipos_equipo->nombre }}</span>

                                    @if ($equipo->alquiler)
                                        <span class="badge badge-secondary">Alquiler</span>
                                    @endif
                                    @if ($equipo->venta)
                                        <span class="badge badge-secondary">Venta</span>
                                    @endif

                                    <h2 class="card-title">{{ $equipo->nombre }}</h2>
                                    <p class="card-text">{!! $equipo->descripcion !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        @endforeach
    </div>
</section>

<style>
    section.youtube-proveedor {
        background: #222;
        padding-top: 40px;
        padding-bottom: 30px;
    }
</style>

@if ($proveedor->youtube != null)
    <section class="youtube-proveedor">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="video">
                        {!! $proveedor->youtube !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif


{{-- Slick --}}
<style>
    ul.slick-dots {
        bottom: -40px;
    }
    .slick-dots li button::before {
        color: red;
        font-size: 15px;
    }
    .slick-dots li.slick-active button:before {
        color: red;
    }
    .slick-dotted {
        margin-bottom: 50px !important;
    }
</style>






<div class="container mt-3 mb-5 text-white" hidden>
    <div class="row">
        <div class="col-lg-4">
            <div class="card card-body">
                <h3>Contacto</h3>
                <div class="row contacto">
                    <div class="col-2">
                        <div class="circulo">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                    </div>
                    <div class="col-10">
                        <span>{{ $proveedor->direccion }}</span>
                    </div>
                </div>
                <div class="row contacto">
                    <div class="col-2">
                        <div class="circulo">
                            <i class="fas fa-phone"></i>
                        </div>
                    </div>
                    <div class="col-10">
                        <span>{{ $proveedor->telefono }}</span>
                    </div>
                </div>
                <div class="row contacto">
                    <div class="col-2">
                        <div class="circulo">
                            <i class="fas fa-envelope"></i>
                        </div>
                    </div>
                    <div class="col-10">
                        <span>{{ $proveedor->email }}</span>
                    </div>
                </div>
                <div class="row contacto">
                    <div class="col-2">
                        <div class="circulo">
                            <i class="fas fa-globe-americas"></i>
                        </div>
                    </div>
                    <div class="col-10">
                        <span>{{ $proveedor->web }}</span>
                    </div>
                </div>
                <div class="row pt-4">
                    <div class="col">
                        <style>
                            iframe {
                                width: 100% !important;
                            }
                        </style>
                        @if ($proveedor->mapa != null)
                            {!! $proveedor->mapa !!}
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="row mb-4">
                <div class="col">
                    <div class="card card-body">
                        <h3>Ofertas</h3>

                        @foreach ($proveedor->ofertas as $oferta)
                            <img src="{{ asset($oferta->imagen) }}" alt="">
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col">
                    <div class="card card-body">
                        <h3>Novedades</h3>
                        <div class="p-4">
                            <ul>
                                @foreach ($proveedor->novedades as $novedad)
                                    <li>{{ $novedad->titulo }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
    
@endsection

@section('scripts')
    <script>
        $('.ofertas').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            // autoplay: true,
            // autoplaySpeed: 3000,
        });

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