alevel_project/resources/views/items/info_page.blade.php

@extends('layouts.app')

@section('navbar')
@stop

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

@section('content')
    {{--<link href="{{ asset('css/bootstrap.4.min.css') }}" rel="stylesheet">--}}
    {{--<script src="{{ asset('js/bootstrap.4.min.js') }}"></script>--}}

    <div id="item-info" class="wrapper">
        <div id="info-content" class="container card">
            <div class="info-header" id="{{ $item->id }}">
                <div class="info-caption">
                    <h2>{{ $item->caption }}</h2>
                </div>
                <div class="info-date d-flex">
                <span class="date">
                    @if ($item->created_at)
                        <i class="fa fa-clock-o"></i>
                        {{ date_format($item->created_at,'Y-m-d') }}
                    @else
                        <i class="fa fa-clock-o"></i> нет данных
                    @endif
                </span>
                    <span class="category">
                    <a href="/category/{{ $item->category_id }}">{{ $item->category->title }}</a>
                </span>
                </div>
            </div>

            <div class="info-body">
                <div id="info-carousel" class="carousel slide" data-ride="carousel">

                    <ul class="carousel-indicators">
                        <li data-target="#info-carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#info-carousel" data-slide-to="1"></li>
                        <li data-target="#info-carousel" data-slide-to="2"></li>
                    </ul>

                    <div class="carousel-inner d-flex">
                        <div class="carousel-item active">
                            @if (isset($item->picture[0]))
                                <img src="/image/{{ $item->picture[0]->path }}" onclick="">
                            @else
                                <img src="/image/items/default" onclick="">
                            @endif
                        </div>
                        @foreach($item->picture as $key => $picture)
                            @continue($key===0)
                            <div class="carousel-item">
                                <img src="/image/{{ $picture->path ?: "/items/default" }}" onclick="">
                            </div>
                        @endforeach
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#info-carousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#info-carousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div class="info-footer">
                <h3>Описание</h3>
                <div class="info-description pt-2">{{ $item->description }}</div>
            </div>
        </div>
        <div id="info-comments" class="container card">
            <div class="card-header"><h3>Комментарии</h3></div>
            <div class="card-body">
                {{--@if ($messages)--}}
                {{--@endif--}}
                @if (\Illuminate\Support\Facades\Auth::id())
                    <div id="leave-message" class="d-inline-block col-md-12">
                        <form method="POST" href="#">
                            {{ csrf_field() }}
                            <input hidden name="item_id" value="{{ $item->id }}">
                            <input hidden name="user_id" value="{{ \Illuminate\Support\Facades\Auth::id() }}">
                            <textarea id="comment" name="comment"
                                      placeholder="Оставить свой комментарий..."
                                      rows="4" tabindex="4"></textarea>
                            <input class="btn btn-outline-primary col-md-offset-9 col-md-3"
                                   {{--type="submit" --}}tabindex="5"
                                   value="коммент">
                        </form>
                    </div>
                @endif
            </div>
        </div>
        <div id="exchenger" style="margin-top:15px">
            @auth
            @if ($item->user_id === \Illuminate\Support\Facades\Auth::id())
                <a href="#" class="btn btn-secondary btn-lg btn-block" role="button">Редактировать</a>
            @else
                <button type="button" class="btn btn-primary btn-lg btn-block" onclick="userItemsList()"
                        data-toggle="modal" data-target="#itemListModal">
                    Предложить обмен
                </button>
            @endif
            @else
                <a href="{{ route('login') }}" class="btn btn-secondary btn-lg btn-block" role="button">Предложить
                    обмен</a>
                @endauth
        </div>
    </div>

    <div class="modal fade" id="itemListModal" tabindex="-1" role="dialog" aria-labelledby="itemListModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-slideout modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemListModalLabel">Выберите предмет для обмена</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4> У Вас нет предметов на обмен </h4>
                    <br>
                    <a href="{{ route('user.item.create') }}" class="btn btn-outline-primary btn-lg" role="button">Добавить
                        предмет</a>
                </div>
                <div class="modal-footer">
                    <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>
                        <button type="submit" hidden>Предложить</button>
                    </form>
                    {{--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>--}}
                    {{--<button type="button" class="btn btn-primary">Save changes</button>--}}
                </div>
            </div>
        </div>
    </div>
    {{--{{ dump(session('status')) }}--}}
    @if (session('status.text'))
        <button data-toggle="modal" data-target="#alert">SHOW</button>
        <div id="alert" class="modal animate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
             data-backdrop="true">
            <div class="modal-dialog a-fadeUp" role="document">
                <div class="modal-content">
                    <div class="modal-header alert-{{ session('status.class') }}">
                        <h5 style="margin-bottom: 0">Статус отправки</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <div class="alert alert-{{ session('status.class') }}" style="font-size: 1.2em">
                            {{ session('status.text') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@stop
@section('scripts')
    @parent
    <script>
        function userItemsList($element) {
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '{{ route("user.items.ajax") }}',
                type: 'POST',
                data: ( '{ "user": ' + {{\Illuminate\Support\Facades\Auth::id()}} +' }' ),
                contentType: 'json',
                processData: false,
                success: function (response) {
                    if (response.length !== 0) {
                        $("#itemListModal .modal-body").html(response);
                    }
                    $('a[href="#sendOffer"]').bind("click", function () {
                        let $id = $(this).data('item-id');
                        if ($id) {
                            $('form input#itemOfferId').val($id);
                            $('#itemsExchangeForm button').click();
                        }
                        console.log($id);
                    });
                }
            });
        }

        $(function () {
//            $('#alert[role=dialog]')
//                .find('[role=document]')
//                .removeClass()
//                .addClass('modal-dialog a-fadeUp')
//                .on('show.bs.modal', function (e) {
//                    $(this)
//                        .find('[role=document]')
//                        .removeClass()
//                        .addClass('modal-dialog a-fadeUp');
//                });

            if ($('button[data-target="alert"]')) {
                $('button[data-target="#alert"]').click();
                setTimeout(() => {
//                    $('button[data-target="alert"]').remove()
                }, 3000);
            }

        });
    </script>
@endsection