@section('externalcss')

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

          crossorigin=""/>

    <style>

        .node circle {
            fill: #fff;
            stroke: red;
            stroke-width: 3px;
        }

        .node text {
            font: 14px;
            font-weight: bold;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }

        .svg-chart-container {
            width: 100% !important;
        }

        .toast {
            opacity: 1 !important;
            background-color: #ff6767;
            padding: 5px !important;
            color: #fff;

        }

        .toast-header {
            background-color: #ff6767;
            color: #fff;
        }
        .glass {
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(7.3px);
            -webkit-backdrop-filter: blur(7.3px);
        }

    </style>

@endsection

<!--begin::Content-->

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <div class="row mb-5">
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #d7d9fd;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="fw-boldest mr-2">Total Clinic</h4>
{{--                                    <span></span>--}}
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_clinic_count>0?$total_clinic_count:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-block align-items-center text-center ">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest">New Clinic</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">{{$noofnewclinics>0?$noofnewclinics:0}}</h4>
                                </div>

                                <div class="col-sm d-block align-items-center text-center ">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest">Verified</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">{{$verified_clinic>0?$verified_clinic:0}}</h4>
                                </div>

                                <div class="col-sm d-block align-items-center text-center">
                                    <h4 style="font-size: 1.2rem;" class="text-danger fw-boldest">Live</h4><h4 style="font-size: 1.2rem;" class="text-danger fw-boldest">{{$noofclinicdeployed>0?$noofclinicdeployed:0}}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #d3faff; height: 112px;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Total Doctor</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_dr>0?$total_dr:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Verification Pending</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$unverified_dr>0?$unverified_dr:0}}</h4>
                                </div>
{{--                                <div class="col-sm d-block align-items-center text-center ">--}}
{{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">New Clinic</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
{{--                                </div>--}}

{{--                                <div class="col-sm d-block align-items-center text-center ">--}}
{{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Verified</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
{{--                                </div>--}}

{{--                                <div class="col-sm d-block align-items-center text-center">--}}
{{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Live</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
{{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #f9f1d3;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Today's Appointments</h4>
                                    {{--                                    <span></span>--}}
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$today_appointment>0?$today_appointment:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-block align-items-center text-center ">
                                    <h4 style="font-size: 1.2rem;" class="text-success fw-boldest">Online</h4><h4 style="font-size: 1.2rem;" class="text-success fw-boldest">{{$online_appointment>0?$online_appointment:0}}</h4>
                                </div>

                                <div class="col-sm d-block align-items-center text-center ">
                                    <h4 style="font-size: 1.2rem; color:#77773c" class="fw-boldest">Offline</h4><h4 style="font-size: 1.2rem; color:#77773c !important;" class="text-secondary fw-boldest">{{$offline_appointment>0?$offline_appointment:0}}</h4>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-5">
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #C9FFB194;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Online Doctor</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$dr_online_count>0?$dr_online_count:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Online Clinic</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$online_clinic >0?$online_clinic:0}}</h4>
                                </div>
                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">New Clinic</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Verified</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Live</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #FFC5B194;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Total Pharmacy</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_pharmacy>0?$total_pharmacy:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest mr-2">Total Patholab</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_patholab>0?$total_patholab:0}}</h4>
                                </div>
                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">New Clinic</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Verified</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Live</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card rounded card-flush shadow-md glass" style="background-color: #BCEAD5;">
                        <div class="card-body py-3 px-3">
                            <div class="row p-3">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Total Revenue</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_revenue>0?$total_revenue:0}}</h4>
                                </div>

                            </div>
                            <hr>
                            <div class="row p-2">
                                <div class="col-sm d-flex justify-content-center">
                                    <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest mr-2">Online Appointment</h4>
                                    <div class="vr w-3 fw-bolder"></div>
                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest ml-2">{{$total_appointment_revenue>0?$total_appointment_revenue:0}}</h4>
                                </div>
                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">New Clinic</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center ">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Verified</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}

                                {{--                                <div class="col-sm d-block align-items-center text-center">--}}
                                {{--                                    <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Live</h4><h4 style="font-size: 1.2rem;" class="text-info fw-boldest">0</h4>--}}
                                {{--                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">


                {{--<div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <a href="/clinic_register" class="card card-flush shadow-md p-4" style="background-color: #d7d9fd;">
                        <h4 style="font-size: 1.2rem;" class="text-info fw-boldest">Registered Clinics</h4>
                        <p style="font-size: 2rem;">{{$noofclinicdeployed}}</p>

                    </a>
                </div>
                <div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <a href="/doctorVerification" class="card card-flush shadow-md p-4" style=" background-color: #d3faff;">
                        <h4 style="font-size: 1.2rem;" class="text-primary fw-boldest">Registered Doctors</h4>
                        <p style="font-size: 2rem;">{{$noofdoctorsverifed}}</p>
                    </a>
                </div>
                <div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <a  href="/clinic_register" class="card card-flush shadow-md p-4" style=" background-color: #ffddd9;">
                        <h4 style="font-size: 1.2rem;" class="text-danger fw-boldest">New Clinic Request</h4>
                        <p style="font-size: 2rem;">{{$noofnewclinics}}</p>
                    </a>
                </div>
                <div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <a href="/doctorVerification" class="card card-flush shadow-md p-4" style=" background-color: #f9f1d3;">
                        <h4 style="font-size: 1.2rem;" class="text-danger fw-boldest">New Doctor Request</h4>
                        <p style="font-size: 2rem;">{{$noofnewdoctors}}</p>
                    </a>
                </div>
                <div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <div class="card card-flush shadow-md p-4" style=" background-color: #d7d9fd;">
                        <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest">Current Month Income</h4>
                        <p style="font-size: 2rem;">{{$currentmonthincome}}</p>
                    </div>
                </div>
                <div class="col-md-2 mb-2" style="position: sticky; z-index: 1000;">
                    <div class="card card-flush shadow-md p-4" style=" background-color: #d3faff;">
                        <h4 style="font-size: 1.2rem;" class="text-dark fw-boldest">FY{{$financial_year}} Income</h4>
                        <p style="font-size: 2rem;">{{$currentfyincome}}</p>
                    </div>
                </div>--}}

                <div class="col-xl-12  mb-xl-5 mb-xxl-5 " style="position: relative;">
                    <!--begin::Card widget 4-->
                    <div class="card card-flush  shadow-md">
                        <!--begin::Header-->

                        <!--end::Header-->
                        <!--begin::Card body-->
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-md-12" id = "map" style = "width: 100%; height: 700px;">

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>

<!--end::Content-->

@section('externaljs')




    <script>
        window.addEventListener('showsuccessmsg', event => {
            if (event.detail.type == "success") {
                showsuccessmsg(event.detail.message);
            } else {
                showerrorsmsg(event.detail.message);
            }
            //showsuccessmsg();
        });

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        function closemodal() {
            $('.modal').modal('hide');
        }

        window.addEventListener('closemodal', event => {
            closemodal();
        });
    </script>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>
    <script src="https://unpkg.com/leaflet-providers@latest/leaflet-providers.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-measure@3.1.0/dist/leaflet-measure.min.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-compass@1.5.6/dist/leaflet-compass.min.js"></script>
{{--    <script type="text/javascript"--}}
{{--            src="https://cdn.jsdelivr.net/gh/hosuaby/Leaflet.SmoothMarkerBouncing@v3.0.2/dist/bundle.js"--}}
{{--            crossorigin="anonymous"></script>--}}

    <script>
        var latitude="";
        var longitude="";
        // window.addEventListener('getCurrentLocation', event => {
        //     console.log("");
        //     getLocation();
        // });
        function getLocation() {
            if (navigator.geolocation) {
                console.log("");
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }

        function showPosition(position) {
             latitude = position.coords.latitude;
             longitude = position.coords.longitude;
             //console.log(latitude);
        }

        var mapOptions = {
            center: [20.266522,85.829904],
            // center: [latitude, longitude],
            zoom: 5,
            minZoom: 5,
            maxZoom: 18
        }

        var map = L.map('map',mapOptions);
        var defaultLayer = L.tileLayer.provider('Esri.WorldImagery').addTo(map);

        var baseLayers = {
            'Esri.WorldImagery': defaultLayer,
            'Esri.WorldStreetMap': L.tileLayer.provider('Esri.WorldStreetMap'),
        };
        var overlayLayers = {};
        L.control.layers(baseLayers, overlayLayers, {collapsed: true}).addTo(map);
        L.control.compass({
            position: 'topright', // Adjust position as needed
            autoActive: true // Automatically activate compass
        }).addTo(map);
        L.control.scale().addTo(map);
        var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [50, 50],
                shadowSize:   [50, 64],

            }
        });
        var yodr_icon = new LeafIcon({iconUrl: 'assetsweb/images/yodr_location.png',iconSize: [50, 50]});
        @if(sizeof($clinics)>0)
            @foreach($clinics as $key => $clinic)
            var clinic_pin{{$key}} = "";
            clinic_pin{{$key}} = L.marker([{{$clinic['clinic_lat']}}, {{$clinic['clinic_lng']}}],  {icon: yodr_icon}).addTo(map);
            clinic_pin{{$key}}.bindPopup(getlaryerhtml('{{$clinic['clinic_name']}}', '{{$clinic['clinic_address']}}', '{{$clinic['clinic_street']}}', '{{$clinic['clinic_city']}}', '{{$clinic['clinic_district']}}', '{{$clinic['clinic_state']}}', '{{$clinic['clinic_zip_code']}}', '{{$clinic['clinic_mobile_no']}}', '{{$clinic['clinic_email_id']}}'),{minWidth:300}); //.openPopup()
            clinic_details{{$key}} = new L.FeatureGroup();
            clinic_details{{$key}}.addLayer(clinic_pin{{$key}});
            map.addLayer(clinic_details{{$key}});
            clinic_details{{$key}}.on('click', function(e){
                console.log(e);
                map.setView(e.latlng, 17);

            });
            @endforeach
            @endif

            function getlaryerhtml(clinic_name, clinic_address, clinic_street, clinic_city, clinic_district, clinic_state, clinic_zipcode, clinic_mobile, clinic_email) {

                    var htmlelem="<div>"+

                        "<div class='row mt-5 '>"+
                        "<div class='col-md-12' style='text-align: left;'>" +
                        "<h4 class='fs-4 fw-bold'>"+clinic_name+"</h4>"+
                        "<p>"+clinic_address+", "+clinic_street+", "+clinic_city+", "+clinic_district+", "+clinic_state+", "+clinic_zipcode+"</p><p class='fw-bold fs-8'>"+clinic_mobile+" <br/>"+clinic_email+"</p>";
                    htmlelem+="</div>"+
                        "</div>"+
                        "</div>";

                    return htmlelem;


            }

        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        // marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
    </script>
    <script language="JavaScript">
        var appliedconfig = liquidFillGaugeDefaultSettings();
        appliedconfig.circleColor = "#771CFF";
        appliedconfig.textColor = "#771CFF";
        appliedconfig.waveTextColor = "#fff";
        appliedconfig.waveColor = "#9880FF";
        appliedconfig.textVertPosition = 0.5;
        appliedconfig.waveAnimateTime = 5000;
        appliedconfig.waveHeight = 0.2;
        appliedconfig.waveAnimate = true;
        appliedconfig.waveOffset = 0.25;
        appliedconfig.valueCountUp = true;
        appliedconfig.displayPercent = false;
        var appliedgauge = loadLiquidFillGauge("applied", 5000, appliedconfig);


        var configpayment = liquidFillGaugeDefaultSettings();
        configpayment.circleColor = "#FFB10F";
        configpayment.textColor = "#FFB10F";
        configpayment.waveTextColor = "#fff";
        configpayment.waveColor = "#FFD48F";
        configpayment.textVertPosition = 0.5;
        configpayment.waveAnimateTime = 5000;
        configpayment.waveHeight = 0.2;
        configpayment.waveAnimate = true;
        configpayment.waveOffset = 0.25;
        configpayment.valueCountUp = true;
        configpayment.displayPercent = false;
        var gaugepayment= loadLiquidFillGauge("payment", 500, configpayment);



        var config2 = liquidFillGaugeDefaultSettings();
        config2.circleColor = "#CDEB10";
        config2.textColor = "#CDEB10";
        config2.waveTextColor = "#fff";
        config2.waveColor = "#E6EB8A";
        config2.textVertPosition = 0.5;
        config2.waveAnimateTime = 5000;
        config2.waveHeight = 0.2;
        config2.waveAnimate = true;
        config2.waveOffset = 0.25;
        config2.valueCountUp = true;
        config2.displayPercent = false;
        var gauge2 = loadLiquidFillGauge("pendingforverfy", 300, config2);

        var config3 = liquidFillGaugeDefaultSettings();
        config3.circleColor = "#07CE1C";
        config3.textColor = "#07CE1C";
        config3.waveTextColor = "#fff";
        config3.waveColor = "#64FF7F";
        config3.textVertPosition = 0.5;
        config3.waveAnimateTime = 5000;
        config3.waveHeight = 0.2;
        config3.waveAnimate = true;
        config3.waveOffset = 0.25;
        config3.valueCountUp = true;
        config3.displayPercent = false;
        var gauge3 = loadLiquidFillGauge("verified",  1000, config3);

        var config4 = liquidFillGaugeDefaultSettings();
        config4.circleColor = "#07CE1C";
        config4.textColor = "#07CE1C";
        config4.waveTextColor = "#fff";
        config4.waveColor = "#64FF7F";
        config4.textVertPosition = 0.5;
        config4.waveAnimateTime = 5000;
        config4.waveHeight = 0.2;
        config4.waveAnimate = true;
        config4.waveOffset = 0.25;
        config4.valueCountUp = true;
        config4.displayPercent = false;
        var gauge4 = loadLiquidFillGauge("registered",  1000, config4);

    </script>
@endsection