@include('Partials.sidebar')

<img src="{{ asset('floor_plan_with_bbox.png') }}" usemap="#workmap" alt="Example Image">

<map name="workmap">
    @foreach ($floor as $key)
                <area class="area_map" shape="rect" coords="{{ $coords }}" alt="{{ $id }}" data-id="{{ $id }}">
    @endforeach
</map>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $('.area_map').click(function(){
            var id = $(this).data('id');

            show_area_code(id);
        });

        function show_area_code(id){
            console.log("Area clicked:", id);
            alert("Area clicked: " + id);
        }
    });
</script>

@include('Partials.footer')