@extends('dashboard.layouts.app')

@section('title', 'Peta')

@section('content')
<div class="container-fluid">
    <h1>Peta</h1>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Peta</h5>
                </div>
                <div class="card-body">
                    <div id="map" style="height: 500px; width: 100%; position: relative;">
                        <!-- Layer Control Toggle Button -->
                        <button id="layer-control-toggle" class="btn btn-primary btn-sm" style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
                            <i class="bi bi-layers"></i> Layer Control
                        </button>

                        <!-- Layer Control Panel -->
                        <div id="layer-control-panel" class="card" style="position: absolute; top: 50px; right: 10px; z-index: 1000; width: 200px; display: none;">
                            <div class="card-header">
                                <h6 class="mb-0">Layer Control</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-sekolah" checked>
                                    <label class="form-check-label" for="layer-sekolah">
                                        <i class="bi bi-building text-danger"></i> Sekolah
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-jalan" checked>
                                    <label class="form-check-label" for="layer-jalan">
                                        <i class="bi bi-road text-primary"></i> Jalan
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-drainase" checked>
                                    <label class="form-check-label" for="layer-drainase">
                                        <i class="bi bi-water text-success"></i> Drainase
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-taman" checked>
                                    <label class="form-check-label" for="layer-taman">
                                        <i class="bi bi-tree text-warning"></i> Taman
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="card-footer">
                    <button class="btn btn-primary">Simpan</button>
                </div> --}}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Wait for OpenLayers to be loaded
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof ol === 'undefined') {
            console.error('OpenLayers is not loaded');
            return;
        }

        ol.proj.useGeographic();
        const map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [112.7167, -7.4458],
                zoom: 15
            })
        });

        // Store layer references for control
        const layerGroups = {
            sekolah: [],
            jalan: [],
            drainase: [],
            taman: []
        };

        // Load sekolah data
        var sekolahData = @json($sekolah);
        var sekolahAsset = '{{ asset('storage/geojson/sekolah') }}';

        sekolahData.forEach(function(item) {
            if (item.geojson_file) {
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: sekolahAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 0, 0, 0.3)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ff0000',
                            width: 2
                        })
                    })
                });
                map.addLayer(vector);
                layerGroups.sekolah.push(vector);
            }
        });

        // Load jalan data
        var jalanData = @json($jalan);
        var jalanAsset = '{{ asset('storage/geojson/jalan') }}';

        jalanData.forEach(function(item) {
            if (item.geojson_file) {
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: jalanAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#0000ff',
                            width: 3
                        })
                    })
                });
                map.addLayer(vector);
                layerGroups.jalan.push(vector);
            }
        });

        // Load drainase data
        var drainaseData = @json($drainase);
        var drainaseAsset = '{{ asset('storage/geojson/drainase') }}';

        drainaseData.forEach(function(item) {
            if (item.geojson_file) {
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: drainaseAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: '#00ff00',
                            width: 2
                        })
                    })
                });
                map.addLayer(vector);
                layerGroups.drainase.push(vector);
            }
        });

        // Load taman data
        var tamanData = @json($taman);
        var tamanAsset = '{{ asset('storage/geojson/taman') }}';

        tamanData.forEach(function(item) {
            if (item.geojson_file) {
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: tamanAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 193, 7, 0.3)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ffc107',
                            width: 2
                        })
                    })
                });
                map.addLayer(vector);
                layerGroups.taman.push(vector);
            }
        });

        // Layer control toggle functionality
        const toggleButton = document.getElementById('layer-control-toggle');
        const layerPanel = document.getElementById('layer-control-panel');
        let isPanelVisible = false;

        toggleButton.addEventListener('click', function() {
            if (isPanelVisible) {
                layerPanel.style.display = 'none';
                toggleButton.innerHTML = '<i class="bi bi-layers"></i> Layer Control';
                isPanelVisible = false;
            } else {
                layerPanel.style.display = 'block';
                toggleButton.innerHTML = '<i class="bi bi-x-circle"></i> Close';
                isPanelVisible = true;
            }
        });

        // Layer control functionality
        document.getElementById('layer-sekolah').addEventListener('change', function() {
            layerGroups.sekolah.forEach(function(layer) {
                layer.setVisible(this.checked);
            }.bind(this));
        });

        document.getElementById('layer-jalan').addEventListener('change', function() {
            layerGroups.jalan.forEach(function(layer) {
                layer.setVisible(this.checked);
            }.bind(this));
        });

        document.getElementById('layer-drainase').addEventListener('change', function() {
            layerGroups.drainase.forEach(function(layer) {
                layer.setVisible(this.checked);
            }.bind(this));
        });

        document.getElementById('layer-taman').addEventListener('change', function() {
            layerGroups.taman.forEach(function(layer) {
                layer.setVisible(this.checked);
            }.bind(this));
        });
    });
</script>
@endpush