<style>
#header_bar .header-menu {
    max-height: 300px !important;
   
    overflow-y: auto;
}
#header_bar .header-menu::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #fdfdfd;
}

#header_bar .header-menu::-webkit-scrollbar
{
    width: 6px;
    background-color: #fdfdfd;
}

#header_bar .header-menu::-webkit-scrollbar-thumb
{
    background-color: #0187cc;
}
.header-dropdown a img {
    border-radius: 8px;
    padding: 4px;
}


.header-menu ul a {
    padding: 3px 6px;
}

.header-menu {
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    padding: 0 !important;
    border: none;
    /*border-radius:10px;*/
 }

 .header-menu a:hover, .header-menu a:focus {
    color: #0187cc;   
    background-color: #f4f4f4;
}

.header-menu ul a {
    text-transform: capitalize !important;
}

.search_input {
    margin-bottom: 0.1rem;
}
.search_title{

}
.search_price{
    
}
.search_btn{
    
}

.search_input:focus {
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
}

.header-contact span {
    font-weight: normal;
}

</style>

<header class="header">
    
    <div class="header-middle">
        <div class="container">
            <div class="header-left">
                <a href="{{ route("tenant.ecommerce.index") }}" class="logo" style="max-width: 180px">
                    @if($vc_company->logo)
                        <img src="{{ asset('storage/uploads/logos/'.$vc_company->logo) }}" alt="Logo" />
                    @else
                        <img src="{{asset('logo/700x300.jpg')}}" alt="Logo" />
                    @endif
                </a>
            </div><!-- End .header-left -->

            <div id="header_bar" class="header-center header-dropdowns">

                <div class="header-dropdown" style="width:400px;">

                    <input placeholder="Buscar..." type="text" class="search_input form-control form-control-lg" v-model="value" v-on:keyup="autoComplete" />
                    <div class="header-menu">
                        <ul>
                            <li v-for="result in results">
                                <a :href="'/ecommerce/item/' + result.id">
                                    <img style="max-width: 80px" :src="result.image_url_small" alt="England flag">
                                    <span style="font-size: 1.0em;"> @{{ result.description }} </span>
                                </a>
                            </li>
                        </ul>
                    </div><!-- End .header-menu -->
                </div><!-- End .header-dropown -->


            </div><!-- End .headeer-center -->

            <div class="header-right">
                <button class="mobile-menu-toggler" type="button">
                    <i class="icon-menu"></i>
                </button>
                <div class="header-contact">
                     <span><i class="fab fa-whatsapp"></i> Atención</span>
                     <a href="tel:#"><strong>+999 111 888</strong></a>
                </div><!-- End .header-contact -->

                @include('tenant.layouts.partials_ecommerce.cart_dropdown')

                @include('tenant.ecommerce.partials.headers.session')

            </div><!-- End .header-right -->
        </div><!-- End .container -->
    </div><!-- End .header-middle -->

   
</header><!-- End .header -->
@push('scripts')

<script type="text/javascript">
    var app = new Vue({
        el: '#header_bar',
        data: {
            value: '',
            suggestions: [],
            resource: 'ecommerce',
            results: [],
        },
        created() {
            this.getItems()
        },
        methods: {
            autoComplete() {

                if (this.value) {

                    this.results = this.suggestions.filter((obj) => {
                        let city = obj.description.toUpperCase()
                        let val = this.value.toUpperCase()
                        return city.includes(val)
                    })

                } else {
                    this.results = this.suggestions
                }


            },
            getItems() {
                let contex = this
                fetch(`/${this.resource}/items_bar`)
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {
                        // console.log(myJson.data);
                        contex.suggestions = myJson.data
                        contex.results = contex.suggestions
                    });
            },
            suggestionClick(item) {
                console.log(item)
                this.results = []
                this.value = item.description
            }

        }
    })

</script>

@endpush
