@extends('admin.app')
@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <section id="dashboard-ecommerce">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-end">
                                    <h4 class="card-title">Filtre</h4>
                                    <p class="font-medium-5 mb-0"><i
                                            class="feather icon-settings text-muted cursor-pointer"></i></p>
                                </div>
                                <div class="card-content">
                                    <div class="card-body pb-0">
                                        <form id="report-filter" method="GET">
                                            <div class="row">
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Müşteri Sayısı</label>
                                                        <select name="limit" class="form-control">
                                                            <option @if($data['limit'] == '20') selected @endif value="20">20</option>
                                                            <option @if($data['limit'] == '100') selected @endif value="100">100</option>
                                                            <option @if($data['limit'] == '500') selected @endif value="500">500</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Başlangıç Tarihi</label>
                                                        <input type="text" class="form-control pickadate-translations" id="input-start" name="start">
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="form-group">
                                                        <label>Bitiş Tarihi</label>
                                                        <input type="text" class="form-control pickadate-translations" id="input-end" name="end">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="buttons-group pb-1">
                                                <button type="submit" class="btn btn-primary">Gönder</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-end">
                                    <h4 class="card-title">Rapor Grafiği</h4>
                                    <p class="font-medium-5 mb-0"><i
                                            class="feather icon-settings text-muted cursor-pointer"></i></p>
                                </div>
                                <div class="card-content">
                                    <div class="card-body pb-0">
                                        <div class="d-flex justify-content-start">

                                            <div class="mr-2">
                                                <p class="mb-50 text-bold-600">Toplam Komisyon Adedi</p>
                                                <h2 class="text-bold-400">
                                                    <span class="text-success">{{$data['orders_this_count']}}</span>
                                                </h2>
                                            </div>
                                            <div class="mr-2">
                                                <p class="mb-50 text-bold-600">Toplam Komisyon</p>
                                                <h2 class="text-bold-400">
                                                    <span class="text-success">{{$data['orders_this_total']}}</span>
                                                    <sup class="font-medium-1">₺</sup>
                                                </h2>
                                            </div>

                                            <div class="mr-2">
                                                <p class="mb-50 text-bold-600">Ortalama Komisyon Tutarı</p>
                                                <h2 class="text-bold-400">
                                                    <span class="text-success">{{$data['orders_this_avarage']}}</span>
                                                    <sup class="font-medium-1">₺</sup>
                                                </h2>
                                            </div>

                                        </div>
                                        <div class="mt-1 mb-1" id="revenue-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-end">
                                    <h4 class="card-title">Liste</h4>
                                    <p class="font-medium-5 mb-0"><i
                                            class="feather icon-settings text-muted cursor-pointer"></i></p>
                                </div>
                                <div class="card-content">
                                    <div class="card-body pb-0">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead>
                                                <tr>
                                                    <th>Bayi</th>
                                                    <th>Toplam Transfer Adeti</th>
                                                    <th>Ortalama Komisyon Tutarı</th>
                                                    <th>Komisyon Toplamı</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($data['list'] as $list)
                                                    <tr>
                                                        <td>{{$list->user_name}}</td>
                                                        <td>{{@$list['cnt']}}</td>
                                                        <td>{{@number_format($list['avarage'], 2, ',', '.')}} ₺</td>
                                                        <td>{{@number_format($list['total'], 2, ',', '.')}} ₺</td>
                                                    </tr>
                                                @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

@endsection
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/core/menu/menu-types/horizontal-menu.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/core/colors/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/dashboard-ecommerce.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/pages/card-analytics.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection
@section('js')
    <script src="{{asset('app-assets/vendors/js/ui/jquery.sticky.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/charts/apexcharts.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/tether.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/extensions/shepherd.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/pickers/pickadate/picker.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/pickers/pickadate/picker.date.js')}}"></script>
    <script src="{{asset('app-assets/js/scripts/pickers/dateTime/pick-a-datetime.js')}}"></script>
    <script>

        $(window).on("load", function () {

            var $primary = '#7367F0';
            var $danger_light = '#f29292';
            var $strok_color = '#b9c3cd';
            var $label_color = '#e7e7e7';
            var revenueChartoptions = {
                chart: {
                    height: 270,
                    toolbar: {show: false},
                    type: 'bar',
                },
                stroke: {
                    curve: 'smooth',
                    dashArray: [0, 8],
                    width: [4, 2],
                },
                grid: {
                    borderColor: $label_color,
                },
                legend: {
                    show: false,
                },
                colors: [$danger_light, $strok_color],

                fill: {
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        inverseColors: false,
                        gradientToColors: [$primary, $strok_color],
                        shadeIntensity: 1,
                        type: 'horizontal',
                        opacityFrom: 1,
                        opacityTo: 1,
                        stops: [0, 100, 100, 100]
                    },
                },
                markers: {
                    size: 0,
                    hover: {
                        size: 5
                    }
                },
                xaxis: {
                    labels: {
                        style: {
                            colors: $strok_color,
                        }
                    },
                    axisTicks: {
                        show: false,
                    },
                    categories: {!! $data['cats'] !!},
                    axisBorder: {
                        show: false,
                    },
                    tickPlacement: 'on',
                },
                yaxis: {
                    tickAmount: 5,
                    labels: {
                        style: {
                            color: $strok_color,
                        },
                        formatter: function (val) {
                            return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
                        }
                    }
                },
                tooltip: {
                    x: {show: true}
                },
                series: [{
                    name: "Toplam Satış (₺)",
                    data: {{$data['orders_this_daily']}}
                }
                ],

            };

            var revenueChart = new ApexCharts(
                document.querySelector("#revenue-chart"),
                revenueChartoptions
            );

            revenueChart.render();
            $( '#input-start' ).pickadate({
                formatSubmit: 'yyyy-m-d',
                monthsFull: [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık' ],
                monthsShort: [ 'Ock', 'Şbt', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Ekm', 'Ksm', 'Ara' ],
                weekdaysShort: [ 'Pzt', 'Sal', 'Çrş', 'Prş', 'Cum', 'Cmt', 'Paz' ],
                selectYears: true,
                selectMonths: true,
                today: 'Bu Gün',
                clear: 'Temizle',
                close: 'Kapat'
            });
            $( '#input-end' ).pickadate({
                formatSubmit: 'yyyy-m-d',
                monthsFull: [ 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık' ],
                monthsShort: [ 'Ock', 'Şbt', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Ekm', 'Ksm', 'Ara' ],
                selectYears: true,
                selectMonths: true,
                weekdaysShort: [ 'Pzt', 'Sal', 'Çrş', 'Prş', 'Cum', 'Cmt', 'Paz' ],
                today: 'Bu Gün',
                clear: 'Temizle',
                close: 'Kapat'
            });
            @if(isset($_GET['start_submit']))
                 var start_date = new Date({{date('Y',strtotime($_GET['start_submit']))}}, {{date('m',strtotime($_GET['start_submit']))-1}}, {{date('d',strtotime($_GET['start_submit']))}});
                $('#input-start').pickadate('picker').set('select', start_date);
            @endif
            @if(isset($_GET['end_submit']))
            var end_date = new Date({{date('Y',strtotime($_GET['end_submit']))}}, {{date('m',strtotime($_GET['end_submit']))-1}}, {{date('d',strtotime($_GET['end_submit']))}});
                $('#input-end').pickadate('picker').set('select', end_date);
            @endif

        });
    </script>
@endsection