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

@extends('admin.index')

@section('styles')
    @parent
    <link href="{{ asset('css/animated_modal_4.css') }}" rel="stylesheet">
    <link href="{{ asset('css/admin_items.css') }}" rel="stylesheet">
    {{--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet'>--}}
@endsection


@section('content')

    <div class="container">
        <div class="admin-items panel-default panel-table">
                <h4 class="panel-title mb-2 pb-2">Список предметов</h4>
        </div>
        <div class="panel-body">
            @if ($items->total() > 0)

                <table class="table table-striped table-hover table-bordered table-list">
                    <thead class="thead-dark">
                    <tr>
                        <th style="width:50px"><em class="fa fa-cog"></em></th>
                        <th>id</th>
                        <th>user</th>
                        <th>Заголовок</th>
                        <th>Описание</th>
                        <th>Категория</th>
                        <th>Подкатегория</th>
                        <th>Создан</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ( $items as $item)

                        <tr class="table-hover" onclick="optionShow(this)" value="{{ $item->id }}">
                            <td align="center">
                                <a class="btn btn-default"><em class="fa fa-pencil"></em></a>
                            </td>
                            @foreach($item as $key => $value)
                                <td height="50" title="{{ $key }}">
                                    @if ($key ==='description')
                                        <div class="td-descr" style="height: 50px;overflow: hidden">{{ $value }}</div>
                                    @else
                                        {{ $value }}
                                    @endif
                                </td>
                            @endforeach
                        </tr>

                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        <div class="card-footer" style="height:60px;position:relative;">
            <div class="row">
                <div class="col-md-offset-1 col-md-10">{{ $items->links() }}</div>
            </div>
        </div>
    </div>
{{------------------ MODAL WINDOW -----------------------}}
    <div id="myModal" class="modal animate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="true">
        <div class="modal-dialog a-zoomRight" 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 text-center p-lg">
                    <p style="font-size: 1.2em">Содержимое отсутствует!</p>
                </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>

@endsection

@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("admin.items.ajax", ["id"=> '0'])}}' + $id,
                type: 'POST',
                data: ( '{ "item": ' + $id + ' }' ),
                contentType: 'json',
                processData: false,
                success: function (response) {
                    $("#myModal .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;');
        }

        function changeMethod(element) {
            let method = $(element).data('action');
            $('#item-form').find('[name="_method"]').val(method);
            $('#item-form').submit();
        }

        $(function () {
            $('#myModal').on('shown.bs.modal', function () {
                $(this).find('[role="document"]').$('#myModal').focus();
            })
        })

    </script>
@endsection

@section('footer')
@endsection