@extends('backend::layouts.app')

@section('content')
    <div class="container">
        <x-ui.breadcrumb title="Magazines">
            <a class="breadcrumb-item" href="{{ route('backend.magazine.index') }}">Magazines</a>
            <span>Edit</span>
            <span>{{ $row->title }}</span>

            <x-slot:actions>
                <a class="dropdown-item" href="{{ route('backend.magazine.pages.manage',$row) }}">Edit pages</a>
            </x-slot:actions>
        </x-ui.breadcrumb>

        @include('backend-magazine::magazine.inc.form',['action' => route('backend.magazine.update',$row), 'method' => 'PUT'])
    </div>
@endsection

@push('inline-styles')
    <style>
        .card-grid-magazine-page {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-column-gap: 15px;
            grid-row-gap: 15px;
        }

        .sortable-hover {
            border: dashed thin #6b6b6b;
        }
    </style>
@endpush

@push('inline-scripts')
    <script>

        function initSortable() {
            const target = '#sortable';

            const sorts = sortable(target, {
                forcePlaceholderSize: true,
                placeholderClass: 'sortable-hover',
                items: ':not(.not-sortable)',
            });

            const sort = sorts[0];
            const values = [];

            !sort || sort.addEventListener('sortupdate', function (e) {

                $(target).children().each(function (key, el) {
                    const $this = $(el);
                    const $input_id = $this.find('.input_id');
                    const $input_sort = $this.find('.input_sort');
                    const id = $input_id.val();
                    const sort = key + 1;

                    $input_sort.val(sort);

                    values.push({id, sort});
                });
            });


            // $.ajax({
            //     type: 'POST',
            //     url: `${baseurl}/hse-event/ajax-sort`,
            //     data: {type, data},
            //     success: function (response) {
            //         console.log('updated')
            //     },
            //     error: function (e) {
            //         $.growl.error({
            //             title: 'Error while sorting data',
            //             message: e.responseText.message
            //         });
            //     }
            // });
        }

        $(document).ready(function () {
            initSortable();

            $('form').validate({
                rules: {},
                messages: {},
            });
        });
    </script>
@endpush