@extends('layouts.app')
@section('title')
@lang('dashboard.dashboard')
@endsection

@section('vendor_css')
<link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">

</style>
@endsection

@section('page_level_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/css-rtl/core/menu/menu-types/vertical-menu.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/css-rtl/core/menu/menu-types/vertical-overlay-menu.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/fonts/simple-line-icons/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/css-rtl/core/colors/palette-gradient.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/css/custom-style.css') }}">
@endsection

@section('content')
<section>
    <div class="row d-flex justify-content-center">
        <div class="col-xl-2 col-lg-6 col-xs-12 ">
            <div class="card {{ (Auth::user()->name == 'dashboard') ? 'mb-0' : '' }}">
                <div class="card-body">
                    <div class="media rounded">
                        <div class="p-1 text-xs-center bg-primary bg-darken-2 media-left media-middle">
                            <i class="icon-camera font-large-2 white"></i>
                        </div>
                        <div class="p-1 bg-gradient-x-primary white media-body">
                            <h5>@lang('dashboard.total_hcps')</h5>
                            <h5 class="text-bold-400">{{ $hcps }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-lg-6 col-xs-12">
            <div class="card {{ (Auth::user()->name == 'dashboard') ? 'mb-0' : '' }}">
                <div class="card-body">
                    <div class="media rounded">
                        <div class="p-1 text-xs-center bg-danger bg-darken-2 media-left media-middle">
                            <i class="ft-map-pin font-large-2 white"></i>
                        </div>
                        <div class="p-1 bg-gradient-x-danger white media-body">
                            <h5>@lang('dashboard.total_rcs')</h5>
                            <h5 class="text-bold-400">{{ $rcs }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-lg-6 col-xs-12">
            <div class="card {{ (Auth::user()->name == 'dashboard') ? 'mb-0' : '' }}">
                <div class="card-body">
                    <div class="media rounded">
                        <div class="p-1 text-xs-center bg-warning bg-darken-2 media-left media-middle">
                            <i class="icon-user font-large-2 white"></i>
                        </div>
                        <div class="p-1 bg-gradient-x-warning white media-body">
                            <h5>@lang('dashboard.total_doctors')</h5>
                            <h5 class="text-bold-400">{{ $doctors }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-6 col-xs-12">
            <div class="card {{ (Auth::user()->name == 'dashboard') ? 'mb-0' : '' }}">
                <div class="card-body">
                    <div class="media rounded">
                        <div class="p-1 text-xs-center bg-warning bg-darken-2 media-left media-middle">
                            <i class="ft-activity font-large-2 white"></i>
                        </div>
                        <div class="p-1 bg-gradient-x-warning white media-body">
                            <h5>@lang('dashboard.total_followups')</h5>
                            <h5 class="text-bold-400">{{ $followups }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-2 col-lg-6 col-xs-12">
            <div class="card {{ (Auth::user()->name == 'dashboard') ? 'mb-0' : '' }}">
                <div class="card-body">
                    <div class="media rounded">
                        <div class="p-1 text-xs-center bg-success bg-darken-2 media-left media-middle">
                            <i class="icon-user font-large-2 white"></i>
                        </div>
                        <div class="p-1 bg-gradient-x-success white media-body">
                            <h5>@lang('dashboard.total_patients')</h5>
                            <h5 class="text-bold-400">{{ $patients }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="map-stats">
  <div class="col-12 mb-2">
    <span class="text-right fs-20 text-primary font-weight-bold">خريطة توزيع نشاط الوحدات</span>
  </div>
  <div class="row mx-0 px-0 map">
    <!-- Start SVG MAP-->
    <div class="col-lg-6 col-12" style="width:617px; height: 455px;">
      <div class="svg">
        <img src="{{asset('/images/egypt-map.png')}}"  style='width:617px;  height: 455px;' class="eg-map"  usemap="#image">
        <map name="image">
          <area  data-toggle="tooltip" title="Hooray!" class='city' city='alexandria' coords="240,49,237,57,221,63,221,35,226,28,236,35,235,42" shape="poly">
          
            <area title='beher' class='city'  city='behera' coords="279,48,227,77,232,103,264,127,326,93,287,67" shape="poly">
            <area title='matrouh' class='city'  city='matrouh' coords="8,15,15,208,134,208,157,166,205,150,279,93,248,72,251,39,158,24,131,15,20,3" shape="poly">
            <area title='alexandria' class='city'  city='alexandria' coords="249,40,249,31,275,18,262,37,268,54,248,66" shape="poly">
            <area title='behera' class='city'  city='behera' coords="280,93,247,69,270,53,260,36,287,12,307,31,311,64,288,89" shape="poly">
            <area title='monofya' class='city'  city='monofya'   coords="323,77,311,72,310,51,333,53" shape="poly">
            <area title='gharbia' class='city'  city='gharbia'  coords="333,33,321,29,309,37,310,52,333,52" shape="poly">
            <area title='kafrElsheikh' class='city'  city='kafrElsheikh' coords="330,25,317,37,302,31,294,20,288,12,322,2,333,7" shape="poly">
            <area title='giza' class='city'  city='giza'  coords="314,98,266,129,248,174,197,207,136,210,160,165,206,155,248,115,310,71,333,84,337,107,338,110,334,115,338,101,338,106,336,118,338,106" shape="poly">
            <area title='fayoum' class='city'  city='fayoum'  coords="323,118,311,137,283,144,263,133,296,105,317,101" shape="poly">
            <area title='baniSweif' class='city'  city='baniSweif' title=""  coords="310,138,325,120,330,130,325,141,315,152,256,153,264,132,284,144" shape="poly">
            <area title='minya' class='city'  city='minya' coords="256,153,313,152,310,171,313,210,197,209,248,176" shape="poly">
            <area title='qaloubya' class='city'  city='qaloubya' coords="331,83,339,75,330,63,322,72" shape="poly">
            <area title='daqahlya' class='city'  city='daqahlya' coords="333,26,331,59,338,47,347,45,372,24,349,21,334,6" shape="poly">
            <area title='sharqya' class='city'  city='sharqya' coords="330,64,337,48,359,34,381,31,373,61,357,60,362,73,345,80" shape="poly">
            <area title='cairo' class='city'  city='cairo' coords="339,79,365,74,362,148,341,134,330,121,337,104,331,84" shape="poly">
            <area title='isamalia' class='city'  city='isamalia'  coords="400,39,388,26,358,61,363,76,406,74,400,58" shape="poly">
            <area title='suez' class='city'  city='suez'   coords="397,133,364,147,364,74,410,75,410,84,401,97,389,107" shape="poly">
            <area title='domyat' class='city'  city='domyat' coords="353,24,343,13,359,8,361,17" shape="poly">
            <area title='shamalSian' class='city'  city='shamalSian'  coords="401,33,400,59,412,93,456,97,515,118,483,22" shape="poly">
            <area title='janoubSina' class='city'  city='janoubSina'  coords="414,93,404,104,432,162,479,205,490,189,507,119,457,98" shape="poly">  
            <area title='asyout' class='city'  city='asyout'  coords="314,213,303,212,307,229,337,250,343,241" shape="poly">
            <area title='sohag' class='city'  city='sohag' coords="346,249,334,252,347,269,362,290,382,283,361,263" shape="poly">
            <area title='qena' class='city'  city='qena'  coords="416,286,413,306,397,335,390,318,402,292,381,296,370,289,408,280" shape="poly">
            <area title='aswan' class='city'  city='aswan'  coords="421,334,431,364,427,395,445,457,359,494,322,489,386,413,406,360,396,337,406,328" shape="poly">
            <area title='luxor'  class='city'  city='luxor'   coords="400,312,7" shape="circle">
            <area title='bahrAhmir'  class='city'  city='bahrAhmir' coords="500,477,473,494,362,494,413,472,405,328,401,317,420,299,406,278,384,288,347,245,317,214,310,173,331,130,358,149,398,136,479,278,546,391,543,409,553,441" shape="poly">
            <area title='wadiJadid' class='city'  city='wadiJadid'  coords="404,364,384,417,314,494,17,492,15,401,12,210,302,211,374,299,401,296,388,325" shape="poly">

          </map>
        <div 
          id='top-image' 
          class='text-center' 
          style='display: none; position: absolute; width: 100%; height: 455px; background:rgba(255,255,255,.9)'>
            <img id='cancel' style='z-index: 999999999; position: relative; cursor:pointer' width=30 height=30 
              src="{{asset('/cancel.png')}}" class='pull-right' alt="">
            <img id='imageontop' src="{{asset('/EG/EG-ALX.svg')}}" style='width: 100%; height: 455px; float: right;'>
          <div id='polets'>
        </div>
      </div>
    </div>
  </div>
    <!-- End SVG MAP-->

    <div class="col-lg-6 col-12" style='width: calc(100% - 617px);'>
      <!-- Search Box-->
      <div class="search-box">
        <!-- <form>
          <div class="search-form">
            <input class="form-control text-left py-2 br-0 d-inline" name="search_box" id="search_box" placeholder="ابحث عن المحافظة، المنطقة النائية، الوحدة، إلخ">
            <button class="btn btn-primary br-0 py-2 d-inline" type="submit">البحث</button>
          </div>
        </form> -->
      </div>

      <!--Governments and Stats-->
      <div class="gov-stats mt-4">
        <!--Governments-->
        <div class="gov text-left nicescroll-box"  style='display: inline-block;width: 34%;'>
          <ul class="list-unstyled px-0 mx-0 wrap">