@extends('layouts.app')

@section('styles')
    @parent
    <link href="{{ asset('css/dasboard.css') }}" rel="stylesheet">
    <link href="{{ asset('css/fine_card.css') }}" rel="stylesheet">
@endsection

@section('navbar')
    @parent
    @include("templates.dashboard_nav",$categories)
@endsection

@section('content')
    {{--<section id="t-cards" class="col-sm-8">--}}
    {{--<div class="container">--}}
    <div class="container">
        <div id='dashboard' class="row justify-content-center">
            @isset($itemsList)
                {{--<div class="col-sm-6 col-md-4 col-lg-3 mt-4">--}}
                    @foreach($itemsList as $item)
                        @include('templates.fine_card',['item'=>$item])
                    @endforeach
                {{--</div>--}}
                @else
                    {!! view('templates.no_items') !!}
            @endisset
        </div>
    </div>
    {{--<div hidden>--}}
        {{--<form id="itemsExchangeForm" method="POST" role="form" hidden--}}
              {{--action="{{ route('item.exchange.store',['item'=>$item->id]) }}">--}}
            {{--{{ csrf_field() }}--}}
            {{--<input id="itemId" name="item_id" value="{{ $item->id ?? "" }}" hidden>--}}
            {{--<input id="itemOfferId" name="item_offer_id" value="" hidden>--}}
        {{--</form>--}}
    {{--</div>--}}
    {{--</div>--}}
    {{--</section>--}}
@endsection

@section('scripts')
    @parent
    <script>
        function categoryPicker(data) {
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/dashboard/query',
                type: 'POST',
                data: data,
                success: function (response) {
                    $("#dashboard").html(response);
                }
            });
        }

        $(function () {
            $('a[href="#sendOffer"]').bind("click", function () {
                let $id = $(this).data('item-id');
                if ($id) {
                    $('form input#itemOfferId').val($id);
                    $('#itemsExchangeForm').submit();
                }
                console.log($id);
            });

            $('#categoryNavList li').on('click', function ($e) {

                let categories = {};
                categories['categories'] = [];

                let active = $('#categoryNavList li.active');
                let selected = $(this);

                //заккоментировать если нужно добавлять категории в стак }}//
                active.removeClass('active');

                $(selected).toggleClass('active');
                if (selected.data('cat-id') === "") {
                    active.removeClass('active');
                } else {
                    $('#categoryNavList li[data-cat-id=""]').removeClass('active');
                    $('#categoryNavList li.active').each(function () {
                        if ($(this).data('cat-id') !== "") {
                            categories['categories'].push($(this).data('cat-id'));
                        }
                    });
                }

                categoryPicker(JSON.stringify(categories));
            })
        });

        //        function createOffer($element){ // нужно для выведения модального окошка с обменом
        //            console.log($element.closest('.card'));
        //            let $itemId = $($element).closest('.card').data('item-id');
        //            let $href = $($element).closest('.card').find('a.btn[role="button"]');
        //            {{--window.location.replace("{{ route('item.info',0) }}" + $itemId);--}}// жесткий переход на страницу итемки, без возможности вернутся назад
        //        }
        //        $('i.glyphicon-transfer').on("click",function(){ // нужно для выведения модального окошка с обменом черезобработчик онклик
        //        });
    </script>
@endsection