@push('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <style>
        .map-info-box {
            position: absolute;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 1000;
            /* Ensure it's above other map elements */
        }

        .container {
            max-width: 1320px;
        }

        section {
            overflow: hidden;
        }

        .section-bg {
            background: #f5f8fd;
        }

        .section-header h3 {
            font-size: 30px;
            color: #413e66;
            text-align: center;
            font-weight: 700;
            position: relative;
            font-family: 'SolaimanLipi', sans-serif !important;
        }

        .section-header p {
            text-align: center;
            margin: auto;
            font-size: 15px;
            padding-bottom: 60px;
            color: #535074;
            width: 50%;
        }

        @media (max-width: 767px) {
            .section-header p {
                width: 100%;
            }
        }

        .text_primary {
            color: #35279c;
        }

        .avatar-title {

            background-color: #ffffff;
            color: #040404;

        }

        .background {
            /* background-color: #115ca1; */
            background: -moz-linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
            background: -webkit-linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
            background: linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
        }

        .scroller {
            background-color: #adf1fa;
            color: black;
        }

        .carousel-fade .carousel-item {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .carousel-fade .carousel-item.active {
            opacity: 1;
        }

        .carousel-fade .carousel-item-next.carousel-item-left,
        .carousel-fade .carousel-item-prev.carousel-item-right {
            opacity: 0;
        }

        .carousel-fade .carousel-item-next,
        .carousel-fade .carousel-item-prev,
        .carousel-fade .carousel-item.active,
        .carousel-fade .carousel-item-next.carousel-item-left.active,
        .carousel-fade .carousel-item-prev.carousel-item-right.active {
            transform: translateX(0);
        }

        .table.table-condensed.table-striped {
            margin-bottom: 0px;
        }

        .BI_tablehead {
            background-color: #0077B6;
            color: #ffff;
            margin: 0%;
        }

        .table-condensed>thead.BI_tablehead>tr>th {
            padding: 20px 10px 20px 20px;
            text-transform: uppercase;
            font-weight: 400;
            font-size: 12px;
        }

        .table-striped>tbody>tr:nth-of-type(odd) {
            background-color: #f6f6f6;
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            border-top: none;
            border-bottom: 2px solid #fff;
        }

        .table-condensed>tbody.BI_tablebody>tr>td {
            padding: 15px 10px 15px 20px;
            text-transform: capitalize;
            font-weight: 400;
            font-size: 14px;
            color: #4d4d4f;
        }

        .fixed_header {
            table-layout: fixed;
            border-collapse: collapse;
        }

        .fixed_header tbody {
            display: block;
            width: 100%;
            overflow: auto;
            max-height: 335px;
        }

        .fixed_header thead tr {
            display: block;
        }

        .fixed_header th,
        .fixed_header td {
            padding: 5px;
            text-align: left;
            width: 200px;
        }

        .custom-table {
            border-collapse: collapse;
            width: 300px;
            border: 1px solid #70a1ff;
            font-size: 12px;
        }

        .custom-table td,
        .custom-table th {
            border: 1px solid #70a1ff;
            color: #fff;
            background: #3742fa;
            text-align: left;
            word-wrap: break-word;

        }
    </style>
        <style>
            
            .marquee-container {
                overflow: hidden;
                white-space: nowrap;
                position: relative;
                width: 100%;
                /* Adjust the width as needed */
            }
    
            .marquee-content {
                display: inline-block;
                animation: marquee 120s linear infinite;
                white-space: nowrap;
            }
    
            .marquee-container:hover .marquee-content {
                animation-play-state: paused;
            }
    
            /* @keyframes marquee {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
} */
    
/* @keyframes marquee{
    from{ transform:translateX(0%) }
    to  { transform:translateX(-50%) }  
} */
@keyframes marquee {
  from { transform: translateX(20%); }
  to   { transform: translateX(-100%); }
}
/* only half‑width because it repeats */
            .popup-container {
                visibility: hidden;
                opacity: 0;
                transition: all 0.3s ease-in-out;
                transform: scale(1.3);
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                /* Adjust top to 0 to align at the top of the page */
                width: 100%;
                height: 100%;
                /* Full height */
                background-color: rgba(21, 17, 17, 0.61);
                display: flex;
                justify-content: center;
                /* Center horizontally */
                align-items: flex-start;
                /* Align to the top */
                padding-top: 150px;
                /* Add padding to give space from the top */
            }
    
            .popup-content {
                background: linear-gradient(#190992, #0a0275);
                padding: 20px;
                /* Add padding */
                border: 1px solid #072592;
                border-radius: 5px;
                width: 80%;
                max-width: 900px;
                /* Optional: limit the max width */
                margin: 0 auto;
                /* Center the content */
            }
    
            .popup-content p {
                font-size: 17px;
                padding: 10px;
                line-height: 20px;
            }
    
            .popup-content a.close {
                color: #ffffff;
                float: right;
                font-size: 28px;
                font-weight: bold;
                background: none;
                padding: 0;
                margin-right: 10px;
                text-decoration: none;
            }
    
            .popup-content a.close:hover {
                color: #ffffff;
            }
    
            .popup-content span:hover,
            .popup-content span:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }
    
            .popup-container:target {
                visibility: visible;
                opacity: 1;
                transform: scale(1);
            }
    
            .popup-container h3 {
                margin: 10px;
            }
        </style>
@endpush

<div>
    <x-slot name="title">{{ __('haorsys::default.home_page') }}</x-slot>

    <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel"
        style="margin: 0px 8px 0px 8px">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ module_asset('images/home_slider1.jpg') }}" class="d-block w-100" height="393px"
                    alt="Los Angeles">
                <div
                    class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center bottom-0">
                    <h1 class="bg-opacity-50 py-2 px-4"><b style="font-size:150%;">হাওর ব্যবস্থাপনায় স্বাগতম</b>
                    </h1>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{{ module_asset('images/haor.webp') }}" alt="Chicago" class="d-block w-100" height="393px">
                <div
                    class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center bottom-0">
                    <h1 class="bg-opacity-50 py-2 px-4"><b style="font-size:150%;">হাওর ব্যবস্থাপনায় স্বাগতম</b>
                    </h1>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{{ module_asset('images/slider1.png') }}" alt="New York" class="d-block w-100" height="393px">
                <div
                    class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center bottom-0">
                    <h1 class="bg-opacity-50 py-2 px-4"><b style="font-size:150%;">হাওর ব্যবস্থাপনায় স্বাগতম</b>
                    </h1>
                </div>
            </div>
        </div>
        <section class="early">
            <article class="marquee-container">
                <div class="marquee-content">
                    <div class="d-flex flex-row flex-nowrap">
                        @foreach ($haors as $Haor)
                            <div class="mt-2 me-2" style="flex: 0 0 auto; width: auto;">
                                <x-theme::layouts.backend.card class="scroller">
                                    <div class="mini-stats-wid">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <p class="mb-0 text-muted">
                                                    <strong style="color: rgb(10, 41, 180)">{{ $Haor->haor_name_bn }}
                                                        (<span>
                                                            {{ $Haor->HaorLocation?->pluck('District.district_bn')->unique()->implode(',') }}
                                                        </span>)
                                                    </strong>
                                                </p>
                                                <p style="margin-bottom: 0px"><b>পানির স্তর: 6.42;</b> <span> <b
                                                            style="color: rgb(206, 8, 34)"> বিপদের মাত্রা
                                                            :14.80</b></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </x-theme::layouts.backend.card>
                            </div>
                        @endforeach
                    </div>
                </div>
            </article>
        </section>


    </div>
    <x-theme::layouts.backend.container>

        <div class="row" style="background-color: rgb(235, 243, 255)">
            <div class="col-xl-12">
                <div class="row mt-3">
                    <div class="col-md-3">
                        <x-theme::layouts.backend.card class="background">
                            <a href="{{ route('haorsys.haor') }}">
                                <div class=" mini-stats-wid">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <h4 class="text-muted fw-medium">
                                                <strong class="text-light">মোট হাওর</strong>
                                            </h4>
                                            <h4 class="mb-0 text-light"><strong>
                                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($total_haor) : $total_haor }}</strong>
                                            </h4>
                                        </div>
                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="mini-stat-icon avatar-sm rounded-circle">
                                                <span class="avatar-title">
                                                    <i class="bx bx-copy-alt font-size-20"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-3">
                        <x-theme::layouts.backend.card class="background">
                            <a href="#">
                                <div class="mini-stats-wid">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <h4 class="text-muted fw-medium">
                                                <strong class="text-light">
                                                    মোট উপ-প্রকল্প</strong>
                                            </h4>
                                            <h4 class="mb-0 text-light"><strong>
                                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($total_sub_work) : $total_sub_work }}
                                                </strong></h4>
                                        </div>
                                        <div class="flex-shrink-0 align-self-center">
                                            <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                <span class="avatar-title">
                                                    <i class="bx bx-copy-alt font-size-20"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-3">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">

                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h4 class="text-muted fw-medium">
                                            <strong class="text-light">প্রকল্প বাস্তবায়ন কমিটি </strong>
                                        </h4>
                                        <h4 class="mb-0 text-light"><strong>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($total_pic) : $total_pic }}</strong>
                                        </h4>
                                    </div>
                                    <div class="flex-shrink-0 align-self-center">
                                        <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                            <span class="avatar-title">
                                                <i class="bx bx-copy-alt font-size-20"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-3">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h4 class="text-muted fw-medium">
                                            <strong class="text-light">
                                                মোট কাজ</strong>
                                        </h4>
                                        <h4 class="mb-0 text-light"><strong>
                                                ৪০ </strong></h4>
                                    </div>
                                    <div class="flex-shrink-0 align-self-center">
                                        <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                            <span class="avatar-title">
                                                <i class="bx bx-copy-alt font-size-20"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>

                    {{-- <div class="col-md-3">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h4 class="text-muted fw-medium">
                                            <strong class="text-light">মোট উন্নয়নাধীন হাওর</strong>
                                        </h4>
                                        <h4 class="mb-0 text-light"><strong>
                                                ৩৫ </strong></h4>
                                    </div>
                                    <div class="flex-shrink-0 align-self-center">
                                        <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                            <span class="avatar-title">
                                                <i class="bx bx-copy-alt font-size-20"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </x-theme::layouts.backend.card>
                    </div> --}}
                </div>
            </div>
            <div>

                <div id="cover-spin"></div>
                <div id="map" style="width: 100%; height: 500px"></div>
                <div id="map-dis" class="map-info-box" style="display: none;">
                    <div id="pointer"></div>
                </div>
            </div>



        </div>
        <section class="services section-bg" id="services">
            <div class="container">
                <header class="section-header mt-5">
                    <h3 class="mb-4" style="color: #263d88">আমাদের সেবাসমূহ</h3>
                </header>

                <div class="row">
                    <a href="{{ route('haorsys.haor_repair') }}">
                        <div class="col-md-6 col-lg-3">
                            <div class="box">
                                <div class="icon" style="background: #556ee6;">
                                    <i class='fas fa-file-alt' style='font-size:25px; color: #ffffff;'></i>
                                </div>

                                <h4 class="title"><a href="{{ route('haorsys.haor_repair') }}"> হাওর মেরামত ও
                                        রক্ষা</a></h4>

                            </div>
                        </div>
                    </a>
                    {{-- <div class="col-md-6 col-lg-4">
                        <div class="box">
                            <div class="icon" style="background: #556ee6;">
                                <i class='fa fa-wrench' style='font-size:36px; color: #ffffff;'></i>

                            </div>

                            <h2 class="title"><a href="">হাওর মেরামত</a></h2>

                            <p class="description">হাওরের সকল তথ্য ছবি সহ দেয়া আছে।যার সাহায্যে একটি নির্দিষ্ট হাওরের তথ্য খুব সহজেই পাওয়া যায়।</p>
                        </div>
                    </div> --}}
                    <div class="col-md-6 col-lg-3">
                        <a href="{{ route('haorsys.haor') }}">
                            <div class="box">
                                <div class="icon" style="background: #556ee6;">
                                    <i class='fas fa-water' style='font-size:25px; color: #ffffff;'></i>

                                </div>

                                <h2 class="title"><a href="{{ route('haorsys.haor') }}">হাওরের তথ্য সংরক্ষন</a></h2>


                            </div>
                        </a>
                    </div>

                    {{-- <div class="col-md-6 col-lg-4">
                        <div class="box">
                            <div class="icon" style="background: #556ee6;">
                                <i class='fas fa-user-friends' style='font-size:36px; color: #ffffff;'></i>
                            </div>

                            <h4 class="title"><a href="">বাঁধ মেরামত ও রক্ষা</a></h4>
                        </div>
                    </div> --}}

                    {{-- <div class="col-md-6 col-lg-4">
                        <div class="box">
                            <div class="icon" style="background: #556ee6;">
                                <i class="fa fa-chart-bar service-icon" style="color: #ffffff;"></i>
                            </div>

                            <h4 class="title"><a href="">উন্নয়নাধীন হাওর সম্পর্কিত তথ্য সংরক্ষন </a></h4>
                        </div>
                    </div> --}}

                    <div class="col-md-6 col-lg-3">
                        <a href="{{ route('haorsys.smart_technology') }}">
                            <div class="box">
                                <div class="icon" style="background: #556ee6;">
                                    <i class='fa fa-wrench' style='font-size:30px; color: #ffffff;'></i>
                                </div>

                                <h4 class="title"><a href="{{ route('haorsys.smart_technology') }}">স্মার্ট
                                        প্রযুক্তি ব্যবহার</a></h4>

                            </div>
                        </a>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <a href="{{ route('haorsys.nagoric_corner') }}">
                            <div class="box">
                                <div class="icon" style="background: #556ee6;">
                                    <i class='fas fa-user-friends' style='font-size:27px; color: #ffffff;'></i>

                                </div>

                                <h4 class="title"><a href="{{ route('haorsys.nagoric_corner') }}">নাগরিক কর্নার</a>
                                </h4>

                                <p class="description"> </p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>

        </section>
        <section class="services section-bg mb-5" id="services" style="background-color: rgb(235, 243, 255)">
            <div class="container">
                <header class="text-center mt-4">
                    <h3 class="mb-4" style="font-size: 20px; color: #263d88;"><b>হেল্প ডেস্ক</b></h3>
                </header>

                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="box">

                            <h4 style="font-size: 20px; margin-bottom:-0px;"><a href="#"
                                    class="text-dark"><b>দুদক</b></a></h4>

                            <p style="font-size: 20px; margin-bottom:-1px; color:#b73615"><b>১০৬</b></p>
                        </div>
                    </div>



                    <div class="col-md-6 col-lg-3">
                        <div class="box">

                            <h4 style="font-size: 20px;  margin-bottom:-1px;"><a href="#"
                                    class="text-dark"><b>সরকারি তথ্য ও
                                        সেবা</b></a></h4>

                            <p style="font-size: 20px;  margin-bottom:-1px; color:#9618f0"><b>৩৩৩</b></p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="box">

                            <h4 style="font-size: 20px;  margin-bottom:-1px;"><a href="#"
                                    class="text-dark"><b>জরুরি সেবা</b></a>
                            </h4>

                            <p style="font-size: 20px; margin-bottom:-1px; color:#169a37"><b>৯৯৯</b></p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="box">

                            <h4 style="font-size: 20px; margin-bottom:-1px;"><a href="#"
                                    class="text-dark"><b>দুর্যোগের আগাম
                                        বার্তা</b></a></h4>

                            <p style="font-size: 20px; margin-bottom:-1px; color:#f08b18"><b>১০৯০</b></p>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </x-theme::layouts.backend.container>
</div>
@push('js')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        var greenIcon = L.icon({
            iconUrl: "{{ module_asset('images/location_icon.png') }}",
            iconSize: [15, 25], // size of the icon
        });

        var map = L.map('map').setView([23.8103, 90.4125], 7);

        // Add the OpenStreetMap tile layer to the map
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            minZoom: 7,
        }).addTo(map);

        // Common coordinates for the markers
        var haors = @json($haorGeoLocations);

        var mapInfoBox = document.getElementById('map-dis');
        var pointer = document.getElementById('pointer');

        haors.forEach(haor => {
            let currentHaor = haor; // Ensure correct scoping inside event handlers

            var marker = L.marker([currentHaor.lat, currentHaor.lon], {
                icon: greenIcon
            }).addTo(map);

            // Bind a popup to the marker
            // marker.bindPopup("<h4>" + currentHaor.name + "</h4><p>This is the trail Popup</p>", {
            //     autoPan: true
            // });

            // marker.bindPopup(
            //     "<div style=\"background-color: #ffffff; color: #33334d;\">" +
            //     "<b style=\"font-size: 15px;\">Haor Information</b><br>" +
            //     "<table class=\"custom-table\" style=\"border-collapse: collapse; width: 100%; border: 1px solid #70a1ff;\">" +
            //     "<tr><td>Haor Name</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //      currentHaor.name + "</td></tr>" +
            //     "<tr><td>Station Name</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td>District Name</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td>Upzila Name</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td>River Name</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td>Longitude</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td>Latitude</td><td style=\"background:#1e90ff; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">Last Receive Date</td><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">Last Read Value</td><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">Danger Level</td><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') + "</td></tr>" +
            //     "<tr><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">Danger Level Sob</td><td style=\"background:#0c2461; color: #fff; border: 1px solid #70a1ff;\">" +
            //     ( '-') +
            //     "</td></tr>" +
            //     "</table>" +
            //     "</div>", {
            //         autoPan: true
            //     }
            // );

            // Function to show the map-info-box on marker hover
            marker.on('mouseover', function(e) {
                // Display mapInfoBox near the marker
                mapInfoBox.style.display = 'block';
                // mapInfoBox.style.left = e.containerPoint.x + 50 + 'px';
                // mapInfoBox.style.top = e.containerPoint.y + 'px';
                mapInfoBox.style.left = 'auto'; // Reset left position to use right instead
                mapInfoBox.style.right = '0%'; // Position it at the right edge
                mapInfoBox.style.top = '6%'; // Position it at the top
                pointer.innerHTML = `
                        <div style="background-color: #ffffff; color: #33334d;">
                            <b style="font-size: 15px;">হাওরের তথ্য (${currentHaor.name})</b><br>
                            <table class="custom-table" style="border-collapse: collapse; width: 100%; border: 1px solid #70a1ff;">
                                <tr>
                                    <td>Haor Image</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        <img src="${currentHaor.haor_image}" height="200px" width="300px" alt="Haor Image">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Haor Name</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.name}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Latitude</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.lat}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Longitude</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.lon}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Area</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.area}
                                    </td>
                                </tr>
                                <tr>
                                    <td>No of Village</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.village}
                                    </td>
                                </tr>
                                <tr>
                                    <td>No of Bill</td>
                                    <td style="background:#1e90ff; color: #fff; border: 1px solid #70a1ff;">
                                        ${currentHaor.bill}
                                    </td>
                                </tr>
                            </table>
                        </div>`;
                // Update pointer content
            });

            // marker.on('mouseover', function(e) {
            //     // Get the width of the map container and the mapInfoBox
            //     //var mapContainerWidth = mapContainer.clientWidth;
            //     var mapInfoBoxWidth = mapInfoBox.clientWidth;

            //     // Calculate the position for the mapInfoBox
            //     var leftPosition = mapContainerWidth - mapInfoBoxWidth;

            //     // Display mapInfoBox at the top-right corner
            //     mapInfoBox.style.display = 'block';
            //     mapInfoBox.style.left = leftPosition + 'px';
            //     mapInfoBox.style.top = '0px'; // Position it at the top
            //     pointer.innerHTML = currentHaor.name; // Update pointer content
            // });


            // Hide the map-info-box when the mouse leaves the marker
            marker.on('mouseout', function() {
                mapInfoBox.style.display = 'none';
            });

            // Ensure each marker has the correct URL on click
            marker.on('click', function() {
                window.location.replace(currentHaor.url);
            });
        });
    </script>
@endpush