From 6befc5faa76690ad75e559c5c137e0828cae75a8 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Tue, 18 Mar 2025 07:19:58 +0700
Subject: [PATCH] feat(bank-data): tambahkan entri untuk data bank di
 module.json

- Menambahkan entri baru untuk pengelolaan data bank.
- Mengatur izin akses hanya untuk peran administrator.
- Memperbarui struktur module.json untuk mencakup data bank.
---
 module.json                               |  11 +
 resources/views/bank-data/index.blade.php | 342 ++++++++++++++++++++++
 2 files changed, 353 insertions(+)
 create mode 100644 resources/views/bank-data/index.blade.php

diff --git a/module.json b/module.json
index c0302e9..bf2313a 100644
--- a/module.json
+++ b/module.json
@@ -109,6 +109,17 @@
             }
         ],
         "main": [
+            {
+                "title": "Bank Data",
+                "path": "bank-data",
+                "icon": "ki-filled ki-questionnaire-tablet text-lg text-primary",
+                "classes": "",
+                "attributes": [],
+                "permission": "",
+                "roles": [
+                    "administrator"
+                ]
+            },
             {
                 "title": "Permohonan",
                 "path": "permohonan",
diff --git a/resources/views/bank-data/index.blade.php b/resources/views/bank-data/index.blade.php
new file mode 100644
index 0000000..992a893
--- /dev/null
+++ b/resources/views/bank-data/index.blade.php
@@ -0,0 +1,342 @@
+@extends('layouts.main')
+
+@section('breadcrumbs')
+    {{ Breadcrumbs::render('bank-data') }}
+@endsection
+
+@section('content')
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-5 lg:gap-7.5 mb-10">
+        <div class="col-span-1">
+            <div class="card border border-agi-100 card-grid min-w-full">
+                <div class="card-header bg-agi-50 py-5 flex-wrap">
+                    <h3 class="card-title">
+                        Filter
+                    </h3>
+                </div>
+                <div class="card-body px-5">
+                    <form id="filter-form">
+                        <div class="grid gap-4 w-full p-5">
+                            <div>
+                                <label for="jenis_asset" class="block text-sm font-medium text-gray-700">Jenis Asset</label>
+                                <select id="jenis_asset" name="jenis_asset" class="select tomselect w-full @error('jenis_asset') border-danger bg-danger-light @enderror">
+                                    <option value="">Select Asset Type</option>
+                                    @foreach($jenisJaminan as $jenis)
+                                        <option value="{{ $jenis->name }}">{{ $jenis->name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                            <div>
+                                <label for="province_code" class="block text-sm font-medium text-gray-700">Province</label>
+                                <select id="province_code" name="province_code" class="select w-full @error('province_code') border-danger bg-danger-light @enderror">
+                                    <option value="">Select Province</option>
+                                    @foreach($provinces as $province)
+                                        <option value="{{ $province->code }}">{{ $province->name }}</option>
+                                    @endforeach
+                                    <!-- Add province options here -->
+                                </select>
+                            </div>
+                            <div>
+                                <label for="city_code" class="block text-sm font-medium text-gray-700">City</label>
+                                <select id="city_code" name="city_code" class="select w-full @error('city_code') border-danger bg-danger-light @enderror">
+                                    <option value="">Select City</option>
+                                    <!-- Add city options here -->
+                                </select>
+                            </div>
+                            <div>
+                                <label for="district_code" class="block text-sm font-medium text-gray-700">District</label>
+                                <select id="district_code" name="district_code" class="select w-full @error('district_code') border-danger bg-danger-light @enderror">
+                                    <option value="">Select District</option>
+                                    <!-- Add district options here -->
+                                </select>
+                            </div>
+                            <div>
+                                <label for="village_code" class="block text-sm font-medium text-gray-700">Village</label>
+                                <select id="village_code" name="village_code" class="select w-full @error('village_code') border-danger bg-danger-light @enderror">
+                                    <option value="">Select Village</option>
+                                    <!-- Add village options here -->
+                                </select>
+                            </div>
+                            <div>
+                                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
+                                <input type="date" id="start_date" name="start_date" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            </div>
+                            <div>
+                                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
+                                <input type="date" id="end_date" name="end_date" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                            </div>
+                            <div>
+                                <button type="submit" class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                    Apply Filters
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+        </div>
+        <div class="col-span-3">
+            <div class="card border border-agi-100 card-grid min-w-full">
+                <div class="card-header bg-agi-50 py-5 flex-wrap">
+                    <h3 class="card-title">
+                        Maps
+                    </h3>
+                </div>
+                <div class="card-body px-5">
+                    <div id="map" style="height: 700px; width: 100%;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+        <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="bank-data-table" data-api-url="{{ route('bank-data.datatables') }}">
+            <div class="card-header bg-agi-50 py-5 flex-wrap">
+                <h3 class="card-title">
+                    Daftar Bank Data
+                </h3>
+                <div class="flex flex-wrap gap-2 lg:gap-5">
+                    <div class="flex">
+                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
+                            <input placeholder="Search Bank Data" id="search" type="text" value="">
+                        </label>
+                    </div>
+                    <div class="flex flex-wrap gap-2.5">
+                        <div class="h-[24px] border border-r-gray-200"></div>
+                        <a class="btn btn-sm btn-light" href="#"> Export to Excel </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div class="scrollable-x-auto">
+                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                        <thead>
+                        <tr>
+                            <th class="w-14">
+                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="jenis_aset">
+                                <span class="sort"> <span class="sort-label"> Jenis Aset </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="tanggal">
+                                <span class="sort"> <span class="sort-label"> Tanggal </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="tahun">
+                                <span class="sort"> <span class="sort-label"> Tahun </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="luas_tanah">
+                                <span class="sort"> <span class="sort-label"> Luas Tanah </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="luas_bangunan">
+                                <span class="sort"> <span class="sort-label"> Luas Bangunan </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="harga">
+                                <span class="sort"> <span class="sort-label"> Harga </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="nilai_pasar">
+                                <span class="sort"> <span class="sort-label"> Nilai Pasar </span>
+                                    <span class="sort-icon"> </span> </span>
+                            </th>
+                            <th class="min-w-[150px]" data-datatable-column="location">
+                                <span class="sort"> <span class="sort-label"> Location </span>
+                                <span class="sort-icon"> </span> </span>
+                            </th>
+                        </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
+                    <div class="flex items-center gap-2">
+                        Show
+                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per
+                        page
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span data-datatable-info="true"> </span>
+                        <div class="pagination" data-datatable-pagination="true">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQTNRxyr0w7kXHsO2hmarDTa9-1LyLmS8&callback=initMap" async defer></script>
+    <script>
+        let map;
+        let markers = [];
+        let dataTable;
+
+        function initMap() {
+            map = new google.maps.Map(document.getElementById('map'), {
+                center: {lat: -6.200000, lng: 106.816666}, // Jakarta coordinates
+                zoom: 10
+            });
+        }
+
+        function updateMapMarkers(data) {
+            console.log(data);
+            // Clear existing markers
+            markers.forEach(marker => marker.setMap(null));
+            markers = [];
+
+            // Add new markers
+            data.forEach(item => {
+                if (item.location) {
+                    let lat, lng;
+
+                    // Check if item.location is a string containing comma-separated coordinates
+                    if (typeof item.location === 'string' && item.location.includes(',')) {
+                        [lat, lng] = item.location.split(',').map(coord => parseFloat(coord.trim()));
+                    }
+                    // Check if item.location is an object with lat and lng properties
+                    else if (typeof item.location === 'object' && item.location.lat && item.location.lng) {
+                        lat = parseFloat(item.location.lat);
+                        lng = parseFloat(item.location.lng);
+                    }
+                    // Check if item.location is an array with two elements
+                    else if (Array.isArray(item.location) && item.location.length === 2) {
+                        [lat, lng] = item.location.map(coord => parseFloat(coord));
+                    }
+
+                    if (lat && lng) {
+                        const marker = new google.maps.Marker({
+                            position: {lat: lat, lng: lng},
+                            map: map,
+                            title: item.jenis_aset
+                        });
+                        markers.push(marker);
+                    } else {
+                        console.error('Invalid location format for item:', item);
+                    }
+                }
+            });
+
+            // Adjust map bounds to fit all markers
+            if (markers.length > 0) {
+                const bounds = new google.maps.LatLngBounds();
+                markers.forEach(marker => bounds.extend(marker.getPosition()));
+                map.fitBounds(bounds);
+            }
+        }
+
+        function initializeDataTable() {
+            const element = document.querySelector('#bank-data-table');
+            const searchInput = document.getElementById('search');
+
+            const apiUrl = element.getAttribute('data-api-url');
+            const dataTableOptions = {
+                apiEndpoint: apiUrl,
+                pageSize: 5,
+                columns: {
+                    select: {
+                        render: (item, data, context) => {
+                            const checkbox = document.createElement('input');
+                            checkbox.className = 'checkbox checkbox-sm';
+                            checkbox.type = 'checkbox';
+                            checkbox.value = data.id.toString();
+                            checkbox.setAttribute('data-datatable-row-check', 'true');
+                            return checkbox.outerHTML.trim();
+                        },
+                    },
+                    jenis_aset: {
+                        title: 'Jenis Aset'
+                    },
+                    tanggal: {
+                        title: 'Tanggal',
+                        render: (item, data) => {
+                            return data.tanggal;
+                        },
+                    },
+                    tahun: {
+                        title: 'Tahun',
+                        render: (item, data) => {
+                            return data.tahun;
+                        },
+                    },
+                    luas_tanah: {
+                        title: 'Luas Tanah',
+                        render: (item, data) => {
+                            return `${data.luas_tanah} m²`;
+                        },
+                    },
+                    luas_bangunan: {
+                        title: 'Luas Bangunan',
+                        render: (item, data) => {
+                            return `${data.luas_bangunan} m²`;
+                        },
+                    },
+                    harga: {
+                        title: 'Harga',
+                        render: (item, data) => {
+                            return window.formatRupiah(data.harga);
+                        },
+                    },
+                    nilai_pasar: {
+                        title: 'Nilai Pasar',
+                        render: (item, data) => {
+                            return window.formatRupiah(data.nilai_pasar);
+                        },
+                    },
+                    location: {
+                        title: 'Location'
+                    }
+                },
+            };
+
+            dataTable = new KTDataTable(element, dataTableOptions);
+            dataTable.on('draw', () => {
+                const data = dataTable._data;
+                updateMapMarkers(data);
+            })
+            // Custom search functionality
+            searchInput.addEventListener('input', function () {
+                const searchValue = this.value.trim();
+                dataTable.search(searchValue, true);
+            });
+        }
+
+        const filterForm = document.getElementById('filter-form');
+        filterForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+            const formData = new FormData(this);
+            const filters = Object.fromEntries(formData.entries());
+
+            // Apply the new search/filter
+            if (filters) {
+                dataTable.search(filters, true);
+            }
+
+            // Reload the table to apply the new filters
+            dataTable.reload();
+        });
+        function initializeEverything() {
+            initMap();
+            initializeDataTable();
+
+            dataTable.on('draw', () => {
+                console.log("Table redrawn");
+            });
+        }
+
+        // Check if Google Maps API is loaded
+        function checkGoogleMapsLoaded() {
+            if (window.google && window.google.maps) {
+                initializeEverything();
+            } else {
+                setTimeout(checkGoogleMapsLoaded, 100);
+            }
+        }
+
+        // Start checking if Google Maps is loaded
+        checkGoogleMapsLoaded();
+    </script>
+@endpush