@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <style type="text/css">
        .success {
            background-color: #8085E9;
        }

        .highcharts-credits {
            display: none;
        }

        .la {
            cursor: pointer;
        }

        .btn-save {
            display: none;
        }

        .value_categories {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="{{asset('assets/css/citation/citation.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/layout/callrail.css')}}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@stop

@section('content')
    @if (!is_null($citation))
        @php
            $data_count = 0;

            $business_count_ok = 0;
            $business_count_errors = 0;
            $phone_count_ok = 0;
            $phone_count_errors = 0;
            $zip_count_ok = 0;
            $zip_count_errors = 0;
        @endphp
        @foreach ($citation as $data)
            @if ($data[0] !== 'Domain')
                @if ($data[9] === 'yes')
                    @php $business_count_errors++; @endphp
                @else
                    @php $business_count_ok++; @endphp
                @endif

                @if ($data[14] === 'yes')
                    @php $phone_count_errors++; @endphp
                @else
                    @php $phone_count_ok++; @endphp
                @endif

                @if ($data[12] === 'yes')
                    @php $zip_count_errors++; @endphp
                @else
                    @php $zip_count_ok++; @endphp
                @endif

                @php
                    $data_count++;
                @endphp
            @endif
        @endforeach

        @php
            $business_percentage_ok = ($business_count_ok/$data_count)*100;
            $phone_percentage_ok = ($phone_count_ok/$data_count)*100;
            $zip_percentage_ok = ($zip_count_ok/$data_count)*100;
        @endphp
    @else
        @include('no_data', [
                   'nd_title' => 'No Citation Report Available',
                   'nd_subtitle' => 'Our team will soon provide a citation report for you.'
        ])
    @endif
    <div class="container-fluid">
        @if (!is_null($citation))
        <div class="row">
            <div class="col-md-6">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="top-tab" data-toggle="tab" href="#top" role="tab" aria-controls="top" aria-selected="true">Top Citations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="active-tab" data-toggle="tab" href="#active" role="tab" aria-controls="active" aria-selected="false">Active Citations</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6">
                <span class="pull-right">
                    <a class="btn btn-primary" data-toggle="modal" data-target="#modal-categories" href="javascript: void(0);" role="button">Manage Categories</a>
                </span>
            </div>
        </div>

        <div class="row">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="top" role="tabpanel" aria-labelledby="top-tab"><br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row"><br/>
                                <div class="col-md-3">
                                    <h2>Key Citations Summary</h2>
                                    <hr/>
                                </div>
                                <div class="col-md-3">
                                    <h2>Business Name</h2>
                                    <hr/>
                                </div>
                                <div class="col-md-3">
                                    <h2>Phone Number</h2>
                                    <hr/>
                                </div>
                                <div class="col-md-3">
                                    <h2>Zip/Postal Code</h2>
                                    <hr/>
                                </div>
                                <div class="col-md-3">
                                    <div id="container"></div>
                                </div>
                                <div class="col-md-3">
                                    <div id="container_business"></div>
                                </div>
                                <div class="col-md-3">
                                    <div id="container_phone"></div>
                                </div>
                                <div class="col-md-3">
                                    <div id="container_zip"></div>
                                </div>
                            </div>
                        </div><br/><br/>
                        <div class="col-md-12"><br><br>
                            <div class="widget has-shadow">
                                <div class="text-right pull-right"><a href="javascript:void(0)" onclick="javascript:toggleC()">Toggle No Company</a></div>

                                <div class="widget-header bordered no-actions d-flex align-items-center site-bg" style="">
                                    <h3 class="text-white">Top Citations</h3>
                                </div>
                                <div class="padding-top-10">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-callrail mb-0 table-hover w-100">
                                            <thead>
                                            <tr>
                                                <th>Site/Directory</th>
                                                <th>Company Name</th>
                                                <th>Address</th>
                                                <th>Zip/Postcode</th>
                                                <th>Phone Number</th>
                                                <th>Status </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach ($citation as $data)
                                                @if ($data[0] !== 'Domain')
                                                    <tr @if (empty($data[8])) class="tr-empty-c" @endif>
                                                        <td>
                                                            <img src="{{asset('assets/img/citation/'.$data[0].'.png')}}" width="20px" alt=""/>
                                                            {{$data[0]}}
                                                        </td>
                                                        <td>
                                               <span class="@if ($data[9] === 'yes') text-danger @else  @endif">
                                               {{$data[8]}}
                                               </span>
                                                        </td>
                                                        <td>{{$data[10]}}</td>
                                                        <td>
                                               <span class="@if ($data[12] === 'yes') text-danger @else  @endif">
                                               {{$data[11]}}
                                               </span>
                                                        </td><!---zip code error 12-->
                                                        <td>
                                               <span class="@if ($data[14] === 'yes') text-danger @else  @endif">
                                               {{$data[13]}}
                                               </span>
                                                        </td>
                                                        <td>{{$data[1]}}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="active" role="tabpanel" aria-labelledby="active-tab"><br/>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="active_container"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="widget has-shadow">
                                <div class="widget-header bordered no-actions d-flex align-items-center site-bg" style="">
                                    <h3 class="text-white">Active Citations</h3>
                                </div>
                                <div class="padding-top-10">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-callrail mb-0 table-hover w-100">
                                            <thead>
                                            <tr>
                                                <th>Site/Directory</th>
                                                <th>Date Identified</th>
                                                <th>Citation/Authority</th>
                                                <th>Citation Value</th>
                                                <th>Site Type</th>
                                                <th>Free/Paid </th>
                                                <th>Status </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach ($citation as $data)
                                                @if ($data[0] !== 'Domain' && strtolower($data[1]) === 'active')
                                                    <tr>
                                                        <td>
                                                            <img src="{{asset('assets/img/citation/'.$data[0].'.png')}}" width="20px" alt=""/>
                                                            {{$data[0]}}
                                                        </td>
                                                        <td>{{$data[2]}}</td>
                                                        <td>{{$data[3]}}/100</td>
                                                        <td>{{$data[4]}}</td>
                                                        <td>{{$data[5]}}</td>
                                                        <td>{{$data[6]}}</td>
                                                        <td>{{$data[1]}}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Col -->
        </div>
        @endif
        <!-- End Row -->
    </div>
@stop

@section('page_modals')
    <div id="modal-categories" class="modal fade" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width:50%">
            <div class="modal-content">

                    <div class="modal-header" style="background-color: #eee;">
                        <h4 class="modal-title">Manage Citation Categories</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">
                        <div class="row">
                            <div class="col-md-2 float-right">Label: </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="category" placeholder="Category" required>
                                <input type="hidden" class="form-control" name="category_id">
                            </div>
                            <div class="col-md-2">
                                <input type="button" class="btn btn-primary float-right" value="Submit" id="addCategory">
                            </div>
                        </div>
                        &nbsp;
                        <hr/>
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-bordered table-alternate  w-100" id="categories-table">
                                    <thead>
                                    <tr>
                                        <th>Label</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script src="{{asset('assets/vendors/js/datatables/datatables.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/jszip.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/pdfmake.min.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/vfs_fonts.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datatables/buttons.print.min.js')}}"></script>
    <script src="{{asset('assets/js/components/tables/tables.js')}}"></script>
    <script src="{{asset('assets/vendors/js/datepicker/daterangepicker.js')}}"></script>

    {{--    <script src="{{asset('assets/js/components/wizard/form-wizard.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 src="https://code.highcharts.com/modules/variable-pie.js"></script>
    @include('call_rails.calljs')
    @if (!is_null($citation))
    <script>
        $(function(){
            let table = $('#categories-table').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": "{{route('citation.citation_categories_dtbl')}}",
                "columnDefs": [
                    { "sortable": false, "targets": [0,1] }
                ],
            } );

            $('#addCategory').click(function(){
                let value = $('input[name=category]').val();
                if (value!='') {
                    $.ajax({
                        type: 'POST',
                        url: '{{route('citation.action', ['type' => 'add_category'])}}?value='+value,
                        dataType: 'json',
                        success: function(resp) {
                            if (resp.message =='existing') {
                                alert('Category already exists!');
                            } else {
                                alert('Category successfully added!');
                            }
                            $('input[name=category]').val('');
                            table.draw();
                        }
                    });
                } else {
                    alert('Category cannot be null!');
                }
            });

            Highcharts.chart('container', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: <b>{point.y}</b>'
                },
                series: [{
                    minPointSize: 10,
                    innerSize: '100%',
                    zMin: 0,
                    name: 'top sites',
                    data: [{
                        name: 'Listed',
                        y: {{$top_sites_stats['listed']}},
                    }]
                }]
            });

            Highcharts.chart('container_business', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: <b>{point.y}</b>'
                },
                series: [{
                    minPointSize: 10,
                    innerSize: '100%',
                    zMin: 0,
                    name: 'top sites',
                    data: [{
                        name: 'Correct',
                        y: {{$business_count_ok}},
                    }]
                }]
            });

            Highcharts.chart('container_phone', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: <b>{point.y}</b>'
                },
                series: [{
                    minPointSize: 10,
                    innerSize: '100%',
                    zMin: 0,
                    name: 'top sites',
                    data: [{
                        name: 'Correct',
                        y: {{$phone_count_ok}},
                    }]
                }]
            });

            Highcharts.chart('container_zip', {
                chart: {
                    type: 'variablepie'
                },
                title: {
                    text: ''
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: <b>{point.y}</b>'
                },
                series: [{
                    minPointSize: 10,
                    innerSize: '100%',
                    zMin: 0,
                    name: 'top sites',
                    data: [{
                        name: 'Correct',
                        y: {{$zip_count_ok}},
                    }]
                }]
            });

            Highcharts.chart('active_container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Active Citations'
                },
                xAxis: {
                    categories: [
                        @foreach($active_citation_by_date as $date => $active)
                            '{{$date}}',
                        @endforeach
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Active Citations'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td><td>{point.y}</td>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Active Citations',
                    data: [
                        @foreach($active_citation_by_date as $date => $active)
                            {{count($active)}},
                        @endforeach
                    ]

                }]
            });
        });

        function toggleC () {
            $('.tr-empty-c').toggle();
        }

        function editCategory(id){
            $('#value_'+id).show();
            $('#save_'+id).show();
            $('#text-'+id).hide();

            $.ajax({
                type: 'GET',
                url: '{{route('citation.action', ['type' => 'get_category_name'])}}?id='+id,
                dataType: 'json',
                success: function(resp) {
                    //$('input[name=category]').val(resp);
                    //$('input[name=category_id]').val(id);
                },
                error: function(xhr, status, error) {

                }
            });
        }
        function deleteCategory(id){
            if(confirm('Are you sure you want to delete this category?')){
                $.ajax({
                    type: 'POST',
                    url: '{{route('citation.action', ['type' => 'delete_category'])}}?id='+id,
                    dataType: 'html',
                    success: function(resp) {
                        location.reload();
                    }
                });
            }
        }

        function saveCategory (id) {
            let value = $('#value_'+id).val();
            $.ajax({
                type: 'POST',
                url: '{{route('citation.action', ['type' => 'update_category'])}}?id='+id+'&value='+value,
                dataType: 'json',
                success: function(resp) {
                    $('#value_'+id).hide();
                    $('#save_'+id).hide();
                    $('#text-'+id).text(value);
                    $('#text-'+id).show();
                }
            });
        }
    </script>
    @endif
@stop