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

@section('content')

<style>

</style>

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

    <x-section_heading title="Schedule" rowclass="my-5"/>

    <div class="card shadow mb-4">
        <div class="card-header bg-warning">
            <i class='fas fa-calendar-alt mr-2'></i> Appointments in the next 7 days
        </div>
        <div class="card-body">
            @if($appointments->count() > 0)
                @foreach($appointments as $apo)
                    {!! $apo->getAdminInfoLine() !!}<br />
                @endforeach
            @else
                No appointments
            @endif
            <br />
            <a class="mt-2" href="/staff/schedule">View full schedule</a>
        </div>
    </div>

    <x-section_heading title="Statistics" rowclass="my-5"/>

    <div class="row mb-3">
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    Summary <strong>live&#8482;</strong> <span style="font-size: 0.7rem; font-style: italic;">updates live as leads are aquired</span>
                </div>
                <div class="card-body">
                    <p>We currently have <strong>{{ $lead_states['GL9 postcode'] }}</strong> leads in GL9.</p>
                    <ul>
                        <li>Estimated voucher value: <strong>&pound;{{ number_format( $estimateVoucherValue) }}</strong></li>
                        <li>Estimated annual revenue: <strong>&pound;{{ number_format( ($estimateRevenue*12)) }}</strong></li>
                        <li><i>*estimates calculated using an average figure from the {{ $lead_states['Package selected'] }} leads we already have that have specified their desired package.</i></li>
                    </ul>
                    <p>We currently have {{ $lead_states['Package selected'] }} leads who have selected packages that will give us a annual revenue of <strong>&pound;{{ number_format( ($revenuePotential*12)) }}.</strong> their voucher value is <strong>&pound;{{ number_format( $voucherValue) }}.</strong></p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    Leads acquired over past 30 days
                </div>
                <div class="card-body">
                    <canvas id="leadsAquiredOnDayChart" style="height: 200px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    Lead states
                </div>
                <div class="card-body">
                    <canvas id="leadStatesChart" style="height: 200px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    Packages selected
                </div>
                <div class="card-body">
                    <canvas id="packagesSelectedChart" style="height: 200px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    How leads were aquired
                </div>
                <div class="card-body">
                    <canvas id="leadAquisitionMethodChart" style="height: 200px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-12">
            <div class="card shadow lead-form w-100">
                <div class="card-header darken" id="lead-heading">
                    Postcode search count
                </div>
                <div class="card-body">
                    <canvas id="postcodeSearchesChart" style="height: 200px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col"><a href="{!! route('stats', array('postcode', $next_order_direction)) !!}">Postcode</a></th>
                        <th scope="col"><a href="{!! route('stats', 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('postcodeSearchesChart').getContext('2d');
var postcodeSearchesChart = 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(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)'
            ],
            borderColor: [
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

ctx = document.getElementById('leadsAquiredOnDayChart').getContext('2d');
var leadsAquiredOnDayChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            @foreach($leads_acquired_on_day as $day => $count)
                '{{$day}}',
            @endforeach
            ],
        datasets: [{
            label: '# of leads acquired',
            data: [
                @foreach($leads_acquired_on_day as $day => $count)
                    {{$count}},
                @endforeach
            ],
            backgroundColor: [
                'rgba(129, 169, 102, 0.8)'
            ],
            borderColor: [
                'rgba(129, 169, 102, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

ctx = document.getElementById('leadStatesChart').getContext('2d');
var leadStatesChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            @foreach($lead_states as $state => $count)
                '{{$state}}',
            @endforeach
            ],
        datasets: [{
            label: '# of leads in state',
            data: [
                @foreach($lead_states as $state => $count)
                    {{$count}},
                @endforeach
            ],
            backgroundColor: [
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)'
            ],
            borderColor: [
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

ctx = document.getElementById('packagesSelectedChart').getContext('2d');
var packagesSelectedChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [
            @foreach($packages_selected as $package => $count)
                '{{$package}}',
            @endforeach
            ],
        datasets: [{
            label: '# of leads that selected package',
            data: [
                @foreach($packages_selected as $package => $count)
                    {{$count}},
                @endforeach
            ],
            backgroundColor: [
                'rgba(7, 142, 20, 0.8)',
                'rgba(255, 114, 114, 0.8)',
                'rgba(255, 210, 114, 0.8)',
                'rgba(201, 117, 0, 0.8)',
                'rgba(0, 120, 201, 0.8)',
                'rgba(149, 40, 204, 0.8)',
                'rgba(129, 169, 102, 0.8)'
            ],
            borderColor: [
                'rgba(7, 142, 20, 1)',
                'rgba(255, 114, 114, 1)',
                'rgba(255, 210, 114, 1)',
                'rgba(201, 117, 0, 1)',
                'rgba(0, 120, 201, 1)',
                'rgba(149, 40, 204, 1)',
                'rgba(129, 169, 102, 1)'
            ],
            borderWidth: 1
        }]
    }
});


ctx = document.getElementById('leadAquisitionMethodChart').getContext('2d');
var postcodeSearchesChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            @foreach($lead_aquisition_methods as $method => $count)
                '{{$method}}',
            @endforeach
            ],
        datasets: [{
            label: '# of aquisitions',
            data: [
                @foreach($lead_aquisition_methods as $method => $count)
                    {{$count}},
                @endforeach
            ],
            backgroundColor: [
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)',
                'rgba(129, 169, 102, 0.8)'
            ],
            borderColor: [
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)',
                'rgba(129, 169, 102, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});



</script>

@endsection