@extends('app-admin')

@section('head')
    @include('admin.partial.head')
@endsection

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="toolbar" id="kt_toolbar">
        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
            <div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Data Master Infografis
                <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
                </h1>
                </div>
            </div>
        </div>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <div class="row">
                <div class="card card-flush h-xl-100">
                    <div class="card-header">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bolder text-gray-800">Data Infografis</span>
                        </h3>
                        <div class="card-title align-items-end flex-column">
                            {{-- GANTI ROUTE KE INFOGRAFIS TAMBAH --}}
                            <a href="{{ route('admin.master.infografis.tambah') }}" class="btn btn-danger">
                                <i class="fa fa-plus"></i> Tambah Baru
                            </a>
                        </div>
                    </div>
                    <div class="card-body pt-2">
                        <table class="table table-bordered table-hover w-100" id="datatables">
                            <thead>
                                <tr>
                                    {{-- SESUAIKAN KOLOM DENGAN DATABASE INFOGRAFIS --}}
                                    <th>No</th>
                                    <th>Judul Infografis</th>
                                    <th>Tanggal Publish</th>
                                    <th>Gambar Thumbnail</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
<div class="footer py-4 d-flex flex-lg-column" id="kt_footer">
    <div class="container-fluid d-flex flex-column flex-md-row align-items-center justify-content-between">
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-bold me-1">2025©</span>
            <a href="#" target="_blank" class="text-gray-800 text-hover-primary">JDIH Provinsi Jawa Tengah</a>
        </div>
    </div>
</div>
</div>
@endsection

@section('script')
    @include('admin.partial.script')
    <script>
       $('#datatables').DataTable({
            responsive: true,
            processing: true,
            serverSide: true, // Ubah jadi true biar enteng kalau data banyak
            ajax: {
                // ARAHKAN KE ROUTE DATATABLE INFOGRAFIS
                url: '{{ route('admin.master.infografis.datatable') }}',
                type: 'post',
                data: { "_token": "{{ csrf_token() }}" }
            },
            columns: [
    // TAMBAHKAN 'orderable: false' DISINI BIAR GAK ERROR 👇
    {data: 'DT_RowIndex', name: 'DT_RowIndex', width: '5%', orderable: false, searchable: false},
    
    {data: 'judul', name: 'judul'},
    {data: 'tgl_publish', name: 'tgl_publish', width:'15%'},
    {data: 'gambar', name: 'gambar', width:'20%', orderable: false, searchable: false}, // Gambar juga gak bisa di-sort
    {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
],
order: [[1, 'desc']], // <--- TAMBAHAN: Kita suruh urutin berdasarkan JUDUL aja (Kolom ke-1) secara default
        });
    </script>

    <script type="text/javascript">
        // FUNGSI HAPUS (Disesuaikan dengan Controller onclick="hapus(id)")
        function hapus(id) {
            Swal.fire({
              title: 'Anda Yakin ingin menghapus data ini?',
              text: "Data tidak bisa dikembalikan !",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Ya, Hapus!'
            }).then((result) => {
              if (result.isConfirmed) {
                Swal.fire("Silahkan Tunggu ....")
                Swal.showLoading()
                $.ajax({
                  // ARAHKAN KE ROUTE DELETE INFOGRAFIS
                  url: '{{ route('admin.master.infografis.delete') }}',
                  type: 'post',
                  data: {
                    id: id,
                    _token: "{{ csrf_token() }}"
                },
                  dataType: 'json',
                  success: function(data){
                    Swal.fire({
                        text: data.success, // Di controller kita return json['success']
                        icon: 'success',
                        buttonsStyling: !1,
                        confirmButtonText: "Ok!",
                        customClass:{
                           confirmButton: "btn btn-light"
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Reload tabel otomatis tanpa refresh halaman
                            $('#datatables').DataTable().ajax.reload();
                        }
                    })
                  }
                });
              }
            })
        }
    </script>
@endsection