@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')

<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-body">
            <!-- Zero configuration table -->
            <section id="">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ $title }}</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="controls mb-2">
                                                <select id="filter_regional_entity" class="select2 form-control" style="width:100%">
                                                    <option value="">Pilih Regional Entity</option>
                                                    @foreach ($data_regional_entity ?? [] as $d)
                                                        <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="controls mb-2">
                                                <input type="text" id="filter_kabupaten" class="form-control" placeholder="Filter Kabupaten">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="controls mb-2">
                                                <input type="text" id="filter_unit" class="form-control" placeholder="Filter Unit">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="controls mb-2">
                                                <input type="text" id="filter_nia" class="form-control" placeholder="Filter NIA">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th width="20px">No</th>
                                                    <th>Regional Entity</th>
                                                    <th>Kabupaten</th>
                                                    <th>Desa</th>
                                                    <th>Unit</th>
                                                    <th>NIA</th>
                                                    <th>Luas</th>
                                                    <th>Updated at</th>
                                                    <th width="30px">Pilihan</th>
                                                    <th width="30px">Database</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tableMultiple">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/ Zero configuration table -->
        </div>
    </div>
</div>

<div class="modal fade text-left" id="modal_form_input" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-primary">Tambah {{ $title }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="form_input" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>NIA</label>
                            <div class="controls">
                                <input id="nia" name="nia" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>NIB<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="nib" name="nib" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>No Reg SAP</label>
                            <div class="controls">
                                <input id="no_reg_sap" name="no_reg_sap" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>No Sertifikat<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="no_sertifikat" name="no_sertifikat" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div id="mapCreate" class="m-1" style="height: 400px; width: 100%; display: none;">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label>Pin Point<span class="text-danger">*</span></label>
                            <div class="controls">
                                <input id="pin_point" name="pin_point" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Latitude<span class="text-info"> (terisi otomatis)</span></label>
                            <div class="controls">
                                <input id="latitude" name="latitude" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Longitude<span class="text-info"> (terisi otomatis)</span></label>
                            <div class="controls">
                                <input id="longitude" name="longitude" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Unit<span class="text-danger">*</span></label>
                            <div class="controls">
                                <input id="unit" name="unit" type="text" class="form-control" autocomplete="off" maxlength="225" required>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Regional Entity<span class="text-danger">*</span></label>
                            <select id="id_regional_entity" name="id_regional_entity" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Regional Entity</option>
                                @foreach ( $data_regional_entity as $d)
                                    <option value="{{ $d->id }}">{{ $d->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Luas (Ha)<span class="text-danger">*</span></label>
                            <div class="controls">
                                <input id="luas" name="luas" type="number" class="form-control" autocomplete="off" step="any" required>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Pemanfaatan Aset<span class="text-danger">*</span></label>
                            <select id="pemanfaatan_aset" name="pemanfaatan_aset" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Pemanfaatan Aset</option>
                                @foreach ( $data_pemanfaatan_aset as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select>  
                        </div>
                        <div class="form-group col-md-3">
                            <label>Dasar Perolehan Tanah<span class="text-danger">*</span></label>
                            <select id="dasar_perolehan_tanah" name="dasar_perolehan_tanah" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Dasar Perolehan Tanah</option>
                                @foreach ( $data_dasar_perolehan_tanah as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select>  
                        </div>
                        <div class="form-group col-md-3">
                            <label>NJOP Bumi<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="njop_bumi" name="njop_bumi" type="number" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>NJOP Bangunan<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="njop_bangunan" name="njop_bangunan" type="number" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>RSPO<span class="text-danger">*</span></label>
                            <select id="rspo" name="rspo" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih RSPO</option>
                                <option value="Ya">Ya</option>
                                <option value="Tidak">Tidak</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Status Sertifikat</label>
                            <!-- <select id="status_aset" name="status_aset" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Dasar Status Sertifikat</option>
                                @foreach ( $data_status_sertifikat as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select>   -->
                            <input id="status_aset" name="status_aset" placeholder="Status Sertifikat" class="form-control" readonly>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Jenis Hak<span class="text-danger"></span></label>
                            <!-- <select id="jenis_hak" name="jenis_hak" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Jenis Hak</option>
                                @foreach ( $data_jenis_hak as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select> -->
                            <input id="jenis_hak" name="jenis_hak" placeholder="Jenis Hak" class="form-control" readonly>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Penerbit SK<span class="text-danger">*</span></label>
                            <!-- <select id="penerbit_sk" name="penerbit_sk" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Kewenangan Kantah, Kanwil, BPN Pusat</option>
                                @foreach ( $data_penerbit_sk as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select> -->
                            <input id="penerbit_sk" name="penerbit_sk" placeholder="Penerbit SK" class="form-control" readonly>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Tanggal Terbit Sertifikat<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="tanggal_terbit_sertifikat" name="tanggal_terbit_sertifikat" type="date" class="form-control" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Tanggal Berakhir Sertifikat<span class="text-danger"></span></label>
                            <div class="controls">
                                <input id="tanggal_berakhir_sertifikat" name="tanggal_berakhir_sertifikat" type="date" class="form-control" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <label>Jaminan Perbankan<span class="text-danger">*</span></label>
                            <!-- <select id="jaminan_perbankan" name="jaminan_perbankan" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Jaminan Perbankan</option>
                                @foreach ( $data_jaminan_perbankan as $d)
                                    <option value="{{ $d->nama }}">{{ $d->nama }}</option>
                                @endforeach
                            </select> -->
                            <input id="jaminan_perbankan" name="jaminan_perbankan" placeholder="Jaminan Perbankan" class="form-control" readonly>
                        </div>
                        <div class="form-group col-md-3" hidden>
                            <label>Anggaran RKAP Sertifikasi Aset (Rp)<span class="text-danger">*</span></label>
                            <div class="controls">
                                <input id="anggaran" name="anggaran" type="number" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group col-md-3" hidden>
                            <label>Realisasi Sertifikasi Aset (Rp)<span class="text-danger">*</span></label>
                            <div class="controls">
                                <input id="realisasi" name="realisasi" type="number" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group col-md-3" hidden>
                            <label>Sumber Anggaran</label>
                            <div class="controls">
                                <input id="sumber_anggaran" name="sumber_anggaran" type="text" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        
                        <!-- <div class="form-group col-md-3">
                            <label>Label Aset<span class="text-danger">*</span></label>
                            <select id="label_aset" name="label_aset" class="select2 form-control" style="width:100%" required>
                                <option value="">Pilih Label Aset</option>
                                <option value="Baru">Baru</option>
                                <option value="Split">Split</option>
                                <option value="Merge">Merge</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label>NIA Lama</label>
                            <div class="controls">
                                <input id="nia_lama" name="nia_lama" type="text" class="form-control" autocomplete="off" maxlength="225">
                            </div>
                        </div> -->
                    </div>
                    <div class="form-group">
                        <label class="text-danger">*) Wajib diisi</label>
                    </div><br>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-outline-danger" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        // $('.select2').select2();

        //     function checkLabelAset() {
        //         var labelAset = $('#label_aset').val();
        //         if (labelAset === 'Split' || labelAset === 'Merge') {
        //             $('#nia_lama').attr('required', 'required');
        //         } else {
        //             $('#nia_lama').removeAttr('required');
        //         }
        //     }

        //     $('#label_aset').change(function() {
        //         checkLabelAset();
        //     });

        //     checkLabelAset();

        function filterTable() {
            var regionalEntity = $('#filter_regional_entity').val().toLowerCase();
            var kabupaten = $('#filter_kabupaten').val().toLowerCase();
            var unit = $('#filter_unit').val().toLowerCase();
            var nia = $('#filter_nia').val().toLowerCase();

            $('#tableMultiple tr').filter(function() {
                $(this).toggle(
                    ($(this).find('td').eq(1).text().toLowerCase().indexOf(regionalEntity) > -1 || regionalEntity === "") &&
                    ($(this).find('td').eq(2).text().toLowerCase().indexOf(kabupaten) > -1 || kabupaten === "") &&
                    ($(this).find('td').eq(4).text().toLowerCase().indexOf(unit) > -1 || unit === "") &&
                    ($(this).find('td').eq(5).text().toLowerCase().indexOf(nia) > -1 || nia === "")
                );
            });
        }

        $('#filter_regional_entity, #filter_kabupaten, #filter_unit, #filter_nia').on('keyup change', filterTable);

        getSertifikat();

        var formActionPost = "{{ route('content.new-aset') }}";

        function getSertifikat() {
            var urlSrft = "{{ route('data.get-selection-sertifikat') }}";
            $.ajax({
                url: urlSrft,
                type: "GET",
                dataType: "json",
                success: function (response) {
                    var tableBody = $("#tableMultiple");
                    tableBody.empty();

                    $.each(response.data, function(index, item) {
                        var checkDB = item.source_data == 'database' ? '<button type="button" class="btn btn-icon btn-icon rounded-circle btn-success btn-sm"><i class="feather icon-check"></i></button>' : '';
                        var row = '<tr>' +
                            '<td>' + (index + 1) + '</td>' +
                            '<td>' + (item.regional_entity || '-') + '</td>' +
                            '<td>' + (item.kabupaten || '-') + '</td>' +
                            '<td>' + (item.desa || '-') + '</td>' +
                            '<td>' + (item.unit || '-') + '</td>' +
                            '<td>' + (item.nia || '-') + '</td>' +
                            '<td>' + (item.luas || '-') + '</td>' +
                            '<td>' + (moment(item.updated_at).format('HH:mm D MMM YYYY') || '-') + '</td>' +
                            '<td><button type="button" data-id="'+item.nia+'" class="edit-button btn btn-icon btn-icon rounded-circle btn-primary btn-sm waves-effect waves-light"><i class="feather icon-edit-1"></i></button>&nbsp;</td>' +
                            '<td>' + checkDB + '</td>' +
                        '</tr>';
                        tableBody.append(row);
                    });

                    $('.edit-button').on('click', function() {
                        var nia = $(this).data('id');
                        var item = response.data.find(item => item.nia === nia);
                        if (item) {
                            $('#nia').val(item.nia || '');
                            $('#nib').val(item.nib || '');
                            $('#no_reg_sap').val(item.no_reg_sap || '');
                            $('#no_sertifikat').val(item.no_sertifikat || '');
                            $('#pin_point').val(item.pin_point || '');
                            $('#latitude').val(item.latitude || '');
                            $('#longitude').val(item.longitude || '');
                            $('#unit').val(item.unit || '');
                            $('#id_regional_entity').val(item.id_regional_entity || '').prop('selected', true).trigger('change');
                            $('#luas').val(item.luas || '');
                            $('#pemanfaatan_aset').val(item.pemanfaatan_aset || '').prop('selected', true).trigger('change');
                            $('#dasar_perolehan_tanah').val(item.dasar_perolehan_tanah || '').prop('selected', true).trigger('change');
                            $('#njop_bumi').val(item.njop_bumi || '');
                            $('#njop_bangunan').val(item.njop_bangunan || '');
                            $('#status_aset').val(item.status_aset || '').prop('selected', true).trigger('change');
                            $('#jenis_hak').val(item.jenis_hak || '').prop('selected', true).trigger('change');
                            $('#penerbit_sk').val(item.penerbit_sk || '').prop('selected', true).trigger('change');
                            $('#tanggal_terbit_sertifikat').val(item.tanggal_terbit_sertifikat || '');
                            $('#tanggal_berakhir_sertifikat').val(item.tanggal_berakhir_sertifikat || '');
                            $('#jaminan_perbankan').val(item.jaminan_perbankan || '').prop('selected', true).trigger('change');
                            $('#anggaran').val(item.anggaran || '');
                            $('#realisasi').val(item.realisasi || '');
                            $('#sumber_anggaran').val(item.sumber_anggaran || '');
                            $('#rspo').val(item.rspo || '').prop('selected', true).prop('selected', true).trigger('change');
                            $('#label_aset').val(item.label_aset || '').prop('selected', true).trigger('change');
                            $('#nia_lama').val(item.nia_lama || '');

                            // Show the modal
                            $('#modal_form_input').modal('show');
                        }
                    });

                    $('#form_input').on('submit', function(e) {
                        e.preventDefault();
                        var formData = new FormData($(this)[0]);
                        $.ajax({
                            url: formActionPost,
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response, textStatus, xhr) {
                                $('#modal_form_input').modal('hide');
                                getSertifikat();
                                if (response.status) {
                                    var responseTitle = 'Updated';
                                    if (xhr.status == 201) {
                                        responseTitle = 'Saved'
                                    }
                                    Swal.fire({
                                        icon: "success",
                                        title: responseTitle,
                                        text: response.message,
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                } else {
                                    Swal.fire({
                                    icon: "error",
                                    title: "Failed...",
                                    text: response.message,
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    });
                    
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

    });

</script>

@endsection

@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@1.13.0/dist/Control.Geocoder.css" />
<style>
    #map {
        height: 400px;
        width: 100%;
    }
    #mapCreate {
        height: 400px;
        width: 100%;
    }
    /* Center the icon */
    .custom-menu {
        border-radius: 50%; /* To make the button rounded */
        width: 60px; /* Set your desired width */
        height: 60px; /* Set your desired height */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
    }
  </style>
@endsection

@section('js')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', (event) => {

        // Initialize the second map
        var mapCreate = L.map('mapCreate').setView([-2.5, 117.6], 5);
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(mapCreate);

        var geocoder = L.Control.geocoder({
                defaultMarkGeocode: false
            }).on('markgeocode', function(e) {
                mapCreate.setView(e.geocode.center, 13);
            }).addTo(mapCreate);
        
        var markerCreate;
        
        // Show map when clicking on the input field
        $('#pin_point').on('click', function () {
            $('#mapCreate').show();
            // Trigger resize on map to make sure it displays correctly
            setTimeout(() => {
                mapCreate.invalidateSize();
            }, 100);
        });
        
        // Add click event to the second map
        mapCreate.on('click', function (e) {
            // If marker exists, remove it
            if (markerCreate) {
                mapCreate.removeLayer(markerCreate);
            }
            // Add marker to the map at the clicked location
            markerCreate = L.marker([e.latlng.lat, e.latlng.lng]).addTo(mapCreate);
            // Set latitude and longitude input fields
            $('#latitude').val(e.latlng.lat);
            $('#longitude').val(e.latlng.lng);
            // Reverse geocode to get the address
            L.Control.Geocoder.nominatim().reverse(e.latlng, mapCreate.options.crs.scale(mapCreate.getZoom()), function (results) {
                var r = results[0];
                if (r) {
                    $('#pin_point').val(r.name);
                }
            });
            // Hide the map after selecting the pin point
            $('#mapCreate').hide();
        });
    
        $('#modal_form_input').on('shown.bs.modal', function() {
            mapCreate.invalidateSize();
        });
    
        $('#modal_form_input').on('hidden.bs.modal', function() {
            // Optionally hide the map when the modal is closed
            $('#mapCreate').hide();
        });
    });
</script>
@endsection