@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Imagesouk Admin Template
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')

    <link href="{{ asset('assets/vendors/fullcalendar/css/fullcalendar.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('assets/css/pages/calendar_custom.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" media="all" href="{{ asset('assets/vendors/bower-jvectormap/css/jquery-jvectormap-1.2.2.css') }}"/>
    <link rel="stylesheet" href="{{ asset('assets/vendors/animate/animate.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/pages/only_dashboard.css') }}"/>
    <meta name="_token" content="{{ csrf_token() }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/smalotDatepicker/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/pages/dashboard2.css') }}"/>
<style>
    .imagebox {
        background: black;
        padding: 0px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .imagebox img {
        opacity: 1;
        transition: 0.5s opacity;
    }

    .imagebox .imagebox-desc {
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0px;
        color: white;
        font-size:.8em;
        left: 0px;
        padding: 5px 5px;
        position: absolute;
        transition: 0.5s padding;
        text-align: center;
        width: 100%;
    }

    .imagebox:hover img {
        opacity: 0.5;
    }

    .imagebox:hover .imagebox-desc {
        padding-bottom: 2%;
    }
    .text_customStyle
    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
    .text_customStyleCounter
    {
        color: orange; text-decoration-style: solid; font-weight: bold;font-size: medium;
    }

</style>

@stop

{{-- Page content --}}
@section('content')

    <section class="content-header">
        <h1>Welcome to Dashboard</h1>
        <ol class="breadcrumb">
            <li class="active">
                <a href="#">
                    <i class="livicon" data-name="home" data-size="16" data-color="#333" data-hovercolor="#333"></i>
                    Dashboard
                </a>
            </li>
        </ol>
    </section>
    <section class="content">

        <!--        INITIAL CARDS-->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-2">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total Earnings</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white"> {{$totalEarning[0]->totalEarning}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-money"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-3">
                    <div class="card-body">
                        <h3 class="card-title text-white">Total Customers</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$total_customers[0]->userCount}}</h2>
                            <a href="{{ route(ADMIN . '.customer.index') }}"><p class="text-white mb-0">View</p></a>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-users"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title text-white">Purchases</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$totalEarning[0]->purchaseCount}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-shopping-cart"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-4">
                    <div class="card-body">
                        <h3 class="card-title text-white">Asset Collection</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$imagesCount[0]->imageCount+$videosCount[0]->videoCount}}</h2>
                            <a href="{{ route(ADMIN . '.images.index') }}"><p class="text-white mb-0">View</p></a>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-heart"></i></span>
                    </div>
                </div>
            </div>

        </div>

        <div class="clearfix"></div>

        <div class="row">
            <!-- MOST SEARCHED KEYWORDS   -->
            <div class="col-md-6 animated fadeInLeft ">

                <div class="portlet box danger ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="livicon" data-name="wifi" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i> Most Searched Keywords
                        </div>
                    </div>
                    <div class="portlet-body" style="background-image: linear-gradient(
            230deg
            , #ffc480, #ff763b)">
                        <div class="table-scrollable" style="background-image: linear-gradient(
            230deg
            , #ffc480, #ff763b);">
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>Keyword</th>
                                    <th>Count</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($mostSearchedKeyword as $key=>$kw)
                                <tr style="padding-top:0; ">
                                    <td>{{$key+1}}</td>
                                    <td>{{$kw->keyword_name}}</td>
                                    <td align="center" style="color: white; font-weight: bold">{{$kw->search_count}}</td>
                                </tr>
                                @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END BORDERED TABLE PORTLET-->
            </div>
            <!-- MOST VIEWD IMAGES   -->
            <div class="col-md-6 animated fadeInDownBig">
                <!-- BEGIN BORDERED TABLE PORTLET-->
                <div class="portlet box danger">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="livicon" data-name="wifi" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i> Most Viewed Images
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="row m-t-10">
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[0]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[0]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[0]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4 ">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[1]->image_link}}"   style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[1]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[1]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[2]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[2]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[2]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix m-t-10"></div>
                        <div class="row m-t-10">
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[3]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[3]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[3]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[4]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[4]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[4]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[5]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[5]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[5]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="row m-t-10">
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[6]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[6]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[6]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[7]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[7]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[7]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="imagebox">
                                    <a href="#hola">
                                        <img src="/uploads/thumbnail/{{$mostViewdImages[8]->image_link}}"  style="width: 150px;height: 150px;object-fit: cover;">
                                        <span class="imagebox-desc"><span class="text_customStyleCounter"><i class="fa fa-eye"></i>{{$mostViewdImages[8]->total_visits}}</span><br><span class="text_customStyle">{{$mostViewdImages[8]->image_title}}</span></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END BORDERED TABLE PORTLET-->
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="row">
            <!-- CATEGORY CLASSIFICATION PIE CHART-->
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="piechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i> D3 Pie chart with small segment
                        </h3>
                        <span class="pull-right">
                        <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                        <i class="glyphicon glyphicon-remove removepanel clickable"></i>
                    </span>
                    </div>
                    <div class="panel-body text-center">
                        <div id="pie3"></div>
                    </div>
                </div>
            </div>
            <!-- MOST SFAVOURATE USRES   -->
            <div class="col-md-6 animated fadeInLeft ">

                <div class="portlet box danger ">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="livicon" data-name="wifi" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i> Most Frequent Users
                        </div>
                    </div>
                    <div class="portlet-body" style="background-image: linear-gradient(
            230deg
            , #ffc480, #ff763b)">
                        <div class="table-scrollable" style="background-image: linear-gradient(
            230deg
            , #ffc480, #ff763b);">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>User Id</th>
                                    <th>User Name</th>
                                    <th>Total Purchase</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($favUsers as $key=>$kw)
                                    <tr style="padding-top:0; ">
                                        <td>{{$key+1}}</td>
                                        <td>{{$kw->id}}</td>
                                        <td>{{$kw->first_name}}</td>
                                        <td align="center" style="color: white; font-weight: bold">{{$kw->totalpurchase}}</td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- END BORDERED TABLE PORTLET-->
            </div>


        </div>
        <div class="clearfix"></div>

        <!-- QUICK MAIL   -->
<!--        <div class="row">
            <div class="col-md-4 col-sm-12">
                <div class="panel panel-danger">
                    <div class="panel-heading border-light">
                        <h4 class="panel-title">
                            <i class="livicon" data-name="mail" data-size="18" data-color="white" data-hc="white"
                               data-l="true"></i>
                            Quick Mail
                        </h4>
                    </div>
                    <form method="POST" action="">
                        @csrf
                        <div class="panel-body no-padding">
                            <div class="compose row">
                                <label class="col-sm-1 col-md-3 hidden-xs" style="padding: 0">To:</label>
                                <input type="text" name="email" class="col-sm-11 col-md-9 col-xs-12" placeholder="name@email.com "
                                       tabindex="1"/>

                                <div class="clear"></div>
                                <label class="col-sm-1 col-md-3 hidden-xs" style="padding: 0">Subject:</label>
                                <input type="text" name = "subject" class="col-sm-11 col-md-9 col-xs-12" tabindex="1" placeholder="Subject"/>

                                <div class="clear"></div>
                                <div class='box-body'>
                                    <textarea name="messages" class="textarea textarea_home resize_vertical"
                                              placeholder="Write mail content here"></textarea>
                                </div>
                                <br/>

                                <div class="pull-right">
                                    <input type="submit" Class="form-control bg-warning border-0 font-weight-bold text-white" value="Submit">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-8 col-sm-6">
                <div class="panel panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="dashboard" data-size="20" data-loop="true" data-c="#F89A14"
                               data-hc="#F89A14"></i>
                            Realtime Server Load
                            <small>- Load on the Server</small>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div id="realtimechart" style="height:265px;"></div>
                    </div>
                </div>
            </div>
        </div>-->

        <div class="clearfix"></div>

        <!--row -->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-2">
                    <div class="card-body">
                        <h3 class="card-title text-white">Horizontal images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">  {{$item['horizontal_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                                                         data-hc="#fff" data-s="70"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-3">
                    <div class="card-body">
                        <h3 class="card-title text-white">Vertical images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['vertical_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                                                         data-hc="#fff" data-s="70"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title text-white">Panoramic images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['panoramic_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                                                         data-hc="#fff" data-s="70"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-4">
                    <div class="card-body">
                        <h3 class="card-title text-white">Square images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['square_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                                                         data-hc="#fff" data-s="70"></i></span>
                    </div>
                </div>
            </div>

        </div>
<!--        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="redbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Horizontal images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label"> {{$item['horizontal_images']}}</small>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInUpBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="lightbluebg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Vertical images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">  {{$item['vertical_images']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-md-6 margin_10 animated fadeInDownBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="palebluecolorbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Panoramic images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">    {{$item['panoramic_images']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="goldbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Square images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">{{$item['square_images']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="panel panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="dashboard" data-size="20" data-loop="true" data-c="#F89A14"
                               data-hc="#F89A14"></i>
                            Sales Report
                        </h3>
                    </div>

                    <div class="panel-body">
                        <div class="table-responsive p-20">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th class="bdwT-0">Order Id</th>
                                    <th class="bdwT-0">Status</th>
                                    <th class="bdwT-0">Date</th>
                                    <th class="bdwT-0">Price</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($item['orders'] as $order)
                                    <tr>
                                        <td class="fw-600">{{$order->order_id}}</td>
                                        @if($order->order_status == 0)
                                            <td><span
                                                        class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Not paid</span>
                                            </td>
                                        @elseif($order->order_status == 1)
                                            <td><span
                                                        class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Paid</span>
                                            </td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        <td>{{$order->created_at}}</td>
                                        <td><span class="text-success">{{Priceformat($order->order_price)}}</span></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="panel panel-border">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="dashboard" data-size="20" data-loop="true" data-c="#F89A14"
                               data-hc="#F89A14"></i>Most viewed Items</h3>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive p-20">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th class="bdwT-0">Item</th>
                                    <th class="bdwT-0">Status</th>
                                    <th class="bdwT-0">Date</th>
                                    <th class="bdwT-0">Views</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($item['most_viewed_items'] as $item)
                                    <tr>
                                        @if(isset($item->image_id))
                                            <td class="fw-600">
                                                <a href="/admin/images/{{$item->image_id}}/edit">{{$item->image_name_id}}</a>
                                            </td>
                                        @elseif(isset($item->video_id))
                                            <td class="fw-600">
                                                <a href="/admin/videos/{{$item->video_id}}/edit">{{$item->videos_title}}</a>
                                            </td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        @if($item->status == 0)
                                            <td><span
                                                        class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Not published</span>
                                            </td>
                                        @elseif($item->status == 1)
                                            <td><span
                                                        class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Published</span>
                                            </td>
                                        @else
                                            <td>-</td>
                                        @endif
                                        <td>{{$item->created_at}}</td>
                                        <td><span class="text-primary">{{$item->total_visits}}</span></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-2">
                    <div class="card-body">
                        <h3 class="card-title text-white">Royality free images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">  {{$item['right_managed_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-image"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-3">
                    <div class="card-body">
                        <h3 class="card-title text-white">Premium royality images</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['premium_royality_images']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-image"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-1">
                    <div class="card-body">
                        <h3 class="card-title text-white">Right managed Videos</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['right_managed_videos']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-image"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                <!-- Trans label pie charts strats here-->
                <div class="card gradient-4">
                    <div class="card-body">
                        <h3 class="card-title text-white">Premium royality Videos</h3>
                        <div class="d-inline-block">
                            <h2 class="text-white">{{$item['premium_royality_videos']}}</h2>
                            <p class="text-white mb-0">View</p>
                        </div>
                        <span class="float-right display-5 opacity-5"><i class="fa fa-image"></i></span>
                    </div>
                </div>
            </div>

        </div>
        <!--row -->
<!--        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="lightbluebg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Royality free images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">  {{$item['right_managed_images']}}</small>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInUpBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="redbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Premium royality images</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">   {{$item['premium_royality_images']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-md-6 margin_10 animated fadeInDownBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="goldbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Right managed Videos</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">    {{$item['right_managed_videos']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="palebluecolorbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Premium royality Videos</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label"> {{$item['premium_royality_videos']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="clearfix"></div>
        <!--row -->
<!--        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="redbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Images with people</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">  {{$item['images_with_people']}}</small>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInUpBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="lightbluebg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Videos with people</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Images</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">  {{$item['videos_with_people']}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-md-6 margin_10 animated fadeInDownBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="palebluecolorbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Monthly goal</span>

                                </div>
                                <i class="livicon  pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label"></small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">    {{Priceformat($item['monthly_goal'])}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="goldbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Customers</span>

                                </div>
                                <i class="livicon  pull-right" data-name="user" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Customers</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">{{$item['total_customers']}}</small>

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

        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInLeftBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="lightbluebg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 text-right">
                                    <span>Today's earnings</span>

                                    <div class="number" id=""> {{Priceformat($item['total_orders_earning_today'])}}</div>
                                </div>
                                <i class="livicon  pull-right" data-name="us-dollor" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Earnings</small>

                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label"> {{Priceformat($item['total_orders_earning'])}}</small>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInUpBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="redbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 pull-left">
                                    <span>Today's Sales</span>

                                    <div class="number" id=""> {{$item['total_orders_today']}}</div>
                                </div>
                                <i class="livicon pull-right" data-name="piggybank" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <small class="stat-label">Total Sales</small>
                                </div>
                                <div class="col-xs-6">
                                    <small class="stat-label">{{$item['total_orders'] }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-md-6 margin_10 animated fadeInDownBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="goldbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 pull-left">
                                    <span>Total Images</span>
                                    <div class="number" id=""> {{$item['total_images']}}</div>
                                </div>
                                <i class="livicon pull-right" data-name="image" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <a href="{{route('admin.images.index')}}">
                                        <div>
                                            <h4 style="color:#fff;">View </h4>
                                            <span class="ti-angle-double-right pull-right pt-1"></span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 margin_10 animated fadeInRightBig">
                &lt;!&ndash; Trans label pie charts strats here&ndash;&gt;
                <div class="palebluecolorbg no-radius">
                    <div class="panel-body squarebox square_boxs">
                        <div class="col-xs-12 pull-left nopadmar">
                            <div class="row">
                                <div class="square_box col-xs-7 pull-left">
                                    <span>Total videos</span>

                                    <div class="number" id=""> {{$item['total_videos']}}</div>
                                </div>
                                <i class="livicon pull-right" data-name="wide-screen" data-l="true" data-c="#fff"
                                   data-hc="#fff" data-s="70"></i>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <a href="{{route('admin.videos.index')}}">
                                        <div>
                                            <h4 style="color:#fff;">View </h4>
                                            <span class="ti-angle-double-right pull-right pt-1"></span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="clearfix"></div>
        <!-- <div class="row">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="piechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i> Visitors
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <div id="visitormap" class="map_size" style="width:100%; height:350px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="piechart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i> Sales
                        </h3>
                    </div>
                    <div class="panel-body text-center">
                        <div>
                            <canvas id="saleschart" width="800" height="300" ></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="clearfix"></div>

    </section>
    <div class="modal fade" id="editConfirmModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Alert</h4>
                </div>
                <div class="modal-body">
                    <p>You are already editing a row, you must save or cancel that row before edit/delete a new row</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@stop

{{-- page level scripts --}}
@section('footer_scripts')
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/flotchart/js/jquery.flot.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/flotchart/js/jquery.flot.pie.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/flotchart/js/jquery.flot.resize.js') }}" ></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/d3/d3.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/d3pie/d3pie.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/c3/c3.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/vendors/morrisjs/morris.min.js') }}"></script>
    <script language="javascript" type="text/javascript" src="{{ asset('assets/js/pages/custompiecharts.js') }}" ></script>

    <script type="text/javascript" src="{{ asset('assets/vendors/moment/js/moment.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/smalotDatepicker/js/bootstrap-datetimepicker.min.js') }}"></script>

    <!-- EASY PIE CHART JS -->
    <script src="{{ asset('assets/vendors/bower-jquery-easyPieChart/js/easypiechart.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/bower-jquery-easyPieChart/js/jquery.easypiechart.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/bower-jquery-easyPieChart/js/jquery.easingpie.js') }}"></script>
    <!--for calendar-->
    <script src="{{ asset('assets/vendors/moment/js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/fullcalendar/js/fullcalendar.min.js') }}" type="text/javascript"></script>
    <!--   Realtime Server Load  -->
    <script src="{{ asset('assets/vendors/flotchart/js/jquery.flot.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/vendors/flotchart/js/jquery.flot.resize.js') }}" type="text/javascript"></script>
    <!--Sparkline Chart-->
    <script src="{{ asset('assets/vendors/sparklinecharts/jquery.sparkline.js') }}"></script>
    <!-- Back to Top-->
    <script type="text/javascript" src="{{ asset('assets/vendors/countUp_js/js/countUp.js') }}"></script>
    <!--   maps -->
    <script src="{{ asset('assets/vendors/bower-jvectormap/js/jquery-jvectormap-1.2.2.min.js') }}"></script>
    <script src="{{ asset('assets/vendors/bower-jvectormap/js/jquery-jvectormap-world-mill-en.js') }}"></script>
    <!--  todolist-->

    <script src="{{ asset('assets/js/pages/dashboard.js') }}" type="text/javascript"></script>

    <script src="http://127.0.0.1:8000/assets/vendors/jqvmap/js/jquery.vmap.js"  type="text/javascript"></script>
    <script src="http://127.0.0.1:8000/assets/vendors/jqvmap/js/jquery.vmap.world.js"  type="text/javascript"></script>
    <script src="http://127.0.0.1:8000/assets/vendors/jqvmap/js/jquery.vmap.sampledata.js" ></script>
    <script src="http://127.0.0.1:8000/assets/vendors/Chartjs/js/Chart.js"></script>
    <script type="text/javascript">
        // jQuery('#visitormap').vectorMap({
        //     map: 'world_en',
        //     backgroundColor: 'transparent',
        //     color: '#f2f2f2',
        //     hoverOpacity: 0.7,
        //     selectedColor: '#e4e4e4',
        //     enableZoom: true,
        //     showTooltip: true,
        //     values: sample_data,
        //     scaleColors: ["#AAAAAA", "#444444"],
        //     normalizeFunction: 'polynomial'
        // });
        // var barChartData = {
        //     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        //     datasets: [
        //         {
        //             label:"Sales",
        //             backgroundColor: "#f89a14",
        //             hoverBackgroundColor: "#f89a14",
        //             data : [65,59,90,81,56,55,40,30,50,20,80,999]

        //         },
        //     ]

        // };
        // var selector = '#saleschart';

        // $(selector).attr('width', $(selector).parent().width());
        // var myBar = new Chart($("#saleschart"), {
        //     type: 'bar',
        //     data: barChartData
        // });
    </script>
@stop