@extends('layouts.app')

{{--<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">--}}
{{--<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>--}}
{{--<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>--}}
<!------ Include the above in your HEAD tag ---------->
@section('styles')
    @parent
    <link href="{{ asset('css/single_offers.css') }}" rel="stylesheet">
    <link href="{{ asset('css/fine_card.css') }}" rel="stylesheet">
@endsection
@section('content')

    <div class="container p-md-4 mt-3">
        <div id="accordion" role="tablist" aria-multiselectable="true">

            @if (count($offers) < 1) {!! view('templates.no_items') !!} @endif

            @foreach($offers as $offer)

                <div class="accordion card mb-1" data-offer-id="{{ $offer->id }}">
                    <div class="card-header py-1" role="tab" style="border-left: solid 5px forestgreen ">
                        <div class="menu-group left">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapse{{ $offer->item_id }}" style="font-size: 1.2em;vertical-align: middle"
                               aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                                {{ $offer->items[0]->caption }}
                            </a>
                        </div>
                        <div class="menu-group right" data-offer-status="">
                            <i class="glyphicon glyphicon-eye-open" title='показать' style="margin-right: 5px"
                               data-toggle="collapse" data-target="#collapse{{$offer->item_id}}"
                               aria-expanded="true" aria-controls="collapse{{$offer->item_id}}">
                            </i>
                        </div>
                    </div>
                    <div id="collapse{{ $offer->item_id }}" class="collapse" role="tabpanel"
                         aria-labelledby="headingOne" aria-expanded="false" style="">
                        <div class="card-block p-md-2">
                            <div class="row justify-content-between">
                                @foreach($offer->items as $item)
                                    <div class="col" style="max-width: 45%">
                                        <div class="exchange card">
                                            <div class="group-info justify-content-center">
                                                @if ($item->user_id !== $user->id)
                                                    <figure class="profile">
                                                        <a href="{{ route('user.profile',$item->user) }}">
                                                            <img class="profile-avatar"
                                                                 title="{{ $item->user->nickname }}"
                                                                 src="{{ route('images', 'avatar') }}">
                                                        </a>
                                                    </figure>
                                                @endif
                                                    <a href="{{ route('item.info',$item) }}">
                                                <i class="glyphicon glyphicon-info-sign" title="Детальнее"></i>
                                                    </a>
                                            </div>
                                            <img class="card-img-top"
                                                 src="{{ route('images', $item->getPicturesPath()[0]) }}">
                                            <p class="card-block pt-2" style="text-align: center">
                                                {{ $item->description }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    {{--</div>--}}
@endsection
@section('scripts')
    @parent
    <script>
        $(function () {
            $('i.fas').on('click', function () {
                $(this).toggleClass('hide');
                $(this).siblings('.fas').toggleClass('hide');
            });
            $('i.glyphicon-eye-open').on('click', function () {
                $(this).toggleClass('active');
                setTimeout(function () {
                    $('i.glyphicon-eye-open').each(function (k, element) {
                        let colapsShow = $(element).closest('.card').find('.collapse');//.hasClass('show')
                        if (colapsShow.hasClass('show')) {
                            $(element).addClass('active')
                        } else {
                            $(element).removeClass('active')
                        }
                    });
                }, 400)
            });
        });

    </script>
@endsection