@extends('backend.layouts.app')
@section('title', 'Website Settings')

@section('title', 'Item List')

@section('content')
<div class="container">
    <h1 class="mb-4">Item List</h1>
    <a href="{{ route('admin.items.create') }}" class="btn btn-primary mb-3">+ Add Item</a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div id="itemTable">
        @include('backend.items.partials.table')
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    let page = $(this).attr('href').split('page=')[1];

    $.ajax({
        url: "?page=" + page,
        type: "get",
        success: function(data) {
            $('#itemTable').html(data);
        }
    });
});
</script>
@endpush

<style>
 .fl-wrapper[data-position$="-right"] {
    top: 0px !important; /* move it down */
    right: 20px !important; /* keep right aligned */
    z-index: 2050 !important; /* above header */
}

</style>