@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 */
    .titulo-banner {
        position: absolute;
        left: 20%;
        top: 15px;
        z-index: 100;
        opacity: 0;

        animation-name: example;
        animation-duration: 400ms;
        animation-delay: 1s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .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: 80px;
        left: 25%;
        width: 22%;
        /* opacity: 0.6; */

        opacity: 0;
        animation-name: animacion-letra-e;
        animation-duration: 400ms;
        animation-delay: 600ms;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }
    .fondo {
        position: absolute;
        bottom: 80px;
        left: 45%;
        background: #222;
        width: 330px;
        height: 410px;

        opacity: 0;
        animation-name: animacion-fondo;
        animation-duration: 400ms;
        animation-delay: 800ms;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }
    .excavadora {
        width: 400px;
        position: relative;
        top: -80px;
        left: -45px;
        z-index: 20;

        opacity: 0;
        animation-name: animacion-excavadora;
        animation-duration: 400ms;
        animation-delay: 1200ms;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

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

        opacity: 0;
        animation-name: animacion-mira;
        animation-duration: 400ms;
        animation-delay: 1400ms;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        /* animation-iteration-count: infinite;
        animation-direction: alternate; */
    }

    .flecha {
        font-size: 30px;
    }

    /* Animaciones */

    @keyframes example {
        0%   {opacity:1; left: 0%;}
        100% {opacity:1; left: 20%;}
    }

    @keyframes animacion-fondo {
        0%   {opacity:1; bottom: 150px;}
        100% {opacity:1; bottom: 80px;}
    }

    @keyframes animacion-letra-e {
        0%   {opacity:1; left: 0;}
        100% {opacity:1; left: 25%;}
    }

    @keyframes animacion-excavadora {
        0%   {opacity:1; top: -60px;}
        100% {opacity:1; top: -80px;}
    }

    @keyframes animacion-mira {
        0%   {opacity:1; right: -160px;}
        100% {opacity:1; right: -140px;}
    }
</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.6</h1>
                        <h1 class="texto">equipos</h1>
                    </div>
                    <img class="letra-e" src="{{ asset('img/letra-e.png') }}" alt="">
                    <div class="fondo">
                        <img class="excavadora" src="{{ asset('img/excavadora.png') }}" alt="">
                        <img class="mira-equipo" 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.equipos', ['tipo-equipo' => request()->input('tipo-equipo')]) }}">

            <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.equipos', ['tipo-equipo' => 0]) }}" 
                    class="btn  @if (0 == request()->input('tipo-equipo')) btn-danger @else btn-outline-danger @endif">Todos</a>

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

        </form>

        @foreach ($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>

                                        @if ($equipo->proveedor->servicio_id == 1)
                                            <span>Proveedor</span>
                                            <span class="ml-2" style="color:red;">
                                                {{ $equipo->proveedor->nombre }}
                                            </span>
                                        @endif
                                    </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">
                    {{ $equipos->withQueryString()->links() }}
                </div>
            </div>
        </div>
        
    </div>
</section>

@endsection

@section('scripts')

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

@endsection