@php

use GuzzleHttp\Client;
use Illuminate\Support\Facades\App;
use Illuminate\Http\Request;

$locale = App::currentLocale();
$baseurl = env('API_URL');

$sort_no = Config::get('app.sort_no');
$end_no = Config::get('app.end_no');

$no_of_plots = count($property->propertyplots);

$lat=0;
$long=0;
$plot_idd='0';

if(!is_null($property->google_map))
{
$g_map_cord = trim($property->google_map,"https://www.google.com/maps/@");

$latlong = explode(",",$g_map_cord);

$lat = (float)$latlong[0];
$long = (float)$latlong[1];
}



@endphp

@extends('mainlayout')


@section('title')
MILIKI | Property : {{$property->name}}
@endsection


@section('content')






<div class="page-title-section section" style="padding-bottom: 2px;">
    <div class="row justify-content-between align-items-center max-mb-20" style="padding:0em 4em;margin:0em">
        <div class="col-sm-auto col-12 max-mb-10" style="padding:0px">
            @if(session('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert" style="margin-bottom:1em">
                <strong>Review Posted!</strong> {{ session('message') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @endif
            <h3 class="title" style="text-align:left;font-size: 32px;">{{$property->name}}</h3>

            <ul class="" style="display:flex;list-style-type: none;padding-left:0px">
                <li style="padding-right:16px;"> {{$property->rate}}<i class="fa fa-star"></i>


                </li>
                <li style="padding-right:16px;">
                    @if(session('user_auth')=='1')


                    @if($liked=='no')
                    <a id="like_icon"
                        onclick="change_icon('{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}','{{session('session_token')}}')"><i
                            class="far fa-heart" id="like_icon_og"></i></a>
                    @elseif($liked=='yes')
                    <a id="like_icon"
                        onclick="change_icon('{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}','{{session('session_token')}}')"><i
                            class="fa fa-heart red_color" id="like_icon_og"></i></a>
                    @endif

                    @else

                                        <a href="/login"><i class="far fa-heart"></i></a>
                    @endif

                    <span id="like_value">{{$property->likes}}</span>{{ __('messages.likes') }}
                </li>
                <li><i class="far fa-user"></i>{{$property->views}} {{ __('messages.views') }}</li>
            </ul>

            {!!$property->description_en!!}
        </div>
            </div>
</div>




<div class="location-section section section-padding-bottom">
    <div class="container">
        <div class="row align-items-lg-center">
            <div class="col-xl-12 col-md-12" style="display:none">
                <ul id="mapsvg-menu-regions"></ul>
            </div>

            <div class="col-xl-6 col-md-12">
                <h6 class="title">Map</h6>
                <div id="mapsvg" style="border-radius: 20px;"></div>
            </div>




            <div class="col-xl-6 col-md-12">

                <div class="row" style="margin:0em">


                    <div class="col-12 scroll tableFixHead">


                        <table class="lp-list-table table table_100">
                            <thead>
                                <tr>
                                    <th>{{ __('messages.plot_no') }}</th>
                                    <th>{{ __('messages.plot_details') }}</th>
                                    <th>{{ __('messages.full_price') }}</th>
                                    <th>{{ __('messages.buy') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($property->propertyplots as $plot)
                                <tr>
                                    <td>
                                        @if($plot->status_description=='available')
                                        <a
                                            href="/checkout/{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}/{{ urlencode(base64_encode( (($plot->id*$sort_no)/$end_no) )) }}">{{$plot->plotnumber}}</a>
                                        @else
                                        {{$plot->plotnumber}}
                                        @endif
                                    </td>

                                    <td class="column-quiz column-quiz-1308">
                                        {{ __('messages.area_size') }} : {{number_format($plot->area_size)}}sqm <br />
                                        {{ __('messages.land_use') }} : {{$plot->landuse}}
                                    </td>
                                    <td>{{number_format($plot->fullprice)}}</td>
                                    @if($plot->status_description=='available')
                                    <td><a href="/checkout/ownerdetails/{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}/{{ urlencode(base64_encode( (($plot->id*$sort_no)/$end_no) )) }}"
                                            class="btn btn-info" style="height:24px">{{ __('messages.buy') }}</a></td>
                                    @else
                                    <td><button class="btn btn-light" style="height:24px" disabled>{{
                                            __('messages.sold') }}</button></td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

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

@if(!is_null($property->google_map))
<div class="reviews-section section" style="padding-top: 24px;padding-bottom: 42px;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h6 class="title">Map To {{$property->name}}</h6>
                <div id="map" style="border-radius: 20px;"></div>

            </div>
        </div>
    </div>
</div>
@endif


<div class="reviews-section section" style="padding-bottom: 42px;margin-top:2em">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h6 class="title">{{ __('messages.terms_n_conditions') }}</h6>
                @if($locale=='en')
                {!!$property->terms_and_condition_english!!}
                @else
                {!!$property->terms_and_condition_swahili!!}
                @endif

            </div>
            <div class="col-lg-6">
                <h6 class="title">Media</h6>
                @php



                if(!is_null($property->video_source))
                {
                $url = $property->video_source;

                $shortUrlRegex = '/youtu.be\/([a-zA-Z0-9_]+)\??/i';
                $longUrlRegex = '/youtube.com\/((?:embed)|(?:watch))((?:\?v\=)|(?:\/))(\w+)/i';

                if (preg_match($longUrlRegex, $url, $matches)) {
                $youtube_id = $matches[count($matches) - 1];
                }

                if (preg_match($shortUrlRegex, $url, $matches)) {
                $youtube_id = $matches[count($matches) - 1];
                }

                $embeded_url = 'https://www.youtube.com/embed/' . $youtube_id ;
                }

                else{$embeded_url='none';}


                @endphp

                @if($embeded_url=='none')

                @else
                <iframe style="height:144px;width:256px" src="{{$embeded_url}}" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
                @endif

                @if(count($property->propertyimage)>0)


                <div class="portfolio-item row">
                    @foreach($property->propertyimage as $image)
                    <div class="item col-lg-3 col-md-4 col-6 col-sm">
                        <a href="{{$baseurl}}/{{$image->imagepath}}" class="fancylight popup-btn"
                            data-fancybox-group="light">
                            <img class="img-fluid" src="{{$baseurl}}/{{$image->imagepath}}" alt="">
                        </a>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>


<!-- Course Details Section Start -->
<div class="section">
    <div class="container">
        <div class="row max-mb-n50">

            <div class="col-lg-12 col-12 order-lg-1 max-mb-50">
                <!-- Course Details Wrapper Start -->
                <div class="course-details-wrapper">
                    <div class="course-nav-tab">
                        <ul class="nav">

                            <li><a class="active" data-toggle="tab" href="#reviews">{{ __('messages.reviews') }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">

                        <div id="reviews" class="tab-pane fade show active">
                            <div class="course-reviews">

                                <div class="course-reviews-area">
                                    <ul class="course-reviews-list">
                                        @foreach($property->property_reviews as $review)
                                        <li class="review">
                                            <div class="review-container">

                                                <div class="review-content" style="margin-left:0px">
                                                    <h4 class="title">Username</h4>

                                                    <div class="review-text">{{$review->review}}
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        @endforeach


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



                    </div>
                </div>
                <!-- Course Details Wrapper End -->
            </div>

        </div>
    </div>
</div>
<!-- Course Details Section End -->




@endsection




@push('scripts')

@if($property->id=='22')

<script type="text/javascript">
    jQuery(document).ready(function(){
jQuery("#mapsvg").mapSvg({width: 210,height: 210,lockAspectRatio: false,colors: {baseDefault: "#000000",background: "#eeeeee",selected: 40,hover: 20,directory: "#fafafa",status: {},stroke: "#fff",base: "#006778"},regions: {'polygon15': {id: "polygon15",'id_no_spaces': "polygon15",tooltip: "sold",data: {}},'polygon18': {id: "polygon18",'id_no_spaces': "polygon18",tooltip: "sold",data: {fruit: "apple", veg: "cucumber"}},'polygon27': {id: "polygon27",'id_no_spaces': "polygon27",tooltip: "sold",data: {},disabled: false},'polygon102': {id: "polygon102",'id_no_spaces': "polygon102",tooltip: "A = 200SQM\nPOLICE POST"},'polygon21': {id: "polygon21",'id_no_spaces': "polygon21",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon24': {id: "polygon24",'id_no_spaces': "polygon24",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon30': {id: "polygon30",'id_no_spaces': "polygon30",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon33': {id: "polygon33",'id_no_spaces': "polygon33",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon36': {id: "polygon36",'id_no_spaces': "polygon36",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon39': {id: "polygon39",'id_no_spaces': "polygon39",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon42': {id: "polygon42",'id_no_spaces': "polygon42",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon45': {id: "polygon45",'id_no_spaces': "polygon45",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon48': {id: "polygon48",'id_no_spaces': "polygon48",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon51': {id: "polygon51",'id_no_spaces': "polygon51",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon54': {id: "polygon54",'id_no_spaces': "polygon54",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon57': {id: "polygon57",'id_no_spaces': "polygon57",tooltip: "300 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon60': {id: "polygon60",'id_no_spaces': "polygon60",tooltip: "200 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon63': {id: "polygon63",'id_no_spaces': "polygon63",tooltip: "100 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon66': {id: "polygon66",'id_no_spaces': "polygon66",tooltip: "300 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon69': {id: "polygon69",'id_no_spaces': "polygon69",tooltip: "250 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon72': {id: "polygon72",'id_no_spaces': "polygon72",tooltip: "200 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon75': {id: "polygon75",'id_no_spaces': "polygon75",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon78': {id: "polygon78",'id_no_spaces': "polygon78",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon81': {id: "polygon81",'id_no_spaces': "polygon81",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon84': {id: "polygon84",'id_no_spaces': "polygon84",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon87': {id: "polygon87",'id_no_spaces': "polygon87",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon90': {id: "polygon90",'id_no_spaces': "polygon90",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon93': {id: "polygon93",'id_no_spaces': "polygon93",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon96': {id: "polygon96",'id_no_spaces': "polygon96",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon99': {id: "polygon99",'id_no_spaces': "polygon99",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}}},viewBox: [-43.5,0,297,297],zoom: {on: true,limit: [0,10],delta: 2,buttons: {on: true,location: "right"},mousewheel: true},scroll: {on: true,limit: false,background: false,spacebar: false},gauge: {on: false,labels: {low: "low",high: "high"},colors: {lowRGB: {r: 85,g: 0,b: 0,a: 1},highRGB: {r: 238,g: 0,b: 0,a: 1},low: "#550000",high: "#ee0000",diffRGB: {r: 153,g: 0,b: 0,a: 0}},min: 0,max: false},menu: {on: true,containerId: "mapsvg-menu-regions",
template: function(region
        

) {
        if(region.id=='1067')
        {
            region.fill="#006778";
             region.href = '';
           region.tooltip='<h5>Petrol Station</h5>';
            region.popover = '<h5> Pertrol Station </h5>';

           return '<li><a href="#' + region.id + '">' + (region.title||region.id) + '</a></li>';
        }
        
        if(region.id=='polygon636')
        {
           
            region.fill="#006778";
             region.href = '';
           region.tooltip='<h5> Open Space </h5>';
            region.popover = '<h5> Open Space </h5>';
            return '<li><a href="#' + region.id + '">' + (region.title||region.id) + '</a></li>';
        }
        
        $project_id = "{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}";
        $no_plots = '{{$no_of_plots}}';
        $plot_idd='0';
        $amt='0';
        $p_id='0';
       
        
        if($no_plots>0)
        {
            
            var plot_array = @json($property->propertyplots);
            //$a = Math.floor(Math.random() * $no_plots);
            
             //var obj = plot_array[$a];
        var obj = plot_array.find(item => item.plotnumber === region.id);
        
        
        var amount = obj.fullprice;
        var amount_install = obj.installment;
             
        $p_id = obj.id;
        $plot_idd = "{{urlencode(base64_encode( (($p_id*$sort_no)/$end_no) ))}}";
         $areasize= obj.area_size;
         $landuse= obj.landuse;
         $property_numb= "Plot No."+obj.plotnumber;
         $amt = amount.toLocaleString();
         $amt_install = amount_install.toLocaleString();
         $stat = obj.status_description;
         
         region.fill="#006778";

         $buy_button = '<a href="/checkout/ownerdetails/'+$project_id+'/'+$plot_idd+'"'+ 'class="btn btn-info" style="height:24px">' 
              + "{{ __('messages.buy') }}"
              + '</a>';
        $book_button = '<a href="/bookvisit/{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}"'+ 'class="btn btn-warning" style="height:24px">' + "Book" + "</a>";

        $para = '<p style=" margin-bottom:2px;font-family:'+"'Gilroy'; "+'font-size: 15px; font-weight: 400; font-style: normal; line-height: 1.74;">';
         
         if($stat=='available'||$stat=='Available')
         {
             region.fill="#006778";
             region.href = '';
            region.tooltip = $property_numb+'<br/>'+'A= '+$areasize.toLocaleString()+'sqm'+'<br/>'+"{{ __('messages.price') }}= TZS "+$amt+'<br/>'+"{{ __('messages.land_use') }} : "+$landuse;
            region.popover = '<h5>'+$property_numb+'</h5>'+$para+'A= '+$areasize.toLocaleString()+'sqm </p>'+$para+"{{ __('messages.full_price') }}= TZS "+$amt+'</p>'+$para+"{{ __('messages.install_price') }}= TZS "+$amt_install+'</p>'+$para+"{{ __('messages.land_use') }} : "+$landuse+'</p>'
            +'<div>'+$buy_button + $book_button +'</div>';
             
         }
         else
         {
            $val = '<button class="btn btn-light" style="height:24px" disabled>' 
              + "{{ __('messages.sold') }}"
              + '</button>';
              region.setFill("rgba(228,209,185,1)");
              region.tooltip = "{{ __('messages.sold') }}";
              region.popover = '<h5>'+$property_numb+'</h5>'+ $para +'A= '+$areasize.toLocaleString()+'sqm </p>'+$para +"{{ __('messages.price') }}= TZS "+$amt+'</p>'+$para+" {{ __('messages.land_use') }} : "+$landuse+'</p>'+$val;
              region.href = '';
         }
         
        region.title = $property_numb;
        //region.link = 'https://property.testing.co.tz/checkout/'+$project_id+'/'+$plot_idd;
       // region.href = 'https://property.testing.co.tz/checkout/'+$project_id+'/'+$plot_idd;
        //region.tooltip = $property_numb+'<br/>'+'A= '+$areasize.toLocaleString()+'sqm'+'<br/>'+'Price= TZS '+$amt+'/sqm'+'<br/>'+'Landuse : '+$landuse;
            
        }
       
         
          $val = '<a href="/checkout/'+$project_id+'/'+$plot_idd+'"'+ 'class="btn btn-info" style="height:24px">' 
              + "{{ __('messages.buy') }}"
              + '</a>';
          if(region.tooltip == 'sold')
          {$val = '<button class="btn btn-light" style="height:24px" disabled>' 
              + "{{ __('messages.sold') }}"
              + '</button>';}
              
            return '<tr>'+'<td>'+
        '<a href="JavaScript:Void(0);">' + (region.title||region.id) + '</a></td>' + 
        '<td class="column-quiz column-quiz-1308">' + $amt + '</td>' +
        '<td>' + region.tooltip + '</td>' +
        '<td>' + $val + '</td>' + '</tr>'
            
            
        
        

    }},source: "/iamap/mapsvg/maps/user-uploads/royal_palm_map.svg",title: "Royal_palm_map",responsive: true});
    });
</script>


@else

<script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery("#mapsvg").mapSvg({width: 210,height: 210,lockAspectRatio: false,colors: {baseDefault: "#000000",background: "#eeeeee",selected: 40,hover: 20,directory: "#fafafa",status: {},stroke: "#fff",base: "#006778"},regions: {'polygon15': {id: "polygon15",'id_no_spaces': "polygon15",tooltip: "sold",data: {}},'polygon18': {id: "polygon18",'id_no_spaces': "polygon18",tooltip: "sold",data: {fruit: "apple", veg: "cucumber"}},'polygon27': {id: "polygon27",'id_no_spaces': "polygon27",tooltip: "sold",data: {},disabled: false},'polygon102': {id: "polygon102",'id_no_spaces': "polygon102",tooltip: "A = 200SQM\nPOLICE POST"},'polygon21': {id: "polygon21",'id_no_spaces': "polygon21",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon24': {id: "polygon24",'id_no_spaces': "polygon24",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon30': {id: "polygon30",'id_no_spaces': "polygon30",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon33': {id: "polygon33",'id_no_spaces': "polygon33",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon36': {id: "polygon36",'id_no_spaces': "polygon36",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon39': {id: "polygon39",'id_no_spaces': "polygon39",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon42': {id: "polygon42",'id_no_spaces': "polygon42",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon45': {id: "polygon45",'id_no_spaces': "polygon45",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon48': {id: "polygon48",'id_no_spaces': "polygon48",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon51': {id: "polygon51",'id_no_spaces': "polygon51",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon54': {id: "polygon54",'id_no_spaces': "polygon54",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon57': {id: "polygon57",'id_no_spaces': "polygon57",tooltip: "300 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon60': {id: "polygon60",'id_no_spaces': "polygon60",tooltip: "200 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon63': {id: "polygon63",'id_no_spaces': "polygon63",tooltip: "100 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon66': {id: "polygon66",'id_no_spaces': "polygon66",tooltip: "300 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon69': {id: "polygon69",'id_no_spaces': "polygon69",tooltip: "250 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon72': {id: "polygon72",'id_no_spaces': "polygon72",tooltip: "200 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon75': {id: "polygon75",'id_no_spaces': "polygon75",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon78': {id: "polygon78",'id_no_spaces': "polygon78",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon81': {id: "polygon81",'id_no_spaces': "polygon81",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon84': {id: "polygon84",'id_no_spaces': "polygon84",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon87': {id: "polygon87",'id_no_spaces': "polygon87",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon90': {id: "polygon90",'id_no_spaces': "polygon90",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon93': {id: "polygon93",'id_no_spaces': "polygon93",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon96': {id: "polygon96",'id_no_spaces': "polygon96",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}},'polygon99': {id: "polygon99",'id_no_spaces': "polygon99",tooltip: "400 SQM",href: "https://property.testing.co.tz/checkout",data: {}}},viewBox: [-43.5,0,297,297],zoom: {on: true,limit: [0,10],delta: 2,buttons: {on: true,location: "right"},mousewheel: true},scroll: {on: true,limit: false,background: false,spacebar: false},gauge: {on: false,labels: {low: "low",high: "high"},colors: {lowRGB: {r: 85,g: 0,b: 0,a: 1},highRGB: {r: 238,g: 0,b: 0,a: 1},low: "#550000",high: "#ee0000",diffRGB: {r: 153,g: 0,b: 0,a: 0}},min: 0,max: false},menu: {on: true,containerId: "mapsvg-menu-regions",template: function(region)   
    
    {
        
        
        $project_id = "{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}";
        $no_plots = '{{$no_of_plots}}';
        $plot_idd='0';
        $amt='0';
        $p__id = '0';
       
        
        if($no_plots>0)
        {
            
            var plot_array = @json($property->propertyplots);
            $a = Math.floor(Math.random() * $no_plots);
            
             var obj = plot_array[$a];

        var amount = obj.fullprice;
        var amount_install = obj.installment;
             
        $p__id = obj.id;
        $plot_idd = obj.id;
         $areasize= obj.area_size;
         $landuse= obj.landuse;
         $property_numb= "Plot No."+obj.plotnumber;
         $amt = amount.toLocaleString();
         $amt_install = amount_install.toLocaleString();
         $stat = obj.status_description;
         region.fill="#006778";

         $buy_button = '<a href="/checkout/ownerdetails/'+$project_id+'/'+"{{urlencode(base64_encode( (($plot_idd*$sort_no)/$end_no) ))}}"+'"'+ 'class="btn btn-info" style="height:24px;margin-right:0.5em">' 
              + "{{ __('messages.buy') }}"
              + '</a>';
        $book_button = '<a href="/bookvisit/{{ urlencode(base64_encode( (($property->id*$sort_no)/$end_no) )) }}"'+ 'class="btn btn-warning" style="height:24px">' + "Book" + "</a>";

        $para = '<p style=" margin-bottom:4px;font-family:'+"'Gilroy'; "+'font-size: 16px; font-weight: 400; font-style: normal; line-height: 20px;">';
         
         if($stat=='available'||$stat=='Available')
         {
             region.fill="#006778";
             region.href = '';
            region.tooltip = $property_numb+'<br/>'+'A= '+$areasize.toLocaleString()+'sqm'+'<br/>'+"{{ __('messages.price') }}= TZS "+$amt+'<br/>'+"{{ __('messages.land_use') }} : "+$landuse;
            region.popover = '<h5>'+$property_numb+'</h5>'+$para+'A = '+$areasize.toLocaleString()+'sqm </p>'+$para +"{{ __('messages.full_price') }}= TZS "+$amt+'</p>'+$para +"{{ __('messages.install_price') }}= TZS "+$amt_install+'</p>'+$para+"{{ __('messages.land_use') }} : "+$landuse+'</p>'+'<div>'+$buy_button + $book_button +'</div>';
             
         }
         else
         {
            $val = '<button class="btn btn-light" style="height:24px" disabled>' 
              + "{{ __('messages.sold') }}"
              + '</button>';
              region.setFill("rgba(228,209,185,1)");
              region.tooltip = "{{ __('messages.sold') }}";
              region.popover = '<h5>'+$property_numb+'</h5>'+ $para +'A= '+$areasize.toLocaleString()+'sqm </p>'+$para +"{{ __('messages.full_price') }}= TZS "+$amt+'</p>'+$para +"{{ __('messages.install_price') }}= TZS "+$amt_install+'</p>'+$para+" {{ __('messages.land_use') }} : "+$landuse+'</p>'+$val;
              region.href = '';
         }
         
        region.title = $property_numb;
        //region.link = 'https://property.testing.co.tz/checkout/'+$project_id+'/'+$plot_idd;
       // region.href = 'https://property.testing.co.tz/checkout/'+$project_id+'/'+$plot_idd;
        //region.tooltip = $property_numb+'<br/>'+'A= '+$areasize.toLocaleString()+'sqm'+'<br/>'+'Price= TZS '+$amt+'/sqm'+'<br/>'+'Landuse : '+$landuse;
            
        }
       
         
          $val = '<a href="/checkout/'+$project_id+'/'+$plot_idd+'"'+ 'class="btn btn-info" style="height:24px">' 
              + "{{ __('messages.buy') }}"
              + '</a>';
          if(region.tooltip == 'sold')
          {$val = '<button class="btn btn-light" style="height:24px" disabled>' 
              + "{{ __('messages.sold') }}"
              + '</button>';}
              
            return '<tr>'+'<td>'+
        '<a href="JavaScript:Void(0);">' + (region.title||region.id) + '</a></td>' + 
        '<td class="column-quiz column-quiz-1308">' + $amt + '</td>' +
        '<td>' + region.tooltip + '</td>' +
        '<td>' + $val + '</td>' + '</tr>'
            
            
        
        

    }},source: "/iamap/mapsvg/maps/user-uploads/simbani_sample.svg",title: "Simbani_sample",responsive: true});
    });
</script>


@endif




<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ config('app.miliki_google_map_api')}}&callback=initMap">
</script>

<script type="text/javascript">
    $lat_var = {{$lat}};
    $long_var = {{$long}};
      // Initialize and add the map
    
function initMap() {
  // The location lat,long
  const uluru = { lat: $lat_var, lng: $long_var };
  // The map, centered at location
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 15,
    center: uluru,
  });
  // The marker, positioned at location
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;
</script>

@endpush