@extends('layouts.master')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-xxl-4">
            <!--begin::Squad-->
            <div class="card card-custom gutter-b" style="height: 150px">
                <div class="card-body">
                    <span class="svg-icon svg-icon-4x svg-icon-danger">
                        <!--begin::Svg Icon | path:/metronic/theme/html/demo2/dist/assets/media/svg/icons/Communication/Group.svg-->
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24" />
                                <path d="M18,14 C16.3431458,14 15,12.6568542 15,11 C15,9.34314575 16.3431458,8 18,8 C19.6568542,8 21,9.34314575 21,11 C21,12.6568542 19.6568542,14 18,14 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                <path d="M17.6011961,15.0006174 C21.0077043,15.0378534 23.7891749,16.7601418 23.9984937,20.4 C24.0069246,20.5466056 23.9984937,21 23.4559499,21 L19.6,21 C19.6,18.7490654 18.8562935,16.6718327 17.6011961,15.0006174 Z M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero" />
                            </g>
                        </svg>
                        <!--end::Svg Icon-->
                    </span>
                    <div class="text-dark font-weight-bolder font-size-h2 mt-3"><span id="squad_count"></span></div>
                    <a href="{{ route('user.squad') }}" class="text-muted text-hover-primary font-weight-bold font-size-lg mt-1">Squads</a>
                </div>
            </div>
            <!--end::Squad-->
        </div>
        <div class="col-lg-4 col-xxl-4">
            <!--begin::Squad-->
            <div class="card card-custom gutter-b" style="height: 150px">
                <div class="card-body">
                    <span class="svg-icon svg-icon-success svg-icon-4x">
                        <!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/../src/media/svg/icons/Shopping/Dollar.svg-->
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"/>
                                <rect fill="#000000" opacity="0.3" x="11.5" y="2" width="2" height="4" rx="1"/>
                                <rect fill="#000000" opacity="0.3" x="11.5" y="16" width="2" height="5" rx="1"/>
                                <path d="M15.493,8.044 C15.2143319,7.68933156 14.8501689,7.40750104 14.4005,7.1985 C13.9508311,6.98949895 13.5170021,6.885 13.099,6.885 C12.8836656,6.885 12.6651678,6.90399981 12.4435,6.942 C12.2218322,6.98000019 12.0223342,7.05283279 11.845,7.1605 C11.6676658,7.2681672 11.5188339,7.40749914 11.3985,7.5785 C11.2781661,7.74950085 11.218,7.96799867 11.218,8.234 C11.218,8.46200114 11.2654995,8.65199924 11.3605,8.804 C11.4555005,8.95600076 11.5948324,9.08899943 11.7785,9.203 C11.9621676,9.31700057 12.1806654,9.42149952 12.434,9.5165 C12.6873346,9.61150047 12.9723317,9.70966616 13.289,9.811 C13.7450023,9.96300076 14.2199975,10.1308324 14.714,10.3145 C15.2080025,10.4981676 15.6576646,10.7419985 16.063,11.046 C16.4683354,11.3500015 16.8039987,11.7268311 17.07,12.1765 C17.3360013,12.6261689 17.469,13.1866633 17.469,13.858 C17.469,14.6306705 17.3265014,15.2988305 17.0415,15.8625 C16.7564986,16.4261695 16.3733357,16.8916648 15.892,17.259 C15.4106643,17.6263352 14.8596698,17.8986658 14.239,18.076 C13.6183302,18.2533342 12.97867,18.342 12.32,18.342 C11.3573285,18.342 10.4263378,18.1741683 9.527,17.8385 C8.62766217,17.5028317 7.88033631,17.0246698 7.285,16.404 L9.413,14.238 C9.74233498,14.6433354 10.176164,14.9821653 10.7145,15.2545 C11.252836,15.5268347 11.7879973,15.663 12.32,15.663 C12.5606679,15.663 12.7949989,15.6376669 13.023,15.587 C13.2510011,15.5363331 13.4504991,15.4540006 13.6215,15.34 C13.7925009,15.2259994 13.9286662,15.0740009 14.03,14.884 C14.1313338,14.693999 14.182,14.4660013 14.182,14.2 C14.182,13.9466654 14.1186673,13.7313342 13.992,13.554 C13.8653327,13.3766658 13.6848345,13.2151674 13.4505,13.0695 C13.2161655,12.9238326 12.9248351,12.7908339 12.5765,12.6705 C12.2281649,12.5501661 11.8323355,12.420334 11.389,12.281 C10.9583312,12.141666 10.5371687,11.9770009 10.1255,11.787 C9.71383127,11.596999 9.34650161,11.3531682 9.0235,11.0555 C8.70049838,10.7578318 8.44083431,10.3968355 8.2445,9.9725 C8.04816568,9.54816454 7.95,9.03200304 7.95,8.424 C7.95,7.67666293 8.10199848,7.03700266 8.406,6.505 C8.71000152,5.97299734 9.10899753,5.53600171 9.603,5.194 C10.0970025,4.85199829 10.6543302,4.60183412 11.275,4.4435 C11.8956698,4.28516587 12.5226635,4.206 13.156,4.206 C13.9160038,4.206 14.6918294,4.34533194 15.4835,4.624 C16.2751706,4.90266806 16.9686637,5.31433061 17.564,5.859 L15.493,8.044 Z" fill="#000000"/>
                            </g>
                        </svg>
                        <!--end::Svg Icon-->
                    </span>
                    <div class="text-dark font-weight-bolder font-size-h2 mt-3">RM <span id="commission_sum"></span></div>
                    <a href="{{ route('report.commissions') }}" class="text-muted text-hover-primary font-weight-bold font-size-lg mt-1">Total Commission</a>
                </div>
            </div>
            <!--end::Squad-->
        </div>
        <div class="col-lg-4 col-xxl-4">
            <!--begin::Squad-->
            <div class="card card-custom gutter-b" style="height: 150px">
                <div class="card-body">
                    <span class="svg-icon svg-icon-warning svg-icon-4x">
                    <!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo2/dist/../src/media/svg/icons/Shopping/Cart1.svg-->
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"/>
                            <path d="M12,4.56204994 L7.76822128,9.6401844 C7.4146572,10.0644613 6.7840925,10.1217854 6.3598156,9.76822128 C5.9355387,9.4146572 5.87821464,8.7840925 6.23177872,8.3598156 L11.2317787,2.3598156 C11.6315738,1.88006147 12.3684262,1.88006147 12.7682213,2.3598156 L17.7682213,8.3598156 C18.1217854,8.7840925 18.0644613,9.4146572 17.6401844,9.76822128 C17.2159075,10.1217854 16.5853428,10.0644613 16.2317787,9.6401844 L12,4.56204994 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                            <path d="M3.28077641,9 L20.7192236,9 C21.2715083,9 21.7192236,9.44771525 21.7192236,10 C21.7192236,10.0817618 21.7091962,10.163215 21.6893661,10.2425356 L19.5680983,18.7276069 C19.234223,20.0631079 18.0342737,21 16.6576708,21 L7.34232922,21 C5.96572629,21 4.76577697,20.0631079 4.43190172,18.7276069 L2.31063391,10.2425356 C2.17668518,9.70674072 2.50244587,9.16380623 3.03824078,9.0298575 C3.11756139,9.01002735 3.1990146,9 3.28077641,9 Z M12,12 C11.4477153,12 11,12.4477153 11,13 L11,17 C11,17.5522847 11.4477153,18 12,18 C12.5522847,18 13,17.5522847 13,17 L13,13 C13,12.4477153 12.5522847,12 12,12 Z M6.96472382,12.1362967 C6.43125772,12.2792385 6.11467523,12.8275755 6.25761704,13.3610416 L7.29289322,17.2247449 C7.43583503,17.758211 7.98417199,18.0747935 8.51763809,17.9318517 C9.05110419,17.7889098 9.36768668,17.2405729 9.22474487,16.7071068 L8.18946869,12.8434035 C8.04652688,12.3099374 7.49818992,11.9933549 6.96472382,12.1362967 Z M17.0352762,12.1362967 C16.5018101,11.9933549 15.9534731,12.3099374 15.8105313,12.8434035 L14.7752551,16.7071068 C14.6323133,17.2405729 14.9488958,17.7889098 15.4823619,17.9318517 C16.015828,18.0747935 16.564165,17.758211 16.7071068,17.2247449 L17.742383,13.3610416 C17.8853248,12.8275755 17.5687423,12.2792385 17.0352762,12.1362967 Z" fill="#000000"/>
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                    </span>
                    <div class="text-dark font-weight-bolder font-size-h2 mt-3"><span id="order_count"></span></div>
                    <a href="{{ route('order') }}" class="text-muted text-hover-primary font-weight-bold font-size-lg mt-1">Order</a>
                </div>
            </div>
            <!--end::Squad-->
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-12 col-lg-12 order-1 order-xxl-1">
            <!--begin::Advance Table Widget 2-->
            <div class="card card-custom card-stretch gutter-b">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-label">Order History</h3>
                    </div>
                    <div class="card-toolbar" style="width: 300px !important;">
                        <div class="row">
                            <div class="col-md-10">
                                <div class="input-group" id='kt_daterangepicker_3'>
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="la la-calendar-o"></i>
                                        </span>
                                    </div>
                                    <input class="form-control" readonly="readonly" value="{{Carbon\Carbon::now()->format('d/m/Y')}} - {{Carbon\Carbon::now()->format('d/m/Y')}}" type="text" />
                                </div>
                            </div>
                            <div class="col-md-2">
                                <a href="" class="btn btn-warning btn-sm" id="filterOrder" style="float: right">
                                    <i class="flaticon-search icon-md"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body" id="graphOne">
                    <!--begin::Chart-->
                    <div id="order_history_chart"></div>
                    <!--end::Chart-->
                </div>
            </div>
            <!--end::Advance Table Widget 2-->
        </div>
    </div>

    <div class="row">
        <div class="col-xxl-8 col-lg-8 order-1 order-xxl-1">
            <!--begin::Advance Table Widget 2-->
            <div class="card card-custom card-stretch gutter-b">
                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label font-weight-bolder text-dark">Latest Transactions</span>
                        <span class="text-muted mt-3 font-weight-bold font-size-sm">Quick Information</span>
                    </h3>
                    <div class="card-toolbar">
                        <a href="{{ route('order') }}" class="btn btn-warning font-weight-bolder font-size-sm">View All</a>
                    </div>
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-2 pb-0 mt-n3">
                    <div class="table-responsive">
                        <table class="table table-head-teal table-head-bg table-borderless table-vertical-center" id="latest-order-table">
                            <thead>
                                <tr class="text-left text-uppercase">
                                    <th>Customer</th>
                                    <th>Order</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--end::Body-->
            </div>
            <!--end::Advance Table Widget 2-->
        </div>
        <div class="col-lg-4 col-xxl-4 order-2 order-xxl-2">
            <!--begin::List Widget 1-->
            <div class="card card-custom card-stretch gutter-b">
                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label font-weight-bolder text-dark">Top 5 Squad</span>
                        <span class="text-muted mt-3 font-weight-bold font-size-sm">Best Top Squad per Month</span>
                    </h3>
                    <div class="card-toolbar">
                        <a href="{{ route('report.sales') }}" class="btn btn-warning font-weight-bolder font-size-sm">View All</a>
                    </div>
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-2 pb-0 mt-n3">
                    <div class="table-responsive">
                        <table class="table table-head-teal table-head-bg table-borderless table-vertical-center" id="top-squad-table">
                            <thead>
                                <tr class="text-left text-uppercase">
                                    <th>No.</th>
                                    <th>Squad</th>
                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <!--end::Body-->
            </div>
            <!--end::List Widget 1-->
        </div>
    </div>
</div>
@endsection
@push('script')
<script type="text/javascript">

    var table = $('#latest-order-table').DataTable({
        responsive: false,
        scrollX: true,
        paging: false,
        searching: false,
        ordering: false,
        info: false,
        columns: [
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.ordercust.cust_name+'</b></span><br/><span>'+moment(row.created_at).format('DD/MM/YYYY')+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.invoice+'</b></span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.order_status == 0)
                        return "<h5><span class='badge badge-warning'>{{ __('Waiting') }}</span></h5>";
                    else if(row.order_status == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Accepted') }}</span></h5>";
                    else if(row.order_status == 2)
                        return "<h5><span class='badge badge-warning'>{{ __('Delivery') }}</span></h5>";
                    else if(row.order_status == 3)
                        return "<h5><span class='badge badge-success'>{{ __('Rent') }}</span></h5>";
                    else if(row.order_status == 4)
                        return "<h5><span class='badge badge-success'>{{ __('Finish') }}</span></h5>";
                    else if(row.order_status == 5)
                        return "<h5><span class='badge badge-warning'>{{ __('Pickup') }}</span></h5>";
                    else if(row.order_status == 6)
                        return "<h5><span class='badge badge-success'>{{ __('Completed') }}</span></h5>";
                    else if(row.order_status == 7)
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled by Customer') }}</span></h5>";
                    else if(row.order_status == 8)
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled by Squad') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Canceled') }}</span></h5>";
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('dashboard.latest.order.cust') }}",
            dataSrc:"data",
            dataType : "json"
        }
    });

    var table = $('#top-squad-table').DataTable({
        responsive: false,
        scrollX: true,
        paging: false,
        searching: false,
        ordering: false,
        info: false,
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.squad.name+'</b></span><br/><span>ID : '+row.squad.id+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>RM '+row.total_sales+'</b></span>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('dashboard.top.squad') }}",
            dataSrc:"data",
            dataType : "json"
        }
    });

    $(document).ready(function() {
        $.ajax({
            url: "{{ route('dashboard.count.squad') }}",
            type: 'GET',
            success: function(data) {
                var val = data.data;
                document.getElementById('squad_count').innerHTML = val;
            }
        });

        $.ajax({
            url: "{{ route('dashboard.sum.commission') }}",
            type: 'GET',
            success: function(data) {
                var val = data.data;
                if(val != null)
                    document.getElementById('commission_sum').innerHTML = val.toFixed(2);
                else
                    document.getElementById('commission_sum').innerHTML = (0.00).toFixed(2);
            }
        });

        $.ajax({
            url: "{{ route('dashboard.count.order') }}",
            type: 'GET',
            success: function(data) {
                var val = data.data;
                document.getElementById('order_count').innerHTML = val;
            }
        });

        $('#kt_daterangepicker_3').daterangepicker({
            buttonClasses: ' btn',
            applyClass: 'btn-primary',
            cancelClass: 'btn-secondary',
            },
            function(start, end, label) {
                $('#kt_daterangepicker_3 .form-control').val( start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
        });

        var date = $('#kt_daterangepicker_3 .form-control').val();

        var startDate = date.split(' - ')[0];  // return 2018-10-21
        var endDate   = date.split(' - ')[1];

        $.ajax({
            url: "{{ route('dashboard.graph.order') }}",
            type: 'GET',
            data: {
                from : moment(startDate, 'DD/MM/YYYY').format('YYYY-MM-DD'), 
                to   : moment(endDate, 'DD/MM/YYYY').format('YYYY-MM-DD') 
            },
            success: function(data) {
                if(data.diff == 1)
                {
                    var arrCat  = [];
                    var arrData = [];

                    $.each(data.data, function(index, data){
                        arrCat.push(data.time);
                        arrData.push(data.amount);
                    });    
                }
                filtergraph(arrData, arrCat);
            }
        });

        $('#filterOrder').on('click', function (e) {

            // $('#order_history_chart').val('');
            document.querySelector("#graphOne").innerHTML = '<div id="order_history_chart"></canvas>';

            e.preventDefault();

            var dateFilter = $('#kt_daterangepicker_3 .form-control').val();
            var from = dateFilter.split(' - ')[0];  // return 2018-10-21
            var to   = dateFilter.split(' - ')[1];


            $.ajax({
                url: "{{ route('dashboard.graph.order') }}",
                type: 'GET',
                data: { 
                    from : moment(from, 'DD/MM/YYYY').format('YYYY-MM-DD'), 
                    to   : moment(to, 'DD/MM/YYYY').format('YYYY-MM-DD')
                },
                success: function(data) {

                    var arrCat  = [];
                    var arrData = [];

                    if(data.diff == 1)
                    {
                        $.each(data.data, function(index, data){
                            arrCat.push(data.time);
                            arrData.push(data.amount);
                        });    
                    }
                    else
                    {
                        $.each(data.data, function(index, data){
                            arrCat.push(moment(data.date).format('DD/MM/YYYY'));
                            arrData.push(data.amount);
                        });
                    }
                    filtergraph(arrData, arrCat);
                }
            });
            
        });
    });

    function filtergraph(data, categories)
    {
        const apexChart = "#order_history_chart";
        var options = {
            series: [{
                name: "Order",
                data: data,
            }],
            chart: {
                height: 350,
                type: 'line',
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {   
                enabled: false
            },
            stroke: {
                curve: 'straight'
            },
            grid: {
                row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                },
            },
            xaxis: {
                categories: categories,
                title: {
                    text: 'Date/Time'
                }
            },
            yaxis: {
                title: {
                    text: 'Total Amount (RM)'
                }
            },
            colors: [primary]
        };

        var chart = new ApexCharts(document.querySelector(apexChart), options);
        chart.render();
    }
</script>
@endpush