<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php echo base_url('myCustom/Files/logo/biswabanglaLogo.png'); ?>" rel="icon" />
    <title>Geoportal</title>


    <!-- All CSS Files  -->
    <link rel="stylesheet" href="<?php echo base_url('myCustom/Extensions/css/bootstrap/bootstrap.min.css'); ?>">
    <link rel="stylesheet"
        href="<?php echo base_url('myCustom/Extensions/css/fontawesome-free-6.5.2-web/css/all.min.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('myCustom/Extensions/css/openlayers/ol.css'); ?>">
    <link rel="stylesheet" href="<?php echo base_url('myCustom/Extensions/css/openlayers/ol-ext.css'); ?>">


    <!-- All JS Files  -->
    <script src="<?php echo base_url('myCustom/Extensions/js/Bootstrap/bootstrap.bundle.min.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Extensions/js/popper/popper.min.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Extensions/css/fontawesome-free-6.5.2-web/js/all.min.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Extensions/js/openlayers/ol.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Extensions/js/openlayers/ol-ext.js'); ?>"></script>


    <!-- amCharts resources -->
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <!-- My Custom CSS  -->
    <link rel="stylesheet" href="<?php echo base_url('myCustom/Files/myCSScode/myCSS.css'); ?>">
    <!-- My Custom JS  -->
    <!-- <script src="<?php echo base_url('myCustom/Files/myJScode/myJS.js'); ?>"></script> -- My Old JS File -->



</head>

<body>
    <!-- *******************************Starting Heading Part************************* -->
    <nav class="navbar navbar-expand-lg custom-navbar fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="<?php echo base_url('myCustom/Files/logo/biswabanglaLogo.png'); ?>" alt="Logo" width="40"
                    height="34" class="d-inline-block align-text-top">
            </a>
            <div class="navbar-header mx-auto">
                <a class="navbar-brand" href="#" style="margin-left: -35px;">
                    State GIS Portal</a>
            </div>
            <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button> -->
            <div class="d-md-block d-none">
                <span class="ssdc-gradient-footer ms-3">State Spatial Data Center</span>
                <span class="ssdc-gradient-footer ms-3 d-block" style="text-align:right;">রাজ্য ভৌগলিক তথ্য
                    কেন্দ্র</span>
            </div>
        </div>
    </nav>
    <!-- *******************************Ending Heading Part************************* -->





    <!-- *******************************Starting Navigation Part************************* -->
    <!-- Navigation bar with dropdowns -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top-navbar custom-navbar1">
        <div class="container-fluid">
            <!-- Toggle button for mobile view -->
            <button class="navbar-toggler custom-navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Navigation items -->
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-house"></i>
                            Home
                        </a>
                        <ul class="dropdown-menu admin-boundary-menu custom-dropdown" style="margin-top: -1px;"
                            aria-labelledby="navbarDropdown3">
                            <li><a class="dropdown-item" href="#" style="font-weight: bold; font-size: 14px">Under
                                    Development</a></li>
                            <li><a class="dropdown-item" href="#" style="font-weight: bold; font-size: 14px">Coming
                                    Soon....</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-layer-group"></i>
                            Administrative Boundary
                        </a>
                        <ul class="dropdown-menu admin-boundary-menu custom-dropdown" style="margin-top: -1px;"
                            aria-labelledby="navbarDropdown2">
                            <li>
                                <div class="row mb-1">
                                    <label for="districtSelect" class="col-sm-5 col-form-label small">District:</label>
                                    <div class="col-sm-7">
                                        <select class="form-select form-select-sm" id="districtSelect">
                                            <option selected>Select</option>
                                            <!-- Add options dynamically if needed -->
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row mb-1">
                                    <label for="subdivisionSelect"
                                        class="col-sm-5 col-form-label small">Subdivision:</label>
                                    <div class="col-sm-7">
                                        <select class="form-select form-select-sm" id="subdivisionSelect">
                                            <option selected>Select</option>
                                            <!-- Add options dynamically if needed -->
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row mb-1">
                                    <label for="blockSelect" class="col-sm-5 col-form-label small">Block:</label>
                                    <div class="col-sm-7">
                                        <select class="form-select form-select-sm" id="blockSelect">
                                            <option selected>Select</option>
                                            <!-- Add options dynamically if needed -->
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row mb-1">
                                    <label for="panchayatSelect" class="col-sm-5 col-form-label small">Gram
                                        Panchayat:</label>
                                    <div class="col-sm-7">
                                        <select class="form-select form-select-sm" id="panchayatSelect">
                                            <option selected>Select</option>
                                            <!-- Add options dynamically if needed -->
                                        </select>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- HTML: Add dropdown for selecting boundary type (District, Subdivision, etc.) -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            Search By Administrative Boundaries
                        </a>
                        <ul class="dropdown-menu admin-boundary-menu custom-dropdown" style="margin-top: -1px;"
                            aria-labelledby="navbarDropdown3">
                            <!-- Selection Box -->
                            <li class="mb-2">
                                <select class="form-select form-select-sm" id="adminBoundarySelect"
                                    aria-label="Administrative Boundary">
                                    <option selected>Select an Administrative Boundary</option>
                                    <option value="district">District</option>
                                    <option value="subdivision">Subdivision</option>
                                    <option value="block">Block</option>
                                    <option value="gp">Gram Panchayat</option>
                                </select>
                            </li>
                            <li class="mb-2">
                                <input type="text" class="form-control form-select-sm" id="boundarySearch"
                                    placeholder="Search">
                                <!-- Suggestion List -->
                                <ul id="suggestionList" class="list-group position-absolute"
                                    style="z-index: 1050; width: 100%; display: none;"></ul>
                            </li>
                            <!-- Buttons -->
                            <li class="d-flex justify-content-between mb-2">
                                <button class="btn btn-danger" id="clearResultButton"
                                    style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
                                    Clear Result
                                </button>
                            </li>
                        </ul>
                    </li>


                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-brands fa-slack"></i>
                            All Available Asset Layers
                        </a>
                        <ul class="dropdown-menu admin-boundary-menu custom-dropdown" style="margin-top: -1px;"
                            aria-labelledby="navbarDropdown3" onclick="preventDropdownClose(event)">
                            <li style="padding-left: 10px; padding-top: 2px;">
                                <div class="form-check heading-font">
                                    <input class="form-check-input" type="checkbox" value="" id="loadAllCheckbox"
                                        onclick="toggleAllCategories(this)">
                                    <label class="form-check-label" for="loadAllCheckbox">
                                        Load All Asset Layers
                                    </label>
                                </div>

                                <!-- Infrastructure and Subcategories -->
                                <div class="form-check form-switch heading-font">
                                    <div class="switch-container">
                                        <i class="fa-solid fa-plus switch-icon" onclick="infraClick(this)"></i>
                                        <input class="form-check-input" type="checkbox" role="switch" id="infraSwitch"
                                            onclick="toggleCategory_infra(this)">
                                        <label class="form-check-label infra" for="infraSwitch"> Infrastructure
                                            (4)</label>
                                    </div>
                                </div>

                                <div class="sub-category-container small-font" id="subCategoryContainer"
                                    style="max-height: 0; overflow: hidden; padding-left: 20px; transition: max-height 0.3s ease-in-out;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="nhCheckbox"
                                            onclick="toggleSubCategory_nh(this)">
                                        <label class="form-check-label" for="nhCheckbox">National Highway</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="shCheckbox"
                                            onclick="toggleSubCategory_sh(this)">
                                        <label class="form-check-label" for="shCheckbox">State Highway</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="mettaledCheckbox"
                                            onclick="toggleSubCategory_mettaled(this)">
                                        <label class="form-check-label" for="mettaledCheckbox">Mettaled Road</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="railCheckbox"
                                            onclick="toggleSubCategory_rail(this)">
                                        <label class="form-check-label" for="railCheckbox">Railway</label>
                                    </div>
                                </div>


                                <!-- Natural Resources and Subcategories -->
                                <div class="form-check form-switch heading-font">
                                    <div class="switch-container">
                                        <i class="fa-solid fa-plus switch-icon"
                                            onclick="naturalResourcesClick(this)"></i>
                                        <input class="form-check-input" type="checkbox" role="switch"
                                            id="naturalResourcesSwitch" onclick="toggleCategory_naturalResources(this)">
                                        <label class="form-check-label infra" for="naturalResourcesSwitch"> Natural
                                            Resources
                                            (1)</label>
                                    </div>
                                </div>

                                <div class="sub-category-container small-font" id="subCategoryContainer_1"
                                    style="max-height: 0; overflow: hidden; padding-left: 20px; transition: max-height 0.3s ease-in-out;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="riverCheckbox"
                                            onclick="toggleSubCategory_river(this)">
                                        <label class="form-check-label" for="riverCheckbox">River</label>
                                    </div>
                                </div>


                                <!-- Headqueaters and Subcategories -->
                                <div class="form-check form-switch heading-font">
                                    <div class="switch-container">
                                        <i class="fa-solid fa-plus switch-icon" onclick="headqueatersClick(this)"></i>
                                        <input class="form-check-input" type="checkbox" role="switch"
                                            id="headqueatersSwitch" onclick="toggleCategory_headqueaters(this)">
                                        <label class="form-check-label infra" for="headqueatersSwitch"> Headquaters
                                            (3)</label>
                                    </div>
                                </div>

                                <div class="sub-category-container small-font" id="subCategoryContainer_2"
                                    style="max-height: 0; overflow: hidden; padding-left: 20px; transition: max-height 0.3s ease-in-out;">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="districtHqCheckbox"
                                            onclick="toggleSubCategory_district(this)">
                                        <label class="form-check-label" for="districtHqCheckbox">District Hq</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="subdivisionHqCheckbox"
                                            onclick="toggleSubCategory_subdivision(this)">
                                        <label class="form-check-label" for="subdivisionHqCheckbox">Subdivision
                                            Hq</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="blockHqCheckbox"
                                            onclick="toggleSubCategory_block(this)">
                                        <label class="form-check-label" for="blockHqCheckbox">Block Hq</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            Search By User Specific Data
                        </a>
                        <ul class="dropdown-menu admin-boundary-menu custom-dropdown" style="margin-top: -1px;"
                            aria-labelledby="navbarDropdown3">
                            <li><a class="dropdown-item" href="#" style="font-weight: bold; font-size: 14px">Under
                                    Development</a></li>
                            <li><a class="dropdown-item" href="#" style="font-weight: bold; font-size: 14px">Coming
                                    Soon....</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-brands fa-stack-overflow"></i>
                            Basemaps
                        </a>
                        <ul class="dropdown-menu scrollable-dropdown" aria-labelledby="navbarDropdownBasemaps">
                            <li class="basemap-option" data-basemap="osm">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://www.arcgis.com/sharing/rest/content/items/fae788aa91e54244b161b59725dcbb2a/info/thumbnail/thumbnail1574665587738.jpeg?w=800"
                                            alt="OSM" class="basemap-thumbnail">
                                        <label>Open Street Map</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="mapbox-streets">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-74.5,40,2/400x400?access_token=pk.eyJ1Ijoid2Jzc2RpIiwiYSI6ImNsaDBoazhidzB0czQzdHA5aDFkcnhya3EifQ.fsZ8mlSb7gKemCeLYqKL5g"
                                            alt="Mapbox Streets" class="basemap-thumbnail">
                                        <label>Mapbox Streets</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="mapbox-satellite">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/-74.5,40,2/400x400?access_token=pk.eyJ1Ijoid2Jzc2RpIiwiYSI6ImNsaDBoazhidzB0czQzdHA5aDFkcnhya3EifQ.fsZ8mlSb7gKemCeLYqKL5g"
                                            alt="Mapbox Satellite" class="basemap-thumbnail">
                                        <label>Mapbox Satellite</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="mapbox-outdoors">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/static/-74.5,40,2/400x400?access_token=pk.eyJ1Ijoid2Jzc2RpIiwiYSI6ImNsaDBoazhidzB0czQzdHA5aDFkcnhya3EifQ.fsZ8mlSb7gKemCeLYqKL5g"
                                            alt="Mapbox Outdoors" class="basemap-thumbnail">
                                        <label>Mapbox Outdoors</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="mapbox-dark">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-74.5,40,2/400x400?access_token=pk.eyJ1Ijoid2Jzc2RpIiwiYSI6ImNsaDBoazhidzB0czQzdHA5aDFkcnhya3EifQ.fsZ8mlSb7gKemCeLYqKL5g"
                                            alt="Mapbox Dark" class="basemap-thumbnail">
                                        <label>Mapbox Dark</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="google-terrain">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://www.staridasgeography.gr/wp-content/uploads/2021/01/earth-engine-turn-cold-pixels-to-a-colorful-terrain-featured-image.jpg"
                                            alt="Google Terrain" class="basemap-thumbnail">
                                        <label>Google Terrain</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="google-street">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://newsroom.haas.berkeley.edu/wp-content/uploads/2023/08/Road_To_Success_Aug23_2000x1182_v4.jpg"
                                            alt="Google Street" class="basemap-thumbnail">
                                        <label>Google Street</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="google-traffic">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://static1.howtogeekimages.com/wordpress/wp-content/uploads/2022/10/Google-Maps-traffic.png"
                                            alt="Google Traffic" class="basemap-thumbnail">
                                        <label>Google Traffic</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="google-satellite">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgclfTNkUcsfC0c2bVoKVjELv2pki_YYLCSD99BpC5IfzU9W9sH6kG7JcF07c6bxsVD4LnAH2PDkUQrN24mT_uedwjGm6onOmAJNMRbptuzkgAXqsTVFbFB4W6XkPaGuwDpflBf6ULJQhKs/s1600/1.jpg"
                                            alt="Google Satellite" class="basemap-thumbnail">
                                        <label>Google Satellite</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="google-hybrid">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://static.packt-cdn.com/products/9781849698863/graphics/B00100_03_03.jpg"
                                            alt="Google Hybrid" class="basemap-thumbnail">
                                        <label>Google Hybrid</label>
                                    </div>
                                </a>
                            </li>
                            <li class="basemap-option" data-basemap="carto-positron">
                                <a class="dropdown-item" href="#">
                                    <div class="basemap-container">
                                        <img src="https://www.geoapify.com/static/translated-map-66ccdaaa5376c3d12b325770b8e79ba5.png"
                                            alt="Carto-Positron" class="basemap-thumbnail">
                                        <label>Carto-Positron</label>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- *******************************Ending Navigation Part************************* -->


    <!-- Buttons for controlling actions -->
    <div class="control-buttons">
        <button id="clearTableButton">Clear Table</button>
        <button id="compareButton">Compare</button>
    </div>

    <!-- *******************************Starting Map Part************************* -->
    <div id="map" class="map"></div>
    <div id="attributeTableContainer" class="attribute-table-container"></div>
    <div id="chartdiv"></div>


    <!-- *******************************Ending Map Part************************* -->

    <!-- Container for displaying the administration info -->
    <div id="adminInfo"
        style="position: absolute; background-color: #f9e2cc; padding: 7px; top: 200px; right: 10px; border-radius: 4px; z-index: 10;">
        <p style="margin:0; font-size: 12px; font-weight: bold; color: black;" id="adminName">Name: </p>
        <p style="margin:0; font-size: 12px; font-weight: bold; color: black;" id="adminType">Administration: </p>
    </div>


    <!-- Coordinates Section  -->
    <div id="coordinateSection"
        style="position: absolute; bottom: 70px; right: 300px; padding: 5px; border-radius: 4px; z-index: 10;">
        <div id="coordinateDisplay" style="font-size: 12px; font-weight: bold; color: black;">
            Latitude: 0, Longitude: 0
        </div>
    </div>

    <!-- Footer Section -->
    <footer>
        Designed and Developed by State Spatial Data Center (SSDC) under Department of Planning and Statistics (DoPS),
        Government of West Bengal
    </footer>

    <script>
    var mapboxToken;
    var basemapSources;
    var map;
    var overviewMapControl;
    var districtLayer;
    var selectedDistrictGeom;
    var selectedDistrictName;
    var subdivisionLayer;
    var blockLayer;
    var gramPanchayatLayer;
    var nhLayer;
    var shLayer;
    var mettaledLayer;
    var riverLayer;
    var railLayer;
    var clipLayer;
    var districtHqLayer;
    var subdivisionHqLayer;
    var blockHqLayer;
    var legend;
    var legendCtrl;
    var legendBarContainer;
    var districtVectorLayer;
    var districtName;
    var info;
    var polygonHighlightStyle;
    var pointHighlightStyle;
    var subdivisionVectorLayer;
    var subdivisonName;
    var blockVectorLayer;
    </script>

    <!-- My Custom JS  -->
    <script src="<?php echo base_url('myCustom/Files/myJScode/basemaps.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/allAssetsSection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/allFunctionalitySection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/districtSection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/subdivisionSection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/blockSection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/gpSection.js'); ?>"></script>
    <script src="<?php echo base_url('myCustom/Files/myJScode/mouseHover.js'); ?>"></script>

</body>

</html>