@extends('website.layouts.master')

@section('title', __('tr.Advanced Search'))

@section('content')

@include('website.layouts.title', ['simple'=>true])

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<style>

    .blog .carousel-indicators {
        left: 0;
        top: auto;
        top: -19px;

    }

    /* The colour of the indicators */
    .blog .carousel-indicators li {
        background: #a3a3a3;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

    .blog .carousel-indicators .active {
    background: #707070;
    }

    .keyText{
        font-weight: bold;
        margin-right: 10px;
    }

    @media only screen and (max-width: 910px) {
    .instructorName {
        text-align:center;
    }
    .instructorName2 {
        text-align:center;
        font-size: 1.2rem;
    }
    }

</style>


<section>
    <div class="section-wrapper p-t-50 p-b-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row" style="margin-bottom: 0px;">
                        <div class="col-md-9">
                            <div class="form-group">
                                <input type="text" required class="form-control" id="search" name="search" placeholder="@lang('tr.Search')">                
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <button class="btn btn-primary btn-sm" style="font-size: 15px;border-radius:12px;display:block;width:100%;height:36px;" id="searchButton">Search</button>              
                            </div>
                        </div>
                    </div>
                    <hr style="margin-top: -20px;"/>
                    <div id="tag_container">
                        @include('website.home.advanced_search_results')
                    </div>
                   
                    <input type="hidden" id="hidden_page" value="1" />

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

@endsection

@section('pagejs')

<script>

    $(document).ready(function(){
        if($('#search').val().length == 0)
            $('#tag_container').html('');

        function search(page, query) {
            var link = "{{route('advanced_search_results')}}?page="+page+"&query="+query;
            $.ajax({
                url:link,
                success:function(data) {
                    $('#tag_container').html('');
                    $('#tag_container').html(data);
                }
            });
        }

        // $(document).on('click', '#searchButton', function(e){
        //     var key = e.which;
        //     if(key == 13){
        //         var query = $('#search').val();
        //         var page = $('#hidden_page').val();
        //         search(1,  query);
        //     }
        // });

        $(document).on('click', '#searchButton', function(){
            //if(!$(this).val()){
                var query = $('#search').val();
                search(1,  query);
            //}
        })

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            $('#hidden_page').val(page);
            var query = $('#search').val();
            search(page, query);
        });
    });

</script>

@endsection