@extends('template.master')

@section('page_styles')
    <link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
    <style>
        .btn-css{
            padding: 24% !important;
        }
        #success
        {
            float: right;
            padding: 1%;
            border: 1px solid darkseagreen;
            background: lightgreen;
            color: white;
        }

        #locations {
            overflow-y: scroll;
            height: 400px;
        }
        /*loader*/
        .loading{position:fixed;z-index:9999;height:2em;width:2em;overflow:visible;margin:auto;top:0;left:0;bottom:0;right:0}.loading:before{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.loading:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading:not(:required):after{content:'';display:block;font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:spinner 1.5s infinite linear;-moz-animation:spinner 1.5s infinite linear;-ms-animation:spinner 1.5s infinite linear;-o-animation:spinner 1.5s infinite linear;animation:spinner 1.5s infinite linear;border-radius:.5em;-webkit-box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.5) -1.5em 0 0 0,rgba(0,0,0,.5) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0;box-shadow:rgba(0,0,0,.75) 1.5em 0 0 0,rgba(0,0,0,.75) 1.1em 1.1em 0 0,rgba(0,0,0,.75) 0 1.5em 0 0,rgba(0,0,0,.75) -1.1em 1.1em 0 0,rgba(0,0,0,.75) -1.5em 0 0 0,rgba(0,0,0,.75) -1.1em -1.1em 0 0,rgba(0,0,0,.75) 0 -1.5em 0 0,rgba(0,0,0,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
    </style>
@stop

@section('content')
    <div id="success" style="display: none">
        Successful!
    </div>
    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-01">Domains</h2>

                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="row">
            <div class="col-xl-10">&nbsp;</div>
            <div class="col-xl-2">
                <a href="javascript: void(0)" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add-domain">Add Domain</a>
            </div>
        </div>
        <br/>
        <div class="row flex-row">
            <div class="col-xl-12">

                <table id="domain-tbl" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Domain Name</th>
                            <th>Company Name</th>
                            <th>RTR Id</th>
                            <th>RTC Id</th>
                            <th>RTS Id</th>
                            <th>GMB</th>
                            <th>Sites</th>
                            <th>Google Webmaster</th>
                            <th>Google Analytics</th>
                            <th>Callrail Id</th>
                            <th>Form Bucket Id</th>
                            <th>Citation File</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Domain Name</th>
                            <th>Company Name</th>
                            <th>RTR Id</th>
                            <th>RTC Id</th>
                            <th>RTS Id</th>
                            <th>GMB</th>
                            <th>Sites</th>
                            <th>Google Webmaster</th>
                            <th>Google Analytics</th>
                            <th>Callrail Id</th>
                            <th>Form Bucket Id</th>
                            <th>Citation File</th>
                        </tr>
                    </tfoot>
                </table>

            </div>
        </div>
        <!-- End Row -->

        <div class="col-md-5 padding-top-25 padding-left-25" id="col-recording">
            <div class="loading" style="display:none;">Loading&#8230;</div>
            <div id="" class="call-audio" style="background-color: #388aed">

            </div>
        </div>
    </div>

@stop

@section('page_modals')

    <div id="add-domain" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="add-form" method="POST" action="{{route('domains.store')}}">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Domain</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">
                        @csrf
                        <label class="form-control-label">Company<span class="text-danger ml-2">*</span></label>
                        <select name="company_id" class="form-control" required="required">
                            @foreach($companies as $company)
                                <option value="{{$company->id}}">{{$company->name}}</option>
                            @endforeach
                        </select>
                        <br/>
                        <label class="form-control-label">Website<span class="text-danger ml-2">*</span></label>
                        <input type="text" class="form-control" name="domain" required="required">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-shadow" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="gmb-div" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="add-form" method="POST" action="{{route('domains.gmb_store')}}">
                    <div class="modal-header">
                        <h4 class="modal-title">Manage Location</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">
                        @csrf
                        <input type="hidden" name="domain_id" id="domain_id">
                        <p><b>Tagged Locations:</b></p>
                        <div id="gmb-locations-by-domain"></div>
                        <div id="gmb-location"></div>
                        <br/>
                        <select class="form-control select-gmb" onchange="javascript: getGmbAccountLocations()">
                            <option value="">Please select</option>
                            @foreach ($accounts as $account)
                                <option value={{$account->id}}>{{$account->account_name}}</option>
                            @endforeach
                            <option value=0>Add GMB account</option>
                        </select>
                        <br/>
                        <div id="locations">

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="sites-div" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="add-form" method="POST" action="{{route('domains.gmb_store')}}">
                    <div class="modal-header">
                        <h4 class="modal-title">Manage Sites</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">
                        @csrf
                        <input type="hidden" name="domain_id" id="domain_id">
                        <p><b>Tagged Sites:</b></p>
                        <div id="sites-locations-by-domain"></div>
                        <div id="sites-location"></div>
                        <br/>
                        <select class="form-control select-kw" onchange="javascript: getDomainKwSites()">
                            <option value="">Please select</option>
                            @foreach ($kwAccounts as $kwAccount)
                                <option value={{$kwAccount->id}}>{{$kwAccount->account}}</option>
                            @endforeach
                            <option value=0>Add Search console account</option>
                        </select>
                        <br/>
                        <div id="sites">

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="analytics-div" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="analytics-form" method="POST" action="{{route('pr.store')}}">
                    <div class="modal-header">
                        <h4 class="modal-title">Manage Analytics</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">
                        @csrf
                        <input type="hidden" name="domain_id" id="domain_id_a">
                        <input type="hidden" name="domain_id" id="company_id_a">
                        <select name="analytics" class="form-control select-analytics" onchange="javascript: getAnalyticsAccounts()">
                            <option value="">Please select</option>
                        </select>
                        <br/>
                        <div id="analytics-response"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop
@section('page_scripts')
    <script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('#domain-tbl').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": "{{route('domains.load')}}"
            } );

            setInterval(function(){
                $(".citation").change(function () {
                   /* if ($(".citation").val() == "") {
                        alert('here');
                        console.log($(".citation").val());
                        return;
                    }*/
                    // your ajax submit
                    console.log($('.citation').val());

                    $('.form_'+$(this).attr('id')).submit();
                });

            }, 3000);
        } );


        function manage(datatype, id)
        {
            var data = {
                "_token": "{{ csrf_token() }}",
                "type": datatype,
                "id": id
            };

            data[datatype] = $('#'+datatype+'-'+id).val();

            $.ajax({
                type: 'POST',
                url: '{{route('domains.store')}}',
                data: data,
                dataType: 'json',
                success: function(resp) {
                    $('#success').slideToggle();
                    setTimeout(function(){ $('#success').slideToggle(); }, 5000);
                }
            });
        }

        function gmb(id, company_id)
        {
            $('.select-gmb').val('');
            $('#locations').html('');
            $('#domain_id').val(id);

            $.ajax({
                type: 'POST',
                url: '{{route('domains.get_locations_by_domain')}}',
                data: 'domain_id='+id,
                dataType: 'html',
                success: function(resp) {
                    $('#gmb-locations-by-domain').html('');
                    $('#gmb-locations-by-domain').html(resp);
                },
                error: function(xhr, status, error) {

                }
            });
        }

        function sites(id, company_id) {
            $('.select-kw').val('');
            $('#sites').html('');
            $('#domain_id').val(id);
        }

        function getGmbAccountLocations () {
            $('#locations').html('');
            let select = $('.select-gmb').find(":selected").val();
            if (select === '0') { //auth

                $.ajax({
                    type: 'GET',
                    url: '{{route('gmb.login_url')}}?callback=domain_management_gmb',
                    dataType: 'html',
                    success: function(resp) {
                        window.location.href = resp;
                    },
                    error: function(xhr, status, error) {
                        console.log('cant generate gmb login url');
                    }
                });
            } else {
                let domain_id = $('#domain_id').val();
                $('.loading').show();

                $.ajax({
                    type: 'GET',
                    url: '{{route('gmb.get_locations_by_account')}}?output=list&account_id='+select+'&domain_id='+domain_id,
                    dataType: 'html',
                    success: function(resp) {
                        $('#locations').html('');
                        $('#locations').html(resp);
                        $('.loading').hide();
                        $('#locationsTable').DataTable();
                    },
                    error: function(xhr, status, error) {
                        console.log('cant generate gmb login url');
                    }
                });
            }
        }

        function tagLocationToDomain (domain_id, location_id) {
            let tag = $('#chk-'+domain_id+'-'+location_id).is(':checked');
            $.ajax({
                type: 'POST',
                url: '{{route('domains.tag_location')}}',
                data: {domain_id: domain_id, location_id: location_id, tag: tag},
                dataType: 'html',
                success: function(resp) {

                },
                error: function(xhr, status, error) {
                    console.log('cant tag location to domain', error);
                }
            });
        }

        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 analytics(id, company_id)
        {
            $('.select-analytics').val('');
            $('#domain_id_a').val(id);
            $('#company_id_a').val(company_id);

            $.ajax({
                type: 'GET',
                url: '{{route('pr.get_account_list')}}',
                data: 'company_id='+company_id+'&domain_id='+id,
                dataType: 'json',
                success: function(resp) {
                    console.log(resp.data)
                    $('.select-analytics').html(resp.data);
                }
            });
        }

        function getAnalyticsAccounts()
        {
            $('#analytics').html('');
            $('#analytics-response').html('');
            let select = $('.select-analytics').find(":selected").val();

            if (select === '0') { //auth
                $.ajax({
                    type: 'GET',
                    url: '{{route('pr.getUrl')}}?company_id='+$('#company_id_a').val(),
                    dataType: 'html',
                    success: function(resp) {
                        window.location.href = resp;
                    },
                    error: function(xhr, status, error) {
                        console.log('auth search console failed');
                    }
                });
            } else {
                $('#analytics-response').html('Loading...');
                $.ajax({
                    type: 'GET',
                    url: '{{route('pr.get_list')}}',
                    data: 'account='+select+'&domain_id='+$('#domain_id_a').val()+'&company_id='+$('#company_id_a').val(),
                    dataType: 'html',
                    success: function(resp) {
                        $('#analytics-response').html(resp);
                        $('#anaylticsTable').DataTable();
                    },
                    error: function(xhr, status, error) {

                    }
                });
            }
        }


        function tagAnalyticsToDomain(id)
        {
            let tag = $('#chk-analytics-'+id).is(':checked');
            $.ajax({
                type: 'POST',
                url: '{{route('pr.tag')}}',
                data: {id: id, tag: tag},
                dataType: 'html',
                success: function(resp) {

                },
                error: function(xhr, status, error) {
                    console.log('cant tag location to domain', error);
                }
            });
        }


        function getDomainKwSites () {
            $('#sites').html('');
            let select = $('.select-kw').find(":selected").val();
            let domain_id = $('#domain_id').val();

            if (select === '0') { //auth
                $.ajax({
                    type: 'GET',
                    url: '{{route('domains.init_search')}}?callback=domain_management_webm',
                    dataType: 'html',
                    success: function(resp) {
                        window.location.href = resp;
                    },
                    error: function(xhr, status, error) {
                        console.log('auth search console failed');
                    }
                });
            } else {
                $.ajax({
                    type: 'GET',
                    url: '{{route('domains.get_kw_sites_by_domain')}}?output=list&account_id='+select+'&domain_id='+domain_id,
                    dataType: 'html',
                    success: function(resp) {
                        $('#sites').html('');
                        $('#sites').html(resp);
                        $('#sitesTable').DataTable();
                    },
                    error: function(xhr, status, error) {
                        console.log('cant generate kw sites for domain '+domain_id);
                    }
                });
            }
        }
    </script>
@stop