@extends('layouts.app')

@push('css')
    <style>
        .btn-nuevo:hover::after{
            content: 'Crear nuevo aviso';
            text-decoration: none;
            visibility: visible;
        }
        .btn-nuevo:hover::after{
            content: 'Crear nuevo producto';
            text-decoration: none;
            visibility: visible;
        }
        .productocaja .row .foto .btn-principal-mini{
            position: absolute;
            top: 45%;
            left: 35%;
            letter-spacing: 0px;
            padding: 8px 10px;
            background: #0b5cd7 !important;
        }
        .productocaja:hover .row .foto .btn-principal-mini{
            display: block !important;
        }
        .add-cart{
            position: absolute !important;
        }
        .btn-nuevo:hover.add-cart::after{
            content: 'Agregar al carrito';
            text-decoration: none;
            visibility: visible;
        }
    </style>
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row" id="busqueda_list">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                   <h3 class="titulo-modulo texto-obscuro">Busqueda: {{ $busqueda }}</h3>
               </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('home') }}">Dashboard</a><span class="breadcrumb-item active">Busqueda</span></nav>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <form action="{{ url('busqueda') }}" method="post">
                        @csrf
                        <input name="search" type="text" class="search input_main input_buscador float-right" placeholder="Buscar...">
                    </form>
                </div>
           </div>
           <div class="empty-space-10"></div>
           @include('busqueda.table')
           <div class="empty-space-30"></div>
       </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    <script>
    </script>
@endpush