@extends('firm._layouts.standard')

@section('_content')

    <div class="events-header">
        @transUc('firm.sections.menu')
    </div>
    <div id="contentContainer" class="product-list">
        <div class="bfc pt-3">
            <div class="input-group input-group-lg">
                <input id="filter" type="text" class="form-control" placeholder="{{ __('firm.menu.search') }}"
                       aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-default" type="button" id="button-addon2"><i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>

        @foreach($categories as $category)
            @if(count($category->products))
                <div class="category-wrapper col-lg-6 py-4">
                    <div class="category-name h2 font-weight-bold mt-3" id="{{ str_slug($category->name) }}">{{ $category->name }}</div>
                    @foreach($category->products as $product)
                        <a href="{{ route('firm.orders.create.choose', ['productId' => $product->id]) }}">
                            <div class="orderPre">
                                <div class="nameAndFeature d-flex justify-content-between mt-2">
                                    <div>
                                        <p class="h3 product-name">{{ $product->name }}</p>
                                        @if($product->description)
                                            <p class="font-weight-light font-italic">{{ $product->description }}</p>
                                        @endif
                                    </div>
                                    <div class="h3 font-weight-bold">
                                        @currencySymbol {{ formatCurrency($product->gross_price) }}
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        @endforeach
    </div>

@endsection


@section('scripts')
    <script>
        $(function () {
            var query       = ''
            var $filter     = $('#filter')
            var $items      = $('.product-name')
            var $categories = $('.category-wrapper')

            $filter.on('input change', function () {
                applyFilter($filter.val())
            })

            // filter items
            function applyFilter(q) {
                q = $.trim(q)
                // add OR for regex query
                q = q.replace(/,/g, '|')
                // include all possible counterparts of turkish characters
                q = q.replace(/[cCçÇ]/g, '[cCçÇ]')
                q = q.replace(/[oOöÖ]/g, '[oOöÖ]')
                q = q.replace(/[uUüÜ]/g, '[uUüÜ]')
                q = q.replace(/[gGğĞ]/g, '[gGğĞ]')
                q = q.replace(/[sSşŞ]/g, '[sSşŞ]')
                q = q.replace(/[iIıİ]/g, '[iIıİ]')

                // loop through items
                // filter by text of the ".menu-productName" children
                // hide/show "a" parent
                $items.each(function () {
                    var $item   = $(this)
                    var text    = $item.text()
                    var $parent = $item.parents('a').first()

                    if (text.search(new RegExp(q, 'i')) < 0) {
                        $parent.addClass('hidden')
                    } else {
                        $parent.removeClass('hidden')
                    }
                })

                // hide categories that has no visible products in them after the filtering.
                $categories.each(function () {
                    var $category = $(this)

                    if ($category.find('a').not('.hidden').length) {
                        $category.show()
                    } else {
                        $category.hide()
                    }
                })
            }


        })
    </script>
@endsection