@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: 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="{{ asset('img/letra-e.png') }}" alt="">
                    <div class="fondo">
                        {{-- <img class="excavadora" src="{{ asset('img/excavadora.png') }}" alt=""> --}}
                        <img class="mira-profesional" 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.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="{{ 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.profesionales', ['tipo-profesional' => 0]) }}" 
                    class="btn  @if (0 == request()->input('tipo-profesional')) btn-danger @else btn-outline-danger @endif">Todos</a>

                    @foreach ($tipos_profesionales as $tipo_profesional)
                        <a href="{{ route('web.profesionales', ['tipo-profesional' => $tipo_profesional->id]) }}" 
                        class="btn @if ($tipo_profesional->id == request()->input('tipo-profesional')) btn-danger @else btn-outline-danger @endif">
                            {{ $tipo_profesional->nombre }}
                        </a>
                    @endforeach
                </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>
                        @foreach ($profesionales as $profesional)
                        <tr>
                            <td><span class="badge badge-danger mb-2" style="font-size: 14px; font-weight: 400;">{{ $profesional->tipos_profesional->nombre }}</span></td>
                            <td>{{ $profesional->nombre }}</td>
                            <td>{{ $profesional->direccion }}</td>
                            <td>{{ $profesional->telefono }}</td>
                            <td>{{ $profesional->email }}</td>
                            <td>{{ $profesional->web }}</td>
                        </tr>
                        @endforeach
                    </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">
                    {{ $profesionales->withQueryString()->links() }}
                </div>
            </div>
        </div>
        
    </div>
</section>

@endsection