@extends('layouts.app')

@section('styles')

@endsection

@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Dashboard</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/{{env('ADMIN_PANEL_ROUTE')}}/dashboard">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- //Subscription Count Down -->
<!-- COL-END -->
@php
$subscription_details=$data['subscripe_days_left'];
$day_left=$subscription_details['day_left'];
$hours_left=$subscription_details['hours_left'];
$minute_left=$subscription_details['minute_left'];
if($day_left>30){
$bg_gradient="bg-primary-gradient";
}
elseif($day_left>20){
$bg_gradient="bg-success-gradient";
}
elseif($day_left>10){
$bg_gradient="bg-warning-gradient";
}
elseif($day_left< 10){ $bg_gradient="bg-danger-gradient" ; } else{ $bg_gradient="" ; } @endphp <div class="row">
    @hasanyrole('Super Admin')
    <div class="col-md-12">
        <div class="card {{$bg_gradient}}">
            <div class="card-header">
                <h3 class="card-title text-white">
                    Your subscription ends in
                </h3>
            </div>
            <div class="card-body text-center">
                <div class="count-down row">
                    <div class="col-lg-3 countdown">
                        <div class="countdown bg-primary-gradient p-3 mb-1">
                            <span class="days text-white">{{$day_left}}</span>
                            <span class="text-white">Days</span>
                        </div>
                    </div>
                    <div class="col-lg-3 countdown">
                        <div class="countdown bg-success-gradient p-3 mb-1">
                            <span class="hours text-white">{{$hours_left}}</span>
                            <span class="text-white">Hours</span>
                        </div>
                    </div>

                    <div class="col-lg-3 countdown">
                        <div class="countdown bg-warning-gradient p-3 mb-1">
                            <span class="minutes text-white">{{$minute_left}}</span>
                            <span class="text-white">Minutes</span>
                        </div>
                    </div>
                    <div class="col-lg-3 countdown">
                        <div class="countdown bg-info-gradient p-3 mb-1">
                            <span class="seconds text-white">60</span>
                            <span class="text-white">Seconds</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endhasanyrole
    <!-- COL-END -->
    <!-- //End Of Subscription Count Down -->
    </div>



    <!-- ROW-1 -->

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card bg-primary img-card box-primary-shadow">
                <a href="/{{env('ADMIN_PANEL_ROUTE')}}/manage-users">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="text-white">
                                <h2 class="mb-0 number-font counter">{{$data['user_count']}}</h2>
                                <p class="text-white mb-0">Admin Users </p>
                            </div>
                            <div class="ms-auto"> <i class="fa fa-user-o text-white fs-30 me-2 mt-2"></i> </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card bg-secondary img-card box-secondary-shadow">
                <a href="/{{env('ADMIN_PANEL_ROUTE')}}/customers">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="text-white">
                                <h2 class="mb-0 number-font counter">{{$data['customers']}}</h2>
                                <p class="text-white mb-0 ">Customers</p>
                            </div>
                            <div class="ms-auto"> <i class="fa fa-users text-white fs-30 me-2 mt-2"></i> </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card  bg-success img-card box-success-shadow">
                <a href="{{route('customer_reviews')}}">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="text-white">
                                <h2 class="mb-0 number-font counter">{{$data['review_count']}}</h2>
                                <p class="text-white mb-0"> Total Feedback</p>
                            </div>
                            <div class="ms-auto"> <i class="fa fa-comments text-white fs-30 me-2 mt-2"></i> </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card bg-info img-card box-info-shadow">
                <a href="/{{env('ADMIN_PANEL_ROUTE')}}/coupons">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="text-white">
                                <h2 class="mb-0 number-font counter">{{$data['coupon_count']}}</h2>
                                <p class="text-white mb-0">Coupons</p>
                            </div>
                            <div class="ms-auto"> <i class="fa fa-ticket text-white fs-30 me-2 mt-2"></i> </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- COL END -->


    </div>

    <div class="row">

        <div class="col-lg-8 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Last 7 Days Feedback </h3>
                </div>
                <div class="card-body">
                    <div id="chart_event_wise"></div>
                </div>
            </div>
        </div>







        <!--//Rating Percentage Calculation-->
        @php
        $percentage_calculation=$data['percentage_calculation'];
        @endphp
        @if(session('rating_exist'))
        <div class=" col-xl-4 col-md-12 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Total Rating</div>
                </div>
                <div class="card-body mt-0">
                    <div class="chats-wrap media-list">
                        <div class="chat-details  p-1">
                            <h4 class="mb-0">
                                <style>
                                .jq-star {
                                    width: 21px !important;
                                }

                                .rating-stars {
                                    text-align: left;
                                }

                                .dashboard_rating_bg_1 {

                                    background: #09ad95;

                                }

                                .dashboard_rating_bg_2 {
                                    background: #1756af;
                                }

                                .dashboard_rating_bg_3 {
                                    background: #e86a09;
                                }

                                .dashboard_rating_bg_4 {
                                    background: #f7b731;
                                }

                                .dashboard_rating_bg_5 {
                                    background: #e82646;

                                }
                                </style>
                                <div class="rating-stars block my-rating-7" data-rating="5"></div>
                                <span class="float-end p-1  btn btn-sm text-default">
                                    <b>{{$percentage_calculation['five_star']}}</b>%</span>
                            </h4>
                            <div class="progress progress-sm mt-3">
                                <div class="progress-bar  dashboard_rating_bg_1"
                                    style="width: {{$percentage_calculation['five_star']}}%;"></div>
                            </div>
                        </div>
                        <div class="chat-details p-1    ">
                            <h4 class="mb-0">
                                <div class="rating-stars block my-rating-7" data-rating="4"></div>
                                <span class="float-end p-1  btn btn-sm text-default">
                                    <b>{{$percentage_calculation['four_star']}}</b>%</span>
                            </h4>
                            <div class="progress progress-sm mt-3">
                                <div class="progress-bar dashboard_rating_bg_2"
                                    style="width: {{$percentage_calculation['four_star']}}%;"></div>
                            </div>
                        </div>
                        <div class="chat-details p-1">
                            <h4 class="mb-0">
                                <div class="rating-stars block my-rating-7" data-rating="3"></div>
                                <span class="float-end p-1  btn btn-sm text-default">
                                    <b>{{$percentage_calculation['three_star']}}</b>%</span>
                            </h4>
                            <div class="progress progress-sm mt-3">
                                <div class="progress-bar dashboard_rating_bg_3"
                                    style="width: {{$percentage_calculation['three_star']}}%;"></div>
                            </div>
                        </div>
                        <div class="chat-details p-1">
                            <h4 class="mb-0">
                                <div class="rating-stars block my-rating-7" data-rating="2"></div>
                                <span class="float-end p-1  btn btn-sm text-default">
                                    <b>{{$percentage_calculation['two_star']}}</b>%</span>

                            </h4>
                            <div class="progress progress-sm mt-3">
                                <div class="progress-bar dashboard_rating_bg_4"
                                    style="width: {{$percentage_calculation['two_star']}}%;"></div>

                            </div>
                        </div>
                        <div class="chat-details p-1">

                            <h4 class="mb-0">
                                <div class="rating-stars block my-rating-7" data-rating="1"></div>
                                <span class="float-end p-1  btn btn-sm text-default">

                                    <b>{{$percentage_calculation['one_star']}}</b>%</span>
                            </h4>
                            <div class="progress progress-sm mt-3">


                                <div class="progress-bar dashboard_rating_bg_5"
                                    style="width: {{$percentage_calculation['one_star']}}%;"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        @endif
        <!--//End Of Rating Percentage Calculation-->



        <!-- ##############Top Customer Points################ -->
        @if(count($data['top_point_customers'])>0)
        <div class="col-xl-4 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Top Pointed Customers</h5>
                </div>
                <div class="card-body">
                    @php $z=0; @endphp
                    @foreach($data['top_point_customers'] as $customer)
                    @php $z++;
                    switch ($z) {
                    case 1:
                    $image="1.png";
                    $button_class="btn-success";
                    break;
                    case 2:
                    $image="2.png";
                    $button_class="btn-warning";
                    break;
                    case 3:
                    $image="3.png";
                    $button_class="btn-danger";
                    break;
                    case 4:
                    $image="4.png";
                    $button_class="btn-purple";
                    break;
                    case 5:
                    $image="5.png";
                    $button_class="btn-secondary";
                    break;

                    default:
                    $image="1.png";
                    $button_class="btn-secondary";
                    break;
                    }

                    @endphp
                    <div class="media mb-5 mt-0">
                        <div class="d-flex me-3">
                            <a href="javascript:void(0)"> <img class="media-object rounded-circle thumb-sm" alt="64x64"
                                    src="/assets/images/custom/customer_icons/{{$image}}"> </a>
                        </div>
                        <div class="media-body">
                            <a href="javascript:void(0)" class="text-dark">{{$customer->customer_name}}</a>
                            @if($customer->customer_mob)
                            <div class="text-muted small">{{$customer->customer_mob}}</div>
                            @endif
                        </div>
                        <button type="button"
                            class="btn {{$button_class}} btn-sm d-block fw-bold">{{$customer->customer_point}}/{{$customer->customer_out_of_point}}</button>
                    </div>

                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <!-- ####################End of Top Customer Points########## -->


        <!-- ###################Top Customer Rating ############ -->
        <div class="col-xl-4 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Top Rating Customer</h5>
                </div>
                <div class="card-body">
                    @php $y=0; $avg_rating=0; @endphp
                    @foreach($data['top_rating_customers'] as $customer)
                    @php
                    $y++;
                    $form_rating=$customer['form_sum_form_rating'];
                    $form_count=$customer['form_count'];
                    if($form_count>0){
                    $avg_rating=round($form_rating/$form_count);
                    }

                    switch ($y) {
                    case 1:
                    $image="1.png";
                    $button_class="btn-success";
                    break;
                    case 2:
                    $image="2.png";
                    $button_class="btn-warning";
                    break;
                    case 3:
                    $image="3.png";
                    $button_class="btn-danger";
                    break;
                    case 4:
                    $image="4.png";
                    $button_class="btn-purple";
                    break;
                    case 5:
                    $image="5.png";
                    $button_class="btn-secondary";
                    break;

                    default:
                    $image="1.png";
                    $button_class="btn-secondary";
                    break;
                    }

                    @endphp
                    <div class="media mb-5 mt-0">
                        <div class="d-flex me-3">
                            <a href="javascript:void(0)"> <img class="media-object rounded-circle thumb-sm" alt="64x64"
                                    src="/assets/images/custom/customer_icons/{{$image}}"> </a>
                        </div>
                        <div class="media-body">
                            <a href="javascript:void(0)" class="text-dark">{{$customer->customer_name}}</a>
                            <div class="text-muted small">{{$customer->customer_mob}}</div>
                        </div>
                        <span class=" d-block">
                            @for($i=0;$i<$avg_rating;$i++) <img style="width: 15px;height: 15px;"
                                src="/assets/images/brand/star.png">
                                @endfor
                        </span>
                    </div>
                    @endforeach

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

        <!-- #######################End Of Top Customer Rating ################# -->

    </div>


    </div>





    @endsection

    @section('scripts')

    <!-- SPARKLINE JS-->
    <script src="{{asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"></script>

    <!-- CHART-CIRCLE JS-->
    <script src="{{asset('assets/plugins/circle-progress/circle-progress.min.js')}}"></script>

    <!-- INTERNAL SELECT2 JS -->
    <script src="{{asset('assets/plugins/select2/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/js/select2.js')}}"></script>

    <!-- PIETY CHART JS-->
    <script src="{{asset('assets/plugins/peitychart/jquery.peity.min.js')}}"></script>
    <script src="{{asset('assets/plugins/peitychart/peitychart.init.js')}}"></script>

    <!-- INTERNAL CHARTJS CHART JS-->
    <script src="{{asset('assets/plugins/chart/Chart.bundle.js')}}"></script>
    <script src="{{asset('assets/plugins/chart/rounded-barchart.js')}}"></script>
    <script src="{{asset('assets/plugins/chart/utils.js')}}"></script>

    <!-- INTERNAL SELECT2 JS -->
    <script src="{{asset('assets/plugins/select2/select2.full.min.js')}}"></script>

    <!-- INTERNAL Data tables js-->
    <script src="{{asset('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('assets/plugins/datatable/js/dataTables.bootstrap5.js')}}"></script>
    <script src="{{asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>

    <!-- INTERNAL APEXCHART JS -->
    <script src="{{asset('assets/js/apexcharts.js')}}"></script>
    <script src="{{asset('assets/plugins/apexchart/irregular-data-series.js')}}"></script>

    <!-- C3 CHART JS -->
    <script src="{{asset('assets/plugins/charts-c3/c3-chart.js')}}"></script>
    <script src="{{asset('assets/plugins/charts-c3/d3.v5.min.js')}}"></script>

    <!-- CHART-DONUT JS -->
    <script src="{{asset('assets/js/charts.js')}}"></script>

    <!-- INTERNAL Flot JS -->
    <script src="{{asset('assets/plugins/flot/jquery.flot.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/jquery.flot.fillbetween.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/chart.flot.sampledata.js')}}"></script>
    <script src="{{asset('assets/plugins/flot/dashboard.sampledata.js')}}"></script>

    <!-- INTERNAL Vector js -->
    <script src="{{asset('assets/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js')}}"></script>
    <script src="{{asset('assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')}}"></script>

    <!-- INTERNAL INDEX JS -->
    <script src="{{asset('assets/js/index.js')}}"></script>
    <script src="{{asset('assets/js/index1.js')}}"></script>




    <!-- COUNTERS JS-->
    <script src="{{asset('assets/plugins/counters/counterup.min.js')}}"></script>
    <script src="{{asset('assets/plugins/counters/waypoints.min.js')}}"></script>
    <script src="{{asset('assets/plugins/counters/counters-1.js')}}"></script>







    <!--//Day List-->
    @php
    $m= date("m");
    $de= date("d");
    $y= date("Y");
    $day_array=[];
    for($i=0; $i<=6; $i++){ $day=date('D',mktime(0,0,0,$m,($de-$i),$y)); array_push($day_array,$day); }
        $form_data=$data['form_data']; @endphp <script>
        $(document).ready(function()
        {
        setTimeout(function()
        {


        var chart = c3.generate({
        "bindto":"#chart_event_wise",
        "data":{
        type: "line",
        x: 'x',
        columns: [
        ['x','{{$day_array[6]}}','{{$day_array[5]}}',
        '{{$day_array[4]}}','{{$day_array[3]}}','{{$day_array[2]}}','{{$day_array[1]}}','{{$day_array[0]}}'],
        ["Feedback Count","{{$form_data['six_day']}}", "{{$form_data['fifth_day']}}", "{{$form_data['frth_day']}}",
        "{{$form_data['third_day']}}", "{{$form_data['scnd_day']}}",
        "{{$form_data['yestarday_count']}}","{{$form_data['today_count']}}" ],

        ]
        },
        "axis":{
        "x":{
        "type":"category"
        }
        }
        });

        },
        500);
        });

        $( function() {
        $('.count-down').countdown100({
        // Set Endtime here
        // Endtime must be > current time
        endtimeYear: 0,
        endtimeMonth: 0,
        endtimeDate: '{{$day_left}}',
        endtimeHours: '{{$hours_left}}',
        endtimeMinutes: '{{$minute_left}}',
        endtimeSeconds: 60,
        timeZone: ""
        // ex: timeZone: "America/New_York", can be empty
        // go to " http://momentjs.com/timezone/ " to get timezone
        });
        });


        </script>
        <!-- Star Rating Js-->
        <script src="{{asset('assets/plugins/rating/jquery-rate-picker.js')}}"></script>
        <script src="{{asset('assets/plugins/rating/rating-picker.js')}}"></script>

        <!-- Star Rating-1 Js-->
        <script src="{{asset('assets/plugins/ratings-2/jquery.star-rating.js')}}"></script>
        <script src="{{asset('assets/plugins/ratings-2/star-rating.js')}}"></script>





        <!-- TIME COUNTER JS-->
        <script src="{{asset('assets/plugins/counters/jquery.missofis-countdown.js')}}"></script>
        <script src="{{asset('assets/plugins/counters/counter.js')}}"></script>

        <!-- COUNT-DOWN JS-->
        <script src="{{asset('assets/plugins/countdown/moment.min.js')}}"></script>
        <script src="{{asset('assets/plugins/countdown/moment-timezone.min.js')}}"></script>
        <script src="{{asset('assets/plugins/countdown/moment-timezone-with-data.min.js')}}"></script>
        <script src="{{asset('assets/plugins/countdown/countdowntime.js')}}"></script>

        <!-- COUNTERS JS-->
        <script src="{{asset('assets/plugins/counters/counterup.min.js')}}"></script>
        <script src="{{asset('assets/plugins/counters/waypoints.min.js')}}"></script>
        <script src="{{asset('assets/plugins/counters/counters-1.js')}}"></script>

        @endsection