@extends('sidebar-template')


@section('content')

    <div id="bb-items">
        @include('blocks.banners')
        @include('blocks.buttons')
    </div>

    <h1 class="page-title">
        futuREuse directory
        <span></span>
    </h1>
    <h2 id="category-desc" class="page-description">
        The UK & Ireland 500 is a focused edit of the Salvo directory which has been running for thirty years. Part of the FCRBE, which stands for - Facilitating the circulation of reclaimed building elements, and what Salvo has branded futuREuse. Currently only 1% of building materials are reused following their first application, so the project aims to highlight businesses and regular stocks and increase reuse of reclaimed building materials.
    </h2>

    <div class="row">
        @if(isAdmin())
            <div class="col-md-12">
                <div id="stats-container" style="margin-bottom:16px"></div>
            </div>
        @endif
        <div data-category="{{$api_name}}" data-title="{{$title}}">
            <div>
                <div class="ais-infinite-hits">
                    @foreach ($items as $item)
                        @include('blocks.item-card-fcrbe-new')
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @include('blocks.items-pagination')
@stop

@section('sidebar-fcrbe')
    @if ($filtersButtonEnabled)
        <div id="clear-all" class="sidebar-box-algolia no-arrows">
            <div>
                <div class="ais-root ais-clear-all">
                    <div class="ais-ClearRefinements">
                        <a class="ais-ClearRefinements-button"
                           href="/salvo-directory/fcrbe">
                            <div>Reset All Filters</div>
                        </a></div>
                </div>
            </div>
        </div>
    @endif

    <div id="categories-search" class="sidebar-box-algolia no-arrows">
        <div>
            <div>
                <h3 class="instantsearch-header">Find</h3>
                <div class="ais-HierarchicalMenu">
                    <ul class="ais-HierarchicalMenu-list">
                    @foreach ($categories as $category)
                            <li class="ais-HierarchicalMenu-item {{$itemCategoryId && $itemCategoryId === $category->id ? 'ais-HierarchicalMenu-item--selected' : ''}} ais-HierarchicalMenu-item--parent">
                                <div>
                                    <a
                                        class="ais-HierarchicalMenu-link {{$itemCategoryId && $itemCategoryId === $category->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                        href="/{{$sector}}/fcrbe/category/{{$itemCategoryId && $itemCategoryId === $category->id ? 'all' : $category->slug}}/sub-category/all/location/{{$countrySlug}}/region/{{$regionSlug}}?itemSpecification={{$itemSpecificationSlug}}&itemSubSpecification={{$itemSubSpecificationSlug}}"
                                    >
                                        <span class="ais-HierarchicalMenu-label">{{$category->name}}</span>
                                    </a>
                                </div>
                                @if($itemCategoryId && $itemCategoryId == $category->id)
                                    @foreach ($subCategories as $subCategory)
                                        <div class="ais-HierarchicalMenu-list--child">
                                            <ul class="ais-HierarchicalMenu-list">
                                                <li class="ais-HierarchicalMenu-item {{$itemSubCategoryId && $itemSubCategoryId === $subCategory->id ? 'ais-HierarchicalMenu-item--selected' : ''}}">
                                                    <div>
                                                        <a
                                                            class="ais-HierarchicalMenu-link {{$itemSubCategoryId && $itemSubCategoryId === $subCategory->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                                            href="/{{$sector}}/fcrbe/category/{{$category->slug}}/sub-category/{{$itemSubCategoryId && $itemSubCategoryId === $subCategory->id ? 'all' : $subCategory->slug}}/location/{{$countrySlug}}/region/{{$regionSlug}}?itemSpecification={{$itemSpecificationSlug}}&itemSubSpecification={{$itemSubSpecificationSlug}}"
                                                        >
                                                            <span class="ais-HierarchicalMenu-label">{{$subCategory->name}}</span>
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    @endforeach
                                @endif
                            </li>
                    @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    @if ($fcrbeFilters && count($fcrbeFilters) > 0)
        <div id="fcrbe-filters-wrapper">
            <div id="fcrbe-filters-search" class="sidebar-box-algolia no-arrows" style="">
                <div>
                    <div class="ais-root ais-refinement-list">
                        <h3 class="instantsearch-header">Filters</h3>
                        <div class="ais-body ais-refinement-list--body">
                            <form class="fcrbe-filters-form" action="">
                                <div class="ais-refinement-list--list">
                                    @foreach ($fcrbeFilters as $filter)
                                        <div class="ais-refinement-list--item">
                                            <div>
                                                <label class="ais-refinement-list--label">
                                                    <input
                                                        type="checkbox"
                                                        class="ais-refinement-list--checkbox"
                                                        name="fcrbe-filters[]"
                                                        value="{{$filter->id}}"
                                                        @if ($fcrbeFiltersEnabled) {{"disabled"}} @endif
                                                        {{in_array($filter->id, $itemFcrbeFilters) ? 'checked' : ''}}
                                                    >
                                                        @if (in_array($filter->id, $itemFcrbeFilters))
                                                            <b>{{$filter->name}}</b>
                                                        @else
                                                            {{$filter->name}}
                                                        @endif
        {{--                                            <span class="ais-refinement-list--count">1</span>--}}
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                    @if ($fcrbeFiltersEnabled)
                                        <input class="reset-fcrbe-filters-form-btn" type="button" value="Reset filters"/>
                                    @else
                                        <input class="apply-fcrbe-filters-form-btn" type="button" value="Apply filters"/>
                                    @endif
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div id="categories-search" class="sidebar-box-algolia no-arrows">
        <div>
            <div class="ais-root ais-hierarchical-menu">
                <h3 class="instantsearch-header">Specifications</h3>
                <div class="ais-HierarchicalMenu">
                    <ul class="ais-HierarchicalMenu-list">
                    @foreach ($specifications as $specification)
                            <li class="ais-HierarchicalMenu-item {{$itemSpecificationId && $itemSpecificationId === $specification->id ? 'ais-HierarchicalMenu-item--selected' : ''}} ais-HierarchicalMenu-item--parent">
                                <div>
                                    <a
                                        class="ais-HierarchicalMenu-link {{$itemSpecificationId && $itemSpecificationId === $specification->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                        href="/{{$sector}}/fcrbe/category/{{$itemCategorySlug}}/sub-category/{{$itemSubCategorySlug}}/location/{{$countrySlug}}/region/{{$regionSlug}}?itemSpecification={{$itemSpecificationId && $itemSpecificationId === $specification->id ? 'all' : $specification->slug}}"
                                    >
                                        <span class="ais-HierarchicalMenu-label">{{$specification->name}}</span>
                                    </a>
                                </div>
                                @if ($itemSpecificationId && $itemSpecificationId == $specification->id)
                                    @foreach ($subSpecifications as $subSpecification)
                                        <div class="ais-HierarchicalMenu-list--child">
                                            <ul class="ais-HierarchicalMenu-list">
                                                <li class="ais-HierarchicalMenu-item {{$itemSubSpecificationId && $itemSubSpecificationId === $subSpecification->id ? 'ais-HierarchicalMenu-link--selected' : ''}}">
                                                    <div>
                                                        <a
                                                            class="ais-HierarchicalMenu-link {{$itemSubSpecificationId && $itemSubSpecificationId === $subSpecification->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                                            href="/{{$sector}}/fcrbe/category/{{$itemCategorySlug}}/sub-category/{{$itemSubCategorySlug}}/location/{{$countrySlug}}/region/{{$regionSlug}}?itemSpecification={{$specification->slug}}&itemSubSpecification={{$itemSubSpecificationId && $itemSubSpecificationId === $subSpecification->id ? 'all' : $subSpecification->slug}}"
                                                        >
                                                            <span class="ais-HierarchicalMenu-label">{{$subSpecification->name}}</span>
                                                        </a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    @endforeach
                                @endif
                            </li>
                    @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

{{--    <div class="sidebar-box-algolia no-arrows">--}}
{{--        <input--}}
{{--            type="text"--}}
{{--            id="fcrbe-address-input"--}}
{{--            placeholder="Filter by your Location"--}}
{{--            value="{{$locationSearchString}}"--}}
{{--        />--}}
{{--        <div class="btn-group btn-group-toggle float-right metric-switch" data-toggle="buttons">--}}
{{--            <label class="btn btn-sm active">--}}
{{--                <input type="radio" name="metricType" value="mile" checked> Mile--}}
{{--            </label>--}}
{{--            <label class="btn btn-sm" id="km">--}}
{{--                <input type="radio" name="metricType" value="km"> Kilometer--}}
{{--            </label>--}}
{{--        </div>--}}
{{--    </div>--}}


    <div id="locations-search" class="sidebar-box-algolia">
        <div>
            <div class="ais-root ais-hierarchical-menu">
                <h3 class="instantsearch-header">Regions</h3>
                <div class="ais-HierarchicalMenu">
                    <ul class="ais-HierarchicalMenu-list">
                        @foreach ($countries as $country)
                            <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent {{$countryId && $countryId === $country->id ? 'ais-HierarchicalMenu-item--selected' : ''}}">
                                <div>
                                    <a
                                        class="ais-HierarchicalMenu-link {{$countryId && $countryId === $country->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                        href="/{{$sector}}/fcrbe/category/{{$itemCategorySlug}}/sub-category/{{$itemSubCategorySlug}}/location/{{$countryId && $countryId === $country->id ? 'all' : $country->slug}}/region/all?itemSpecification={{$itemSpecificationSlug}}&itemSubSpecification={{$itemSubSpecificationSlug}}"
                                    >
                                        <span class="ais-HierarchicalMenu-label">{{$country->name}}</span>
                                    </a>
                                </div>
                                @if ($countryId && $countryId === $country->id)
                                    <div class="ais-HierarchicalMenu-list--child">
                                        <ul class="ais-HierarchicalMenu-list">
                                            @foreach ($country->regions as $region)
                                                <li class="ais-HierarchicalMenu-item {{$regionId && $regionId === $region->id ? 'ais-HierarchicalMenu-item--selected' : ''}}">
                                                    <div>
                                                        <a
                                                                class="ais-HierarchicalMenu-link {{$regionId && $regionId === $region->id ? 'ais-HierarchicalMenu-link--selected' : ''}}"
                                                                href="/{{$sector}}/fcrbe/category/{{$itemCategorySlug}}/sub-category/{{$itemSubCategorySlug}}/location/{{$country->slug}}/region/{{$regionId && $regionId === $region->id ? 'all' : $region->slug}}?itemSpecification={{$itemSpecificationSlug}}&itemSubSpecification={{$itemSubSpecificationSlug}}"
                                                        >
                                                            <span class="ais-HierarchicalMenu-label">{{$region->name}}</span>
                                                        </a>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js_functions')
    my_main.handle_fcrbe_apply_filters_form();
    my_main.handle_fcrbe_reset_filters_form();
    my_main.handle_search_input();
    my_main.handle_location_search_input();
@stop