@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <style type="text/css">
        .highcharts-credits {
            display:none;
        }

        textarea {
            height: 170px;
        }

        .la-edit {
            cursor: pointer;
        }

        .box-stats {
            font-size: 11px !important;
        }

        ul.search-hight-chart-legend{
            width:100%;
            float:left;
            margin-top:10%;
            padding:0px;
        }
        ul {
            list-style-type: none;
        }
        ul.search-hight-chart-legend > li {
            display: inline-flex;
            margin-bottom: 30px;
        }

        ul.search-hight-chart-legend > li > i {
            width:20px;
            height: 20px;
            background: #75BEE9;
            display:table;
            margin: 0 24px 0px 0;
        }
        ul.search-hight-chart-legend > li > span {
            color:#000;
            font-size: 16px;
        }
        ul.search-hight-chart-legend > li > span > em {
            display: block;
            font-style: normal;
            color: #808285;
            font-size: 14px;
            padding-top: 4px;
        }
        ul.hight-chart-search-avg {
            width:100%;
            float: left;
            margin-top:10%;
            padding:0px;
        }
        ul.hight-chart-search-avg > li {
            display:block;
            margin-bottom: 100px;
        }
        ul.hight-chart-search-avg > li > b {
            font-size: 22px;
            color: #000;
        }
        ul.hight-chart-search-avg > li > span {
            font-size: 18px;
            color: #6D6E71;
        }

        ul.view-chart-legend-block {
            width:100%;
            float: left;
            margin: 64px 0 0 0;
            padding: 0px;
        }
        ul.view-chart-legend-block > li {
            display: inline-flex;
            padding: 0 0 38px;
            width: 100%;
        }
        ul.view-chart-legend-block > li > i {
            font-style: normal;
            width: 20px;
            height: 20px;
            display: inline-table;
            margin: 0 20px -3px 0;
        }
        ul.view-chart-legend-block > li > span {
            color: #282828;
            display: inline-block;
            font-size: 17px;
            width: 200px;
        }
        ul.view-chart-legend-block > li > b {
            color: #000;
            display: inline-block;
            font-weight: normal;
            font-size: 20px;
        }
        .lisitng-search-block {
            background: #518FF5;
        }
        .lisitng-map-block {
            background: #059587;
        }
        .lisitng-call-block {
            background: #049E45;
        }
        .gallery-a:hover {
            background: #e1e1e1;
            border: 1px solid #d0d0d0;
        }
        .col-gal {
            padding-left: 5px;
            padding-right: 5px;
        }
        .about-text{
            font-size: 16px;
            color: #111111 !important;
        }
        .about-text .table td{
            font-size: 16px;
            color: #111111 !important;
        }
        .starico {
            font-size: 4em !important;
        }
        .stats-widget-in {
            border-left: 5px solid #09405F !important;
            text-align: left;
        }
        .stats-widget-in b{
            font-weight: 600;
            font-size: 16px;
        }
        .stats-widget-in .font-weight-bold{
            text-align: left !important;
            font-size: 2.2em;
        }
        .as-section {
            display:none;
        }
        .blog-grid h1,
        h2,
        h3,
        h4,
        h5,
        h6 {}
        a,
        a:hover,
        a:focus,
        a:active {
            text-decoration: none;
            outline: none;
        }

        .blog-grid a,
        a:active,
        a:focus {
            color: #333;
            text-decoration: none;
            transition-timing-function: ease-in-out;
            -ms-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -webkit-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            transition-duration: .2s;
            -ms-transition-duration: .2s;
            -moz-transition-duration: .2s;
            -webkit-transition-duration: .2s;
            -o-transition-duration: .2s;
        }

        .blog-grid ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .blog-grid img {
            max-width: 100%;
            height: auto;

        }
        .blog-list-img {
            background-color: #ccc;
        }
        /*--blog----*/

        .blog-grid {
            padding: 50px 0;
        }

        .blog-list-grid {
            column-count: 3;
            column-gap: 30px;
        }
        .blog-list {
            float: left;
            width: 100%;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            page-break-inside: avoid;

            margin: 0 0 30px 0;
            background-color: #FFFFFF;
            -moz-box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
            -o-box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
            -webkit-box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
            box-shadow: 0 0 15px 2px rgba(0,0,0,0.05);
        }
        .blog-list-description {
            padding: 45px 25px;
        }
        .blog-list-description h4 {
            color: #424C4C;
            font-family: "Playfair Display";
            font-size: 24px;
            letter-spacing: 0.78px;
            line-height: 1.4;
            margin-bottom: 30px;
        }

        .blog-list-description h4 a {
            color: #424C4C;
        }
        .blog-list-description h4 a:hover {
            color: #06797b;
        }
        .blog-list-description p {
            font-size: 16px;
            line-height: 1.5;
        }

        @media only screen and (max-width: 921px) {
            .blog-list-grid {
                column-count: 2;
            }

        }
        @media only screen and (max-width: 767px) {
            .blog-list-grid {
                column-count: 1;
            }

        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/pages/gmb.css') }}">
@stop

@section('content')
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-01">{{$location['locationName']}}</h2>

                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="row flex-row about">
            <div class="col-xl-5">
                <!-- Begin Widget -->
                <div class="widget has-shadow">
                    <div class="widget-header bordered no-actions d-flex align-items-center">
                        <h4>Business Details</h4>
                    </div>
                    <div class="widget-body business-left">
                        <div class="about-infos d-flex flex-column pt-0">
                            <!-- Grid row -->
                            <div class="row widget-scroll" style="overflow-y: scroll; height: 380px;background-color: #eee">
                                @foreach ($media['mediaItems'] as $photo)
                                    <div class="col-md-4 margin-top-10 col-gal text-center">
                                        <a class="gallery-a" data-fancybox="gallery" href="{{$photo['googleUrl']}}">
                                        <img src="{{$photo['thumbnailUrl']}}" alt="" class="img-fluid img-business">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div><br/>
                        <div class="about-infos d-flex flex-column ">
                            <div class="about-title">Business Name: <i class="la la-edit pull-right text-primary" data-toggle="modal" data-target="#edit-modal-business" data-backdrop="static" data-keyboard="false" ></i></div>
                            <div class="about-text">
                                {{$location['locationName']}}
                            </div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Description:</div>
                            <div class="about-text">
                                {{$location['profile']['description']}}
                            </div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Category:<i class="la la-edit pull-right text-primary" data-toggle="modal" data-target="#edit-modal-category" data-backdrop="static" data-keyboard="false" ></i></div>
                            <div class="about-text">
                                {{$location['primaryCategory']['displayName']}} <br/>
                                @foreach ($location['additionalCategories'] as $additionalCategory)
                                    {{$additionalCategory['displayName']}}<br/>
                                @endforeach
                            </div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Address: <i class="la la-edit pull-right text-primary"  data-toggle="modal" data-target="#edit-modal-address" data-backdrop="static" data-keyboard="false"></i></div>
                            <div class="about-text">
                                @foreach ($location['address']['addressLines'] as $address)
                                    {{$address}}
                                @endforeach
                                {{@$location['address']['sublocality']}}, {{@$location['address']['locality']}}, {{@$location['address']['administrativeArea']}},
                                {{@$location['address']['regionCode']}} {{@$location['address']['postalCode']}}
                            </div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Opening Hours: <span class="badge @if($location['openInfo']['status'] === 'OPEN') badge-success @else badge-warning @endif"> {{$location['openInfo']['status']}} </span>
                                <i class="la la-edit pull-right text-primary" data-toggle="modal" data-target="#edit-modal-opening" data-backdrop="static" data-keyboard="false"></i>
                            </div>
                            <div class="about-text">
                                @if (isset($location['regularHours']['periods']))
                                    <table class="table">
                                        @foreach ($location['regularHours']['periods'] as $period)
                                            <tr>
                                                <td>{{$period['openDay']}} &nbsp;</td> <td>{{$period['openTime']}} - {{$period['closeTime']}}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                @endif
                            </div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Phone: <i class="la la-edit pull-right text-primary" data-toggle="modal" data-target="#edit-modal-phone" data-backdrop="static" data-keyboard="false"></i></div>
                            <div class="about-text">{{$location['primaryPhone']}}</div>
                        </div>
                        <div class="about-infos d-flex flex-column">
                            <div class="about-title">Website: <i class="la la-edit pull-right text-primary" data-toggle="modal" data-target="#edit-modal-website" data-backdrop="static" data-keyboard="false"></i></div>
                            <div class="about-text">
                                <a @if (!empty($location['websiteUrl']))href="{{$location['websiteUrl']}}" target="_blank"@endif>@if (!empty($location['websiteUrl'])){{$location['websiteUrl']}}@else N/A @endif</a>
                            </div>
                        </div>

                        <div class="about-infos d-flex flex-column">
                                                        <div class="about-title mr-auto">Ratings (@if ($reviews['totalReviewCount']) {{$reviews['totalReviewCount']}} @else 0 @endif ) :</div>
                            <div class="about-text">
                                @for ($r =1 ; $r <= $average_rating; $r++)
                                    <i class="la la-star starico"></i>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Widget -->
            </div>
            <!-- Begin Column -->
            <div class="col-xl-7 column">
                <div class="widget has-shadow">
                    <div class="padding-top-15"><!-- widget-body -->
                        <ul class="nav nav-tabs nav-fill" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active show" id="j-drop-tab-1" data-toggle="tab" href="#j-d-tab-1" role="tab" aria-controls="j-d-tab-1" aria-selected="false">Insights</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="j-drop-tab-2" data-toggle="tab" href="#j-d-tab-2" role="tab" aria-controls="j-d-tab-2" aria-selected="false">Reviews</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="j-drop-tab-3" data-toggle="tab" href="#j-d-tab-3" role="tab" aria-controls="j-d-tab-3" aria-selected="true">Local Posts</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " id="j-drop-tab-4" data-toggle="tab" href="#j-d-tab-4" role="tab" aria-controls="j-d-tab-4" aria-selected="true">Q & A</a>
                            </li>
                        </ul>
                        <div class="tab-content pt-1">
                            <div class="tab-pane fade active show" id="j-d-tab-1" role="tabpanel" aria-labelledby="j-drop-tab-1">
                            <div class="widget-body">
                                <!--GMB Stats-->
                                <div class="row border  inside-row ">
                                    <div class="col-md-4 justify-content-start text-center box-stats">
                                      <div class="widget-box">
                                        <div class="widget-box-in bg-grey ">
                                            <br />
                                        <img src="{{asset('img/gmb-stats.png')}}" alt=""><br/>
                                        <h4>GMB Stats</h4>
                                        </div>
                                        </div>
                                    </div>
                                                                        @foreach ($insights['summary'] as $summary_title => $summary_value)
                                        <div style="" class="col-md-4 justify-content-start text-center box-stats">
                                      <div style="display:none !important;" class="widget-box as-section as-{{$ctr}}">
                                        <div class="widget-box-in stats-widget-in">
                                            <h2 class="font-weight-bold">{{$summary_value}}</h2><br/>
                                            {{--<h4>0.49% <i class="la la-arrow-down text-danger font-weight-bold"></i></h4><br/>--}}
                                            <b>{{str_replace('_', ' ', $summary_title)}}</b>
                                            {{@$insights['descriptions'][$summary_title]}}
                                         </div>
                                         </div>
                                        </div>
                                                                            @endforeach
                                </div>

                                <!--Searches-->
                                <div class=" border ">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex flex-column mr-auto ml-2 padding-left-10 padding-top-5">
                                                <h2 class="title">Searches</h2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-5" id="container" style="width: 100%; height: 300px; margin: 0 auto">

                                        </div>
                                        <div class="col-md-5">
                                            <div class="row">
                                                <div class="col-md-7">
                                                    <ul class="search-hight-chart-legend">
                                                        <li>
                                                            <i></i>
                                                            <span>Direct Search <em>Customers who find your listing searching for your business name or address.</em></span>
                                                        </li>
                                                        <li>
                                                            <i></i>
                                                            <span>Discovered through keywords <em>Customers who find your listing searching for a category, product, or service.</em></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                @php $total = $insights['summary']['QUERIES_INDIRECT'] + $insights['summary']['QUERIES_DIRECT'];
                                                    $queries_indirect_p = ($insights['summary']['QUERIES_INDIRECT']/$total)*100;
                                                    $queries_direct_p = ($insights['summary']['QUERIES_DIRECT']/$total)*100;
                                                @endphp
                                                <div class="col-md-5">
                                                    <ul class="hight-chart-search-avg">
                                                        <li>
                                                            <b>{{@$insights['summary']['QUERIES_DIRECT']}}</b>
                                                            <span>({{round($queries_direct_p,2)}}% of total)</span>
                                                        </li>
                                                        <li>
                                                            <b>{{@$insights['summary']['QUERIES_INDIRECT']}}</b>
                                                            <span>({{round($queries_indirect_p,2)}}% of total)</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <!--Views-->
                                <div class=" border padding-top-10 padding-bottom-10 padding-right-20">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex flex-column mr-auto ml-2 padding-left-10 padding-top-5">
                                                <h3 class="title">Views</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-7" id="views-container" style="width: 100%; height: 300px; margin: 0 auto">

                                        </div>
                                        <div class="col-md-5">
                                            <ul class="view-chart-legend-block">
                                                <li>
                                                    <i></i>
                                                    <span>Total Views</span>
                                                    <b>{{$insights['search_views_daily_total'] + $insights['maps_views_daily_total']}}</b>
                                                </li>
                                                <li>
                                                    <i class="lisitng-search-block"></i>
                                                    <span>Listing Search</span>
                                                    <b>{{$insights['search_views_daily_total']}}</b>
                                                </li>
                                                <li>
                                                    <i class="lisitng-map-block"></i>
                                                    <span>Listing Maps</span>
                                                    <b>{{$insights['maps_views_daily_total']}}</b>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <br/>
                                <!--Customer actions-->
                                <div class=" border padding-top-10 padding-bottom-10 padding-right-20">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex flex-column mr-auto ml-2 padding-left-10 padding-top-5">
                                                <h3 class="title">Customer actions</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-7" id="customer-container" style="width: 100%; height: 300px; margin: 0 auto">

                                        </div>
                                        <div class="col-md-5">
                                            <ul class="view-chart-legend-block">
                                                <li>
                                                    <i class="lisitng-search-block"></i>
                                                    <span>Visit your website</span>
                                                    <b>{{$insights['website_daily_total']}}    </b>
                                                </li>
                                                <li>
                                                    <i class="lisitng-map-block"></i>
                                                    <span>Request directions</span>
                                                    <b>{{$insights['driving_daily_total']}}</b>
                                                </li>
                                                <li>
                                                    <i class="lisitng-call-block"></i>
                                                    <span>Call you</span>
                                                    <b>{{$insights['phone_daily_total']}}</b>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="j-d-tab-2" role="tabpanel" aria-labelledby="j-drop-tab-2">
                               <div class="widget-body widget widget-10 has-shadow">
                                   <ul class="ticket list-group w-100">
                                       <!-- 01 -->
                                       @foreach($reviews['reviews'] as $review)
                                           @if(isset($review['comment']) && $review['comment'] != '')
                                       <li class="list-group-item">
                                           <div class="media">
                                               <div class="media-left  pr-4">
                                                   <img src="@if(isset($review['reviewer'])){{$review['reviewer']['profilePhotoUrl']}}@endif" alt="..." class="user-img rounded-circle">
                                               </div>
                                               <div class="media-body align-self-center">
                                                   <div class="username" style="font-weight: 600;">
                                                       @if(isset($review['reviewer']))
                                                           <h4>{{$review['reviewer']['displayName']}}</h4>
                                                       @else
                                                           N/A
                                                       @endif
                                                   </div>
                                                   <div class="msg" style="padding-top: 10px;padding-bottom: 10px;">
                                                       <p style="color:black;">
                                                           {{$review['comment']}}
                                                       </p>
                                                   </div>
                                                   <div class="status" style="padding-top: 5px;">
                                                       <i>
                                                       ({{\Carbon\Carbon::createFromTimeStamp(strtotime($review['createTime']))->diffForHumans()}})
                                                       </i>
                                                   </div>
                                                   <div class="clearfix"><br /></div>
                                                   <div class="media-footer">
                                                       <div class="widget-footer d-flex align-items-center border-f">
                                                           <div class="col no-padding d-flex justify-content-start">
                                                               <div class="users-like">
                                                                                                                                                                                                         @for ($r = 1; $r<=$ratings[$review['starRating']]; $r++)
                                                                       <i class="la la-star" style="font-size:1.5em;color:yellow;-webkit-text-stroke: 1px black;"></i>
                                                                   @endfor
                                                               </div>
                                                           </div>
                                                           <div class="col no-padding d-flex justify-content-end">
                                                               <div class="meta">
                                                                   <a href="#" class="btn btn-primary">
                                                                       Respond to this Review
                                                                   </a>
                                                                   <a href="#" class="btn btn-primary">
                                                                       Share
                                                                   </a>
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </div>
                                               </div>

                                           </div>
                                       </li>
                                           @endif
                                       @endforeach
                                       <!-- End 01 -->
                                   </ul>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="j-d-tab-3" role="tabpanel" aria-labelledby="j-drop-tab-3">

                                <div class="blog-grid">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="blog-list-grid">
                                                    @if(isset($local_posts['localPosts']))
                                                    @foreach($local_posts['localPosts'] as $post)
                                                    <div class="blog-list">
                                                        <div class="blog-list-img">
                                                            <img src="{{@$post['media'][0]['googleUrl']}}">
                                                        </div>
                                                        <div class="blog-list-description">
                                                            <h4>
                                                                {{date('F d, Y', strtotime(@$post['createTime']))}}
                                                            </h4>
                                                            <p>{{@$post['summary']}}</p>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade db-social" id="j-d-tab-4" role="tabpanel" aria-labelledby="j-drop-tab-4">
                                @if(isset($questions))
                                    @foreach ($questions['questions'] as $question)
                                <div class="widget has-shadow">
                                    <!-- Begin Widget Header -->
                                    <div class="widget-header d-flex align-items-center">
                                        <div class="user-image">
                                            <img class="rounded-circle" src="@if(isset($question['author']['displayName'])){{$question['author']['profilePhotoUrl']}}@endif" alt="...">
                                        </div>
                                        <div class="d-flex flex-column mr-auto">
                                            <div class="title">
                                                <span class="username">
                                                     @if(isset($question['author']))
                                                        {{$question['author']['displayName']}}
                                                    @endif
                                                </span> asked:
                                            </div>
                                            <div class="time">
                                                {{\Carbon\Carbon::createFromTimeStamp(strtotime(@$question['createTime']))->diffForHumans()}}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Widget Header -->
                                    <!-- Begin Widget Body -->
                                    <div class="widget-body">
                                        <p>
                                            {{@$question['text']}}
                                        </p>
                                    </div>
                                    <!-- End Widget Body -->
                                    <!-- Begin Widget Footer -->
                                    <div class="widget-footer d-flex align-items-center">
                                        <div class="col-xl-8 col-md-8 col-7 no-padding d-flex justify-content-start align-items-center">
                                            </div>
                                        <div class="col-xl-4 col-md-4 col-5 no-padding d-flex justify-content-end">
                                            <div class="meta">
                                                <ul>
                                                    <li>
                                                        <a href="javascript:void(0);">
                                                            <i class="la la-comment"></i><span class="numb">
                                                                @if (isset($question['answer']['answers']))
                                                                    {{count($question['answer']['answers'])}}
                                                                @endif
                                                            </span>
                                                        </a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Widget Footer -->
                                    <!-- Begin Reply -->
                                    @if (isset($question['answer']['answers']))
                                        @foreach ($question['answer']['answers'] as $answer)
                                    <div class="reply">
                                        <div class="reply-header d-flex align-items-center">
                                            <div class="user-image">
                                                <img class="rounded-circle" src="@if(isset($answer['author']['displayName'])){{$answer['author']['profilePhotoUrl']}}@endif" alt="...">
                                            </div>
                                            <div class="d-flex flex-column mr-auto">
                                                <div class="title">
                                                    <span class="username">
                                                         @if(isset($answer['author']))
                                                            {{$answer['author']['displayName']}}
                                                        @endif
                                                    </span>
                                                </div>
                                                <div class="time">
                                                    {{\Carbon\Carbon::createFromTimeStamp(strtotime($answer['createTime']))->diffForHumans()}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="reply-body">
                                            <p>
                                                {{@$answer['text']}}
                                            </p>
                                        </div>
                                    </div>
                                        @endforeach
                                    @endif
                                    <hr />
                                    <!-- End Reply -->
                                </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Column -->
        </div>
        <!-- End Row -->

    </div>

@stop

@section('page_modals')
    <div id="edit-modal-business" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business details</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <form id="card-form" action="{{ route('gmb.update_location').'?location='.$location['name'].'&type=profile' }}" method="POST">
                    <div class="modal-body">
                        @csrf
                        <table class="table">
                            <tr>
                                <td>Business Name:</td>
                                <td><input type="text" class="form-control" name="locationName" value="{{$location['locationName']}}"></td>
                            </tr>
                            <tr>
                                <td>Description:</td>
                                <td><textarea class="form-control" name="profile->description">{{$location['profile']['description']}}</textarea></td>
                            </tr>
                        </table>
                    </div>
                   <div class="modal-footer"> <input type="submit" id="submitForm" class="btn btn-success btn-square text-white pull-right" value="Save"></div>
                </form>
            </div>
        </div>
    </div>
    <div id="edit-modal-category" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business categories</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <form id="card-form" action="{{ route('gmb.update_location').'?location='.$location['name'].'&type=categories' }}" method="POST">
                    <div class="modal-body">
                        <table class="table" id="category-table">
                            <tr>
                                <td>Category:</td>
                                <td><input type="text" name="primaryCategory->displayName" class="form-control" value="{{$location['primaryCategory']['displayName']}}"></td>
                            </tr>
                            @foreach ($location['additionalCategories'] as $additionalCategory)
                                <tr>
                                    <td></td>
                                    <td><input type="text" class="form-control" value="{{$additionalCategory['displayName']}}" name="additionalCategories[]"></td>
                                </tr>
                            @endforeach
                        </table>
                        <input type="button" class="btn" value="Add category" onclick="javascript:addCategory()">
                    </div>
                    <div class="modal-footer"><input type="submit" id="submitForm" class="btn btn-success btn-square text-white pull-right" value="Save"></div>
                </form>
            </div>
        </div>
    </div>
    <div id="edit-modal-address" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business address</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <form id="card-form" action="{{ route('gmb.update_location').'?location='.$location['name'].'&type=address' }}" method="POST">
                    <div class="modal-body">
                        <table class="table">
                            @foreach ($location['address']['addressLines'] as $key => $address)
                                <tr>
                                    <td>@if(!$key) Address @endif</td>
                                    <td>
                                        <input type="text" class="form-control" name="addressLines[]" value="{{$address}}">
                                    </td>
                                </tr>
                            @endforeach
                            <tr>
                                <td>Sublocality</td>
                                <td>
                                    <input type="text" class="form-control" name="sublocality" value="{{@$location['address']['sublocality']}}">
                                </td>
                            </tr>
                            <tr>
                                <td>Locality</td>
                                <td>
                                    <input type="text" class="form-control" name="locality" value="{{@$location['address']['locality']}}">
                                </td>
                            </tr>
                            <tr>
                                <td>Administrative Area</td>
                                <td>
                                    <input type="text" class="form-control" name="administrativeArea" value="{{@$location['address']['administrativeArea']}}">
                                </td>
                            </tr>
                            <tr>
                                <td>Region Code</td>
                                <td>
                                    <input type="text" class="form-control" name="regionCode" value="{{@$location['address']['regionCode']}}">
                                </td>
                            </tr>
                            <tr>
                                <td>Postal Code</td>
                                <td>
                                    <input type="text" class="form-control" name="postalCode" value="{{@$location['address']['postalCode']}}">
                                </td>
                            </tr>
                        </table>
                    </div>
                   <div class="modal-footer"> <input type="submit" id="submitForm" class="btn btn-success btn-square text-white pull-right" value="Save"></div>
                </form>
            </div>
        </div>
    </div>
    <div id="edit-modal-opening" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business opening hours</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <div class="modal-body">
                    @include('gmb.schedule')
                </div>
               <div class="modal-footer"> <button type="button" class="btn btn-success btn-square text-white" data-dismiss="modal">
                    Save
                </button></div>
            </div>
        </div>
    </div>
    <div id="edit-modal-phone" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business phone</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <form id="card-form" action="{{ route('gmb.update_location').'?location='.$location['name'].'&type=primaryPhone' }}" method="POST">
                    <div class="modal-body">
                        <table class="table">
                            <tr>
                                <td>Phone:</td>
                                <td><input type="text" class="form-control" name="primaryPhone" value="{{$location['primaryPhone']}}"></td>
                            </tr>
                        </table>
                    </div>
                  <div class="modal-footer">  <input type="submit" id="submitForm" class="btn btn-success btn-square text-white pull-right" value="Save"></div>
                </form>
            </div>
        </div>
    </div>
    <div id="edit-modal-website" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Update business website</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <form id="card-form" action="{{ route('gmb.update_location').'?location='.$location['name'].'&type=websiteUrl' }}" method="POST">
                    <div class="modal-body">
                        <table class="table">
                            <tr>
                                <td>Website:</td>
                                <td><input type="text" name="websiteUrl" class="form-control" value="{{$location['websiteUrl']}}"></td>
                            </tr>
                        </table>
                    </div>
                   <div class="modal-footer"> <input type="submit" id="submitForm" class="btn btn-success btn-square text-white pull-right" value="Save"></div>
                </form>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script>
        function runAfterPreload(){
            // $('.as-section').hide();
            // Animation with all options
            var duration = 0;
            $('.as-0').show();
            $('.as-0').animateCSS('fadeInRight', duration);
            for(var x=1;x<=13;x++){
                $('.as-'+x).show();
                duration += 350;
                $('.as-'+x).animateCSS('fadeInUp', duration);
            }

        }
        $(function(){
            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                },
                title: {
                    text: ''
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                exporting: {
                    enabled: false
                },
                series: [{
                    name: 'Searches',
                    colorByPoint: true,
                    data: [{
                        name: 'Discovered through keywords',
                        y: {{$queries_indirect_p}},
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Direct Search',
                        y: {{$queries_direct_p}}
                    }]
                }]
            });

            @php $color = ['maps' => '#059587', 'search' => '#518FF5']; @endphp
            Highcharts.chart('views-container', {
                chart: {
                    type: 'area'
                },
                title: {
                    text: ' '
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Count'
                    },
                    tickInterval: 20,
                },
                tooltip: {
                    pointFormat: '{series.name} <br/>{point.y}'
                },
                plotOptions: {
                    series: {
                        pointStart: Date.UTC({{date('Y', strtotime($day_30_ago))}}, "{{(date('n', strtotime($day_30_ago))-1)}}", {{date('j', strtotime($day_30_ago))}}),
                        pointInterval: 24 * 3600 * 1000
                    }
                },
                exporting: {
                    enabled: false
                },
                series: [
                        @foreach ($highcharts['search_and_maps'] as $key => $search_maps)
                    {
                        color: "{{$color[$key]}}",
                        name: "{{$key}}",
                        data: [
                            @foreach ($search_maps as $value)
                            {{$value}},
                            @endforeach
                        ]
                    },
                    @endforeach
                ]
            });

            @php $color = ['website' => '#518FF5', 'call' => '#049E45', 'directions' => '#059587']; @endphp
            Highcharts.chart('customer-container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: ' '
                },
                xAxis: {
                    categories: [
                        @for ($d=0; $d<=29; $d++)
                            "{{add_x_days_from_date($day_30_ago, $d)}}",
                        @endfor
                    ],
                    crosshair: true
                },
                yAxis: {
                    title: {
                        text: 'Count'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                exporting: {
                    enabled: false
                },
                series: [
                        @foreach ($highcharts['customer_actions'] as $key => $search_maps)
                    {
                        color: "{{$color[$key]}}",
                        name: "{{$key}}",
                        data: [
                            @foreach ($search_maps as $value)
                            {{$value}},
                            @endforeach
                        ]
                    },
                    @endforeach
                ]
            });




        });

        function addCategory () {
            let html = '<tr>';
            html += '<td></td>';
            html += '<td><div class="form-check form-check-inline"><input type="text" class="form-control" name="additionalCategories[]">&nbsp;';
            html += '<input type="button" class="btn btn-danger" value="Delete" onclick="javascript:deleteRow(this)"></form></td>';
            html += '</tr>';

            $('#category-table').append(html);
        }

        function deleteRow (_this_) {
            $(_this_).closest('tr').remove();
        }
    </script>
@stop