@extends('layouts.frontend')
@section('main-content')
    <section id="karya" class="py-16 bg-white">
        
        <div class="container mx-auto px-4">
            <div class="relative rounded-lg overflow-hidden mb-8">
                <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{asset('assets/admin/images/breadcum.jpg')}}');"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/70 via-yellow-200/30 to-emerald-600/70"></div>
                
                <div class="relative z-10 max-w-7xl mx-auto px-4 py-5 md:py-9 flex flex-col md:flex-row md:items-center md:justify-between">
                    
                    <div>
                        <h1 class="text-2xl md:text-4xl font-bold text-black">Data Karya Siswa</h1>
                        <p class="mt-2 text-black/85 max-w-xl">Data karya-karya siswa kami</p>
                    </div>

                    <nav class="text-sm text-black/95 mt-4 md:mt-0" aria-label="Breadcrumb">
                        <ol class="list-reset flex items-center space-x-2 justify-start md:justify-end">
                            <li><a href="{{ url('/') }}" class="hover:underline text-black">Beranda</a></li>
                            <li class="text-black/60">/</li>
                            <li class="text-black font-semibold">Data Karya Siswa</li>
                        </ol>
                    </nav>

                </div>
            </div>            

            <div class="overflow-x-auto">
                <table id="ajax-datatables" class="min-w-full bg-white border border-gray-300 table-auto border-collapse">
                    <thead>
                        <tr>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">#</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Nama Karya</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white">Pembuat</th>
                            <th class="py-3 px-6 border border-gray-200 bg-green-600 text-white"></th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700 divide-y divide-gray-200">
                    </tbody>
                </table>
            </div>
        </div>
    </section>


<script>
    var table;
    $(document).ready(function() {
        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        table = $('#ajax-datatables').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            responsive: true,
            ajax: {
                url: "{{ route('getMasterpiecefrontend') }}"
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'maker',
                    name: 'maker'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

    });

</script>
@endsection