@extends('socialite::layouts.default')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3">

                <div class="widget-events widget-left-panel">
                    <div class="menu-list">
                        <ul class="list-unstyled">
                            <li>
                                <a href="{{ route('global_feed') }}" class="btn menu-btn ico icon-home">
                                    {{ trans('socialite::common.home') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ url('/map/search-map') }}" class="btn menu-btn ico icon-map">
                                    {{ trans('common.menu.map') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ route('beer.list') }}" class="btn menu-btn ico icon-beer active">
                                    {{ trans('common.menu.beers') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ route('breweries.list') }}" class="btn menu-btn ico icon-brewery">
                                    {{ trans('common.menu.breweries') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ route('promoters.list') }}" class="btn menu-btn ico icon-promoter">
                                    {{ trans('common.menu.promoters') }}
                                </a>
                            </li>

                            <li>
                                <a href="{{ url('about') }}" class="btn menu-btn ico icon-about">
                                    {{ trans('page.about') }}
                                </a>
                            </li>


                            {{-- TODO : NOT_USED_V1
                            <li>
                                <a href="" class="btn menu-btn">
                                    <i class="fa fa-calendar" aria-hidden="true"></i>{{ trans('common.menu.events') }}
                                </a>
                            </li>

                            <li>
                                <a href="" class="btn menu-btn">
                                    <i class="fa fa-list" aria-hidden="true"></i>{{ trans('common.menu.recipes') }}
                                </a>
                            </li>

                            --}}
                        </ul>
                        <div class="btn-wrapper btn-margin">
                            <a href="{{ route('beer.create.beer_information') }}" class="btn btn-block btn-arrow">
                                {{ trans('common.menu.submit_a_beer') }}
                            </a>
                            <a href="{{ route('promoter.create.promoter_information') }}" class="btn btn-block btn-arrow">
                                {{ trans('common.menu.submit_a_promoter') }}
                            </a>
                        </div>
                    </div>

                    {{-- TODO : NOT_USED_V1
                    <div class="menu-heading">
                        {{ trans('socialite::common.most_trending') }}
                    </div>

                    <div class="categotry-list">
                        <ul class="list-unstyled">
                            @if($trending_tags != "")
                            @foreach($trending_tags as $trending_tag)
                            <li>
                        <span class="hash-icon">
                            <i class="fa fa-hashtag"></i>
                        </span>
                                <a href="{{ url('?hashtag='.$trending_tag->tag) }}">
                                    {{ $trending_tag->tag }}
                                </a>
                            </li>
                            @endforeach
                            @else
                            <span class="text-warning">{{ trans('socialite::messages.no_tags') }}</span>
                            @endif
                        </ul>
                    </div>
                    --}}
                </div>

                <div class="filter-bar">
                     <h2>{{ trans('beers.filter') }}</h2>

                    @if(Auth::check())
                    <div class="btn-wrapper">
                        <a class="btn btn-block btn-default" href="{{ route('beer.create.beer_information') }}">
                            {{ trans('beers.add_a_beer') }}
                        </a>
                    </div>
                    @endif

                    {!! Form::open(['id' => 'beer-list-form']) !!}
                    <div class="form-group">
                        {{ Form::label('beerName', trans('beers.list.filters.beers'), ['id' => 'beer-name', 'class' => 'control-label']) }}
                        {{ Form::text('beerName', null, ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        {{ Form::label('Linked brewery', trans('beers.list.filters.linked_brewery'), ['class' => 'control-label']) }}
                        {{ Form::text('LinkedBrewery', null, ['id' => 'linked_Brewery', 'class' => 'form-control']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('Type', trans('beers.list.filters.type'),['class' => 'control-label'])}}

                        @if($beerTypes >= 10)
                        <dl class="multiDropdown">
                            <dt>
                                <a href="javascript:void(0);" class="multiDropdownLink">
                                    <span class="hida">Select</span>
                                    <p class="multiSel"></p>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </a>
                            </dt>
                            <dd>
                                <div class="mutliSelect">
                                    <ul  class="mutliSelectUl">
                                        @foreach($beerTypes as $beerTypeKey => $beerType)
                                        <li>
                                            <div class="form-check beer-type-flag-translation">
                                                {{ Form::checkbox('selectBeerType[]', $beerTypeKey, false, ['id' => 'beer-type-' . $beerTypeKey] ) }}
                                                {{ Form::label('beer-type-' . $beerTypeKey, $beerType) }}
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </dd>
                        </dl>
                        @else
                        @foreach($beerTypes as $beerTypeKey => $beerType)
                            <div class="form-check">
                                {{ Form::checkbox('selectBeerType[]', $beerTypeKey, false, ['id' => 'beer-type-' . $beerTypeKey] ) }}
                                {{ Form::label('beer-type-' . $beerTypeKey, $beerType) }}
                            </div>
                        @endforeach
                        @endif

                    </div>
                    <div class="form-group">
                        {{ Form::label('Color', trans('beers.list.filters.color'),['class' => 'control-label'])}}

                        @if($beerColor >= 10)
                        <dl class="multiDropdown">
                            <dt>
                                <a href="javascript:void(0);" class="multiDropdownLink">
                                    <span class="hida">Select</span>
                                    <p class="multiSel"></p>
                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                                </a>
                            </dt>
                            <dd>
                                <div class="mutliSelect">
                                    <ul class="mutliSelectUl">
                                        @foreach($beerColor as $beerColorKey => $beerColorLabel)
                                        <li>
                                            <div class="form-check color-flag-translations">
                                                {{ Form::checkbox('selectBeerColor[]', $beerColorKey, false, ['id' => 'beer-color-' . $beerColorKey] ) }}
                                                {{ Form::label('beer-color-' . $beerColorKey, $beerColorLabel) }}
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </dd>
                        </dl>
                        @else

                        @foreach($beerColor as $beerColorKey => $beerColorLabel)
                            <div class="form-check">
                                {{ Form::checkbox('selectBeerColor[]', $beerColorKey, false, ['id' => 'beer-color-' . $beerColorKey] ) }}
                                {{ Form::label('beer-color-' . $beerColorKey, $beerColorLabel) }}
                            </div>
                        @endforeach

                        @endif

                    </div>
                    <div class="form-group">
                        {{ Form::label('Fermentation', trans('beers.list.filters.fermentation'),['class' => 'control-label'])}}
                        @foreach($beerFermentation as $beerFermentationKey => $beerFermentationLabel)
                            <div class="form-check">
                                {{ Form::checkbox('selectBeerFermentation[]', $beerFermentationKey, false, ['id' => 'beer-fermentation-' . $beerFermentationKey] ) }}
                                {{ Form::label('beer-fermentation-' . $beerFermentationKey, $beerFermentationLabel) }}
                            </div>
                        @endforeach
                    </div>
                    <div class="form-group">
                        {{ Form::label('Transparency', trans('beers.list.filters.transparency'),['class' => 'control-label'])}}

                        @foreach($beerTransparency as $beerTransparencyKey => $beerTransparencyLabel)
                            <div class="form-check">
                                {{ Form::checkbox('selectBeerTransparency[]', $beerTransparencyKey, false, ['id' => 'beer-transparency-' . $beerTransparencyKey] ) }}
                                {{ Form::label('beer-transparency-' . $beerTransparencyKey, $beerTransparencyLabel) }}
                            </div>
                        @endforeach
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>

            <div id="beers-list" class="col-md-9">
                {{--@include('beers.list.partials.results')--}}
            </div>

        </div>
    </div>
@endsection

@section('bottom_js')
    @parent

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.api_key') }}&libraries=places&language=en"></script>

    <script>
        var BEERS_FILTER_URL = '{{ route('beer.list.filter') }}';
    </script>

    <script type="text/javascript" src="{{ asset('js/beers.js') }}"></script>

    <script>

        $(".multiDropdown").each(function () {
            $(this).find('.multiDropdownLink').on('click', function() {
                $(this).parent().parent().find(".mutliSelectUl").slideToggle('fast');
            });

            $(this).find(".mutliSelectUl a").on('click', function() {
                $(this).find(".mutliSelectUl").hide();
            });
        });


        function getSelectedValue(id) {
            return $("#" + id).find("dt a span.value").html();
        }

        $(document).bind('click', function(e) {
            var $clicked = $(e.target);
            if (!$clicked.parents().hasClass("multiDropdown")) $(".multiDropdown dd ul").hide();
        });

        $('.mutliSelect').each(function () {
            $(this).find('input[type="checkbox"]').on('click', function() {

                var title = $(this).val();

                if($(this).parent().hasClass('beer-type-flag-translation')) {
                    title = window.i18n['beers']['types_values'][title];
                } else if($(this).parent().hasClass('color-flag-translations')) {
                    title = window.i18n['beers']['colors_values'][title];
                }

                title += ', ';

                if ($(this).is(':checked')) {
                    var html = '<span title="' + title + '">' + title + '</span>';
                    $(this).parents('.multiDropdown').find('.multiSel').append(html);
                    $(this).parents('.multiDropdown').find('.hida').hide();
                }

                else {
                    $('span[title="' + title + '"]').remove();
                    var ret = $(this).parents('.multiDropdown').find('.hida');
                    $(this).parents('.multiDropdown').find('.multiDropdown dt a').append(ret);

                }
            });
        })


    </script>
    <footer>
        @include('socialite::partials.footer')
    </footer>
@endsection