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/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">
            @if ($item->archive == 'false')
                @auth
                @if ($item->user_id === \Illuminate\Support\Facades\Auth::id())
                    <div class="form-group form-inline">
                        <form method="POST" action="{{ route('item.delete',$item) }}">
                            {{ csrf_field() }}
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="btn btn-danger btn-lg">Удалить</button>
                        </form>
                        <a href="#" class="btn btn-secondary btn-lg mt-0 ml-3" role="button"
                           onclick="userItemsModify({{ $item->id }})"
                           data-toggle="modal" data-target="#itemModify">Редактировать</a>
                    </div>
                @else
                    <button type="button" class="btn btn-primary btn-lg btn-block" onclick="userItemsList(this)"
                            data-toggle="modal" data-target="#itemListModali">Предложить обмен
                    </button>
                @endif
            @else
                <a href="{{ route('login') }}" class="btn btn-secondary btn-lg btn-block" role="button">Предложить
                    обмен</a>
                @endauth
            @endif
        </div>
    </div>

    {{------------------------------ MODAL WINDOWS ------------------------}}
    <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 justify-content-center">
                    <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>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="itemModify" tabindex="-1" role="dialog" aria-labelledby="itemModify" aria-hidden="true">
        <div class="modal-dialog a-zoomRight" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModifyLabel">Измение итемки</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body justify-content-center">
                    <h4> Итемка не выбрана </h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-action="DELETE" onclick="changeMethod(this)">
                        Удалить
                    </button>
                    <button type="button" class="btn btn-primary" data-action="PUT" onclick="changeMethod(this)">
                        Изменить
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
    {{-------------------------- END MODAL WINDOWS ------------------------}}

    @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-light" 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": ' + {{Auth::id()}} +' }' ),
                contentType: 'json',
                processData: false,
                success: function (response) {
                    if (response.length !== 0) {
                        $("#itemListModal .modal-body").html(response);
                    }
                    $('#itemListModal').modal('toggle');
                    console.log(response);
                    $('a[href="#sendOffer"]').bind("click", function () {
                        let $id = $(this).data('item-id');
                        if ($id) {
                            $('form input#itemOfferId').val($id);
                            $('#itemsExchangeForm').submit();
                        }
                        console.log($id);
                    });
                }
            });
        }

        function userItemsModify(itemId) {
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '{{ route("user.item.modify.ajax",0) }}' + itemId,
                type: 'POST',
                data: ( '{ "item": ' + itemId + ' }' ),
                success: function (response) {
                    console.log(response);
                    if (response.length !== 0) {
                        $("#itemModify .modal-body").html(response);
                    }
                }
            });
        }

        $(function () {
            $('#alert').modal('toggle');
        });


        function optionShow($element) {
            var $id = $element.getAttribute('value');

            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '{{ route("admin.items.ajax", ["id"=> '0'])}}' + $id,
                type: 'POST',
                data: ( '{ "item": ' + $id + ' }' ),
                contentType: 'json',
                processData: false,
                success: function (response) {
                    $("#itemModify .modal-body").html(response);

                    let item = document.querySelector('#myModal input[name="id"]');
                    let title = document.querySelector('#myModal .modal-title');
                    title.innerHTML = "Редактирование итемки № <b>" + item.value + "</b>";
                }
            });

            $("#itemModify").modal('show');
            $("#itemModify").attr('style', 'margin-top: 5%; transition: all 600ms ease-in-out;');
        }
    </script>
@endsection