@extends("layout.app")
@section("content")
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="text-center">Used Items</h1>

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

<section class="text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                @if(count($items) > 1)
                    @foreach($items as $item)
                        <div class="col-md-4">
                            <div class="animated fadeInUp pricing boxed boxed--sm pricing-2 text-center">
                                <div class="image-column">
                                    <img src="{{ url('https://cdn.ihouse.ps/' . $item->default_image) }}">
                                </div>

                                <h4>{{$item->name}}</h4>
                                <hr>
                                {!! trim($item->specifications) !!}
                                <hr>
                                @if($item->is_sale || $item->discountState)
                                    <h6 class="col-md-12 unmarg--bottom" dir="rtl"><s>{{ number_format($item->price) }}</s> شيكل</h6>
                                    <h4 class="col-md-12" dir="rtl">{{ number_format($item->totalPrice) }} شيكل</h4>
                                @else
                                    <h4 class="col-md-12" dir="rtl">{{ number_format($item->price) }} شيكل</h4>

                                @endif
                                <a href="{{ route("used_details", $item->id) }}" class="btn btn--primary-1">
                                   <span class="btn__text">
                                        إختيار
                                   </span>
                                </a>
                            </div>
                        </div>
                    @endforeach
                @else
                    No Products
                @endif
            </div>
        </div>
    </div>

</section>

@endsection
@section("scripts")
    <script type="text/javascript">
        $(document).ready(function() {
            $('.color-choose div').on('click', function() {

                var Color = $(this).attr('data-image');
                var Item = $(this).attr('data-item');
                var ColorCode = $(this).attr('data-color-code');
                $("#current-image-"+Item).attr("src",$("#image-selector-"+Color).attr("src"));
                $("#color-code-"+Item).val(ColorCode);
            });
            var showChar = 100;
            var ellipsestext = "...";
            var moretext = "Show more";
            var lesstext = "Show less";


            jQuery('.more').each(function() {
                var content = jQuery(this).html();
                var contentArray = content.split('$');
                var c = h  = '';
                for(var i = 0; i < contentArray.length; i++) {
                    if (i < 4) {
                        c += '<li>' + contentArray[i] + '</li>';

                    } else {
                        h += '<li>' + contentArray[i] + '</li>';

                    }
                }

                var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                jQuery(this).html(html);

                // if (content.length > showChar) {
                //
                //     var c = content.substr(0, showChar);
                //     var cArray = c.split('$');
                //     var cString = '';
                //     for(var i = 0; i < cArray.length; i++) {
                //         cString += '<li>' + cArray[i] + '</li>';
                //     }
                //     var h = content.substr(showChar, content.length - showChar);
                //     var hArray = h.split('$');
                //     var hString = '';
                //     for(var i = 0; i < cArray.length; i++) {
                //         cString += '<li>' + cArray[i] + '</li>';
                //     }
                //     console.log(c);
                //
                // }
            });
            jQuery(".morelink").click(function(){
                if(jQuery(this).hasClass("less")) {
                    jQuery(this).removeClass("less");
                    jQuery(this).html(moretext);
                } else {
                    jQuery(this).addClass("less");
                    jQuery(this).html(lesstext);
                }
                jQuery(this).parent().prev().toggle();
                jQuery(this).prev().toggle();
                return false;
            });




        });
    </script>
@endsection