@extends ('backend.layouts.app')

@section('title', trans('labels.backend.settings.management') . ' | Homepage Settings')

@section('page-header')
    <h1>
        Homepage Settings
        <small>{{ trans('labels.backend.settings.edit') }}</small>
    </h1>
@endsection

@section('content')
    <form method="POST" action="" accept-charset="UTF-8" role="form" id="edit-homepage-settings" enctype="multipart/form-data" class="form-horizontal">

        @csrf
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title">{{ trans('labels.backend.settings.edit') }}</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body setting-block">
                <div class="row">
                    <div class="col-md-12">

                        <ul id="block-list" class="list-group">
                            @foreach($blocks as $block)
                            <li class="list-group-item" data-id="{{ $block->id }}">
                                <i class="fa fa-bars mr-2 handle"></i> {{ $block->block_name }}
                            </li>
                            @endforeach
                        </ul>
                        
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-md-12">
                        <button id="save-order" class="btn btn-success mt-3">Save Order</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('after-scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    const sortable = Sortable.create(document.getElementById('block-list'), {
        animation: 150
    });

    $('#save-order').on('click', function (event) {
        event.preventDefault();
        let order = [];

        $('#block-list li').each(function (index, element) {
            order.push({
                id: $(element).data('id'),
                position: index + 1
            });
        });

        $.ajax({
            url: "{{ route('admin.homepage.update-order') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                order: order
            },
            success: function (response) {
                alert('Order saved successfully!');
            },
            error: function (xhr) {
                alert('Something went wrong. Please try again.');
                console.error(xhr.responseText);
            }
        });        
    });
</script>
@endsection