@extends('admin.layout.base')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css">
@endpush

@section('content')
<div class="content-container">
    <div class="table-container">
        <table id="bannersTable" class="display">
            <thead>
                <tr>
                    <th>Duration</th>
                    <th>Expire Date</th>
                    <th>Banner Image</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be inserted here via AJAX -->
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>

<script>
$(document).ready(function() {
    $('#bannersTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ url('/api/banners') }}",
            type: "GET",
            dataSrc: ""
        },
        columns: [
            { data: "banner_duration" },
            { data: "expire_date" },
            {
                data: "banner_image",
                render: function(data) {
                    return `<img src="/${data}" width="100">`;
                }
            }
        ]
    });
});
</script>
@endpush