@extends('layouts.app')

@section('page-site-title')
{{trans('areas.page_title')}}
@endsection

@section('page-title')
{{trans('areas.content_title')}}
@endsection

@section('page_navbar')
@include('layouts.widgets.page-navbar')
@endsection

@section('page_breadcrumb')
@include('layouts.widgets.page-breadcrumb')
@endsection

@section('page_side')
@include('layouts.widgets.page-side')
@endsection

@section('page-content')
    <div class="row">

        <div class="col-lg-6 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat red">
                <div class="visual">
                    <i class="fa fa-bar-chart-o"></i>
                </div>
                <div class="details">
                    <div class="number">{{$full}}
                        <span data-counter="counterup" data-value="{{$full}}"></span></div>
                    <div class="desc"> {{trans('areas.full_users_number')}} </div>
                </div>
                <a class="more" href="javascript:;"> View more
                    <i class="m-icon-swapright m-icon-white"></i>
                </a>
            </div>
        </div>

        <div class="col-lg-6 col-md-3 col-sm-6 col-xs-12">
            <div class="dashboard-stat purple">
                <div class="visual">
                    <i class="fa fa-globe"></i>
                </div>
                <div class="details">
                    <div class="number">{{$limit}}
                        <span data-counter="counterup" data-value="{{$limit}}"></span></div>
                    <div class="desc"> {{trans('areas.limit_users_number')}} </div>
                </div>
                <a class="more" href="javascript:;"> View more
                    <i class="m-icon-swapright m-icon-white"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-red-sunglo">
                        <i class="icon-settings font-red-sunglo"></i>
                        <span class="caption-subject bold uppercase"> {{trans('areas.map_fusion')}}</span>
                    </div>

                </div>
                <div class="portlet-body form"  style="height: 600px;">
                    <div id="map"></div>
                </div>
            </div>
            <!-- END SAMPLE FORM PORTLET-->
        </div>
    </div>
@endsection

@section('page-footer-js')
<script type="application/javascript">
    var js_lang = {!! json_encode(trans('common.js_lang'))  !!};
    var model_js_lang = {!! json_encode(trans('areas.js_lang'))  !!};
    var urls = {!! json_encode($urls) !!};
    var points = {!! json_encode($points) !!};
    var late = {!! $lat!!};
    var long = {!! $lon !!};
    var token_code='{{csrf_token()}}';
    var user_id = '{{Auth::user()->id}}';
</script>
<script src="{{ asset('assets/models/js/Common.js')}}" type="text/javascript"></script>
<script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js')}}"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpW05rDFXWRD0CLSXs_sZFsKXyJpMQATM&callback=initMap">
</script>
<script src="{{ asset('assets/models/js/AreaSearch.js')}}" type="text/javascript"></script>
@endsection

@section('page-heads')
    <link href="{{ asset('assets/models/css/Areas.css') }}" rel="stylesheet" type="text/css" />
@endsection