@extends('site.layouts.master')

@section('title', 'ITV Live')

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
    <div id="content">
        <section id="page-search">
            <div class="w3-container">
                <form class="header-search" id="search" method="get" action="{{route('search.index')}}">
                    <svg data-v-91f61622="" viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="search" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-search icon b-icon bi">
                        <g><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path></g>
                    </svg>  <input type="hidden" value="" id="uuidInput" name="device_id">
                  
                    <input type="text" name="keyword" id="autocomplete" placeholder="{{__('Diễn viên, thể loại, từ khoá...')}}" class="input form-control" autocomplete="off" value="{{ @$_GET['keyword'] }}" />
                    <div class="resetInput" style="">
                        <svg viewBox="0 0 16 16" width="1em" height="1em" focusable="false" role="img" aria-label="x lg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-x-lg b-icon bi">
                            <g>
                                <path d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"></path>
                            </g>
                        </svg>
                    </div>
                    <button type="submit" class="btn btn btn-secondary button-search btn-secondary active">
                        {{__('Tìm kiếm')}}
                    </button>
                </form>
            </div>
        </section>

        <section id="listItem" class="mt-30 mb-30">
            <div class="w3-container">
                @if (!isset($_GET['keyword']) || @$_GET['keyword'] == "")
                    <div class="suggets">
                        <div class="w3-row">
                            <div class="w3-col m7 s12">
                                <h3 class="w3-text fw-700">{{__('Trendings')}}</h4>
                                <div class="topvods-block mt-20">
                                    @foreach ($contents as $content)
                                        <div class="top-item">
                                            <a href="{{ route('category.play' , @$content->slug) }}">
                                                <img style="object-fit: cover;" src="{{ $content->image }}">
                                            </a>
                                            <div class="info">
                                                <a class="ad-title" href="{{ route('category.play' , @$content->slug) }}">{{\Str::title(\Str::limit($content->name, 100, '...'))}}</a>
                                                <ul class="ul-dot">
                                                    <li><i class="fa fa-genderless" style="font-size:1em;"></i>#{{$loop->index + 1}}</li>
                                                   @include('site.pages.category.tags', ['tags' => $content->tags, 'limit' => 4])
                                                    
                                                </ul>
                                            </div>
                                            
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="w3-col m5 s12">
                                <h3 class="w3-text fw-700">{{__('Top từ khoá')}}: </h4>
                                <ul class="top-search mt-20">
                                </ul>
                                
                            </div>
                        </div>
                    </div>
                @else
                    
                    <div class="results">
                        <h3 class="w3-text fw-700">{{__('Tìm kiếm')}} : {{@$_GET['keyword']}}.</h4>
                        @if(isset($movies) && $movies->count() > 0)
                        <div class="w3-row" style=" margin-left: -10px; margin-right: -10px;">
                            @foreach ($movies as $mv)
                                <div class="w3-col s6 m3">
                                    <div class="swiper-slide item-chanel">
                                        <img class="swiper-gl-image  img-video" src="{{ $mv->image }}" alt="">
                                        <a class="btn-play" href="{{ route('category.play' , @$mv->slug) }}">
                                            <i class="fa fa-play"></i>
                                        </a>
                                        <p class="title-trim"><a class="result-title title-trim" href="{{ route('category.play' , @$mv->slug) }}">{{$mv->name}}</a></p>
                                    </div> 
                                </div>
                            @endforeach 
                        </div>
                        {{ $movies->appends(request()->query())->links() }}
                        @else
                        <p style="text-indent: 15px;">{{ __("Không có kết quả")}}</p>
                        @endif
                    </div>
                    
                @endif
             
            </div>
        </section>
    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '{{ route("post_search") }}',
                type: 'POST', 
                data: {
                    _token: _token,
                    uuid: uuid
                },
                success: function (response) {
                    $('.top-search').html(response.html);
             
                },
                error: function (xhr, status, error) {
                    console.log(error);
                }
            });
        });

        document.getElementById("uuidInput").value = uuid;
        var countries = [];
		autocomplete(document.getElementById("autocomplete"), countries);

		function autocomplete(inp, arr) {
		    var currentFocus;
		    inp.addEventListener("input", function (e) {
		        var a,
		            b,
		            i,
		            val = this.value;
		        closeAllLists();
		        if (!val) {
		            return false;
		        }
		        currentFocus = -1;
		        a = document.createElement("DIV");
		        a.setAttribute("id", this.id + "autocomplete-list");
		        a.setAttribute("class", "autocomplete-items");
		        this.parentNode.appendChild(a);
		        var url_search = "{{ route('search.index') }}";
                var term = {term : val, _type : 'query'};
                var data = { _token: _token, keyword : val};
                if(val.length < 2) return;
                $.get(url_search, data, function(arr){
                    for (i = 0; i < arr.length; i++) {
                        b = document.createElement("div");
                        b.innerHTML += '<img class="thumb-search" src="'+arr[i].image+'"/>';
                        b.innerHTML += '<a class="" href="'+arr[i].link+'">'+arr[i].name+'</a>';
                        b.innerHTML += "<input type='hidden' value='" + arr[i].link + "'>";
                        b.addEventListener("click", function(e) {
                            window.location.href = this.getElementsByTagName("input")[0].value;
                            closeAllLists();
                        });
                        a.appendChild(b);
                    }
                });
		    });
		    inp.addEventListener("keydown", function (e) {
                if(e.keyCode == 13) document.getElementById('search').submit();
		        var x = document.getElementById(this.id + "autocomplete-list");
		        if (x) x = x.getElementsByTagName("div");
		        if (e.keyCode == 40) {
		            currentFocus++;
		            addActive(x);
		        } else if (e.keyCode == 38) {
		            currentFocus--;
		            addActive(x);
		        } else if (e.keyCode == 13) {
		            e.preventDefault();
		            if (currentFocus > -1) {
		                if (x) x[currentFocus].click();
		            }
		        }
		    });
		    function addActive(x) {
		        if (!x) return false;
		        removeActive(x);
		        if (currentFocus >= x.length) currentFocus = 0;
		        if (currentFocus < 0) currentFocus = x.length - 1;
		        x[currentFocus].classList.add("autocomplete-active");
		    }
		    function removeActive(x) {
		        for (var i = 0; i < x.length; i++) {
		            x[i].classList.remove("autocomplete-active");
		        }
		    }
		    function closeAllLists(elmnt) {
		        var x = document.getElementsByClassName("autocomplete-items");
		        for (var i = 0; i < x.length; i++) {
		            if (elmnt != x[i] && elmnt != inp) {
		                x[i].parentNode.removeChild(x[i]);
		            }
		        }
		    }
		    document.addEventListener("click", function (e) {
		        closeAllLists(e.target);
		    });
		}
    </script>
@stop