@extends('layouts.web')

@section('contenido')

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


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

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

    .banner .numero {
        display: inline;
        font-size: 50px;
        font-family: 'Baskeville Old Face';
        color: #aaa;
    }
    .banner .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; */
    }

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

    .banner .letra-e {
        position: absolute;
        bottom: 80px;
        left: 25%;
        width: 22%;
        opacity: 1;
    }
    .banner .fondo {
        position: absolute;
        bottom: 80px;
        left: 45%;
        background: #222;
        width: 330px;
        height: 410px;
    }
    .banner .escabadora {
        width: 400px;
        position: relative;
        top: -80px;
        left: -45px;
        z-index: 20;
    }

    .banner .mira-proveedor {
        position: absolute;
        right: -140px;
        top: 20px;
        width: 60%;
        z-index: 10;
    }

    .banner .flecha {
        font-size: 30px;
    }
</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.5</h1>
                        <h1 class="texto">proveedores</h1>
                    </div>
                    <img class="letra-e" src="{{ asset('img/letra-e.png') }}" alt="">
                    <div class="fondo">
                        <img class="escabadora" src="{{ asset('img/escabadora.png') }}" alt="">
                        <img class="mira-proveedor" src="{{ asset('img/mira.png') }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="row flecha">
            <div class="col text-center text-white">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container mb-4">
        
        <form action="{{ route('web.proveedores', ['tipo-proveedor' => request()->input('tipo-proveedor')]) }}">

            <div id="filtro" class="row justify-content-center mb-3">
                <div class="col-6">
                    <div class="input-group">
                        <input name="nombre" type="text" class="form-control" placeholder="Filtrar" value="{{ request()->input('nombre') }}">
                        <div class="input-group-append" id="button-addon4">
                            <button class="btn btn-secondary" type="button">
                                <i class="fas fa-times"></i>
                            </button>
                            <button class="btn btn-secondary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row my-5 justify-content-center">
                <div class="col text-center">

                    <a href="{{ route('web.proveedores', ['tipo-proveedor' => 0]) }}" 
                    class="btn  @if (0 == request()->input('tipo-proveedor')) btn-danger @else btn-outline-danger @endif">Todos</a>

                    @foreach ($tipos_proveedores as $tipo_proveedor)
                        <a href="{{ route('web.proveedores', ['tipo-proveedor' => $tipo_proveedor->id]) }}" 
                        class="btn @if ($tipo_proveedor->id == request()->input('tipo-proveedor')) btn-danger @else btn-outline-danger @endif">
                            {{ $tipo_proveedor->nombre }}
                        </a>
                    @endforeach
                </div>
            </div>

        </form>

        @foreach ($proveedores as $proveedor)

            <div class="row mt-4">
                <div class="col-lg-10 offset-lg-1">
                    <a href="{{ route('web.proveedores.show', $proveedor->id) }}" style="text-decoration: none;">
                        <div class="card text-white" style="border: none; border-radius: 0; background: #222;">
                            <div class="row no-gutters">
                                @if ($proveedor->logo != null)
                                <div class="col-md-4 p-3" style="display: flex; justify-content: center; background: #222;">
                                    <img src="{{ asset($proveedor->logo) }}" class="card-img" 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 ($proveedor->logo != 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;">{{ $proveedor->tipos_proveedor->nombre }}</span>
                                        <h2 class="card-title">{{ $proveedor->nombre }}</h2>
                                        <p class="card-text">{!! $proveedor->descripcion !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

        @endforeach

        <style>
            a.page-link {
                background: none;
                color: #E53935;
                border: 1px solid #E53935;
            }
            a.page-link:hover {
                color: white;
                background: #E53935;
                border-color: #E53935;
            }

            .page-item.disabled .page-link {
                /* display: none; */
                background: none;
                border-color: #E53935;
            }

            .page-item.active .page-link {
                /* color: black; */
                background-color: #E53935;
                border-color: #E53935;
            }
        </style>

        <div class="row mt-5">
            <div class="col col-lg-10 offset-lg-1">
                <div class="float-right">
                    {{ $proveedores->withQueryString()->links() }}
                </div>
            </div>
        </div>
        
    </div>
</section>

@endsection

@section('scripts')

@if (request()->has('tipo-proveedor'))
    <script>
        $(document).ready(function (){
            $('html, body').animate(
                {
                    scrollTop: $("#filtro").offset().top - 100
                }, 1000);
        });
    </script>
@endif

@endsection