@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;

        }

        .modal-xl {
            --bs-modal-width: 1540px;
        }

        .highlight {
            color: rgb(15 38 250);
        }

        .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;
        }

        .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%);
        }

        .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;

        }

        .haor_image {
            max-width: 100%;
            margin: auto;
            padding: 0.5em;
            border-radius: 0.7em;

        }

        .cta-section {
            max-width: 95%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-between;
        }
    </style>
@endpush
<div>
    <x-slot name="title">{{ __('haorsys::default.dashboard') }}</x-slot>
    <x-theme::layouts.backend.container>
        <div class="row">
            <x-slot name="title">{{ __('haorsys::default.dashboard') }}</x-slot>
            <div class="col-xl-4">
                <x-theme::layouts.backend.card>
                    <div class="overflow-hidden">
                        <div class="bg-info bg-soft" style="height: 120px">
                            <div class="row">
                                <div class="col-6">
                                    <div class="text-primary p-3">
                                        <h4 style="color: rgb(34, 12, 160)">
                                            {{-- <strong>{{ __('haorsys::dashboard.welcome_to_smart_haor') }}</strong> --}}
                                            <strong>{{ __('haorsys::dashboard.welcome_to_haor_management_system') }}</strong>
                                        </h4>

                                    </div>
                                </div>
                                <div class="col-6 align-self-end">
                                    <img src="{{ module_asset('images/profile.jpg') }}" alt="haor" width="265px"
                                        height="118px">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="avatar-md profile-user-wid mb-2">
                                            <img src="{{ module_asset('images/supperadmin.png') }}"alt=""
                                                class="img-thumbnail rounded-circle">
                                        </div>
                                        <h5 class="font-size-14 text-truncate">
                                            <b> {{ auth()->user()->name }}</b>
                                        </h5>
                                    </div>
                                    <div class="col-sm-8">
                                        <h5 class="mt-2 mb-0"><strong style="color: rgb(34, 12, 160)">
                                                {{ __('haorsys::user.employee_id') }}:</strong>
                                            <b> {{ auth()->user()->employee_id }}</b>
                                        </h5>
                                        <h5><strong style="color: rgb(34, 12, 160)">
                                                {{ __('haorsys::user.designation') }}:</strong>
                                            {{ $sessionData->designation_name_bn ?? '' }}<br /></h5>

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

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


                <x-theme::layouts.backend.card style="background-color: #e8f0ff; height: 500px; overflow-y: auto;">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class=""><strong>{{ __('haorsys::haor.haor_list') }}</strong></h5>
                        </div>
                        <div class="col-md-4" style="margin-top: -10px; margin-bottom: 5px">
                            <input type="text" class="form-control"
                                placeholder="{{ __('haorsys::haor.search_haor') }}" wire:model.live="search"
                                id="search-field">
                        </div>
                    </div>

                    @foreach ($haors as $Haor)
                        <x-theme::layouts.backend.card :key="$Haor->haor_id">
                            <div class="row">
                                <div class="col-4">
                                    <a
                                        href="{{ route('haorsys.member.haor_details', ['haor_id' => $Haor->haor_id]) }}">
                                        <img src="{{ $Haor->image }}" alt="haor" width="170px" height="170px"
                                            class="haor_image">
                                    </a>
                                </div>
                                <div class="col-8 position-relative">
                                    <a
                                        href="{{ route('haorsys.member.haor_details', ['haor_id' => $Haor->haor_id]) }}">
                                        <h3 style="color: rgb(34, 12, 160); position: relative;">
                                            <b>{{ $Haor->haor_name_bn }}</b>
                                            <a href="{{ route('haorsys.member.haor_details', ['haor_id' => $Haor->haor_id]) }}"
                                                style="position: absolute; top: 0; right: 0;">
                                                <x-theme::button.info style="background-color:rgb(17, 131, 177);"
                                                    class="btn-sm">
                                                    {{ __('haorsys::haor.details') }} <i
                                                        class="fas fa-angle-right"></i>
                                                </x-theme::button.info>
                                            </a>
                                        </h3>
                                    </a>

                                    <h5 class="">
                                        বাংলাদেশের
                                        <b style="color: rgb(6, 155, 6)">
                                            {{ $Haor->HaorLocation?->pluck('District.district_bn')->unique()->implode(', ') }}
                                        </b>
                                        জেলার
                                        <b style="color: rgb(6, 155, 6)">
                                            {{ $Haor->HaorLocation?->pluck('Upazila.upazila_bn')->unique()->implode(', ') }}
                                        </b>
                                        উপজেলায় অবস্থিত।
                                    </h5>
                                    <i class="fa fa-check text-danger"></i> হাওরের আয়তন প্রায় <b
                                        style="color: rgb(34, 12, 160)">{{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->haor_area_he) : $Haor->haor_area_he }}</b>
                                    হেক্টর।
                                    <br>
                                    <i class="fa fa-check text-danger"></i> যার চাষাবাদ যোগ্য এলাকা <b
                                        style="color: rgb(34, 12, 160)">{{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->irrigation_he) : $Haor->irrigation_he }}</b>
                                    হেক্টর।
                                    <br>
                                    <i class="fa fa-check text-danger"></i> <b
                                        style="color: rgb(34, 12, 160)">{{ app()->getLocale() == 'bn' ? numberEnToBn($year_end) : $year_end }}</b>
                                    অর্থ বছরে
                                    <br>
                                    <p class="ms-3">পিআইসি সংখ্যা <span> <b
                                                style="color: rgb(34, 12, 160)">{{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->pic_count) : $Haor->pic_count }}</b>
                                        </span><span style="margin-left: 10%;">
                                            প্রাক্কলিত মূল্য <b
                                                style="color: rgb(34, 12, 160)">{{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->pic_amount) : $Haor->pic_amount }}</b>
                                            {{ __('haorsys::haor.lakh_taka') }}
                                        </span></p>

                                    </h6>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    @endforeach
                    {{ $haors->links('pagination::bootstrap-5') }}
                </x-theme::layouts.backend.card>
            </div>
            <div class="col-xl-8">
                <div class="row">

                    <div class="col-md-10">
                    </div>
                    <div class="col-md-2 mb-2">
                        <livewire:haorsys::search.yearends wire:model.live="year_end" name="year_end"
                            placeholder="{{ __('haorsys::dashboard.select_year') }}" />
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class=" mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <a href="{{ route('haorsys.member.haor_list') }}">
                                            <h5 class="text-muted fw-medium">
                                                <strong
                                                    class="text-light">{{ __('haorsys::haor.total_haor') }}</strong>
                                            </h5>
                                            <h5 class="mb-0 text-light"><strong>
                                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($total_haor) : $total_haor }}</strong>
                                            </h5>
                                        </a>
                                    </div>

                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <a href="{{ route('haorsys.member.pic_list') }}">
                                            <h5 class="text-muted fw-medium">
                                                <strong class="text-light">{{ __('haorsys::haor.total_PIC') }}</strong>
                                            </h5>
                                            <h5 class="mb-0 text-light"><strong>
                                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($total_pic) : $total_pic }}</strong>
                                            </h5>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h5 class="text-muted fw-medium">
                                            <strong class="text-light">{{ __('haorsys::haor.total_scheme') }}</strong>
                                        </h5>
                                        <h5 class="mb-0 text-light"><strong>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($total_sub_work) : $total_sub_work }}</strong>
                                        </h5>
                                    </div>

                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h5 class="text-muted fw-medium">
                                            <strong
                                                class="text-light">{{ __('haorsys::haor.total_sub_scheme') }}</strong>
                                        </h5>
                                        <h5 class="mb-0 text-light"><strong>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($total_sub_work) : $total_sub_work }}
                                            </strong></h5>
                                    </div>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h5 class="text-muted fw-medium">
                                            <strong class="text-light">{{ __('haorsys::haor.estimated_amount') }}
                                            </strong>
                                        </h5>
                                        <h5 class="mb-0 text-light"><strong>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($total_estimated_amount) : $total_estimated_amount }}
                                                {{ __('haorsys::haor.lakh_taka') }}</strong>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>
                    <div class="col-md-2">
                        <x-theme::layouts.backend.card class="background">
                            <div class="mini-stats-wid">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h5 class="text-muted fw-medium">
                                            <strong
                                                class="text-light">{{ __('haorsys::haor.total_allocation') }}</strong>
                                        </h5>
                                        <h5 class="mb-0 text-light"><strong>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($total_approved_amount) : $total_approved_amount }}
                                                {{ __('haorsys::haor.lakh_taka') }}</strong></h5>
                                    </div>
                                </div>
                            </div>
                        </x-theme::layouts.backend.card>
                    </div>

                    <x-theme::layouts.backend.container>
                        <div class="row">
                            <div wire:ignore class="col-md-12">
                                <x-theme::layouts.backend.card>
                                    <x-slot name="subCard_title">
                                        <h4 class="text-light ms-2 mt-2 mb-2">
                                            <strong>{{ __('haorsys::dashboard.all_haor') }}</strong>
                                        </h4>
                                    </x-slot>
                                    <div id="cover-spin"></div>
                                    <div id="map" style="width: 100%; height: 530px"></div>
                                    <div id="map-dis" class="map-info-box" style="display: none;">
                                        <div id="pointer"></div>
                                    </div>
                                </x-theme::layouts.backend.card>
                            </div>
                        </div>
                    </x-theme::layouts.backend.container>
                </div>
            </div>
        </div>
    </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, // This sets the minimum zoom level to 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
            //     }
            // );

            console.log(currentHaor.haor_image);

            // 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 = '7%'; // 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>
    {{-- <script>
        var options, value = @json(''),
            chart,
            radialbarColors = getChartColorsArray("budget_chart");
        radialbarColors &&
            ((options = {
                    chart: {
                        height: 200,
                        type: "radialBar",
                        offsetY: -10
                    },
                    plotOptions: {
                        radialBar: {
                            startAngle: -135,
                            endAngle: 135,
                            dataLabels: {
                                name: {
                                    fontSize: "13px",
                                    color: void 0,
                                    offsetY: 60
                                },
                                value: {
                                    offsetY: 22,
                                    fontSize: "16px",
                                    color: void 0,
                                    formatter: function(e) {
                                        return e + "%";
                                    },
                                },
                            },
                        },
                    },
                    colors: radialbarColors,
                    fill: {
                        type: "gradient",
                        gradient: {
                            shade: "dark",
                            shadeIntensity: 0.15,
                            inverseColors: !1,
                            opacityFrom: 1,
                            opacityTo: 1,
                            stops: [0, 50, 65, 91],
                        },
                    },
                    stroke: {
                        dashArray: 1
                    },
                    series: [value],
                    labels: ["Allocation"],
                }),
                (chart = new ApexCharts(
                    document.querySelector("#budget_chart"),
                    options
                )).render());
    </script> --}}
@endpush