@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/user_offers.css') }}" rel="stylesheet">
    <link href="{{ asset('css/fine_card.css') }}" rel="stylesheet">
@endsection
@section('content')

    <div class="container p-md-4">
        <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" role="tab" style="border-left: solid 5px red ">
                        <div class="mb-0">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapse{{ $offer['item']->id }}"
                               aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                                <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                <h5 class="parent" style="font-size: 1.5em">{{ $offer['item']->caption }}</h5>
                                {{--<i class="fa fa-angle-right" aria-hidden="true"></i>--}}
                            </a>
                        </div>
                        <form>
                            <button style="position: absolute; right: 5px">Подтвердить</button>
                        </form>

                    </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">
                                <div class="col-sm-6 col-md-6">
                                    <div class="exchange card">
                                        <img class="card-img-top"
                                             src="{{ route('images', $offer['item']->getPicturesPath()[0]) }}">
                                        <p class="card-block " style="text-align: center">
                                            {{ $offer['item']->description }}
                                        </p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6">

                                    @foreach($offer['offer'] as $offerId => $item)
                                        <div class="offer card">
                                            <div class="card-header" id="heading{{$item->id}}">
                                                <i id="X" class="fas fa-times-circle hide" data-toggle="collapse"
                                                   data-target="fas" aria-controls="#V"></i>
                                                <i id="V" class="fas fa-check-circle" data-toggle="collapse"
                                                   data-target="fas" aria-controls="#X"></i>
                                                <h5 class="mb-0">
                                                    {{--<button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$item->id}}" aria-expanded="true" aria-controls="collapse{{$item->id}}">--}}
                                                    {{$item->caption}}
                                                    {{--</button>--}}
                                                </h5>
                                                <i class="glyphicon glyphicon-eye-open"
                                                   data-toggle="collapse" data-target="#collapse{{$item->id}}"
                                                   aria-expanded="true" aria-controls="collapse{{$item->id}}">
                                                </i>
                                            </div>

                                            <div id="collapse{{$item->id}}" class="collapse show"
                                                 aria-labelledby="heading{{$item->id}}" data-parent="#accordion">

                                                <div class="exchange card">
                                                    <img class="card-img-top"
                                                         src="{{ route('images', $item->getPicturesPath()[0]) }}">
                                                    <p class="card-block " style="text-align: center">
                                                        {{ $item->description }}
                                                    </p>
                                                </div>

                                                {{--@include('templates.fine_card',['item'=>$item])--}}
                                            </div>
                                        </div>

                                    @endforeach
                                </div>
                            </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('.offer.card').find('.collapse');//.hasClass('show')
                        console.log(colapsShow);
                        console.log(colapsShow.hasClass('show'));
                        if (colapsShow.hasClass('show')) {
                            $(element).addClass('active')
                        } else {
                            $(element).removeClass('active')
                        }
                    });
                }, 400)
            });
        });

    </script>
@endsection