@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div id="map"
            data-irigasi="{{ json_encode($irigasi) }}"
            data-rawa="{{ json_encode($rawa) }}"
            data-sungai="{{ json_encode($sungai) }}"
            data-drainase="{{ json_encode($drainase) }}">
            <div class="map-controls">
                <div class="radio-group">
                    <span class="left">Tipe Map</span><br>
                    <p>
                        <input name="map-type" type="radio" id="layer-osm" value="osm" checked />
                        <label for="layer-osm">OSM</label>
                    </p>
                    <p>
                        <input name="map-type" type="radio" id="layer-satellite" value="satellite" />
                        <label for="layer-satellite">Satellite</label>
                    </p>
                </div>
                <hr>
                <div class="layer-group">
                    <span class="left">Layer</span><br>
                    <div class="parent-checkbox">
                        <input type="checkbox" id="layer-irigasi" class="parent-layer" />
                        <label for="layer-irigasi">Daerah Irigasi</label>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-sapras-irigasi" class="child-layer" />
                            <label for="layer-sapras-irigasi">Sarpras Irigasi</label>
                        </div>
                    </div>
                    <div class="parent-checkbox">
                        <input type="checkbox" id="layer-rawa" class="parent-layer" />
                        <label for="layer-rawa">D.I Rawa</label>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-sapras-rawa" class="child-layer" />
                            <label for="layer-sapras-rawa">Sarpras Rawa</label>
                        </div>
                    </div>
                    <div class="parent-checkbox">
                        <input type="checkbox" id="layer-sungai" class="parent-layer" />
                        <label for="layer-sungai">Sungai</label>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-normalisasi-sungai" class="child-layer" />
                            <label for="layer-normalisasi-sungai">Normalisasi Sungai</label>
                        </div>
                    </div>
                    <div class="parent-checkbox">
                        <input type="checkbox" id="layer-anak-sungai" class="parent-layer" />
                        <label for="layer-anak-sungai">Anak Sungai</label>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-normalisasi-anak-sungai" class="child-layer" />
                            <label for="layer-normalisasi-anak-sungai">Normalisasi Anak Sungai</label>
                        </div>
                    </div>
                    <div class="parent-checkbox">
                        <input type="checkbox" id="layer-drainase" class="parent-layer" />
                        <label for="layer-drainase">Drainase</label>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-titik-drainase" class="child-layer" />
                            <label for="layer-titik-drainase">Titik Drainase</label>
                        </div>
                        <div class="child-checkbox" style="margin-left: 20px; display: none;">
                            <input type="checkbox" id="layer-geojson-drainase" class="child-layer" />
                            <label for="layer-geojson-drainase">Geojson Drainase</label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@vite(['resources/js/peta_sebaran/mapPetaSebaran.js'])
@endpush