@extends('layouts.external.app')
@section('content')

<div class="content-wrapper p-5">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="fw-bold">Notifikasi</h3>
                    <h6 class="fw-normal mb-0">Daftar Notifikasi Non Kredit</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                            <!-- <button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button" id="dropdownMenuDate2"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
                                <a class="dropdown-item" href="#">January - March</a>
                                <a class="dropdown-item" href="#">March - June</a>
                                <a class="dropdown-item" href="#">June - August</a>
                                <a class="dropdown-item" href="#">August - November</a>
                            </div> -->
                            <a href="{{ url('v3/suretybond/tambah') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Surety Bond</a>
                            <button type="button" class="btn btn-outline-secondary btn-icon-text btn-sm" data-bs-toggle="modal" data-bs-target="#filter"><i class="fa fa-sliders"></i> Filter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Data Revisi</h4>
                    <p>Halaman ini menampilkan data revisi yang telah diajukan.</p>
                    
                    <div class="table-responsive">
                        <table id="notificationTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Tipe</th>
                                    <th>Rejecter</th>
                                    <th>Alasan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data akan dimuat via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- partial:partials/_footer.html -->
@include('partials.external.footer')
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/chart.js/chart.umd.js"></script>

<!-- Datatables -->
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.select.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ url('/') }}/skydash/src/assets/js/off-canvas.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/template.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/settings.js"></script>
<script src="assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{{ url('/') }}/skydash/src/assets/js/jquery.cookie.js" type="text/javascript"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>
<!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
<!-- End custom js for this page-->

<script>
$(document).ready(function() {
    var table = $('#notificationTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('shownotif', ['type' => 'close']) }}",
            type: 'GET',
            dataSrc: 'data',
            beforeSend: function() {
                console.log('Making AJAX request to:', "{{ route('shownotif', ['type' => 'close']) }}");
            },
            error: function(xhr, error, thrown) {
                console.error('DataTable AJAX error:', xhr.responseJSON);
                alert('Error loading data: ' + (xhr.responseJSON?.error || 'Unknown error'));
            }
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            { 
                data: 'type_jaminan',
                defaultContent: '-'
            },
            { 
                data: 'sertifikat',
                defaultContent: '-'
            },
            { 
                data: 'rejecter',
                defaultContent: '-'
            },
            { 
                data: 'alasan',
                defaultContent: '-'
            },
        ],
        language: {
            processing: "Memuat data...",
            loadingRecords: "Memuat...",
            emptyTable: "Tidak ada data notifikasi",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
            search: "Cari:",
            paginate: {
                first: "Pertama",
                last: "Terakhir",
                next: "Selanjutnya",
                previous: "Sebelumnya"
            }
        }
    });
});

function viewDetail(id) {
    alert('Detail untuk ID: ' + id);
}
</script>@endsection