@extends('admin.layout.master')

@section('content')

<style>
    .col-lg-3{
        cursor:pointer;
    }
</style>
    <!-- Content Header (Page header) -->
    <div class="content-header">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                </p>
            @endif
        @endforeach
        <div class="container-fluid">
            <div class="row ">
                <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.col -->
            <div class="text-right">
                <b>Last Updated : {{ date('n/d/Y g:i A',strtotime($lastupdatedate->update_at)) }}</b>
            </div>
            <div class="row mt-3" id="sortable">
                @foreach ($WidgetData as $w)

                    @if($w == 1)
                        <div class="col-lg-3 col-6" data-id="1">
                            <div class="box_1 small-box bg-danger">
                                <div style="padding: 10px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h3 class="widget11_r3">$0</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h4 class="text-right widget11_r4">0%</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="widget11_r1">0</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="text-right widget11_r2">0%</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">Last 60 Minutes</p>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 2)
                        <div class="col-lg-3 col-6" data-id="2">
                            <div class="box_2 small-box bg-danger">
                                <div style="padding: 10px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h3 class="widget12_r3">$0</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h4 class="text-right widget12_r4">0%</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="widget12_r1">0</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="text-right widget12_r2">0%</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">Last 24 Hours</p>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 3)
                        <div class="col-lg-3 col-6" data-id="3">
                            <div class="box_3 small-box bg-danger">
                                <div style="padding: 10px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h3 class="widget13_r2">$0</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h4 class="text-right widget13_r4">0%</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="widget13_r1">0</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="text-right widget13_r3">0%</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">Today Vs Last Week</p>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 4)
                        <div class="col-lg-3 col-6" data-id="4">
                            <div class="box_4 small-box bg-danger">
                                <div style="padding: 10px;">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h3 class="widget14_r2">$0</h3>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h4 class="text-right widget14_r4">0%</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="widget14_r1">0</h5>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="inner">
                                                <h5 class="text-right widget14_r3">0%</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-center">Today Vs Last Year</p>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 5)
                        <div class="col-lg-3 col-6" data-id="5">
                            <div class="box_5 small-box bg-danger">
                                <div class="inner">
                                    <h3 class="widget1_ordercount">0($0)</h3>
                                    <p>New</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 6)
                        <div class="col-lg-3 col-6" data-id="6">
                            <div class="box_6 small-box bg-danger">
                                <div class="inner">
                                    <h3 class="widget2_ordercount">0($0)</h3>
                                    <p>Pending</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 7)
                        <div class="col-lg-3 col-6" data-id="7">
                            <div class="box_7 small-box bg-danger">
                                <div class="inner">
                                    <h3 class="widget3_ordercount">0($0)</h3>
                                    <p>Unequal</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif

                    @if($w == 8)
                        <div class="col-lg-3 col-6" data-id="8">
                            <div class="box_8 small-box bg-danger">
                                <div class="inner">
                                    <h3 class="widget4_ordercount">0($0)</h3>
                                    <p>CMT New</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-pie-graph"></i>
                                </div>
                                <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                    @endif



                @if($w == 9)
                    <div class="col-lg-3 col-6" data-id="9">
                        <div class="box_9 small-box bg-success">
                            <div class="inner">
                                <h3 class="widget10_ordercount">0</h3>
                                <p>Missing</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>

                </div>
                @endif


                @if($w == 10)
                    <div class="col-lg-3 col-6" data-id="10">
                        <div class="box_10 small-box bg-danger">
                            <div class="inner">
                                <h3 class="widget_8_9_ordercount">0</h3>
                                <p>Broken</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                @endif

            @endforeach


            </div>

        </div><!-- /.container-fluid -->


        <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getTrendsData" page-url="{{ url('admin/dashboard-trends') }}">
                </div>
            </div>
        </div>
        {{--  <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getHourlyTrendsData" page-url="{{ url('admin/dashboard-hourly-trends') }}">
                </div>
            </div>
        </div>
         <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getAnnualGMVData" page-url="{{ url('admin/dashboard-annual-gmv') }}">
                </div>
            </div>
        </div> --}}

        {{-- <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getAnnualOrderData" page-url="{{ url('admin/dashboard-annual-order') }}">
                </div>
            </div>
        </div> --}}
    </div>

    <script>

        $(document).ready(function() {
            for(i=1;i<=10;i++){
                getDashboardWidgetData(i);
            }

        });

        function getDashboardWidgetData(widget_no) {

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('admin.dashboard-getwidgetdata') }}",
                dataType: "json",
                type: "POST",
                data: {
                    'widget': widget_no
                },

                success: function(data) {

                    $('.box_'+widget_no).removeClass('bg-danger');
                    $('.box_'+widget_no).addClass(data.colorclass);
                    if(widget_no == 1){
                        $('.widget11_r1').text(data.widget11_r1);
                        $('.widget11_r2').text(data.widget11_r2);
                        $('.widget11_r3').text(data.widget11_r3);
                        $('.widget11_r4').text(data.widget11_r4);
                    }else if(widget_no == 2){
                        $('.widget12_r1').text(data.widget12_r1);
                        $('.widget12_r2').text(data.widget12_r2);
                        $('.widget12_r3').text(data.widget12_r3);
                        $('.widget12_r4').text(data.widget12_r4);
                    }else if(widget_no == 3){
                        $('.widget13_r1').text(data.widget13_r1);
                        $('.widget13_r2').text(data.widget13_r2);
                        $('.widget13_r3').text(data.widget13_r3);
                        $('.widget13_r4').text(data.widget13_r4);
                    }else if(widget_no == 4){
                        $('.widget14_r1').text(data.widget14_r1);
                        $('.widget14_r2').text(data.widget14_r2);
                        $('.widget14_r3').text(data.widget14_r3);
                        $('.widget14_r4').text(data.widget14_r4);
                    }else if(widget_no == 5){
                        $('.widget1_ordercount').html(data.widget1_ordercount + '<small>(' + data.widget1_orderamount +')</small>');
                    }else if(widget_no == 6){
                        $('.widget2_ordercount').html(data.widget2_ordercount + '<small>(' + data.widget2_orderamount +')</small>');
                    }else if(widget_no == 7){
                        $('.widget3_ordercount').html(data.widget3_count + '<small>(' + data.widget3_sum +')</small>');
                    }else if(widget_no == 8){
                        $('.widget4_ordercount').html(data.widget4_ordercount + '<small>(' + data.widget4_orderamount +')</small>');
                    }else if(widget_no == 9){
                        $('.widget10_ordercount').text(data.widget);
                    }else if(widget_no == 10){
                        $('.widget_8_9_ordercount').text(data.widget_8_9_ordercount);
                    }

                },
            });
        }

    </script>

    <script>
        $(function() {

            $("#sortable").sortable({
                update: function(event, ui) {
                    saveWidgetSorting();
                }
            });

            $("#sortable").disableSelection();
        });

        function saveWidgetSorting() {

            const idsInOrder = $("#sortable").sortable('toArray', {attribute: 'data-id'});
            var widget = idsInOrder;

            console.log(widget);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('admin.dashboard-sorting-save') }}",
                dataType: "json",
                type: "POST",
                data: {
                    'widget': widget
                },

                success: function(data) {
                    // window.location.href = "{{ url('admin/dashboard') }}";
                },
            });
        }

    </script>
    <script>
          $(document).ready(function () {
                $('#getTrendsData').text('Loading Trends Data....');
                var url = $('#getTrendsData').attr('page-url');
                $('#getTrendsData').load(url);

                // $('#getHourlyTrendsData').text('Loading Hourly Trends Data....');
                // var url = $('#getHourlyTrendsData').attr('page-url');
                // $('#getHourlyTrendsData').load(url);


                // $('#getAnnualGMVData').text('Loading Annual GMV....');
                // var url = $('#getAnnualGMVData').attr('page-url');
                // $('#getAnnualGMVData').load(url);

                // $('#getAnnualOrderData').text('Loading Orders....');
                // var url = $('#getAnnualOrderData').attr('page-url');
                // $('#getAnnualOrderData').load(url);
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.3.0/jquery.peity.min.js" integrity="sha512-L5mXjK4YbZPFEuunivJM+SKJG5qxqElc8RlaLDRd1Z5TtDACmugfzIRyFnYSGD4jPYoEMJbXhUJFZsBWDV8yLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    {{-- <script>
        const labels = [
            
        ];

        const data = {
            labels: labels,
            datasets: [{
                label: 'Total by hour',
                data: [
                    
                ],
                backgroundColor: [
                    'rgba(0, 123, 255)'

                ],
                borderColor: [
                    'rgb(0, 123, 255)'

                ],
                borderWidth: 1
            }]
        };


        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            },
        };
    </script>
    <script>
        const myChart = new Chart(
            document.getElementById('myOrderCountChart'),
            config
        );
    </script> --}}
@endsection