@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: {{$profile->display_name}} {{$profile->city_name}}'s Profile</title>
@endsection


@section('heading')
<!-- Page Heading -->
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="#" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0"> {{$profile->display_name}} {{$profile->city_name}} - Statistics</h1>
                    <!-- breadcrumb -->
                    @php                    
                    $breadcrumb = array(
                        array('title'=>'My Profiles', 'url'=>route('profile')),
                        array('title'=>$profile->display_name, 'url'=>route('profile.link',['slug'=>$profile->slug])),
                        array('title'=> 'Upgrade', 'url'=>'', 'active'=>'1')
                    );                                      
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif


<!-- Statistics One -->
<section class="statistics-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->
            <div class="col-12">
                <div class="select-profile">
                    @if(isset($advertisers) && !empty($advertisers))
                    <div class="dropdown dropdown-one">

                        <a class="btn btn-white dropdown-toggle" href="#" role="button" id="profile-listing" data-toggle="dropdown">
                            <span>{{$profile->display_name}} in {{$profile->city_name}}</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="profile-listing">
                            @foreach($advertisers as $advertiser)
                            <a class="dropdown-item" href="{{route('profile.link',['slug'=>$advertiser[0]->slug])}}">
                                <span class="title">{{$advertiser[0]->display_name}} in {{$advertiser[0]->city_name}}</span>
                                <span class="badge" data-placement="top" data-toggle="tooltip" title="Your profile will not be listed until you verify the photos.">
                                    @if($advertiser[0]->is_image_verified==3)
                                    <i class="text-success fa fa-image"></i>
                                    @else
                                    <i class="text-warning fa fa-image"></i>
                                    @endif
                                </span>
                                @if(isset($plans) && !empty($plans))
                                <span class="my-status" data-toggle="tooltip" title="Free - Upgrade to receive more enquiries">
                                    @foreach($plans as $plan)
                                    @if($advertiser[0]->plan_id==$plan->plan_id)
                                    {{$plan->plan_name}}
                                    @endif
                                    @endforeach

                                    @if($advertiser[0]->plan_id==0)
                                    <span class="text-danger">Inactive </span>
                                    @endif
                                </span>
                                @endif
                            </a>
                            @endforeach
                        </div>

                    </div>
                    @endif
                    <a href="{{route('profile.add')}}" class="btn btn-main">Add Profile +</a>
                </div>
            </div>
            <div class="col-12">
                <div class="row gap-y-2">
                    <div class="col-md-6">
                        <div class="box-one h-100">
                            <div class="heading-one">
                                <h1>Last 30 days</h1>
                                <hr class="m-0" />
                                <div class="inline-list">
                                    <span class="my-stat">
                                        <i class="fa fa-envelope"></i> {{$last_30_message}}
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-phone"></i> {{$last_30_phone}}
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-eye"></i>{{$last_30_view}} views
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-globe"></i>{{$last_30_website}} website clicks
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-info-circle" title="If you use Google Analytics you can find the number of website visitors by looking in Traffic Sources > Sources > Campaigns." data-placement="right" data-toggle="tooltip"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="box-one h-100">
                            <div class="heading-one">
                                <h1>All time</h1>
                                <hr class="m-0" />
                                <div class="inline-list">
                                    <span class="my-stat">
                                        <i class="fa fa-envelope"></i> {{$total_message}}
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-phone"></i> {{$total_phone}}
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-eye"></i> {{$total_view}} views
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-globe"></i> {{$total_website}} website clicks
                                    </span>
                                    <span class="my-stat">
                                        <i class="fa fa-info-circle" title="If you use Google Analytics you can find the number of website visitors by looking in Traffic Sources > Sources > Campaigns." data-placement="right" data-toggle="tooltip"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="heading-one text-center mb-3">
                    <h1>Contacts from {{date('d M Y',strtotime($search_start_date))}} to {{date('d M Y')}}</h1>
                </div>
                <canvas id="chart-one"></canvas>

            </div>

            <div class="col-12">
                <div class="heading-one text-center mb-3">
                    <h1>Profile views</h1>
                </div>
                <canvas id="chart-two"></canvas>
                            </div>
        </div>
    </div>
</section>
@endsection


@section('custom_js')
<!-- OPTIONAL SCRIPTS -->
<script src="{{asset('public/frontend_assets/plugins/graph/Chart.min.js')}}"></script>

<script>
    let dateLabels = null;
    let message_data = null;
    let website_data = null;
    let phone_data = null;
    let profile_data = null;



    var barChartDataOne = {
        labels: dateLabels,
        datasets: [{
                label: "Received messages",
                backgroundColor: "yellow",
                data: message_data,
            },
            {
                label: "Phone requests",
                backgroundColor: "cyan",
                data: phone_data,
            },
            {
                label: "Website clicks",
                backgroundColor: "lightgreen",
                data: website_data
            },
        ],

    };


    var chartOptionsOne = {
        responsive: true,
        legend: {
            position: "top",
        },
        scales: {
            yAxes: [{
                // min: 0,
                // max: 100,
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                },
            }, ],
        },
    };


    //////////chart two/////////
    var barChartDataTwo = {
        labels: dateLabels,
        datasets: [{
            label: "Views",
            backgroundColor: "orange",
            data: profile_data,
        }, ],

    };


    var chartOptionsTwo = {
        responsive: true,
        legend: {
            position: "top",
        },
        scales: {
            yAxes: [{
                // min: 0,
                // max: 100,
                ticks: {
                    beginAtZero: true,
                    stepSize: 5
                },
            }, ],
        },
    };


    window.onload = function() {
        var ctx = document.getElementById("chart-one").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: "bar",
            data: barChartDataOne,
            options: chartOptionsOne,
        });

        var ctx1 = document.getElementById("chart-two").getContext("2d");
        window.myBar1 = new Chart(ctx1, {
            type: "bar",
            data: barChartDataTwo,
            options: chartOptionsTwo,
        });
    };
</script>
@endsection