@extends('layouts.admin')

@section('page_title', 'Homepage Sliders')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <p class="text-sm text-slate-500">Manage the hero slider images that appear on the homepage.</p>
    <a href="{{ route('admin.sliders.create') }}" class="px-5 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-xs font-bold transition-all shadow-md shadow-primary-500/20">
        <i class="fa-solid fa-plus mr-1"></i> Add Slide
    </a>
</div>

<div class="bg-white border border-slate-200 rounded-3xl overflow-hidden shadow-sm p-4 sm:p-6">
    <table id="sliders-table" class="w-full text-left border-collapse datatable-table">
        <thead>
            <tr>
                <th>SL</th>
                <th>Image</th>
                <th>Link</th>
                <th>Order</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('#sliders-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('admin.sliders.index') }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '40px' },
            { data: 'image_preview', name: 'image_preview', orderable: false, searchable: false, width: '110px' },
            { data: 'link', name: 'link', render: function(d) { return d ? '<a href="' + d + '" target="_blank" class="text-primary-600 hover:text-primary-700 text-sm font-medium truncate block max-w-[200px]">' + d + '</a>' : '<span class="text-slate-400">—</span>'; } },
            { data: 'sort_order', name: 'sort_order', width: '80px' },
            { data: 'is_active', name: 'is_active', width: '100px' },
            { data: 'action', name: 'action', orderable: false, searchable: false, width: '120px' },
        ],
        order: [[0, 'desc']],
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/en-GB.json'
        },
        dom: "<'flex flex-wrap items-center justify-between mb-4 gap-3'<'flex items-center gap-2'l><'flex items-center'f>>" +
             "<'overflow-x-auto'tr>" +
             "<'flex flex-wrap items-center justify-between mt-4 gap-3'<'flex items-center'i><'flex items-center'p>>",
    });
});
</script>
@endsection