@extends('admin.dashboard')
@section('content')

    <section id="apexchart">
        <div class="container">
            <div class="row">

                <!-- Ali chart Starts -->
                <div class="col-xl-6 col-12">
                    <div class="card card-he">
                        <div class="card-header flex-column align-items-start">
                            <h4 class="card-title mb-75">User Earned Amount</h4>
                        </div>
                        <div class="card-body scrol-s">
                            <table>
                                @foreach($country_data as $key => $val)
                                    <tr>
                                        <td><img src="https://flagsapi.com/{{ $val['country_code'] }}/shiny/32.png"></td>
                                        <td>{{ $val['country_name'] .' | '.$val['total_panelist'] }}</td>
                                        <td class="text-right col-sm-2">{{ number_format($val['total_amount'],2) }} $</td>
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Ali chart Ends -->

                <!-- Donut Chart Starts-->
                <div class="col-xl-6 col-12">
                    <div class="card card-he">
                        <div class="card-header flex-column align-items-start">
                            <h4 class="card-title mb-75">TOP 4 BRANDS</h4>
                        </div>
                        <div class="card-body">
                            <div id="donut-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- Donut Chart Ends-->

                <!-- RadialBar Chart Starts -->
                <div class="col-xl-6">
                    <div class="card card-he">
                        <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                            <h4 class="card-title mb-sm-0 mb-1">TOP 3 DISTRIBUTOR</h4>
                        </div>
                        <div class="card-body">
                            <div id="radialbar-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- RadialBar Chart Ends -->

                <!-- Column Chart Starts -->
                <div class="col-6">
                    <div class="card card-he">
                        <div class="card-header d-flex flex-md-row flex-column justify-content-md-between justify-content-start align-items-md-center align-items-start">
                            <h4 class="card-title">TOP 3 PRODUCTS</h4>
                        </div>
                        <div class="card-body">
                            <div id="column-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- Column Chart Ends -->

                <!-- Boxes -->
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i class="fa fa-user-secret" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">67</h4>
                                    <p class="card-text font-small-3 mb-0">Total TSO</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i class="fas fa-tasks-alt"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">Rs. 0</h4>
                                    <p class="card-text font-small-3 mb-0">Booking Today (14 Feb 2023)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i class="fas fa-tasks-alt"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">Rs. 0</h4>
                                    <p class="card-text font-small-3 mb-0">Sales Yesterday (14 Feb 2023)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i class="fas fa-shopping-basket"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">5320</h4>
                                    <p class="card-text font-small-3 mb-0">Total Shop</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                    <i class="fas fa-tasks-alt"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">Rs. 0</h4>
                                    <p class="card-text font-small-3 mb-0">Sales Current Month (Feb 2023)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i class="fas fa-truck"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">0</h4>
                                    <p class="card-text font-small-3 mb-0">Units Sold (Feb 2023)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i data-feather="trending-up" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">Rs. 1,540</h4>
                                    <p class="card-text font-small-3 mb-0">Sales Previous month (Jan 2023)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-12">
                    <div class="card card-statistics">
                        <div class="card-header">
                            <div class="media">
                                <div class="avatar bg-light-primary mr-2">
                                    <div class="avatar-content">
                                        <i data-feather="trending-up" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="media-body my-auto">
                                    <h4 class="font-weight-bolder mb-0">23</h4>
                                    <p class="card-text font-small-3 mb-0">TOP 3 ITEM TYPES</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Boxes Ends -->

                <!-- Candlestick Chart Starts -->
                <div class="col-xl-6 col-12">
                    <div class="card">
                        <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                            <div>
                                <h4 class="card-title mb-50">FISCAL YEAR SALES GRAPH</h4>
                            </div>
                            <div class="d-flex align-items-center mt-md-0 mt-1">
                                <i class="font-medium-2" data-feather="calendar"></i>
                                <input type="text" class="form-control flat-picker bg-transparent border-0 shadow-none" placeholder="YYYY-MM-DD" />
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="candlestick-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- Candlestick Chart Ends -->


                <!-- Bar Chart Starts -->
                <div class="col-xl-6 col-12">
                    <div class="card">
                        <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                            <div>
                                <p class="card-subtitle text-muted mb-25">SYSTEM ACTIVITY</p>
                            </div>
                            <div class="d-flex align-items-center mt-md-0 mt-1">
                                <i class="font-medium-2" data-feather="calendar"></i>
                                <input type="text" class="form-control flat-picker bg-transparent border-0 shadow-none" placeholder="YYYY-MM-DD" />
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="bar-chart"></div>
                        </div>
                    </div>
                </div>
                <!-- Bar Chart Ends -->
            </div>
        </div>
    </section>

    @endsection
@section('script')

<script src="{!! asset('adminPanel/assets/js/vendors.min.js') !!}"></script>

<script src="{!! asset('adminPanel/assets/js/app.js') !!}"></script>
<script src="{!! asset('adminPanel/assets/js/app.min.js') !!}"></script>
<script src="{!! asset('adminPanel/assets/js/app-menu.min.js') !!}"></script>
<script src="{!! asset('adminPanel/assets/js/customizer.min.js') !!}"></script>

<script src="{!! asset('adminPanel/assets/js/apexcharts.min.js') !!}"></script>
<script src="{!! asset('adminPanel/assets/js/toastr.min.js') !!}"></script>

<script src="{!! asset('adminPanel/assets/js/chart-apex.js') !!}"></script>
<script src="{!! asset('adminPanel/assets/js/flatpickr.min.js') !!}"></script>

    <script>
        var barColors = [
            "#de0b0b",
            "#481dbf",
            "#31c21b",
            "#f0b624",
            "#eb851e"
        ];
        var xValues = [];
        var yValues = [];
        var category_pbject = {2: 'Lucid', 3: 'CPX', 4: 'Bitlabs', 5: 'Precision'};

        const data = JSON.parse('null');
        data.forEach(function callback(value, index) {
            xValues.push(category_pbject[value.payment_type]);
            yValues.push(value.total_id)
        });

    </script>
@endsection