@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)
                {{--@php $offer->items @endphp--}}

                <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="menu-group right" data-offer-status="">
                                <i class="glyphicon glyphicon-share" title='отправить'></i>
                            @if($offer->items[0]->user_id === $user->id)
                                {{--<button class="btn btn-outline-info">сделать выбор</button>--}}
                                <i class="glyphicon glyphicon-ok" title='одобрить' data-status="confirmed"></i>
                            @endif

                            <i class="glyphicon glyphicon-remove" title='отклонить' data-status="rejected"></i>
                            <i class="glyphicon glyphicon-eye-open" title='показать'
                               data-toggle="collapse" data-target="#collapse{{$offer->id}}"
                               aria-expanded="true" aria-controls="collapse{{$offer->id}}">
                            </i>
                        </div>
                        <div class="menu-group left">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapse{{ $offer->id }}"
                               aria-expanded="false" aria-controls="collapseOne" class="collapsed">
                                <h6 class="parent" style="font-size: 1.5em">{{ $offer->items[0]->caption }}</h6>
                            </a>

                        </div>
                    </div>
                    <div id="collapse{{ $offer->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: 47%">
                                        <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>
        var status = 'undefined';
        function setStatusData(elem) {
            let gruoup = $(elem).parent().find('[data-status]');
            status = 'undefined';
            gruoup.each(function () {
                if ($(this).hasClass('active')) {
                    status = $(this).data('status');
                }
            });
            $(elem).closest('.menu-group').attr("data-offer-status", status)
            return status;
        }

        function offerStatusAjax(data) {
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '/debug/ajax',
                type: 'POST',
                data: data,
                success: function (response) {
//                    console.log(response);
                    window.location.replace("{{ route('user.offers') }}");
//                    window.location.href = "http://stackoverflow.com";
                }
            });
        }

        $(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)
            });

            $('i.glyphicon-ok').on('click', function () {
                $(this).toggleClass('active');
                $(this).siblings('.glyphicon-remove').removeClass('active');
                setStatusData(this);
            });
            $('i.glyphicon-remove').on('click', function () {
                $(this).toggleClass('active');
                $(this).siblings('.glyphicon-ok').removeClass('active');
                setStatusData(this);
            });

            $('.accordion i.glyphicon-share').on('click', function () {

                let $dataCard = $(this).closest('.card');
                status = setStatusData(this);
                if (status === 'undefined'){
                    return;
                }
                let info = {
                    offer_id: $dataCard.data("offer-id"),
                    status: status
//                    status: $dataCard.find('[data-offer-status]').data("offer-status")
                };
//                console.log(info);
                offerStatusAjax(JSON.stringify(info));
            });

        });

    </script>
@endsection