@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
@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">Google My Business Accounts</h2>
                    <div>
                        <div class="page-header-tools">
                            @if (empty($locations))
                            <a class="btn btn-gradient-01" href="javascript: void(0)" onclick="javascript:addGmbAccount()">Add Account</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(!count($locations))
            @include('no_data', [
                       'nd_title' => 'No Available Google My Business Location',
                       'nd_subtitle' => 'Please add your Google My Business location on the system or contact our team for further assistance.'
            ])
        @endif
        <!-- End Page Header -->
        <div class="row flex-row">
            <div class="col-md-12">
                <div class="row">
                    @if (!empty($locations))

                        <div class="col-md-8">&nbsp;</div>
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="search-field" onkeyup="search()" placeholder="Search by Name, Website">
                        </div>

                        <div class="col-md-12">&nbsp;</div>

                        @foreach($locations as $location)
                            <div class="location-{{ str_replace(' ', '-', str_replace("'", '', $location['locationName'])) }} locations col-xl-3 col-md-4 col-sm-6 col-remove">
                                <!-- Begin Card -->
                                <div class="widget-image has-shadow">
                                    <div class="group-card">
                                        <!-- Begin Widget Body -->
                                            <div class="widget-body">
                                                @if (auth()->user()->company->company_type == 1)
                                                <div class="quick-actions">
                                                    <div class="dropdown">
                                                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
                                                            <i class="la la-cog"></i>
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <a href="#" class="dropdown-item remove">
                                                                <i class="la la-trash"></i>Delete
                                                            </a>
                                                            <a href="#" class="dropdown-item">
                                                                <i class="la la-edit"></i>Edit
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                                <div class="cover-image mx-auto">
                                                    <img src="{{asset('img/RealTime_Marketing_Logo2019.png')}}" alt="..." class="rounded-circle mx-auto">
                                                </div>
                                                <h4 class="name"><a href="#" class="locationName">{{$location['locationName']}}</a></h4>
                                                <div class="category">
                                                    @if (isset($location['addressLines']))
                                                        @foreach ($location['addressLines'] as $addressLine)
                                                            {{$addressLine}},
                                                        @endforeach
                                                    @endif
                                                    @if(isset($location['sublocality']) && !is_null($location['sublocality']))
                                                        {{@$location['sublocality']}},
                                                    @endif
                                                    @if(isset($location['locality']) && !is_null($location['locality']))
                                                        {{@$location['locality']}},
                                                    @endif
                                                    @if(isset($location['administrativeArea']) && !is_null($location['administrativeArea']))
                                                        {{@$location['administrativeArea']}}
                                                    @endif
                                                    {{@$location['regionCode']}} {{@$location['postalCode']}}
                                                </div>
                                                <div class="stats text-center">
                                                    <span><i class="la la-globe"></i></span>
                                                    <br />
                                                    <span class="locationWebsite" rel="{{$location['locationName']}}">{{$location['websiteUrl']}}</span>
                                                    <span class="text">{{$location['primaryPhone']}}</span>
                                                </div>
                                                <div class="text-center mt-5 pb-3">
                                                    <a href="{{route('gmb.view_account')}}?locName={{$location['name']}}" class="btn btn-secondary ripple">
                                                        Overview
                                                    </a>
                                                </div>
                                            </div>
                                        <!-- End Widget Body -->
                                    </div>
                                </div>
                                <!-- End Card -->
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- End Row -->
            </div>
        </div>
        <!-- End Row -->

    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script>
        function addGmbAccount () {
            $.ajax({
                type: 'GET',
                url: '{{route('gmb.login_url')}}?callback=gmb_accounts',
                dataType: 'html',
                success: function(resp) {
                    window.location.href = resp;
                },
                error: function(xhr, status, error) {
                    console.log('cant generate gmb login url');
                }
            });
        }

        function search()
        {
            var search = $('#search-field').val().toLowerCase();

            $('.locations').hide();
            if($.trim(search) != '')
            {
                // By Name
                $( ".locationName" ).each(function( index ) {
                    var str = $( this ).text().toLowerCase();

                    if(str.indexOf(search) > -1)
                    {
                        var name = $( this ).text();
                        $('.location-' + replaceAll(replaceAll(name, "'", ''), ' ', '-') ).show();
                    }
                });

                // By Website
                $( ".locationWebsite" ).each(function( index ) {
                    var str = $( this ).text().toLowerCase();

                    if(str.indexOf(search) > -1)
                    {
                        var name = $( this ).attr('rel');
                        $('.location-' + replaceAll(replaceAll(name, "'", ''), ' ', '-') ).show();
                    }
                });
            }
            else
            {
                $('.locations').show();
            }
        }

        function replaceAll(str, term, replacement) {
          return str.replace(new RegExp(escapeRegExp(term), 'g'), replacement);
        }

        function escapeRegExp(string){
            return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
        }
    </script>
@stop