

<?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: 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: 80px;
        left: 25%;
        width: 22%;
        opacity: 0.6;
    }
    .fondo {
        position: absolute;
        bottom: 80px;
        left: 45%;
        background: #222;
        width: 330px;
        height: 410px;
    }
    .excavadora {
        width: 400px;
        position: relative;
        top: -80px;
        left: -45px;
        z-index: 20;
    }

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

    .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.4</h1>
                        <h1 class="texto">profesionales</h1>
                    </div>
                    <img class="letra-e" src="<?php echo e(asset('img/letra-e.png')); ?>" alt="">
                    <div class="fondo">
                        
                        <img class="mira-profesional" 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.profesionales', ['tipo-profesional' => request()->input('tipo-profesional')])); ?>">

            <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.profesionales', ['tipo-profesional' => 0])); ?>" 
                    class="btn  <?php if(0 == request()->input('tipo-profesional')): ?> btn-danger <?php else: ?> btn-outline-danger <?php endif; ?>">Todos</a>

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

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

        </form>

        <style>
            .table {
                color: white;
                border-collapse:separate;
                border-spacing:0 15px;
            }
            
            .table th {
                background: #333;
            }

            .table td {
                background: #222;
                margin-top: 20px;
            }

            .table th, .table td {
                border: none;
                padding: 20px 15px;
            }

            .table th, .table td {
                border-bottom: none !important;
            }

            .table .badge {
                margin-bottom: 0 !important;
            }
        </style>

        <div class="row">
            <div class="col">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Tipo</th>
                            <th>Nombre</th>
                            <th>
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                <span>Dirección</span>
                            </th>
                            <th>
                                <i class="icono-contacto fas fa-phone mr-2"></i>
                                <span>Teléfono</span>
                            </th>
                            <th>
                                <i class="icono-contacto fas fa-envelope mr-2"></i>
                                <span>Email</span>
                            </th>
                            <th>
                                <i class="icono-contacto fas fa-globe-americas mr-2"></i>
                                <span>Web</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $profesionales; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $profesional): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td><span class="badge badge-danger mb-2" style="font-size: 14px; font-weight: 400;"><?php echo e($profesional->tipos_profesional->nombre); ?></span></td>
                            <td><?php echo e($profesional->nombre); ?></td>
                            <td><?php echo e($profesional->direccion); ?></td>
                            <td><?php echo e($profesional->telefono); ?></td>
                            <td><?php echo e($profesional->email); ?></td>
                            <td><?php echo e($profesional->web); ?></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>

        <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($profesionales->withQueryString()->links()); ?>

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

<?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/profesionales/index.blade.php ENDPATH**/ ?>