@extends('library.layout')

@section('title')
    KEMAUS COA
@endsection

@section('include_script')
<script src="{{ asset('/js/products.js') }}"></script>
@endsection

@section('include_style')
<link rel="stylesheet" type="text/css" href="{{ asset('/css/products.css') }}">
@endsection

@section('content')
    <div class="wrapallctn winheight" style="background-color: #f5f5f5;">

        <div class="teaserbg" style="background: url({{ asset('/assets/images/banner2.jpg') }}) center center / cover;">
            <div class="container">
                <div class="row">
                    <div class="textteaser">
                        <span>KEMAUS Safety Data Sheet</span>
                        <hr style="width:30%">
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="search-wrapper-incontent">
                    <div class="search-bar-incontent">
                        <div class="search-container-incontent">
                            <input type="text" class="search-input-incontent" id="search-input-incontent" placeholder="Search specific product by catalogue number" style="background-image: url({{ asset('/assets/images/searchicon.png') }});">
                            <a class="search-button-incontent" href="javascript: searchIncontentClick();">Search</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="product-list" id="product-list">
                    @if(count($products) > 0 && $search_txt != "")
                        @foreach ($products as $product)
                            <div class="product-item">
                                <div class="product-catalogue">
                                    <span class="product-id">{{$product->catalogue_number ?? "-"}}</span>
                                </div>
                                <div class="product-info">
                                    <span class="product-name">{{$product->name ?? "-"}}</span>
                                    <span class="product-date">{{$product->cas_number ?? "-"}}</span>
                                </div>
                                <div class="product-gap"></div>
                                <div class="product-actions-1">
                                    <div class="product-actions-1-gap"></div>
                                    <div class="product-actions-1-1">
                                    </div>
                                    <div class="product-actions-1-2">
                                    </div>
                                    <div class="product-actions-1-gap"></div>
                                </div>
                                <div class="product-actions-2">
                                    <a class="btn details-btn" href="{{asset('assets/sds/' . $product->file_sds)}}" download>Download</a>
                                </div>
                            </div>
                        @endforeach
                    @elseif ($search_txt != "")
                        <div class="item_not_found">Safety Data Sheet Not Found!</div>
                    @else
                        <div class="item_not_found">Enter catalogue number for specific product.</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')

<script>
$(document).ready(function(){
    $('#search-input-incontent').on('keyup', function(event) {
        if (event.keyCode === 13) {
            searchIncontentClick();
        }
    });

    $('#search-input-incontent').val('{{$search_txt ?? ''}}');
}); 

function searchIncontentClick(){
    window.location.href = "{{route('sds')}}" + "?txt=" + $('#search-input-incontent').val();
}
</script>

@endsection