@extends('layouts.app')
@section('title',@$title) 
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-table.min.css')}}">
@endsection
@section('content')
<section id="section4" class="container mx-auto p-12 md:py-12">
    <div class="flex justify-between mb-15">
        <h4 class="text-lg md:text-2xl font-extrabold text-black">{{@$title}} {{date('Y')}}</h4>
    </div>
    <div class="w-full h-100">
        <table class="table" 
        data-search="false"
        data-toggle="table"
        data-pagination="true"
        data-toolbar="#toolbar"
        data-show-refresh="false"
        data-url="{{url('data/sekolah')}}"
        data-ajax-options='{"xhrFields": {"withCredentials": true}}'
        data-sort-name="ids"
        data-sort-order="desc"
        data-page-size="10"
        data-id-field="id"
        id="grid-data">
            <thead class="bg-success text-white text-center border border-[#eaeaea] px-3 py-3">
            <tr>
                <th class="text-center border border-[#eaeaea] px-3 py-2" data-field="no">No</th>
                <th class="border border-[#eaeaea] px-3 py-2" data-field="sekolah">Sekolah</th>
                <th class="border border-[#eaeaea] px-3 py-2" data-field="kota">Kota</th>
                <th class="text-center border border-[#eaeaea] px-3 py-2" data-field="tahun">Tahun</th>
                <th class="text-center border border-[#eaeaea] px-3 py-2" data-field="skor">Skor</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</section>
@endsection
@section('js')
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
@endsection