@extends('layouts.'.env('THEME'))

@section('content')

<style>

</style>

<div class="container" id="main-container">

    <x-section_heading title="Top postcode searches" rowclass="my-5"/>

    <div class="row">
        <div class="col-12">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col"><a href="{!! route('postcode_searches', array('postcode', $next_order_direction)) !!}">Postcode</a></th>
                        <th scope="col"><a href="{!! route('postcode_searches', array('created_at', $next_order_direction)) !!}">Last searched</a></th>
                        <th scope="col">This week</th>
                        <th scope="col">This month</th>
                        <th scope="col">Leads</th>
                        <th scope="col">All time</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pq_data['stats'] as $postcode => $stats)
                    <tr>
                        <th scope="row">{{$postcode}}</th>
                        <td>{{$stats['last_searched']}}</td>
                        <td>{{$stats['week']}}</td>
                        <td>{{$stats['month']}}</td>
                        <td>{{$stats['leads']}}</td>
                        <td>{{$stats['total']}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

	<div class="row" style="display: none;">
	    <div class="col-12">
	        <canvas id="myChart" width="400" height="400"></canvas>
	    </div>
	</div>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            @foreach($pq_data['count'] as $postcode => $count)
                '{{$postcode}}',
            @endforeach
            ],
        datasets: [{
            label: '# of Searches',
            data: [
                @foreach($pq_data['count'] as $postcode => $count)
                    {{$count}},
                @endforeach
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

@endsection