@extends('layouts.dashboard_template')

@section('content')
    <section class="content-header block-breadcrumb">
        <h1>
            {{ $page_title ?? 'Page Title' }}
            <small>{{ $page_description ?? '' }}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            <li class="active">{{ $page_title }}</li>
        </ol>
    </section>
    <section class="content container-fluid">
        <div class="box box-primary">
            <div class="box-body">
                <h5 class="text-bold">Rincian Dokumentasi Pembangunan</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <td width="20%">Nama Kegiatan</td>
                                <td width="1">:</td>
                                <td id="nama-kegiatan">Loading...</td>
                            </tr>
                            <tr>
                                <td>Sumber Dana</td>
                                <td>:</td>
                                <td id="sumber-dana">Loading...</td>
                            </tr>
                            <tr>
                                <td>Anggaran</td>
                                <td>:</td>
                                <td id="anggaran">Loading...</td>
                            </tr>
                            <tr>
                                <td>Volume</td>
                                <td>:</td>
                                <td id="volume">Loading...</td>
                            </tr>
                            <tr>
                                <td>Tahun</td>
                                <td>:</td>
                                <td id="tahun">Loading...</td>
                            </tr>
                            <tr>
                                <td>Pelaksana</td>
                                <td>:</td>
                                <td id="pelaksana">Loading...</td>
                            </tr>
                            <tr>
                                <td>Lokasi Pembangunan</td>
                                <td>:</td>
                                <td id="lokasi-pembangunan">Loading...</td>
                            </tr>
                            <tr>
                                <td>Keterangan</td>
                                <td>:</td>
                                <td id="keterangan">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <hr>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="pembangunan-table">
                        <thead>
                            <tr>
                                <th>Nomor</th>
                                <th>Presentase</th>
                                <th>Keterangan</th>
                                <th>Tanggal Rekam</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@include('partials.asset_datatables')

@push('scripts')
    <script>
        $(document).ready(function() {
            let idPembangunan = '{{ $id }}';
            let kodeDesa = '{{ $desa_id }}';

            // Ambil data pembangunan dari API
            $.ajax({
                url: `{{ $settings['api_server_database_gabungan'] ?? '' }}/api/v1/opendk/pembangunan/${idPembangunan}`,
                headers: {
                    "Accept": "application/ld+json",
                    "Content-Type": "application/json; charset=utf-8",
                    "Authorization": `Bearer {{ $settings['api_key_database_gabungan'] ?? '' }}`
                },
                method: 'GET',
                success: function(response) {
                    if (response.data) {
                        $('#nama-kegiatan').text(response.data.attributes.judul);

                        // Format sumber_dana jika berupa JSON array
                        var sumberDana = response.data.attributes.sumber_dana;
                        if (sumberDana) {
                            try {
                                var parsed = JSON.parse(sumberDana);
                                if (Array.isArray(parsed)) {
                                    var html = '';
                                    parsed.forEach(function(s) {
                                        html += '<span class="label label-primary" style="margin-right:3px">' + s + '</span> ';
                                    });
                                    $('#sumber-dana').html(html);
                                } else {
                                    $('#sumber-dana').text(sumberDana);
                                }
                            } catch (e) {
                                $('#sumber-dana').text(sumberDana);
                            }
                        } else {
                            $('#sumber-dana').text('-');
                        }

                        $('#lokasi-pembangunan').text(response.data.attributes.lokasi);
                        $('#keterangan').text(response.data.attributes.keterangan);
                        $('#anggaran').text('Rp. ' + Number(response.data.attributes.anggaran).toLocaleString('id-ID') ?? '-');
                        $('#volume').text(response.data.attributes.volume ?? '-');
                        $('#tahun').text(response.data.attributes.tahun_anggaran ?? '-');
                        $('#pelaksana').text(response.data.attributes.pelaksana_kegiatan ?? '-');
                    }
                },
                error: function() {
                    $('#nama-kegiatan, #sumber-dana, #anggaran, #volume, #tahun, #pelaksana, #lokasi-pembangunan, #keterangan').text(
                        "Error loading data");
                }
            });

            // Ambil data rincian pembangunan
            $('#pembangunan-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: `{{ $settings['api_server_database_gabungan'] ?? '' }}/api/v1/opendk/pembangunan-rincian-datatable/${idPembangunan}/${kodeDesa}`,
                    headers: {
                        "Authorization": `Bearer {{ $settings['api_key_database_gabungan'] ?? '' }}`
                    },
                    method: 'POST',
                    dataSrc: function(json) {
                        json.recordsTotal = json.meta.pagination.total;
                        json.recordsFiltered = json.meta.pagination.total;

                        return json.data.map(item => ({
                            DT_RowIndex: item.attributes.nomor,
                            persentase: item.attributes.persentase,
                            keterangan: item.attributes.keterangan,
                            created_at: item.attributes.created_at,
                        }));
                    }
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1; // Menampilkan nomor urut otomatis
                        },
                        class: 'text-center',
                        searchable: false,
                        orderable: true
                    },
                    {
                        data: 'persentase',
                        class: 'text-center',
                        orderable: true
                    },
                    {
                        data: 'keterangan',
                        class: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        class: 'text-center',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endpush