@extends('library.layout')

@section('title')
    KEMAUS Products
@endsection

@section('include_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 Products</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 products by name, catalog number or keyword" style="background-image: url({{ asset('/assets/images/searchicon.png') }});">
                        <a class="search-button-incontent" href="javascript: searchIncontentClick();">Search</a>
                    </div>
                    <datalist id="suggestions-incontent"></datalist>
                </div>
            </div>
        </div>
    </div>

    <div id="product-detail">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header-1">
                        <div class="header-1-1">
                            <h1>{{$product->name ?? "-"}}</h1>
                        </div>
                        <div class="buttons header-1-2">
                            @if (isset($product->file_sds) && $product->file_sds != "")
                            <a class="button" href="{{$product->file_sds ?? '#'}}" download>SDS</a>
                            @endif
                            @if (isset($product->file_tds) && $product->file_tds != "")
                            <a class="button" href="{{$product->file_sds ?? '#'}}" download>TDS</a>
                            @endif
                        </div>
                    </div>

                    <div class="header-2">
                        <div class="info-1">
                            <span><strong>Catalogue Number : </strong>{{$product->catalogue_number ?? "-"}}</span>
                            <span class="hidden-mb"><strong> | </strong></span>
                            <span><strong>CAS Number : </strong>{{$product->cas_number ?? "-"}}</span>
                        </div>
                        <div class="info-2">
                            <span class="hidden-mb"><strong> | </strong></span>
                            <span><strong>Molar mass : </strong>{{$product->molar_mass ?? "-"}}</span>
                            <span class="hidden-mb"><strong> | </strong></span>
                            <span><strong>Formula : </strong>{!! $product->chemical_formula ?? "-" !!}</span>
                        </div>
                    </div>
                </div>

                <div class="content">
                    <div class="slickwrap">
                        <div class="slick-content seth">
                            @if((isset($product->image1) && $product->image1 != "") || (isset($product->image2) && $product->image2 != "") || (isset($product->image3) && $product->image3 != ""))
                                @if(isset($product->image1) && $product->image1 != "")
                                <div class="image seth" style="background: url('{{ asset('assets/products/' . $product->image1) }}') center center / cover;"></div>
                                @endif
                                @if(isset($product->image2) && $product->image2 != "")
                                <div class="image seth" style="background: url('{{ asset('assets/products/' . $product->image2) }}') center center / cover;"></div>
                                @endif
                                @if(isset($product->image3) && $product->image3 != "")
                                <div class="image seth" style="background: url('{{ asset('assets/products/' . $product->image3) }}') center center / cover;"></div>
                                @endif
                            @else
                                <div class="image seth" style="background: url('{{ asset('assets/products/KA0000.jpg') }}') center center / cover;"></div>
                            @endif
                        </div>
                    </div>
                    <div class="product-info">
                        <h2>Product Information</h2>
                        <table>
                            <tr>
                                <td>HS Code</td>
                                <td>{{$product->hs_code ?? "-"}}</td>
                            </tr>
                            <tr>
                                <td>Assay</td>
                                <td>{{$product->assay ?? "-"}}</td>
                            </tr>
                            <tr>
                                <td>Grade</td>
                                <td>{{$product->grade ?? "-"}}</td>
                            </tr>
                            <tr>
                                <td>EC Index</td>
                                <td>{{$product->ec_index ?? "-"}}</td>
                            </tr>
                            <tr>
                                <td>EC No.</td>
                                <td>{{$product->ec_number ?? "-"}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script>
    $('.slick-content').slick({
        dots: true,
        appendArrows: false,
        dotsClass : 'slick-dots'
    });

    $(document).ready(function () {
        var widthSlick = $('.slickwrap').width()
        $('.seth').each(function () {
            $(this).css("height", widthSlick * 0.6);
        });

        $('#search-input-incontent').on('input', function() {
            var query = $(this).val();
            if (query.length >= 3) {
                var data_send = new FormData();
                data_send.append('txt', query);
                $.ajax({
                    type: 'POST',
                    url: "{{ route('products_suggestions') }}",
                    data: data_send,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        var suggestions = response.products;
                        var suggestionsList = $('#suggestions-incontent');
                        suggestionsList.empty();
                        suggestions.forEach(function(suggestion) {
                            var productName = suggestion.name;
                            var productCatalogueNumber = suggestion.catalogue_number;
                            var option = $('<option onclick="selectSuggestion(\'' + productName + '\')">' + productName + ' (' + productCatalogueNumber +')</option>').val(productName);
                            suggestionsList.append(option);
                        });
                    },
                    error: function (xhr, type) {
                    }
                });
            }
            else
            {
                var suggestionsList = $('#suggestions-incontent');
                suggestionsList.empty();
            }
        });

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


    var resizeTimer;
    $(window).on('resize', function(e) {

        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            var widthSlick = $('.slickwrap').width()
            $('.seth').each(function () {
                $(this).css("height", widthSlick * 0.6);
            });
        }, 250);

    });

    function selectSuggestion(txt){
        $('#search-input-incontent').val(txt);
        var suggestionsList = $('#suggestions-incontent');
        suggestionsList.empty();
    }

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