@extends('master')
@section('title', 'GIS Perumahan')
@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">GIS Perumahan</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="index.html" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ url('/perumahan') }}" class="breadcrumb-item">Perumahan</a>
                    <span class="breadcrumb-item active">GIS Perumahan</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
    @include('perumahan.detail.head')
@endsection

@section('konten')
    <div class="d-flex align-items-stretch align-items-lg-start flex-column flex-lg-row">
        <div class="tab-content flex-fill order-2 order-lg-1">
            <div class="tab-pane fade active show" id="activity">
                <div class="card">
                    <div class="card-header d-sm-flex">
                        <h5 class="mb-0">GIS Perumahan</h5>
                    </div>

                    <div class="card-body">
                        <div id="map" class=".grid-print-container" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="{{ asset('assets/node_modules/leaflet-easyprint/dist/bundle.js') }}"></script>
    <script src="{{ asset('assets/node_modules/leaflet.browser.print/dist/leaflet.browser.print.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            var route1 = @json($batas);
            var route2 = @json($persil_eks);
            var route3 = @json($persil_ren);
            var route4 = @json($psu_eks);
            var route5 = @json($psu_ren);
            var batas = L.geoJSON(route1);
            var persil_eks = L.geoJSON(route2, {
                onEachFeature: function(feature, layer) {
                    var baseurl = '{!! asset('storage/images/perumahan/' . $data->id_perumahan . '/gambar/') !!}/';
                    var imgUrl = baseurl + feature.properties.FOTO;
                    var strRp = imgUrl.replace(/ /g, '%20');
                    layer.bindPopup('<div> Luas Bangunan Eksisting: ' + feature.properties.L_B_EKS +
                        '<br> NOP: ' + feature.properties.NOP +
                        '<br> Status Huni: ' + feature.properties.STTS_HUNI +
                        '<br> Luas Bangunan Rencana: ' + feature.properties.L_B_RCN +
                        '<br> Foto: <br> <img src="' + strRp + '" width="300" /></div>'
                    );
                }
            });
            var persil_ren = L.geoJSON(route3);
            var psu_eks = L.geoJSON(route4);
            var psu_ren = L.geoJSON(route5);

            var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 22,
            });

            var ewi = L.tileLayer(
                'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    maxZoom: 19,
                });

            var lokal = L.tileLayer('http://sinar.ngodingyuks.com/storage/tiled/{z}/{x}/{y}.jpg', {
                maxZoom: 22,
            });

            // zoom 17

            var lat = "{!! $data->koordinat_y !!}";
            var longi = "{!! $data->koordinat_x !!}";
            var zoome = "{!! $data->zoom_peta !!}";
            var map = L.map('map', {
                center: [(lat != "") ? lat : "-7.96163688433671", (longi != "") ? longi :
                    "112.63383852447227"
                ],
                zoom: (zoome != "") ? zoome : 18,
                layers: [osm, batas, persil_eks, persil_ren, psu_eks, psu_ren],
            });

            let psuLayer = L.layerGroup().addTo(map);

            function PsuGrup(feature, layer) {
                psuLayer.addLayer(layer)
            }

            @foreach ($geo_psu as $ps)
                @if ($ps->file_geojson != null)
                    var url_geo =
                        "{{ url('storage/files/perumahan/' . $ps->id_perumahan . '/psu/geojson/' . $ps->file_geojson) }}";
                    $.ajax({
                        beforeSend: function(xhr) {
                            if (xhr && xhr.overrideMimeType) {
                                xhr.overrideMimeType('application/json;charset=utf-8');
                            }
                        },
                        dataType: "json",
                        url: url_geo,
                        success: function(data) {
                            L.geoJSON(data, {
                                onEachFeature: PsuGrup,
                                style: function(feature) {
                                    var stts_serah = "{{ $ps->status_serah }}";
                                    if (stts_serah === 'Belum') {
                                        return {
                                            'color': '#ff4242',
                                            'weight': 2,
                                            'opacity': 0.70
                                        }
                                    } else if (stts_serah === 'Proses') {
                                        return {
                                            'color': '#f7c03e',
                                            'weight': 2,
                                            'opacity': 0.70
                                        }
                                    } else if (stts_serah === 'Telah Diserahkan') {
                                        return {
                                            'color': '#4af73e',
                                            'weight': 2,
                                            'opacity': 0.70
                                        }
                                    } else {
                                        return {
                                            'color': '#ff4242',
                                            'weight': 2,
                                            'opacity': 0.70
                                        }
                                    }
                                },
                            }).bindPopup(function(layer) {
                                var infoe = `<table class="table table-striped table-row-bordered border rounded align-middle gs-0 gy-4">
                                <tr><td>Jenis PSU</td><td>:</td><td>{{ $ps->jenis_psu }}</td></tr>
                                <tr><td>Detail PSU</td><td>:</td><td>{{ $ps->detail_psu }}</td></tr>
                                <tr><td>Serah Terima</td><td>:</td><td>{{ $ps->status_serah }}</td></tr>
                            </table>`;
                                return infoe;
                            }).addTo(map);
                        }
                    });
                @endif
            @endforeach

            var baseLayers = {
                'Drone': lokal,
                'OpenStreetMap': osm,
                'World Imagery': ewi
            };

            var overlays = {
                'Batas': batas,
                'Persil Eksisting': persil_eks,
                'Persil Rencana': persil_ren,
                'PSU Eksisting': psu_eks,
                'PSU Rencana': psu_ren,
                'PSU': psuLayer
            };

            // L.easyPrint({
            //     title: 'Cetak Peta',
            //     position: 'topleft',
            //     exportOnly: true,
            //     filename: 'WebGis {!! $data->perumahan !!}',
            //     sizeModes: ['Current', 'A4Portrait', 'A4Landscape']
            // }).addTo(map);

            L.control.browserPrint({
                printModes: [
                    L.BrowserPrint.Mode.Landscape("A4", {
                        title: 'Landscape',
                        scale: 1
                    }),
                    // "Portrait",
                    L.BrowserPrint.Mode.Custom("A4", {
                        title: "Pilih area"
                    })
                ],
            }).addTo(map);

            var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
        });
    </script>
@endsection