@extends('layouts.backend',['page_title'=>'Dashboard'])
@section('content')
  <!-- Main content -->
  <section class="content overflow-hidden">
    <!-- Info boxes -->
    <div class="row">

      <div class="col-md-3 col-sm-6 col-xs-12">

        <div class="small-box bg-green animated flipInY delay1">
          <div class="inner">
            <h3>{{$propertiesCount}}</h3>

            <p>{{ trans('backend.properties') }}</p>
          </div>
          <div class="icon">
            <i class="fa fa-bank"></i>
          </div>
          <a href="{{ route('properties.index') }}" class="small-box-footer">اقرأ المزيد<i class="fa fa-arrow-circle-left"></i></a>
        </div>

        <!-- /.info-box -->
      </div>
      

      <!-- fix for small devices only -->
      <div class="clearfix visible-sm-block"></div>

      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">

        <div class="small-box bg-red animated flipInY delay3">
          <div class="inner">
            <h3>{{$industriesCount}}</h3>

            <p>{{ trans('backend.industries') }}</p>
          </div>
          <div class="icon">
            <i class="fa fa-home"></i>
          </div>
          <a href="{{ route('industries.index') }}" class="small-box-footer">اقرأ المزيد<i class="fa fa-arrow-circle-left"></i></a>
        </div>

        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">

        <div class="small-box bg-yellow animated flipInY animate-time-1 delay4">
          <div class="inner">
            <h3>{{$zones->count()}}</h3>

            <p>{{ trans('backend.zones') }}</p>
          </div>
          <div class="icon">
            <i class="fa fa-home"></i>
          </div>
          <a href="{{ route('zones.index') }}" class="small-box-footer">اقرأ المزيد<i class="fa fa-arrow-circle-left"></i></a>
        </div>



        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">

        <div class="small-box bg-blue animated flipInY delay2">
          <div class="inner">
            <h3>{{$allAgentsCount}}</h3>

            <p>{{ trans('general.agents') }}</p>
          </div>
          <div class="icon">
            <i class="ion ion-ios-people"></i>
          </div>
          <a href="{{ route('users.index') }}" class="small-box-footer">اقرأ المزيد<i class="fa fa-arrow-circle-left"></i></a>
        </div>

        <!-- /.info-box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->

    <!-- Main row -->
    <div class="row delayed-js fadeInUpBig animate-time-1 hidden">
      <!-- Left col -->
      <div class="col-md-12">
        <!-- MAP & BOX PANE -->
        <div class="box box-success ">
          <div class="box-header with-border">
            <h3 class="box-title">{{ trans('backend.Zones Report') }}</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body no-padding">
            <div class="row">
              <div class="col-md-12 col-sm-12">
                <div class="pad">
                  <!-- Map will be created here -->
                  <div id="world-map-markers" style="height: 325px;"></div>
                </div>
              </div>
              <!-- /.col -->

              <!-- /.col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->


        <!-- /.row -->

        <!-- TABLE: LATEST ORDERS -->
      </div>
      <!-- /.col -->

    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->
@stop

@section('scripts')
  <script type="text/javascript">
      $(function () {


          /* jVector Maps
           * ------------
           * Create a world map with markers
           */
          $('#world-map-markers').vectorMap({
              map: 'world_mill_en',
              normalizeFunction: 'polynomial',
              focusOn: {
                  x: 0.55,
                  y: 0.51,
                  scale: 10
              },
              hoverOpacity: 0.7,
              hoverColor: false,
              backgroundColor: 'transparent',
              regionStyle: {
                  initial: {
                      fill: 'rgba(210, 214, 222, 1)',
                      "fill-opacity": 1,
                      stroke: 'none',
                      "stroke-width": 0,
                      "stroke-opacity": 1
                  },
                  hover: {
                      "fill-opacity": 0.7,
                      cursor: 'pointer'
                  },
                  selected: {
                      fill: 'yellow'
                  },
                  selectedHover: {}
              },
              markerStyle: {
                  initial: {
                      fill: '#00a65a',
                      stroke: '#111'
                  }
              },
              markers: [
                  @foreach ($zones as $zone)
                  {latLng: ["{{ $zone->latitude }}", "{{ $zone->longitude }}"], name: "{{ $zone->name }}"},
                @endforeach
              ]
          });


});

</script>
@stop