@extends('layout.main')
@section('title') @if( ! empty($title)) {{ $title }} | @endif @parent @endsection

@section('social-meta')
    <meta property="og:title" content="{{ $ad->title }}">
    <meta property="og:description" content="{{ substr(trim(preg_replace('/\s\s+/', ' ',strip_tags($ad->description) )),0,160) }}">
    @if($ad->media_img->first())
        <meta property="og:image" content="{{ media_url($ad->media_img->first(), true) }}">
        @foreach($ad->media_img as $img)
            
            <meta property="og:image" content="{{ media_url($img, true) }}">
        @endforeach
    @else
        <meta property="og:image" content="{{ asset('uploads/placeholder.png') }}">
    @endif
    <meta property="og:url" content="{{ route('single_ad', $ad->slug) }}">
    <meta name="twitter:card" content="summary_large_image">
    <!--  Non-Essential, But Recommended -->
    <meta name="og:site_name" content="{{ get_option('site_name') }}">
@endsection

@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/fotorama-4.6.4/fotorama.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/owl.carousel/assets/owl.carousel.css') }}">
<style>


/* The Modal (background) */
.modals {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
   /* Full width */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modals-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  max-width:600px;;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.closed {
  color: white;
  float: right;
  font-size: 28px;
  padding: 20px 10px ;
  font-weight: bold;
}

.closed:hover,
.closed:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modals-header {
  padding: 2px 16px;
  background-color:#6a148e;
    //font-size: 3.2vw;

  color: white;
}

.modals-body {padding: 20px 16px 10px 0px;}

.modals-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.jg {
  border: none;
  position: relative;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.jg caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

.jg tr {
  background-color: #fff;
  border:none;
  padding: .35em;
}

.jg th,
.jg td {
  padding: .625em;
  text-align: center;
}

.jg th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 2200px) {
  .jg {
    border: 0;
  }

  .jg caption {
    font-size: 1.3em;
  }
  
  .jg thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
.jg tr {

    display: block;
    margin-bottom: .625em;
  }
  
  .jg td {
    border-bottom: none;
    display: block;
    font-size: 1.0em;
    text-align: right;
  }
  
  .jg td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label)   ;
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
 .jg td:last-child {
    border-bottom: 0;
  }
}
.svg3 {
  position: absolute;
  right: -1.42em;
top: -0.22em;
}

.svg2 {
  position: absolute;
  left: -0.42em;
top: 0.72em;
}
.cover {
  position:  relative;
 
}
#modal-bt {
    background-color:#fc8d04;
    color: white;
    font-size:14px;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height:2.5;
}
#modal-bt:hover{
    background-color:white;
    color: #fc8d04;
    font-size:14px;
    font-weight: 800;
    letter-spacing: .2px;
    border: 1px solid #fc8d04;
    cursor: pointer;
    line-height:2.5;
}
#ShowPhoneWrap {
    color:#fc8d04;
}
</style>
@endsection

@section('main')

    <div class="modern-single-ad-top-description-wrap">

        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="modern-single-ad-breadcrumb">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('home') }}">@lang('app.home')</a></li>
                            @if($ad->category)
                                <li><a href="{{ route('listing', ['category' => $ad->category->id]) }}">  {{ $ad->category->category_name }} </a> </li>
                            @endif
                            <li>{{ $ad->title }}</li>
                        </ol><!-- breadcrumb -->
                        <h2 class="modern-single-ad-top-title">{{ $ad->title }}</h2>
                    </div>

                    @if($enable_monetize)
                        {!! get_option('monetize_code_below_ad_title') !!}
                    @endif

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

        <div class="container">
            <div class="row">
                <div class="modern-single-ad-top-description">

                    <div class="col-sm-7 col-xs-12">
                        @if ( ! $ad->is_published())
                            <div class="alert alert-warning"> <i class="fa fa-warning"></i> @lang('app.ad_not_published_warning')</div>
                        @endif

                        @if( ! empty($ad->video_url))
                            <?php
                            $video_url = $ad->video_url;
                            if (strpos($video_url, 'youtube') > 0) {
                                preg_match("/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $video_url, $matches);
                                if ( ! empty($matches[1])){
                                    echo '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'.$matches[1].'" frameborder="0" allowfullscreen></iframe></div>';
                                }

                            } elseif (strpos($video_url, 'vimeo') > 0) {
                                if (preg_match('%^https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)(?:[?]?.*)$%im', $video_url, $regs)) {
                                    if (!empty($regs[3])){
                                        echo '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://player.vimeo.com/video/'.$regs[3].'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
                                    }
                                }
                            }
                            ?>

                        @else

                            <div class="ads-gallery">
                                <div class="fotorama"  data-nav="thumbs" data-allowfullscreen="true" data-width="100%">
                                    @foreach($ad->media_img as $img)
                                        <img src="{{ media_url($img, true) }}" alt="{{ $ad->title }}">
                                    @endforeach
                                </div>
                            </div>

                        @endif


                    </div>

                    <div class="col-sm-5 col-xs-12">
                        <h2 class="ad-title"><a href="{{ route('single_ad', $ad->slug) }}">{{ $ad->title }}</a>  </h2>
                        <h2 class="modern-single-ad-price">@if($ad->currency_type == "kwacha") ZMK  @else USD @endif{{ $ad->price }}</h2>
                        @if($ad->sold == 1 && $ad->purpose == "sale")
                        <div class="modern-social-share-btn-group">
                            <h4 style="font-weight:900;color:red;font-size:xx-large">SOLD</h4>
                        </div>
                        @elseif($ad->sold == 1 && $ad->purpose == "rent")
                        <div class="modern-social-share-btn-group">
                            <h4 style="font-weight:900;color:red;font-size:xx-large">RENTED</h4>
                        </div>
                        @endif
                        <!--<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">-->
                        <!--    Check Currency-->
                        <!--</button>-->
                        <!--<div class="collapse" id="collapseExample">-->
                        <!--  <div class="card card-body">-->
                        <!--    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.-->
                        <!--  </div>-->
                        <!--</div>-->
                        <h3>@lang('app.general_info')</h3>
                        <p><strong><i class="fa fa-money"></i> @lang('app.price')</strong> @if($ad->currency_type == "kwacha") ZMK  @else USD @endif{{ number_format($ad->price, 2) }} </p>
                        
                        <p><strong><i class="fa fa-map-marker"></i>  @lang('app.location') </strong> {!! $ad->full_address() !!} </p>
                        <p><strong><i class="fas fa-check-circle"></i> @lang('app.condition')</strong> {{ $ad->ad_condition }} </p>

                        <div class="modern-social-share-btn-group">
                            <h4>@lang('app.share_this_ad')</h4>
                            <a href="javascript:;" class="btn btn-default shareEmbedded"  data-toggle="modal" data-target="#shareEmbedded"><i class="fa fa-code"></i> </a>
                            <a href="#" class="btn btn-default share s_facebook"><i class="fab fa-facebook-f"></i> </a>
                            <a href="#" class="btn btn-default share s_plus"><i class="fab fa-google-plus"></i> </a>
                            <a href="#" class="btn btn-default share s_twitter"><i class="fab fa-twitter"></i> </a>
                            <a href="#" class="btn btn-default share s_linkedin"><i class="fab fa-linkedin-in"></i> </a>
                        </div>
                        
                        @if($enable_monetize)
                            {!! get_option('monetize_code_below_general_info') !!}
                        @endif

                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

        </div>
    </div>


                    
    <div class="container">
        <div class="row">

            <div class="col-sm-8 col-xs-12">
                    <div class="ads-detail bg-white">

                    <div class="single-at-a-glance">

                        <ul class="list-group ">
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-building"></i> {{ ucfirst($ad->type) }} </li>
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-arrows-alt "></i> {{ $ad->square_unit_space.' '.$ad->unit_type }} </li>

                            @if($ad->beds)
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-bed"></i> {{ $ad->beds.' '.trans('app.bedrooms') }} </li>
                            @endif

                            @if($ad->attached_bath)
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-bath"></i> {{ $ad->attached_bath.' '.trans('app.attached_bath') }} </li>
                            @endif

                            @if($ad->common_bath)
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-shower"></i> {{ $ad->common_bath.' '.trans('app.common_bath') }} </li>
                            @endif

                            @if($ad->floor)
                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-building"></i> {{ $ad->floor.' '.trans('app.floor') }} </li>
                            @endif

                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-briefcase"></i> {{ ucfirst($ad->purpose) }} </li>

                            @if($ad->balcony)
                                <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-window-maximize"></i> {{ $ad->balcony.' '.trans('app.belcony') }} </li>
                            @endif
                            @if($ad->dining_space)
                                <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-utensils"></i> {{ trans('app.dining_space') }} </li>
                            @endif
                            @if($ad->living_room)
                                <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-tv"></i> {{ trans('app.living_room') }} </li>
                            @endif

                            @if($ad->price > 0)
                                <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> @if($ad->currency_type == "kwacha") ZMK  @else USD @endif {{ number_format($ad->price_per_unit, 2) .' '.trans('app.per').' '.$ad->unit_type }} </li>
                            @endif

                            <li class="list-group-item col-sm-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i>
                                 @if($ad->currency_type == "kwacha") ZMK  @else USD @endif{{ number_format($ad->price, 2) }} @if($ad->purpose == 'rent') @lang('app.per_month') @endif
                            </li>

                        </ul>
                        <div class="clearfix"></div>

                    </div>




                    <h4 class="ads-detail-title">@lang('app.description')</h4>
                    <p> {!! nl2br($ad->description) !!} </p>


                    @if($enable_monetize)
                        {!! get_option('monetize_code_below_ad_description') !!}
                    @endif
                </div>
              
                    <?php $amenities = unserialize($ad->amenities);  ?>
                    @if(is_array($amenities))
                    <div class="ads-detail bg-white">

                        <legend>@lang('app.indoor_amenities')</legend>

                        <div class="single-at-a-glance">
                            <ul class="list-group ">
                                @foreach($indore_ammenties as $in_ammenty)
                                    @if(array_key_exists($in_ammenty->id, $amenities))
                                        <li class="list-group-item col-sm-4 col-xs-6">
                                            <i class="fas fa-check-circle"></i> {{ $in_ammenty->category_name }} </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <legend>@lang('app.outdoor_amenities')</legend>
                        <div class="single-at-a-glance">
                            <ul class="list-group ">
                                @foreach($outdoor_ammenties as $out_ammenty)
                                    @if(array_key_exists($out_ammenty->id, $amenities))
                                        <li class="list-group-item col-sm-4 col-xs-6">
                                            <i class="fas fa-check-circle"></i> {{ $out_ammenty->category_name }} </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                    </div>
                @endif
                @php $ad_distances = unserialize($ad->distances)  @endphp
                    @if(is_array($ad_distances))
                        <div class="ads-detail bg-white">
    
                            <legend>@lang('app.distances')</legend>
    
                            <div class="single-at-a-glance">
                                <ul class="list-group ">
                                    @foreach($distances as $golbal_distance)
                                        @if(array_key_exists($golbal_distance->id, $ad_distances))
                                            @if($ad_distances[$golbal_distance['id']] > 0)
                                                <li class="list-group-item col-sm-4 col-xs-6">
                                                    <i class="fa fa-road"></i> {{ $golbal_distance->brand_name }} => {{ themeqx_distance_measure($ad_distances[$golbal_distance->id]) }} </li>
                                            @endif
                                        @endif
                                    @endforeach
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    @endif
                    <div class="ads-detail bg-white">

                    <legend>@lang('app.map')</legend>
                    <div id="dvMap" style="width: 100%; height: 400px; margin: 0px 0;"></div>

                    </div>
                    <?php
                        $stepOne = 1 + 0.005 ;//this is the rate + 1
                        $stepTwo = pow($stepOne, 240);
                        $stepThree = $stepTwo * 0.005;
                        $stepFour = $stepTwo -1;
                        $stepFive = $stepThree/$stepFour;
                        $mortgageAmount = round($ad->price * $stepFive);
                    ?>

                        <!--<div class="ads-detail bg-white">-->
                        <!--<legend><h3>Mortgage Payments</h3></legend>-->
                        <!--<div class="row">-->
                        <!--    <div class="col-md-6">-->
                        <!--        <div class="form-group">-->
                        <!--            <h4 class="display-text">Price</h4>-->
                        <!--            <input type="number" onchange="recalculateMortgage()" onkeyup="recalculateMortgage()" class="form-control"-->
                        <!--                id="principal" value="{{$ad->price}}">-->
                        <!--        </div>-->
                        <!--        <div class="form-group" style="margin-top:35px">-->
                        <!--            <h4 class="display-text">Interest Rate</h4>-->
                        <!--            <input type="number" onchange="recalculateMortgage()" onkeyup="recalculateMortgage()" class="form-control"-->
                        <!--                id="rate" min="0" max="100" value='0.5'>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--    <div class="col-md-6">-->
                        <!--        <div class="form-group">-->
                        <!--            <h4 class="display-text">Years</h4>-->
                        <!--            <input type="number" onchange="recalculateMortgage()" onkeyup="recalculateMortgage()" class="form-control"-->
                        <!--                id="years" min="1" max="20" value="20">-->
                        <!--        </div>-->
                        <!--        <div class="form-group" style="margin-top:35px">-->
                        <!--            <h4 class="display-text">Mortgage Amount</h4>-->
                        <!--            <h3 style="text-align: center;" class="expense-amount"> @if($ad->currency_type == "kwacha") ZMK  @else USD @endif <span class="mortgageamount">{{$mortgageAmount}}</span> Per Month-->
                        <!--            </h3>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        @if(Auth::user() && Auth::user()->user_type=='admin')
                        <div class="row" style="margin: 0px 2px;">
                            <legend>
                                <h3>Expenses</h3>
                            </legend>
                            <div class="expense-row">
                                <div class="expense-col">
                                    <i class="fas fa-home"></i>
                                    <h4 class="display-text">Mortgage</h4>
                                    <h3 class="mortgageamount expense-amount">{{$mortgageAmount}}</h3>
                                </div>
                                <div class="expense-col">
                                    <i class="fas fa-house-damage"></i>
                                    <h4 class="display-text">Insurance</h4>
                                    <h3 class="expense-amount">750</h3>
                                </div>
                                <div class="expense-col">
                                    <i class="fas fa-tint"></i>
                                    <h4 class="display-text">Water</h4>
                                    <h3 class="expense-amount">500</h3>
                                </div>
                                <div class="expense-col">
                                    <i class="fas fa-wifi"></i>
                                    <h4 class="display-text">Internet</h4>
                                    <h3 class="expense-amount">650</h3>
                                </div>
                                <div class="expense-col">
                                    <i class="fa fa-television"></i>
                                    <h4 class="display-text">Television</h4>
                                    <h3 class="expense-amount">900</h3>
                                </div>
                                <h4 style="text-align:center" class="display-text">Total Monthly Expenses </h4>
                                <h3 style="text-align:center" class="expense-amount">ZMK <span class="total-expenses">{{$mortgageAmount + 750 + 500 + 650 + 900}}</span></h3>
                            </div>
                            
                        </div>
                        @endif
                    </div>
                    <div class="col-sm-4 col-xs-12">
                        <div class="sidebar-widget">
        
                            <h3>@lang('app.seller_info')</h3>
                            <div class="sidebar-user-info">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <img src="{{ $ad->user->get_gravatar() }}" class="img-circle img-responsive" />
                                    </div>
                                    <div class="col-xs-9">
                                        <h5><a href = "{{route('listing').'?q='.$ad->user->name}}">{{ $ad->user->name }}</a></h5>
                                        <p class="text-muted"><i class="fa fa-map-marker"></i> {{ $ad->user->get_address()}}</p>
                                        @if($ad->user->zeia_badge == 1)
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <img src="{{asset('assets/img/ziealogo.png') }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <h5>ZIEA APPROVED</h5>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                @if($ad->agency)
                                <div class="col-xs-7">
                                    <a href="#">
                                        <h5>{{ $ad->agency->name}}</h5>
                                        <p class="text-muted center-left"><i class="fa fa-map-marker"></i>{{ $ad->agency->address }}</p>
                                    </a>
                                </div>
                                <div class="col-xs-5">
                                    <a href="#">
                                    <img src="{{ $ad->agency->image}}" class=" img-responsive" /> </a>
                                </div>
                                @endif
                            </div>
                    
                            <div class="sidebar-user-link">
                                <!--<h4 style="text-align:center;">{{ $ad->seller_phone }}</h4>-->
                                <!--<button class="btn btn-block" id="onClickShowPhone">-->
                                <!--    <strong> <span id="ShowPhoneWrap"></span> </strong> <br />-->
                                <!--    <span class="text-muted">@lang('app.click_to_show_phone_number')</span>-->
                                <!--</button>-->
                                
                                <!--<button class="btn btn-block" data-toggle="modal" data-target="#replyByEmail" id="modal-bt">-->
                                <!--    Contact Me!-->
                                <!--</button>-->
        
                                <ul class="ad-action-list" class="list-inline">
                                    <li><a href="tel:{{ $ad->seller_phone }}"><i class="fa fa-phone"></i> {{ $ad->seller_phone }}</li>
                                    <li><a href="{{ route('listing', ['user_id'=>$ad->user_id]) }}"><i class="fa fa-user"></i> @lang('app.more_ads_by_this_seller')</a></li>
                                    <li><a href="javascript:;" id="save_as_favorite" data-slug="{{ $ad->slug }}">
                                            @if( ! $ad->is_my_favorite())
                                                <i class="fas fa-star"></i> @lang('app.save_ad_as_favorite')
                                            @else
                                                <i class="fa fa-star"></i> @lang('app.remove_from_favorite')
                                            @endif
                                        </a></li>
                                    <!--<li><a href="#" data-toggle="modal" data-target="#reportAdModal"><i class="fa fa-ban"></i> @lang('app.report_this_ad')</a></li>-->
                                </ul>
                            </div>
                            @if(isset($other_agents))
                            <h3>Other Agents</h3>
                            @foreach($other_agents as $other_agent)
                            @php
                            $help_agent = App\User::find($other_agent->agent_id);
                            @endphp
                            <div class="sidebar-user-info" style="margin-bottom:20px;">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <img src="{{ $help_agent->get_gravatar() }}" class="img-circle img-responsive" />
                                    </div>
                                    <div class="col-xs-9">
                                        <h5><a href = "{{route('listing').'?q='.$help_agent->name}}">{{ $help_agent->name }}</a></h5>
                                        <p class="text-muted"><i class="fa fa-map-marker"></i> {{ $help_agent->address}}</p>
                                        @if($help_agent->zeia_badge == 1)
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <img src="{{asset('assets/img/ziealogo.png') }}">
                                            </div>
                                            <div class="col-sm-4">
                                                <h5>ZIEA APPROVED</h5>
                                            </div>
                                        </div>
                                        @endif
                                        <!--<button class="btn btn-block" id="onClickShowPhone">-->
                                        <!--    <strong> <span id="ShowPhoneWrap"></span> </strong> <br />-->
                                        <!--    <span class="text-muted">@lang('app.click_to_show_phone_number')</span>-->
                                        <!--</button>-->
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                        
                        <div class="sidebar-widget">
        
                            <h3>@lang('app.feature_agents')</h3>
                            @foreach($agents as $agent)
                                <div class="sidebar-feature-agents">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <a href="{{ route('listing', ['user_id'=>$agent->id]) }}">
                                                <img src="{{ $agent->get_gravatar() }}" class="img-circle img-responsive" /> </a>
                                        </div>
                                        <div class="col-xs-9">
                                            <a href="{{ route('listing', ['user_id'=>$agent->id]) }}">
                                                <h5>{{ $agent->name }}</h5>
                                                <p class="text-muted"><i class="fa fa-map-marker"></i> {{ $agent->get_address()}}</p>
                                                <p class="text-muted"><i class="fas fa-building"></i> {{ $agent->ads->count() }} @lang('app.estates')
                                                    @if($agent->phone), <i class="fa fa-phone"></i> {{ $agent->phone }} @endif
                                                </p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
        
                    </div>

            </div>

            
        </div>
    </div>



    @if($related_ads->count() > 0 && get_option('enable_related_ads') == 1)
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    @if($enable_monetize)
                        {!! get_option('monetize_code_below_ad_description') !!}
                    @endif
                    <div class="carousel-header">
                        <h4><a href="{{ route('listing') }}">
                                @lang('app.more_ads_from_this_agent')
                            </a>
                        </h4>
                    </div>
                    <hr />
                    <div class="themeqx_new_regular_ads_wrap themeqx-carousel-ads">
                        @foreach($related_ads as $rad)
                            <div>
                                <div itemscope itemtype="http://schema.org/Product" class="ads-item-thumbnail ad-box-{{$rad->price_plan}}">
                                    <div class="ads-thumbnail">
                                        <a href="{{ route('single_ad', $rad->slug) }}">
                                            <img itemprop="image"  src="{{ media_url($rad->feature_img) }}" class="img-responsive" alt="{{ $rad->title }}">
                                             <span class="modern-img-indicator">
                                                @if(! empty($rad->video_url))
                                                     <i class="fa fa-file-video-o"></i>
                                                 @else
                                                     <i class="fa fa-file-image-o"> {{ $rad->media_img->count() }}</i>
                                                 @endif
                                            </span>
                                        </a>
                                    </div>
                                    <div class="caption">
                                        <h4><a href="{{ route('single_ad', $rad->slug) }}" title="{{ $rad->title }}"><span itemprop="name">{{ str_limit($rad->title, 40) }} </span></a></h4>
                                        @if($rad->category)
                                            <a class="price text-muted" href="{{ route('listing', ['category' => $rad->category->id]) }}"> <i class="fa fa-folder-o"></i> {{ $rad->category->category_name }} </a>
                                        @endif

                                        @if($rad->city)
                                            <a class="location text-muted" href="{{ route('listing', ['city' => $rad->city->id]) }}"> <i class="fa fa-location-arrow"></i> {{ $rad->city->city_name }} </a>
                                        @endif
                                        <p class="date-posted text-muted"> <i class="fa fa-clock-o"></i> {{ $rad->created_at->diffForHumans() }}</p>
                                        <p class="price"> <span itemprop="price" content="{{$rad->price}}"> {{ themeqx_price_ng($rad) }} </span></p>
                                        <link itemprop="availability" href="http://schema.org/InStock" />
                                    </div>

                                    @if($rad->price_plan == 'premium')
                                        <div class="ribbon-wrapper-green"><div class="ribbon-green">{{ ucfirst($rad->price_plan) }}</div></div>
                                    @endif
                                    @if($rad->mark_ad_urgent == '1')
                                        <div class="ribbon-wrapper-red"><div class="ribbon-red">@lang('app.urgent')</div></div>
                                    @endif


                                </div>
                            </div>
                        @endforeach
                    </div> <!-- themeqx_new_premium_ads_wrap -->
                </div>

            </div>
        </div>
    @endif

    <div class="modern-post-ad-call-to-cation">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>@lang('app.want_something_sell_quickly')</h1>
                    <p>@lang('app.post_your_ad_quicly')</p>
                    <a href="{{route('create_ad')}}" class="btn btn-info btn-lg">@lang('app.post_an_ad')</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="reportAdModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">@lang('app.report_ad_title')</h4>
                </div>
                <div class="modal-body">

                    <p>@lang('app.report_ad_description')</p>

                    <form id="report-ad">

                        <div class="form-group">
                            <label class="control-label">@lang('app.reason'):</label>
                            <select class="form-control" name="reason">
                                <option value="">@lang('app.select_a_reason')</option>
                                <option value="unavailable">@lang('app.item_sold_unavailable')</option>
                                <option value="fraud">@lang('app.fraud')</option>
                                <option value="duplicate">@lang('app.duplicate')</option>
                                <option value="spam">@lang('app.spam')</option>
                                <option value="wrong_category">@lang('app.wrong_category')</option>
                                <option value="offensive">@lang('app.offensive')</option>
                                <option value="other">@lang('app.other')</option>
                            </select>

                            <div id="reason_info"></div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="control-label">@lang('app.email'):</label>
                            <input type="text" class="form-control" id="email" name="email">
                            <div id="email_info"></div>

                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">@lang('app.message'):</label>
                            <textarea class="form-control" id="message" name="message"></textarea>
                            <div id="message_info"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('app.close')</button>
                    <button type="button" class="btn btn-primary" id="report_ad">
                        @lang('app.report_ad')
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="replyByEmail" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>

                {!! Form::open(['id' => 'replyByEmailForm']) !!}
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name" class="control-label">@lang('app.name'):</label>
                        <input type="text" class="form-control" id="name" name="name" data-validation="required">
                    </div>

                    <div class="form-group">
                        <label for="email" class="control-label">@lang('app.email'):</label>
                        <input type="text" class="form-control" id="email" name="email" required>
                    </div>

                    <div class="form-group">
                        <label for="phone_number" class="control-label">@lang('app.phone_number'):</label>
                        <input type="text" class="form-control" id="phone_number" name="phone_number" required>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">@lang('app.message'):</label>
                        <textarea class="form-control" id="message" name="message"  required></textarea>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="agent_id" value="{!! $ad->user->id !!}" required></textarea>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="ad_slug" value="{!! $ad->slug !!}" required></textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="hidden" name="ad_id" value="{{ $ad->id }}" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('app.close')</button>
                    <button type="submit" class="btn btn-primary" id="reply_by_email_btn">@lang('app.send_email')</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="shareEmbedded" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">@lang('app.embedded_preview')</h4>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="embedded_width" class="control-label">@lang('app.embedded_width'):</label>
                                <input type="number" class="form-control" id="embedded_width" name="embedded_width" value="300" placeholder="@lang('app.embedded_width')">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label for="embedded_height" class="control-label">@lang('app.embedded_height'):</label>
                            <input type="number" class="form-control" id="embedded_height" name="embedded_height" value="460" placeholder="@lang('app.embedded_width')">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message-text" class="control-label">@lang('app.embedded_code'):</label>
                        <textarea class="form-control" readonly id="embedded_code">{{'<iframe src="'.route('embedded_ad', $ad->slug).'" style="border:0;width:300px;height:460px;"></iframe>'}}</textarea>
                    </div>

                    <div class="form-group">
                        <iframe src="{{ route('embedded_ad', $ad->slug) }}" style="border:0;width:300px;height:460px;"></iframe>
                    </div>
                </div>

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

</div>



<!-- The modals -->


</div>
@endsection

@section('page-js')

    <script src="https://maps.googleapis.com/maps/api/js?key={{get_option('google_map_api_key')}}&libraries=places&callback=initMap" async defer></script>
    <script type="text/javascript">
        function initMap() {
            var myLatLng = {lat: {{$ad->latitude}}, lng: {{$ad->longitude}} };

            var map = new google.maps.Map(document.getElementById('dvMap'), {
                center: myLatLng,
                zoom: 15
            });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: '{{$ad->title}}'
            });
            marker.setMap(map);
        }

    </script>

    <script src="{{ asset('assets/plugins/fotorama-4.6.4/fotorama.js') }}"></script>
    <script src="{{ asset('assets/plugins/SocialShare/SocialShare.js') }}"></script>
    <script src="{{ asset('assets/plugins/owl.carousel/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/form-validator/form-validator.min.js') }}"></script>

    <script>
        $('.share').ShareLink({
            title: '{{ $ad->title }}', // title for share message
            text: '{{ substr(trim(preg_replace('/\s\s+/', ' ',strip_tags($ad->description) )),0,160) }}', // text for share message

            @if($ad->media_img->first())
            image: '{{ media_url($ad->media_img->first(), true) }}', // optional image for share message (not for all networks)
            @else
            image: '{{ asset('uploads/placeholder.png') }}', // optional image for share message (not for all networks)
            @endif
            url: '{{ route('single_ad', $ad->slug) }}', // link on shared page
            class_prefix: 's_', // optional class prefix for share elements (buttons or links or everything), default: 's_'
            width: 640, // optional popup initial width
            height: 480 // optional popup initial height
        })
    </script>
    <script>
        $.validate();
    </script>
    <script>
        $(document).ready(function(){
            $(".themeqx_new_regular_ads_wrap").owlCarousel({
                loop:true,
                margin:10,
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    600:{
                        items:3,
                        nav:false
                    },
                    1000:{
                        items:4,
                        nav:true,
                        loop:false
                    }
                },
                navText : ['<i class="fas fa-arrow-circle-left dir-btn"></i>','<i class="fas fa-arrow-circle-right dir-btn"></i>']
            });
        });
    </script>
    <script>
        $(function(){
            $('#onClickShowPhone').click(function(){
                $('#ShowPhoneWrap').html('<i class="fa fa-phone"></i> {{ $ad->seller_phone }}');
            });

            $('#save_as_favorite').click(function(){
                var selector = $(this);
                var slug = selector.data('slug');

                $.ajax({
                    type : 'POST',
                    url : '{{ route('save_ad_as_favorite') }}',
                    data : { slug : slug, action: 'add',  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        if (data.status == 1){
                            selector.html(data.msg);
                        }else {
                            if (data.redirect_url){
                                location.href= data.redirect_url;
                            }
                        }
                    }
                });
            });

            $('button#report_ad').click(function(){
                var reason = $('[name="reason"]').val();
                var email = $('[name="email"]').val();
                var message = $('[name="message"]').val();
                var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                var error = 0;
                if(reason.length < 1){
                    $('#reason_info').html('<p class="text-danger">Reason required</p>');
                    error++;
                }else {
                    $('#reason_info').html('');
                }
                if(email.length < 1){
                    $('#email_info').html('<p class="text-danger">Email required</p>');
                    error++;
                }else {
                    if ( ! regex.test(email)){
                        $('#email_info').html('<p class="text-danger">Valid email required</p>');
                        error++;
                    }else {
                        $('#email_info').html('');
                    }
                }
                if(message.length < 1){
                    $('#message_info').html('<p class="text-danger">Message required</p>');
                    error++;
                }else {
                    $('#message_info').html('');
                }

                if (error < 1){
                    $('#loadingOverlay').show();
                    $.ajax({
                        type : 'POST',
                        url : '{{ route('report_ads_pos') }}',
                        data : { reason : reason, email: email,message:message, slug:'{{ $ad->slug }}',  _token : '{{ csrf_token() }}' },
                        success : function (data) {
                            if (data.status == 1){
                                toastr.success(data.msg, '@lang('app.success')', toastr_options);
                            }else {
                                toastr.error(data.msg, '@lang('app.error')', toastr_options);
                            }
                            $('#reportAdModal').modal('hide');
                            $('#loadingOverlay').hide();
                        }
                    });
                }
            });

            $('#replyByEmailForm').submit(function(e){
                e.preventDefault();
                var reply_email_form_data = $(this).serialize();
                
                $('#loadingOverlay').show();
                $.ajax({
                    method : 'POST',
                    url : '{{ route('reply_by_email_post') }}',
                    data : reply_email_form_data,
                    success : function (data) {
                        if (data.status == 1){
                            toastr.success(data.msg, '@lang('app.success')', toastr_options);
                            console.log(reply_email_form_data);
                        }else {
                            toastr.error(data.msg, '@lang('app.error')', toastr_options);
                        }
                        $('#replyByEmail').modal('hide');
                        $('#loadingOverlay').hide();
                    }
                });
            });

            $(document).on('change past keyup', '#embedded_width', function(){
                var width = $(this).val();
                var height = $('#embedded_height').val();
                $('iframe').css('width', width+'px');

                var iframe_code = '<iframe src="http://localhost/real-estate/source/embedded/2-beds-nice-apertment-in-ny-united-states" style="border:0;width:'+width+'px;height:'+height+'px;"></iframe> ';

                $('#embedded_code').val(iframe_code);
            });
            $(document).on('change past keyup', '#embedded_height', function(){
                var height = $(this).val();
                var width = $('#embedded_width').val();
                $('iframe').css('height', height+'px');

                var iframe_code = '<iframe src="http://localhost/real-estate/source/embedded/2-beds-nice-apertment-in-ny-united-states" style="border:0;width:'+width+'px;height:'+height+'px;"></iframe> ';

                $('#embedded_code').val(iframe_code);
            });

        });
    </script>
<script>

var modal = document.getElementById('mymodals');

var btn = document.getElementById("Mortgage-cover");

var span = document.getElementsByClassName("closed")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

var modal1 = document.getElementById('mymodals1');

var btn1 = document.getElementById("Council-cover");

var span1 = document.getElementsByClassName("closed")[1];

btn1.onclick = function() {
  modal1.style.display = "block";
}

span1.onclick = function() {
  modal1.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}

var modal2 = document.getElementById('mymodals2');

var btn2 = document.getElementById("Water-cover");

var span2 = document.getElementsByClassName("closed")[2];

btn2.onclick = function() {
  modal2.style.display = "block";
}

span2.onclick = function() {
  modal2.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal2) {
    modal2.style.display = "none";
  }
}

var modal3 = document.getElementById('mymodals3');

var btn3 = document.getElementById("Energy-cover");

var span3 = document.getElementsByClassName("closed")[3];

btn3.onclick = function() {
  modal3.style.display = "block";
}

span3.onclick = function() {
  modal3.style.display = "none";
}


window.onclick = function(event) {
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
}

var modal4 = document.getElementById('mymodals4');

var btn4 = document.getElementById("insurance-cover");

var span4 = document.getElementsByClassName("closed")[4];

btn4.onclick = function() {
  modal4.style.display = "block";
}

span4.onclick = function() {
  modal4.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal4) {
    modal4.style.display = "none";
  }
}
</script>
<script>
    function recalculateMortgage(){
        var mortgageRate= $("#rate").val();
        var Principal = $("#principal").val();
        var years = $("#years").val();
        mortgageRate = mortgageRate/100
        years *= 12;
        
        var stepOne = 1 + mortgageRate ;//this is the rate + 1
        var stepTwo = Math.pow(stepOne, years);        
        var stepThree = stepTwo * mortgageRate;        
        var stepFour = stepTwo -1;        
        var stepFive = stepThree/stepFour;
        
        var mortgageAmount = Math.round(Principal * stepFive);
        if(mortgageRate === 0){
            $('.mortgageamount').text("Calculating...");
            $('.total-expenses').text("Calculating...");
        } else{
            $('.mortgageamount').text(mortgageAmount);
            $('.total-expenses').text(mortgageAmount + 750 + 500 + 650 + 900);
        }
    }
</script>
<script>
var price = document.getElementById('Price');
var price1 = document.getElementById('Price1');
var Interest = document.getElementById('Interest');
var Interest1 = document.getElementById('Interest1');
var Deposit1 = document.getElementById('Deposit1');
var Deposit = document.getElementById('Deposit');
var sel1 = document.getElementById('sel1');
var sel11 = document.getElementById('sel11');
var fordeposit = document.getElementById('fordeposit');
var fordeposit1 = document.getElementById('fordeposit1');
var donut = document.getElementById('donut');
var forprice= document.getElementById('payment');
var forprice1 = document.getElementById('payment1');
var Water = document.getElementById('Water');
var Energy = document.getElementById('Energy');
var insurance = document.getElementById('insurance');
var Council = document.getElementById('Council');
var lu = document.getElementById('lu');
var Mortgage = document.getElementById('Mortgage');
Deposit.onchange = handleChange;
price.onchange = handleChange;
Interest.onchange = handleChange;
sel1.onchange = handleChange;
price.onkeyup = handleChange;
Interest.onkeyup = handleChange;
Deposit.onkeyup = handleChange;
Deposit1.onchange = handleChanges;
price1.onchange = handleChanges;
Interest1.onchange = handleChanges;
sel11.onchange = handleChanges;
price1.onkeyup = handleChanges;
Interest1.onkeyup = handleChanges;
Deposit1.onkeyup = handleChanges;
function bubbleSort(list,list1)
{
    let swapped
    let n = list.length-1
    do {
        swapped = false
        for (let i=0; i < n; i++)
        {
            // compare pairs of elements
            // if left element > right element, swap
            if (list[i] > list[i+1])
            {
               const temp = list[i];
               const temp1 = list1[i]
               list[i] = list[i+1];
               list1[i] = list1[i+1];
               list[i+1] = temp;
               list1[i+1] = temp1;
               swapped = true;
            }
        }
    } 
  // continue swapping until sorted
  while (swapped) 

  return [list, list1]
}

function handleChange(e) {
var values = (Deposit.value/price.value) * 100;
price1.value = price.value;
Deposit1.value = Deposit.value;
Interest1.value = Interest.value;
sel11.selectedIndex  = sel1.value - 1;
fordeposit.innerHTML ="Deposit (" + Math.round(values)+"%)";
fordeposit1.innerHTML ="Deposit (" + Math.round(values)+"%)";
var cur = price.value - Deposit.value;
cur = cur / (sel1.value * 12);
cur = (Interest.value/ 100) * (cur) + cur; 
forprice.innerHTML =" "+ Math.round(cur);
forprice1.innerHTML =" "+ Math.round(cur);
Mortgage.innerHTML =" "+ Math.round(cur);
var grand = parseFloat(Water.innerHTML) + parseFloat(Mortgage.innerHTML) + parseFloat(Council.innerHTML) + parseFloat(insurance.innerHTML) + parseFloat(Energy.innerHTML) ;
lu.innerHTML ="<b> ZMW "+ grand +"</b>";
var arr = [parseFloat(Water.innerHTML),parseFloat(Mortgage.innerHTML), parseFloat(Council.innerHTML), parseFloat(insurance.innerHTML) , parseFloat(Energy.innerHTML) ];
var orignames = ["Water","Mortgage","Council","insurance" , "Energy" ];
var orignames1 = ["Water","Mortgage","Council","insurance" , "Energy" ];
var colornames = ["#1a9be0","#6a148e","#ffc107","#ff6009" , "#69c63f" ];
console.log(arrnames);
var mina = Math.min.apply(Math, arr);
var arrb = bubbleSort(arr,orignames);
arr = arrb[0];
var arrnames = arrb[1];
 var shellie = 0;
console.log(arrnames);
donut.innerHTML ="";
    let n = arrnames.length;
    for (let i=0; i < n; i++)
        { if (i==0) { 
var pos = arrnames[i];var ind = orignames1.indexOf(pos);console.log(colornames[ind]);
donut.innerHTML +='<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle><circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } else {
var balance = 100 - shellie;
var pos = arrnames[i];var ind = orignames1.indexOf(pos);
donut.innerHTML +='  <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4" stroke-dasharray="'+balance+' '+ shellie +'" stroke-dashoffset="25"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } }


}
function handleChanges(e) {
var values = (Deposit.value/price.value) * 100;
price.value = price1.value;
Deposit.value = Deposit1.value;
Interest.value = Interest1.value;
sel1.selectedIndex  = sel11.value - 1;;
fordeposit.innerHTML ="Deposit (" + Math.round(values)+"%)";
fordeposit1.innerHTML ="Deposit (" + Math.round(values)+"%)";
var cur = price1.value - Deposit1.value;
cur = cur / (sel11.value * 12);
cur = (Interest1.value/ 100) * (cur) + cur; 
forprice.innerHTML =" "+ Math.round(cur);
forprice1.innerHTML =" "+ Math.round(cur);
Mortgage.innerHTML =" "+ Math.round(cur);
var grand = parseFloat(Water.innerHTML) + parseFloat(Mortgage.innerHTML) + parseFloat(Council.innerHTML) + parseFloat(insurance.innerHTML) + parseFloat(Energy.innerHTML) ;
lu.innerHTML ="<b> ZMW "+ grand +"</b>";
var arr = [parseFloat(Water.innerHTML),parseFloat(Mortgage.innerHTML), parseFloat(Council.innerHTML), parseFloat(insurance.innerHTML) , parseFloat(Energy.innerHTML) ];
var orignames = ["Water","Mortgage","Council","insurance" , "Energy" ];
var orignames1 = ["Water","Mortgage","Council","insurance" , "Energy" ];
var colornames = ["#1a9be0","#6a148e","#ffc107","#ff6009" , "#69c63f" ];
console.log(arrnames);
var mina = Math.min.apply(Math, arr);
var arrb = bubbleSort(arr,orignames);
arr = arrb[0];
var arrnames = arrb[1];
 var shellie = 0;
console.log(arrnames);
donut.innerHTML ="";
    let n = arrnames.length;
    for (let i=0; i < n; i++)
        { if (i==0) { 
var pos = arrnames[i];var ind = orignames1.indexOf(pos);console.log(colornames[ind]);
donut.innerHTML +='<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle><circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } else {
var balance = 100 - shellie;
var pos = arrnames[i];var ind = orignames1.indexOf(pos);
donut.innerHTML +='  <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4" stroke-dasharray="'+balance+' '+ shellie +'" stroke-dashoffset="25"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } }


}
function handleChangez() {
var values = (Deposit.value/price.value) * 100;
price.value = price1.value;
Deposit.value = Deposit1.value;
Interest.value = Interest1.value;
sel1.selectedIndex  = sel11.value - 1;;
fordeposit.innerHTML ="Deposit (" + Math.round(values)+"%)";
fordeposit1.innerHTML ="Deposit (" + Math.round(values)+"%)";
var cur = price1.value - Deposit1.value;
cur = cur / (sel11.value * 12);
cur = (Interest1.value/ 100) * (cur) + cur; 
forprice.innerHTML =" "+ Math.round(cur);
forprice1.innerHTML =" "+ Math.round(cur);
Mortgage.innerHTML =" "+ Math.round(cur);
var grand = parseFloat(Water.innerHTML) + parseFloat(Mortgage.innerHTML) + parseFloat(Council.innerHTML) + parseFloat(insurance.innerHTML) + parseFloat(Energy.innerHTML) ;
lu.innerHTML ="<b> ZMW "+ grand +"</b>";
var arr = [parseFloat(Water.innerHTML),parseFloat(Mortgage.innerHTML), parseFloat(Council.innerHTML), parseFloat(insurance.innerHTML) , parseFloat(Energy.innerHTML) ];
var orignames = ["Water","Mortgage","Council","insurance" , "Energy" ];
var orignames1 = ["Water","Mortgage","Council","insurance" , "Energy" ];
var colornames = ["#1a9be0","#6a148e","#ffc107","#ff6009" , "#69c63f" ];
console.log(arrnames);
var mina = Math.min.apply(Math, arr);
var arrb = bubbleSort(arr,orignames);
arr = arrb[0];
var arrnames = arrb[1];
 var shellie = 0;
console.log(arrb[0]);
console.log(arrb[1]);
donut.innerHTML ="";
    let n = arrnames.length;
    for (let i=0; i < n; i++)
        { if (i==0) { 
var pos = arrnames[0];var ind = orignames1.indexOf(pos);console.log(arrnames[0]);console.log(orignames1.indexOf("Energy"));console.log(colornames[ind]);
donut.innerHTML +='<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle><circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } else {
var balance = 100 - shellie;
var pos = arrnames[i];var ind = orignames1.indexOf(pos);
donut.innerHTML +='  <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="'+colornames[ind]+'" stroke-width="4" stroke-dasharray="'+balance+' '+ shellie +'" stroke-dashoffset="25"></circle>';
var perc1 = (arr[i]/grand)*100; shellie += perc1;console.log(perc1);
 } }


}
handleChangez();
</script>

@endsection
