

<?php $__env->startSection('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="<?php echo e(asset('img/letra-e.png')); ?>" alt="">
                    <div class="fondo">
                        <img class="excavadora" src="<?php echo e(asset('img/excavadora.png')); ?>" alt="">
                        <img class="mira-equipo" src="<?php echo e(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="<?php echo e(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="<?php echo e(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="<?php echo e(route('web.equipos', ['tipo-equipo' => 0])); ?>" 
                    class="btn  <?php if(0 == request()->input('tipo-equipo')): ?> btn-danger <?php else: ?> btn-outline-danger <?php endif; ?>">Todos</a>

                    <?php $__currentLoopData = $tipos_equipos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tipo_equipo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e(route('web.equipos', ['tipo-equipo' => $tipo_equipo->id])); ?>" 
                        class="btn <?php if($tipo_equipo->id == request()->input('tipo-equipo')): ?> btn-danger <?php else: ?> btn-outline-danger <?php endif; ?>">
                            <?php echo e($tipo_equipo->nombre); ?>

                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

        </form>

        <?php $__currentLoopData = $equipos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $equipo): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

            <div class="row mt-4">
                <div class="col-lg-10 offset-lg-1">
                    <a href="<?php echo e(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">
                                <?php if($equipo->imagen != null): ?>
                                <div class="col-md-4" style="display: flex; justify-content: center; background: #222;">
                                    <img src="<?php echo e(asset($equipo->imagen)); ?>" class="card-img-top" alt="" style="border-radius: 0; margin: auto;">
                                </div>
                                
                                <?php endif; ?>
                                <?php if($equipo->imagen != null): ?>
                                <div class="col-md-8">
                                <?php else: ?>
                                <div class="col-md-12">
                                <?php endif; ?>
                                    <div class="card-body">
                                        <span class="badge badge-danger mb-2" style="font-size: 14px; font-weight: 400;"><?php echo e($equipo->tipos_equipo->nombre); ?></span>

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

                                        <h2 class="card-title"><?php echo e($equipo->nombre); ?></h2>
                                        <p class="card-text"><?php echo $equipo->descripcion; ?></p>

                                        <?php if($equipo->proveedor->servicio_id == 1): ?>
                                            <span>Proveedor</span>
                                            <span class="ml-2" style="color:red;">
                                                <?php echo e($equipo->proveedor->nombre); ?>

                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        <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">
                    <?php echo e($equipos->withQueryString()->links()); ?>

                </div>
            </div>
        </div>
        
    </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>

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

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.web', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\costear\resources\views/web/equipos/index.blade.php ENDPATH**/ ?>