@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://openlayers.org/en/v6.14.1/css/ol.css">
    <style>
        .map {
            width: 100%;
            height: 500px;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        @php
            $data = asset('storage/' . $layer->file);
            $geojson = file_get_contents($data);
            $layer_data = json_decode($geojson, true);
            $kolom = $layer_data['features'][0]['properties'];
            $nama_kolom = array_keys($kolom);
        @endphp
        <div class="row">
            <div class="col-md-6">
                <h1>Detail Layer</h1>
            </div>
            <div class="col-md-2 mt-3">
                <select name="klasifikasi" id="klasifikasi" class="form-control">
                    @foreach ($nama_kolom as $kolom)
                        <option value="{{ $kolom }}">{{ $kolom }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mt-3">
                <select name="tipe" id="tipe" class="form-control">
                    <option value="polygon"> Polygon</option>
                    <option value="polyline"> Polyline</option>
                    <option value="point"> Point</option>
                </select>
            </div>

            <div class="col-md-2 mt-3">
                <button type="button" id="btn-klasifikasi" class="btn btn-primary">Klasifikasi</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div id="map" class="map"></div>
            </div>
            <div class="col-md-6">
                <form action="{{ route('layer.simpan-warna') }}" method="post">
                    @csrf
                    
                    <div id="hasil-klasifikasi" class="mt-3"></div>
                    <button class="btn btn-primary" type="submit">Simpan</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
    <script>
        $('#btn-klasifikasi').click(function() {
            // Ambil nilai kolom yang dipilih
            var selectedColumn = $('#klasifikasi').val();
            
            // Ambil semua fitur dari layer
            var features = layer.getSource().getFeatures();
            
            // Buat array untuk menyimpan nilai unik
            var uniqueValues = [];
            
            // Loop setiap fitur untuk mengambil nilai kolom yang dipilih
            features.forEach(function(feature) {
                var value = feature.get(selectedColumn);
                if (value && !uniqueValues.includes(value)) {
                    uniqueValues.push(value);
                }
            });
            
            // Urutkan nilai
            uniqueValues.sort();
            // Buat tabel HTML
            var table = '<table class="table table-bordered">';
            table += '<thead><tr><th>' + selectedColumn + '</th><th>Warna</th></tr></thead>';
            table += '<tbody>';
            
            // Loop setiap nilai unik untuk membuat baris tabel
            uniqueValues.forEach(function(value) {
                // Tambahkan baris ke tabel
                table += '<tr>';
                table += '<td>' + value + '</td>';
                table += '<td><input type="color" class="form-control form-control-color" value="#000000" name="warna-' + value + '"></td>';
                table += '</tr>';
            });
            
            table += '</tbody></table>';
            
            // Tampilkan tabel di div hasil-klasifikasi
            $('#hasil-klasifikasi').html(table);
        });
    </script>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([115.0483, -3.3168]), // Koordinat Kabupaten Banjar
                zoom: 10
            })
        });

        // Tambahkan layer GeoJSON
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: '{{ asset('storage/' . $layer->file) }}',
                format: new ol.format.GeoJSON()
            }),
            style: function(feature) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#0000ff',
                        width: 2
                    }),
                    text: new ol.style.Text({
                        text: feature.get('WADMKC'),
                        font: '14px Arial',
                        fill: new ol.style.Fill({
                            color: '#0000ff'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 3
                        })
                    })
                });
            }
        });
        map.addLayer(layer);

        // Zoom ke layer setelah layer dimuat
        layer.getSource().on('addfeature', function() {
            var extent = layer.getSource().getExtent();
            map.getView().fit(extent, {
                padding: [50, 50, 50, 50],
                duration: 1000
            });
        });
    </script>
    <!-- Tombol WhatsApp Mengambang -->
<a href="https://wa.me/6281358721520" class="float" target="_blank">
    <i class="fab fa-whatsapp my-float"></i>
</a>

<style>
    .float {
        position: fixed !important;
        width: 60px !important;
        height: 60px !important;
        bottom: 40px !important;
        right: 40px !important;
        background-color: #25d366 !important;
        color: #FFF !important;
        border-radius: 50% !important;
        text-align: center !important;
        font-size: 30px !important;
        box-shadow: 2px 2px 3px #999 !important;
        z-index: 99999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .my-float {
        margin: 0 !important;
    }

    .float:hover {
        background-color: #20ba5a !important;
        transform: scale(1.1) !important;
    }
</style>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush