@extends('template.master')

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <style>
        .widget-header2 {
            background: #eee;padding: .85rem 1.4rem;position: relative;width: 100%;
        }

        #priorities_table {
            font-family: Noto Sans;
        }

        .la-trash {
            cursor: pointer;
        }
    </style>
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
    <style>
        .contacts a {
            color: #aea9c3;
        }

        .active {
            color: #e76c90 !important;
        }
        .pac-container {
            background-color: #FFF;
            z-index: 1002;
            position: fixed;
            display: inline-block;
            float: left;
        }
        .modal{
            z-index: 1001 !important;
        }
        #modal-centered {
            z-index: 1001 !important;
        }
        .modal-backdrop{
            z-index: 10;
        }

        /*modal table*/
        .modal-th {
            font-weight: bolder;
            color:white;
            background-color: #09405F;
            height:66px;
            vertical-align: middle;
        }


        .highlight-table {
            /*font-weight: bolder !important;*/
            /*font-size:16px;*/
            color:black;
            /*background-color: #a8dfff;*/
            border: 1px solid #09405F !important;
        }
        .highlight-table td {
            /*font-weight: bolder !important;*/
            /*font-size:16px;*/
            color:black;
            /*background-color: #a8dfff;*/
            border: 1px solid #09405F !important;
        }

        .rank-arrows {
            font-size:22px;
            font-weight: 900;
            float: right;
            text-shadow: -1px 0 green, 0 1px green, 1px 0 green, 0 -1px green;
        }
        .td-ranking_page {
            font-size:10px;
            padding:0px;
        }

        #keywordSuggestionsTable_wrapper {
            width: 99%;
            padding: 10px;
        }

        .filler {
            margin-right:20px
        }
        #keywords-table tr td {
            color:black;
        }
        #keywords-table tbody tr td:hover {
            font-weight: bolder !important;
            font-size:16px !important;
            /*color:black;*/
            /*background-color: #a8dfff;*/
            /*border: 1px solid red !important;*/
        }
        .rank-top-10 {
            background-color: #63BE7B;
        }
        .rank-top-30 {
            background-color: #91CB7D;
        }
        .rank-top-100 {
            background-color: #E7E482;
        }
        .rank-top-over {
            background-color: #F9736D;
        }
        .rank-option-icons {
            color:white !important;
        }
        .contact-card .stats .text{
            font-size: 10px;
        }
        .kw-date-picker {
            border: 1px solid #fff;
            font-size: 1.4em;
            background-color: transparent;
            border-bottom: 1px solid black;
        }

    </style>
@stop

@section('content')

    <div style="" class="container-fluid main-content-0">
        <!-- Begin Page Header-->
        @include('keywordreporting.header_view')

        @if($keywords->count() == 0)
            @include('no_data', [
                'nd_title' => 'Keyword Reporting is Under Review',
                'nd_subtitle' => 'The system and our team is processing the best keywords to use for your website.'
            ])
        @else
        <!-- End Page Header -->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget-image has-shadow">
                        <div class="contact-card">
                            <div class="widget-body">
                                                                                                
                                <table class="table">
                                    <tr>
                                        <td rowspan="2" class="text-center" style="width: 12%;background-color: #09405F;">
                                            <h3 class="text-white">
                                            PRIORITIES
                                            </h3>
                                        </td>
                                        <td style="width: 10%;font-weight: 700;">CATEGORIES:</td>
                                        <td>
                                            @if(!empty($categories_with_prio))
                                            @foreach($categories_with_prio as $_index => $cwp)
                                                <span style="font-weight:700;color:{{$redShades[$_index-1]}}">
                                                    #{{$_index}}
                                                    {{$cwp->label}}
                                                </span>
                                                    @if (!$loop->last) &nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp; @endif
                                            @endforeach
                                            @else
                                                <span style="color:#6B0000;">
                                                    NO PRIORITIES FOR CATEGORIES ARE SET
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 10%;font-weight: 700;">LOCATIONS:</td>
                                        <td>
                                            @if(!empty($locations_with_prio))
                                                @foreach($locations_with_prio as $_index => $cwp)
                                                    <span style="font-weight:700;color:{{$redShades[$_index-1]}}">
                                                    #{{$_index}}
                                                        {{$cwp->label}}
                                                </span>
                                                    @if (!$loop->last) &nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp; @endif
                                                @endforeach
                                            @else
                                                <span style="color:#6B0000;">
                                                    NO PRIORITIES FOR LOCATIONS ARE SET
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                @if($compact_view == 1)
                    <div class="col-md-4 as-section as-0">
                @else
                    <div class="col-md-12">
                @endif
{{--                    <h3>Keywords Overall Performance By Category and Location</h3>--}}
                    <div class="row flex-row">
                        @include('keywordreporting.total_table')
                    </div>
                </div>

                @if($compact_view == 1)
                     <div class="col-md-8 as-section  as-1">
                @else
                     <div class="col-md-12">
                @endif

                    <div class="row flex-row">
                        <div class="table-responsive2" style="width:100%;">
                            <table id="keywords-table" class="table table-sm table-bordered table-striped table-hover mb-0 w-100">
                                <thead>
                                <tr>
                                    {{--                        <th rowspan="2">ID</th>--}}
                                    <th rowspan="2">Keywords</th>
                                    <th rowspan="2">Category</th>
                                    @foreach($locations as $location)
                                        <th colspan="5" class="text-center location-col">
                                            {{clean_location($location->label)}}
                                        </th>
                                    @endforeach
                                </tr>
                                <tr>
                                    @php
                                        $loc_color = ['blue', 'red', 'green', 'orange'];
                                    @endphp
                                    @foreach($locations as $key => $location)
                                        <th class="text-center" style="border-bottom: 4px solid {{ $loc_color[$key] }}">(G) Desktop</th>
                                        <th class="text-center" style="border-bottom: 4px solid {{ $loc_color[$key] }}">(G) Mobile</th>
                                        <th class="text-center third-party-col" style="display:none;border-bottom: 4px solid {{ $loc_color[$key] }}">(G) 3rd Party</th>
                                        <th class="text-center" style="border-bottom: 4px solid {{ $loc_color[$key] }}">(G) Maps</th>
                                        <th class="text-center" style="border-bottom: 4px solid {{ $loc_color[$key] }}">(B) Desktop</th>
                                        <th class="text-center" style="border-bottom: 4px solid {{ $loc_color[$key] }}">(B) Mobile</th>
                                        <th class="text-center third-party-col" style="display:none;border-bottom: 4px solid {{ $loc_color[$key] }}">(B) 3rd Party</th>
                                    @endforeach
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($keywords as $keyword)
                                    <tr class="keyword-{{$keyword->kw_category_id}}">
                                        <td style="max-width:100px;">
                                            {{--                                #{{$keyword->id}}--}}
                                            {{$keyword->keyword}}
                                        </td>
                                        {{--                                <td style="width:100px;background-color: {{$category_colors[$keyword->kw_category_id]}};">--}}
                                        <td style="width:100px;">
                                            {{$categories_array[$keyword->kw_category_id]}}
                                        </td>
                                        @foreach($locations as $key => $location)
                                            {{--DESKTOP RANKING--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                                                                <td class="text-center {{getRankValueClass($kw_data->rank)}}">
                                                    {!! kw_rank_getvalue($kw_data) !!}
                                                    @if(isset($previous_data[$keyword->id][$location->id]) && !is_null(kw_rank_getvalue($current_data[$keyword->id][$location->id])) && kw_rank_getvalue($current_data[$keyword->id][$location->id]) != 0)
                                                        {!! kw_rank_compare($current_data[$keyword->id][$location->id], $previous_data[$keyword->id][$location->id], '', $show_down) !!}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                            {{--MOBILE RANKING--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                                                                <td class="text-center {{getRankValueClass($kw_data->mobile_rank)}}">
                                                    {!! kw_mobile_rank_getvalue($kw_data) !!}
                                                    @if(isset($previous_data[$keyword->id][$location->id]) && !is_null(kw_mobile_rank_getvalue($current_data[$keyword->id][$location->id])) && kw_mobile_rank_getvalue($current_data[$keyword->id][$location->id]) != 0)
                                                        {!! kw_rank_compare($current_data[$keyword->id][$location->id], $previous_data[$keyword->id][$location->id], '', $show_down) !!}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                            {{--THIRD PARTY--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                <td class="text-center third-party-col {{getRankValueClass($current_data[$keyword->id][$location->id]->third_party)}}" style="display:none;">
                                                    {!! kw_third_getvalue($current_data[$keyword->id][$location->id]) !!}
                                                </td>
                                            @else
                                                <td class="text-center third-party-col" style="display:none;">
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                            {{--LOCAL RANKING--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                                                                <td class="text-center {{getRankValueClass($kw_data->local_rank)}}">
                                                    {!! kw_local_getvalue($kw_data) !!}
                                                    @if(isset($previous_data[$keyword->id][$location->id]) && !is_null(kw_local_getvalue($current_data[$keyword->id][$location->id])) && kw_local_getvalue($current_data[$keyword->id][$location->id]) != 0)
                                                        {!! kw_rank_compare($current_data[$keyword->id][$location->id], $previous_data[$keyword->id][$location->id], 'local_rank', $show_down) !!}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif


                                            {{---BING--}}
                                            {{--DESKTOP RANKING--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                                                                <td class="text-center {{getRankValueClass($kw_data->bing)}}">
                                                    {!! kw_rank_getvalue($kw_data, 'bing') !!}
                                                    @if(isset($previous_data[$keyword->id][$location->id]) && !is_null(kw_rank_getvalue($current_data[$keyword->id][$location->id], 'bing')) && kw_rank_getvalue($current_data[$keyword->id][$location->id], 'bing') != 0)
                                                        {!! kw_rank_compare($current_data[$keyword->id][$location->id], $previous_data[$keyword->id][$location->id], 'bing', $show_down) !!}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                            {{--MOBILE RANKING--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                                                                <td class="text-center {{getRankValueClass($kw_data->mobile_rank)}}">
                                                    {!! kw_rank_getvalue($kw_data, 'bing_mobile') !!}
                                                    @if(isset($previous_data[$keyword->id][$location->id]) && !is_null(kw_rank_getvalue($current_data[$keyword->id][$location->id], 'bing_mobile')) && kw_rank_getvalue($current_data[$keyword->id][$location->id], 'bing_mobile') != 0)
                                                        {!! kw_rank_compare($current_data[$keyword->id][$location->id], $previous_data[$keyword->id][$location->id], 'bing_mobile', $show_down) !!}
                                                    @endif
                                                </td>
                                            @else
                                                <td>
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                            {{--THIRD PARTY--}}
                                            @if(isset($current_data[$keyword->id][$location->id]))
                                                <td class="text-center third-party-col {{getRankValueClass($current_data[$keyword->id][$location->id]->bing_third_party)}}" style="display:none;">
                                                    {!! kw_third_getvalue($current_data[$keyword->id][$location->id], 'bing') !!}
                                                </td>
                                            @else
                                                <td class="text-center third-party-col" style="display:none;">
                                                    <span style="opacity: 0">0</span>N/A
                                                </td>
                                            @endif

                                        @endforeach
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>

            <!-- End Row -->
            <div class="clearfix">
                <br />
            </div>

            {{--Keywords Table--}}
        @endif
    </div>

@stop

@section('page_modals')
    @include('keywordreporting.kw_modal_form')
@stop
@section('page_scripts')
    <script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{asset('assets/vendors/js/datepicker/daterangepicker.js')}}"></script>

    <script>
        jQuery.extend( jQuery.fn.dataTableExt.oSort, {
            "num-html-pre": function ( a ) {
                var x = String(a).replace( /<[\s\S]*?>/g, "" );
                return parseFloat( x );
            },

            "num-html-asc": function ( a, b ) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },

            "num-html-desc": function ( a, b ) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        } );

        var table = $('#keywords-table').DataTable( {
            "pageLength": 50,
            "columnDefs": [
                {'order': [[ 0, "asc" ]]},
                {'targets': [0,1], 'type': 'html'},
                {'targets': '_all', 'type': 'num-html'},
            ],
        } );
        $(document).ready(function() {



            $('#keywords-table tbody')
                .on( 'mouseenter', 'td', function () {
                    var colIdx = table.cell(this).index().column;
                    var rowIdx = table.cell(this).index().row;

                    $( table.cells().nodes() ).removeClass( 'highlight-table' );
                    $( table.rows().nodes() ).removeClass( 'highlight-table' );
                    $( table.column( colIdx ).nodes() ).addClass( 'highlight-table' );
                    // $( table.row().nodes() ).removeClass( 'highlight-table' );
                    $( table.row( rowIdx ).nodes() ).addClass( 'highlight-table' );


                } );
        } );

        $(function(){
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
            $('#manage-keywords-btn').on('click', function(){

            });

            $('#add-new-category-btn').on('click', function(){
                $.ajax({
                    type: 'GET',
                    url: '{{route('keywordreporting.action', ['get_category_form'])}}?ctr='+$('#category-ctr').val(),
                    dataType: 'html',
                    success: function(resp) {
                        $('#category-tr-holder td:nth-last-child(2)').after('<td>'+resp+'</td>');
                        $('#category-ctr').val(parseInt($('#category-ctr').val())+1);
                    }
                });

                // $('#category-tr-holder').append('<td>HI</td>');
            });

            $('#manage-next-btn').on('click', function(){
                $('#loc-form-holder').html('Processing... Please wait...');

                /*partially submit category and keywords*/
                $.ajax({
                    type: 'POST',
                    url: '{{route('keywordreporting.manage_submit')}}?justCat=1',
                    data: $('#manage-keywords-form').serialize(),
                    dataType: 'json',
                    success: function(resp) {
                        /*update keyword reporting form*/
                        refresh_category_form();

                        /*load location form*/
                        $.ajax({
                            type: 'GET',
                            url: '{{route('keywordreporting.action', ['get_loc_form'])}}?domain_id={{$domain_id}}',
                            dataType: 'html',
                            success: function(resp) {
                                $('#loc-form-holder').html(resp);
                            }
                        });
                    }
                });

                $(this).hide();
                // $('.mk-step').hide();
                $('#mk-step-2').show();
                $('#manage-submit-btn').show();
            });
        });

        function refresh_category_form(){
            $.ajax({
                type: 'GET',
                url: '{{route('keywordreporting.action', ['get_category_form_full'])}}?domain_id={{$domain_id}}',
                dataType: 'html',
                success: function(resp) {
                    $('#category-form-holder').html(resp);
                }
            });
        }

        function toggle(cat_id)
        {
            if ( $('.header-'+cat_id).attr('alt') == 'green' ) {
                $('.keyword-'+cat_id).hide();
                $('.header-'+cat_id).attr('alt', 'gray');
                $('.header-'+cat_id).attr('style', 'cursor: pointer; font-size: 1.5em !important; color: gray;');
            } else {
                $('.keyword-'+cat_id).show();
                $('.header-'+cat_id).attr('alt', 'green');
                $('.header-'+cat_id).attr('style', 'cursor: pointer; font-size: 1.5em !important; color: green;');
            }
        }

        $('#manage-submit-btn').on('click', function(){
            $('#manage-keywords-form').submit();
        });

        function toggleThirdParty(){
            $('.third-party-col').toggle();


            if($('.third-party-col').is(':hidden')){
                $('.location-col').attr('colspan', 6);
            }else{
                $('.location-col').attr('colspan', 7);
            }

            table.columns.adjust().draw();
        }

        function compareKeywordData () {
            let date_from = $('.datepicker_from').val();
            let date_to = $('.datepicker_to').val();

            $.ajax({
                type: 'GET',
                url: '{{route('keywordreporting.action', ['set_date_filter'])}}?date_from='+date_from+'&date_to='+date_to,
                dataType: 'html',
                success: function(resp) {
                    location.reload();
                }
            });
        }

        function addSearchConsoleAccount () {
            $.ajax({
                type: 'GET',
                url: '{{route('domains.init_search')}}?callback=keyword_search_console',
                dataType: 'html',
                success: function(resp) {
                    window.location.href = resp;
                },
                error: function(xhr, status, error) {
                    console.log('auth search console failed');
                }
            });
        }

        function tagSiteToDomain (domain_id, site_id) {
            let tag = $('#chk-'+domain_id+'-'+site_id).is(':checked');

            $('.chk-site').each(function () {
                let this_id = $(this).attr('id');
                if(this_id != 'chk-'+domain_id+'-'+site_id) {
                    $(this).prop('checked', false);
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{route('domains.tag_domain')}}',
                data: {domain_id: domain_id, site_id: site_id, tag: tag},
                dataType: 'html',
                success: function(resp) {

                },
                error: function(xhr, status, error) {
                    console.log('cant tag location to domain', error);
                }
            });
        }
        function runAfterPreload(){
            // Animation with all options
            var duration = 0;
            for(var x=0;x<=6;x++){
                $('.as-'+x).show();
                duration += 350;
                $('.as-'+x).animateCSS('fadeInUp', duration);
            }

        }

        function public_link() {
            var copyText = document.getElementById("myInput");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            document.execCommand("copy");
            new Noty({
                text: '<div class="text-center success ">Public link has been copied to your clipboard</div>',
                type: 'success',
                layout: 'topCenter',
                timeout: 3000,
                animation: {
                    open: 'animated fadeIn', // Animate.css class names
                    close: 'animated fadeOut' // Animate.css class names
                }
            }).show()
        }
    </script>
@stop