@extends('layouts.website')


@section('page_title', 'Static Leaders | Grindrod Limited')
@section('metaDescription', "Our ambition is to find the perfect logistics solution for our customers across a multitude of industries including mining, agricultural, new energy commodities and project cargo.")

@section('inline-style')
<style>
    h4 {
        font-size: 14px;
        color: #39607a;

    }

    .category {
        color: #7c878e !important;
        font-weight: 300;
    }

    .category:hover {
        color: #e21f26 !important;
        font-weight: 700;
    }

    .category.active {
        color: #e21f26 !important;
        font-weight: 700;
    }

    .slash {
        color: #e21f26 !important;
        font-weight: 700 !important;
    }

  .result-card {
    /* border-radius: 20px; */
    border: none;
    /* font-family: 'Open Sans', sans-serif; */
    padding: 10px;
    padding-left: 0;
    /* box-shadow: 5px 5px 3px #c3c3c3bf; */
    /* max-height: 150px; */
    background: transparent;
  }
  h6 {
    font-size: 16px;
    color: #39607a;
    font-weight: 700;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  p {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #7c878e;
  }
  a {
    color: unset !important;
    font-size: 14px;
  }

  .text-red {
    color: #e21f26 !important;
  }
  .form-group {
    margin-bottom: unset;
  }
  .link:hover  {
    color: #e21f26 !important;
  }
  .form-control {
    border: none;
  }
  .btn {
    background: transparent !important;
    border: 0 !important;
    color: #7c878e;
  }

  .btn:hover, .btn:focus{
    color: #39607a !important;
    background: transparent !important;
  }
</style>
@endsection
@section('content')

<section class="page-headers no-banner" style="background: #eae7e1;">
    <div class="container"  style="padding-top: 100px;">
        <div class="form-group row align-items-center">
            <div class="col-sm-10">
                <div class="form-group">
                    <input type="text" name="search" id="searchKeyword" value="" placeholder="Start Typing" class="my-2 form-control">
                </div> 
            </div> 

            <div class="col-sm-2">
                <button type="submit" id="searchButton" class="btn btn-primary my-2"><i class="fas fa-search"></i></button>
            </div> 

        </div> 
        <div id="searchResults" ></div>
    </div>
</section>

@endsection

@section('js')
<script>
$(document).on('click', '.category', function(event){
    event.preventDefault(); 
    var key = $(this).attr('href').split('k=')[1];
    var category = $(this).attr('href').split('c=')[1];
    fetch_data(key, category);
});

$(function() {
    console.log('loaded');
    // fetch_data('dsd')
});

$(document).on('click', '#searchButton', function(event){
    event.preventDefault();
    console.log('cicked');
    var key = $('#searchKeyword').val()
    fetch_data(key)
});

function fetch_data(k, c) {
    console.log('fetchinfg data');
    let searchUrl = '';
    searchUrl = "/search-results?k="+k
    $.ajax({
            url:searchUrl,
            beforeSend: function() {
                $('#searchResults').html('');
            },
            success:function(data){
                $('#searchResults').html(data);

            }
    });
}


</script>
@endsection