<?php $__env->startSection('maincontent'); ?>
<?php $__env->startSection('title'); ?>
    <?php echo e(env('APP_NAME')); ?>- Maps
<?php $__env->stopSection(); ?>
<style>
    div#roleinfo_length {
        color: red;
    }

    div#roleinfo_filter {
        color: red;
    }

    div#roleinfo_info {
        color: red;
    }
    .list-group-item {
        position: relative;
        display: block;
        padding: .5rem 1rem;
        color: #585858;
        background-color: #fff;
        border: 1px solid #dddbdb;
        cursor: pointer;
    }
    .list-group-item:hover {
        color: black;
        background-color: #00ea1058;
        border: 1px solid #dddbdb;
        cursor: pointer;
    }
     #map {
            height: 600px;
        }
</style>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<?php
use Carbon\Carbon;

$firstDate = Carbon::now()->startOfMonth()->toDateString();
$lastDate = Carbon::now()->endOfMonth()->toDateString();
?>

<div class="px-4 pt-4 container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-xl-12">
            <div class="p-4 rounded bg-secondary h-100">
                <div class="text-center">
                    <h3 class="mb-0">Maps Data List</h3>
                </div>
                <div class="pt-4 mt-4 row">
                    <div class="mb-4 col-12">
                        
                    </div>
                    <div class="col-4">
                        <div class="p-3 bg-white" style="border-radius: 6px;">

                            

                            <div class="mt-4 districtlist">
                                <ul class="list-group" style="height: 536px;overflow-y: scroll;">
                                    <?php $__empty_1 = true; $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $city): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                        <li class="list-group-item" onclick="findLocation('<?php echo e($city->cityName); ?> District, Bangladesh','<?php echo e($city->id); ?>')"><?php echo e($city->cityName); ?> &nbsp; <span style="color:red"><b>(<?php echo e(App\Models\Order::where('city_id',$city->id)->get()->count()); ?>)</b></span></li>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-8">
                        <div class="p-3 bg-white" style="border-radius: 6px;">
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>" />
    </div>
</div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    var map = L.map('map').setView([23.685, 90.3563], 7); // Centered at Bangladesh

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    var currentMarker = null;
    var currentPolygon = null;

    function findLocation(placeName,id) {
        var order=null;
        $.ajax({
            type: 'GET',
            url: 'citydata/' + id,

            success: function(data) {
                order=data;
            },
            error: function(error) {
                console.log('error');
            }

        });
        // Step 1: Get OSM ID using Nominatim API
        fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${placeName}&polygon_geojson=1`)
            .then(response => response.json())
            .then(data => {
                if (data.length > 0) {
                    var lat = data[0].lat;
                    var lon = data[0].lon;
                    var osmId = data[0].osm_id;
                    var osmType = data[0].osm_type === 'relation' ? 'relation' : 'way';

                    // Remove previous marker and polygon
                    if (currentMarker) map.removeLayer(currentMarker);
                    if (currentPolygon) map.removeLayer(currentPolygon);

                    // Add marker at center
                    currentMarker = L.marker([lat, lon]).addTo(map)
                        .bindPopup(`<b><h6>${placeName}</h6></b>${order}`).openPopup();

                    // Step 2: Fetch the exact boundary from Overpass API
                    fetch(`https://overpass-api.de/api/interpreter?data=[out:json];${osmType}(${osmId});(._;>;);out body;`)
                        .then(response => response.json())
                        .then(overpassData => {
                            var geoJson = osmtogeojson(overpassData);

                            // Draw full boundary area
                            currentPolygon = L.geoJSON(geoJson, {
                                style: { color: 'green', fillOpacity: 0.3 }
                            }).addTo(map);

                            // Zoom to fit the boundary
                            map.fitBounds(currentPolygon.getBounds());
                        })
                        .catch(error => console.log("Error fetching boundary:", error));
                } else {
                    alert("Location not found!");
                }
            })
            .catch(error => console.log("Error fetching location:", error));
    }

    // Include osmtogeojson library to convert OSM data to GeoJSON
    var script = document.createElement('script');
    script.src = "https://rawgit.com/tyrasd/osmtogeojson/gh-pages/osmtogeojson.js";
    document.head.appendChild(script);
</script>

<script>
    $(document).ready(function() {
        var token = $("input[name='_token']").val();

        //edit brand
        $(document).on('click', '#editBrandBtn', function() {
            let brandId = $(this).data('id');

            $.ajax({
                type: 'GET',
                url: 'brands/' + brandId + '/edit',

                success: function(data) {
                    $('#EditBrand').find('#brand_name').val(data
                        .brand_name);
                    $('#EditBrand').find('#brand_id').val(data.id);

                    $('#previmg').html('');
                    $('#previmg').append(`
                        <img  src="../` + data.brand_icon + `" alt = "" style="height: 80px" />
                    `);

                    $('#EditBrand').attr('data-id', data.id);
                },
                error: function(error) {
                    console.log('error');
                }

            });
        });


    });
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('backend.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/falconen/multivendor.falconenterprisebd.com/resources/views/backend/content/maps/index.blade.php ENDPATH**/ ?>