{{--<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--}}
<!------ Include the above in your HEAD tag ---------->

<style>
    .modal.fade.show .modal-dialog.modal-dialog-slideout {
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
    }

    @keyframes bounce {
        0% {
            transform: translateY(-25%);
        }
        20% {
            transform: translateY(15%);
        }
        40% {
            transform: translateY(-15%);
        }
        60% {
            transform: translateY(5%);
        }
        80% {
            transform: translateY(-5%);
        }
        100% {
            transform: translateY(0%);
        }
    }
</style>

<br><br>
<div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal4"
            onclick="optionShow()">
        Launch demo modal sideout large
    </button>
</div>


<!-- Modal -->
{{--<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">--}}
{{--<div class="modal-dialog modal-dialog-slideout modal-sm" role="document">--}}
{{--<div class="modal-content">--}}
{{--<div class="modal-header">--}}
{{--<h5 class="modal-title" id="exampleModalLabel">Modal sideout small</h5>--}}
{{--<button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
{{--<span aria-hidden="true">×</span>--}}
{{--</button>--}}
{{--</div>--}}
{{--<div class="modal-body">--}}
{{--...--}}
{{--</div>--}}
{{--<div class="modal-footer">--}}
{{--<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>--}}
{{--<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">--}}
{{--<div class="modal-dialog modal-dialog-slideout" role="document">--}}
{{--<div class="modal-content">--}}
{{--<div class="modal-header">--}}
{{--<h5 class="modal-title" id="exampleModalLabel">Modal sideout normal</h5>--}}
{{--<button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
{{--<span aria-hidden="true">×</span>--}}
{{--</button>--}}
{{--</div>--}}
{{--<div class="modal-body">--}}
{{--...--}}
{{--</div>--}}
{{--<div class="modal-footer">--}}
{{--<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>--}}
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4"
     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="exampleModalLabel">Выберите предмет для обмена</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">


            </div>
            <div class="modal-footer">
                {{--<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>

@section('scripts')
    @parent
    <script>
        function optionShow($element) {
//            var $id = $element.getAttribute('value')

            $.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) {
                    console.log(response);
                    let $userItems = response;

                    if ($userItems.length < 1) {
                        response = '<h4>У Вас нет предметов на обмен</h4><br>' +
                        '<button type="button" class="btn btn-primary">Добавить предмет</button>';
                    }

                    $("#exampleModal4 .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>";
                }
            });

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

    </script>
@endsection