<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
@extends('layout.main')

@section('main')

    <div id="wrapper">

        @include('admin.sidebar_menu')

        <div id="page-wrapper">
            

            @if(session('error'))
                <div class="row">
                    <div class="col-lg-12">
                        <br />
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    </div>
                </div>
            @endif

            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">@lang('app.dashboard')</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            @if(Auth::user()->user_type == "agent" && Auth::user()->zeia_badge == 0)
            <div class="row" style="margin-bottom:20px;">
                <div class="col-lg-12">
                    <h4 >To approve your ZEIA Membership upload your certificate and id <a href="{{ route('profit_edit') }}">here</a></h4>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            @endif
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-3 col-md-3">
                    <div class="panel panel-primary" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.approved_ads')</div><hr class="new1">
                                    <div class="huge">{{ $approved_ads }}</div>
                                </div>
                            </div>
                        </div>
                        </div>
                        
                        <div class="panel panel-success" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.reports')</div><hr class="new1">
                                    <div class="huge">{{ $total_reports }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-3">
                    <div class="panel panel-info" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.pending_ads')</div><hr class="new1">
                                    <div class="huge">{{ $pending_ads }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-warning" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.success_payments')</div><hr class="new1">
                                    <div class="huge">{{ $total_payments }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="panel panel-danger" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.blocked_ads')</div><hr class="new1">
                                    <div class="huge">{{ $blocked_ads }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-white" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.total_payment')</div><hr class="new1">
                                    <div class="huge">  {{ $total_payments_amount }} <small>{{ get_option('currency_sign') }}</small></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($ten_contact_messages)
                <div class="col-lg-3 col-md-3">
                    <div class="panel panel-white" style="box-shadow: -2px 0px 10px 0px rgba(0,0,0,0.2);overflow:hidden;">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div>@lang('app.users')</div><hr class="new1">
                                    <div class="huge">{{ $total_users }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @endif

            </div>
            <!-- /.row -->

                @if($lUser->is_admin())
            <div class="row">
                <div class="row">
                <div class="col-lg-12">
                @if($ten_contact_messages)
                <div class="col-xs-12">
                    <div class="panel panel-default" id="msg_panel">
                        <div class="panel-heading">
                            @lang('app.latest_ten_contact_messages')
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped table-responsive" id="msg_table">
                                <thead>
                                <tr>
                                    <th style="width: 30%;">@lang('app.sender')</th>
                                    <th>Senders Email</th>
                                    <th style="width: 100%;">@lang('app.message')</th>
                                </tr>
                                </thead>
                                @foreach($ten_contact_messages as $message)
                                    <tr>
                                        <td>
                                            <span class="icon_bg"><i class="fa fa-user"></i></span> <div class="msg_content"> {{ $message->name }}</div> <br />
                                            <span class="icon_bg_time"><i class="fa fa-clock-o"></i></span> <div class="msg_content">{{ $message->created_at->diffForHumans() }}</div>
                                        </td>
                                        <td>{{ $message->email }} </td>
                                        <td>{{ $message->message }}</td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
                </div>
                
                @endif
                </div>

                @if($reports)
                <div class="col-xs-12">
                    <div class="panel panel-default" id="msg_panel">
                        <div class="panel-heading">
                            @lang('app.latest_ten_ads_report')
                        </div>
                        <div class="panel-body">

                            @if($reports->count() > 0)
                                <table class="table table-striped table-responsive table-fixed" id="msg_table">
                                    <thead>
                                    <tr>
                                        <th>@lang('app.reason')</th>
                                        <th>@lang('app.email')</th>
                                        <th style="width: 20%;">@lang('app.message')</th>
                                        <th style="width: 20%;">Time Stamp</th>
                                        <th style="width: 100%;">@lang('app.ad_info')</th>
                                    </tr>
                                    </thead>
                                    @foreach($reports as $report)
                                        <tr>
                                            <td>{{ $report->reason }}</td>
                                            <td> {{ $report->email }}  </td>
                                            <td>
                                                {{ $report->message }}
                                            </td>
                                            <td>
                                                <p class="text-muted"> <i>@lang('app.date_time'): {{ $report->posting_datetime() }}</i></p>
                                            </td>
                                            <td>
                                                @if($report->ad)
                                                    <a href="{{ route('single_ad', $report->ad->slug) }}" target="_blank">@lang('app.view_ad')</a>
                                                    <i class="clearfix"></i>
                                                    <a href="{{ route('reports_by_ads', $report->ad->slug) }}">
                                                        <i class="fa fa-exclamation-triangle"></i> @lang('app.reports') : {{ $report->ad->reports->count() }}
                                                    </a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </table>
                            @endif

                        </div>
                    </div>
                </div>
                @endif
            </div>
            @endif
        <script src = "https://cdn.bootcss.com/randomcolor/0.5.4/randomColor.min.js" > </script>
        <script>
        
                @if($chat_agents)
                    var agents = [ @foreach( $chat_agents as $agent) {!! '"'. $agent->name . '"' !!}, @endforeach];
                    var ads = [@foreach( $chat_agents as $agent ) {{ $agent->ads }}, @endforeach];
                @else
                    var agents = ["none"];
                    var ads = [0];
                @endif
                
                var borders = randomColor({
                                   count : ads.length,
                                   luminosity: 'dark',
                                   format: 'rgba',
                                   alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
                                });
                var backg = randomColor({
                                   count : ads.length,
                                   luminosity: 'bright',
                                   format: 'rgba',
                                   alpha: 0.7 // e.g. 'rgba(9, 1, 107, 0.5)',
                                });
                
                $(document).ready(function () {
                $('#msg_table').DataTable({
                "scrollY": "200px",
                "scrollCollapse": true,
                });
                $('.dataTables_length').addClass('bs-select');
                });
                //doughnut PIE
                var ctxD = document.getElementById("doughnutChart").getContext('2d');
                var myLineChart = new Chart(ctxD, {
                  type: 'doughnut',
                  data: {
                    labels: agents,
                    datasets: [{
                      
                      data: ads,
                      backgroundColor: backg,
                      hoverBackgroundColor: ["#9033de", "#c9c9c9"]
                    }]
                  },
                  options: {
                    responsive: true
                  }
                });
        </script>
        <script>
                new Chart(document.getElementById("horizontalBar"), {
                    "type": "horizontalBar",
                    "data": {
                    "labels": agents,
                    "datasets": [{
                    "label": "Sales by Agent",
                    "data": ads,
                    "fill": false,
                    "backgroundColor": backg,
                    "borderColor": borders,
                    "borderWidth": 1
                    }]
                    },
                    "options": {
                    "scales": {
                    "xAxes": [{
                    "ticks": {
                    "beginAtZero": true
                    }
                    }]
                    }
                    }
                });
        </script>

        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
@endsection
