@extends($_layout . 'main')

{{-- khai báo title --}}
@section('title', "Báo cáo tháng $month năm $year")

{{-- tên modul xuất hiện trong sub header --}}
@section('module.name', 'Báo cáo tháng')


@section('content')

    @php
        $user_total = $data[0];
        $customer_total = $data[1];
        $customer_of_customer_total = 0;
        $reward_total = 0;
        $columns = [[], []];

        foreach ($data as $i => $total) {
            $reward_total += $total;
            if ($i > 1) {
                $customer_of_customer_total += $total;
            }

            if ($i > 4) {
                // $columns[1][] = $total;
            } elseif ($i > 2) {
                $columns[1][] = $total;
            } elseif ($i > 0) {
                $columns[0][] = $total;
            }
        }
        $y = date('Y');
        if ($reward_total > 0) {
            $ust = ((int) (($user_total / $reward_total) * 10000)) / 100;
            $ctt = ((int) (($customer_total / $reward_total) * 10000)) / 100;
            $cct = ((int) (($customer_of_customer_total / $reward_total) * 10000)) / 100;
        } else {
            $ust = 0;
            $ctt = 0;
            $cct = 0;
        }

    @endphp

    <div class="row">

        <div class="col-xl-4">

            <!--begin:: Widgets/Blog-->
            <div class="m-portlet m-portlet--head-overlay m-portlet--full-height  m-portlet--rounded-force">
                <form action="?" method="GET">

                    <div class="m-portlet__head m-portlet__head--fit- pt-4">

                        <div class="prev">
                            @if ($prev)
                                <a href="{{ route('merchant.reports.month', $prev) }}" class="btn btn-secondary"><i class="fa fa-chevron-left"></i></a>
                            @else
                                <a href="javascript:void(0);" class="btn btn-secondary"><i class="fa fa-chevron-left"></i></a>
                            @endif
                        </div>
                        <div class="month-year d-flex">
                            <select name="month" id="month" class="form-control m-input">
                                <option value="">Tháng</option>
                                @for ($i = 1; $i < 13; $i++)
                                    <option value="{{ $i }}" @selected($i == $month)>Tháng {{ $i }}</option>
                                @endfor
                            </select>
                            <select name="year" id="year" class="form-control m-input">
                                <option value="">Năm</option>
                                @for ($i = $y; $i >= 2022; $i--)
                                    <option value="{{ $i }}" @selected($i == $year)>{{ $i }}</option>
                                @endfor
                            </select>
                            <button type="submit" class="btn btn-info" style="height: calc(2.95rem + 2px);">Xem</button>
                        </div>
                        <div class="next">

                            @if ($next)
                                <a href="{{ route('merchant.reports.month', $next) }}" class="btn btn-secondary"><i class="fa fa-chevron-right"></i></a>
                            @else
                                <a href="javascript:void(0);" class="btn btn-secondary"><i class="fa fa-chevron-right"></i></a>
                            @endif
                        </div>
                    </div>
                </form>
                <div class="m-portlet__body">
                    <div class="m-widget27 m-portlet-fit--sides">
                        <div class="m-widget27__pic">
                            <img src="{{ system_asset('static/manager/assets/app/media/img//bg/bg-4.jpg') }}" alt="">
                            <h3 class="m-widget27__title m--font-light">
                                <span style="white-space: nowrap">
                                    {{ number_format($myRewards + $branchRewards, 2, ',', '.') }}
                                    <span>LI</span>
                                </span>
                            </h3>
                            <div class="m-widget27__btn">
                                <button type="button" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--bolder">Chi tiết thu nhập</button>
                            </div>
                        </div>
                        <div class="m-widget27__container">
                            <div class="m-widget14">

                                <div class="row  align-items-center">
                                    <div class="col">
                                        <div id="m_chart_profit_share" class="m-widget14__chart" style="height: 160px">
                                            <div class="m-widget14__stat rewardTotal">{{ $reward_total }}</div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="m-widget14__legends">
                                            <div class="m-widget14__legend">
                                                <span class="m-widget14__legend-bullet m--bg-accent"></span>
                                                <span class="m-widget14__legend-text">{{ $ust }}% Doanh thu của tôi</span>
                                            </div>
                                            <div class="m-widget14__legend">
                                                <span class="m-widget14__legend-bullet m--bg-warning"></span>
                                                <span class="m-widget14__legend-text">{{ $ctt }}% Doanh thu trực tiếp</span>
                                            </div>
                                            <div class="m-widget14__legend">
                                                <span class="m-widget14__legend-bullet m--bg-brand"></span>
                                                <span class="m-widget14__legend-text">{{ $cct }}% Doanh thu gián tiếp</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- end::Tab Content -->
                        </div>
                    </div>
                </div>
            </div>

            <!--end:: Widgets/Blog-->
        </div>



        <div class="col-xl-4">

            <!--begin:: Widgets/Blog-->
            <div class="m-portlet m-portlet--head-overlay m-portlet--full-height   m-portlet--rounded-force">
                <div class="m-portlet__head m-portlet__head--fit">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text m--font-light">
                                Biểu đồ tháng
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <ul class="m-portlet__nav">
                            <li class="m-portlet__nav-item m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover">
                                <a href="#" class="m-portlet__nav-link m-dropdown__toggle dropdown-toggle btn btn--sm m-btn--pill m-btn btn-outline-light m-btn--hover-light">
                                    {{ $month }} / {{ $year }}
                                </a>
                                <div class="m-dropdown__wrapper">
                                    <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
                                    <div class="m-dropdown__inner">
                                        <div class="m-dropdown__body">
                                            <div class="m-dropdown__content">
                                                <ul class="m-nav">
                                                    <li class="m-nav__section m-nav__section--first">
                                                        <span class="m-nav__section-text">Reports</span>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-share"></i>
                                                            <span class="m-nav__link-text">Activity</span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-chat-1"></i>
                                                            <span class="m-nav__link-text">Messages</span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-info"></i>
                                                            <span class="m-nav__link-text">FAQ</span>
                                                        </a>
                                                    </li>
                                                    <li class="m-nav__item">
                                                        <a href="" class="m-nav__link">
                                                            <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                                            <span class="m-nav__link-text">Support</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <div class="m-widget28">
                        <div class="m-widget28__pic m-portlet-fit--sides"></div>
                        <div class="m-widget28__container">

                            <!-- begin::Nav pills -->
                            <ul class="m-widget28__nav-items nav nav-pills nav-fill" role="tablist">
                                <li class="m-widget28__nav-item nav-item">
                                    <a class="nav-link active" data-toggle="pill" href="#myRevenue">
                                        <span>
                                            <i class="fa flaticon-pie-chart"></i>
                                        </span>
                                        <span>Của tôi</span>
                                    </a>
                                </li>
                                <li class="m-widget28__nav-item nav-item">
                                    <a class="nav-link" data-toggle="pill" href="#referralRevenue">
                                        <span>
                                            <i class="fa flaticon-file-1"></i>
                                        </span>
                                        <span>Trực tiếp</span>
                                    </a>
                                </li>
                                <li class="m-widget28__nav-item nav-item">
                                    <a class="nav-link" data-toggle="pill" href="#affiliateRevenue">
                                        <span>
                                            <i class="fa flaticon-clipboard"></i>
                                        </span>
                                        <span>Gián tiếp</span>
                                    </a>
                                </li>
                            </ul>

                            <!-- end::Nav pills -->

                            <!-- begin::Tab Content -->
                            <div class="m-widget28__tab tab-content">
                                <div id="myRevenue" class="m-widget28__tab-container tab-pane active">
                                    {{-- Doanh thu cua toi --}}
                                    <canvas id="myRevenueChart"></canvas>
                                </div>
                                <div id="referralRevenue" class="m-widget28__tab-container tab-pane fade">
                                    {{-- Doanh thu trx tiep --}}
                                    <canvas id="referralRevenueChart"></canvas>
                                </div>
                                <div id="affiliateRevenue" class="m-widget28__tab-container tab-pane fade">
                                    {{-- Doanh thu gián tiếp --}}
                                    <canvas id="affiliateRevenueChart"></canvas>
                                </div>
                            </div>

                            <!-- end::Tab Content -->
                        </div>
                    </div>
                </div>
            </div>

            <!--end:: Widgets/Blog-->
        </div>
        <div class="col-xl-4">

            <!--begin:: Widgets/Activity-->
            <div class="m-portlet m-portlet--bordered-semi m-portlet--widget-fit m-portlet--full-height m-portlet--skin-light  m-portlet--rounded-force">
                <div class="m-portlet__head pt-3">

                    <div class="prev">
                        @if ($prev)
                            <a href="{{ route('merchant.reports.month', $prev) }}" class="btn btn-secondary"><i class="fa fa-chevron-left"></i></a>
                        @else
                            <a href="javascript:void(0);" class="btn btn-secondary"><i class="fa fa-chevron-left"></i></a>
                        @endif
                    </div>
                    <div class="month-year d-flex">
                        <select name="month" id="month" class="form-control m-input" style="width: 130px">
                            <option value="">Tháng</option>
                            @for ($i = 1; $i < 13; $i++)
                                <option value="{{ $i }}" @selected($i == $month)>Tháng {{ $i }}</option>
                            @endfor
                        </select>
                        <span>/</span>
                        <select name="year" id="year" class="form-control m-input" style="width: 130px">
                            <option value="">Năm</option>
                            @for ($i = $y; $i >= 2022; $i--)
                                <option value="{{ $i }}" @selected($i == $year)>{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="next">

                        @if ($next)
                            <a href="{{ route('merchant.reports.month', $next) }}" class="btn btn-secondary"><i class="fa fa-chevron-right"></i></a>
                        @else
                            <a href="javascript:void(0);" class="btn btn-secondary"><i class="fa fa-chevron-right"></i></a>
                        @endif
                    </div>

                </div>
                <div class="m-portlet__body">
                    <div class="m-widget17">
                        <div class="m-widget17__visual m-widget17__visual--chart m-portlet-fit--top m-portlet-fit--sides m--bg-danger">
                            <div class="m-widget17__chart" style="height:320px;">
                                <canvas id="m_chart_activities"></canvas>
                            </div>
                        </div>
                        <div class="m-widget17__stats">
                            <div class="m-widget17__items m-widget17__items-col1">
                                @foreach ($columns[0] as $total)
                                    <div class="m-widget17__item">
                                        <span class="m-widget17__icon">
                                            <i class="flaticon-pie-chart m--font-success"></i>
                                        </span>
                                        <span class="m-widget17__subtitle">
                                            Khách hàng cấp {{ $loop->index + 1 }}
                                        </span>
                                        <span class="m-widget17__desc">
                                            {{ number_format($total, 2, ',', '.') }}LI
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                            <div class="m-widget17__items m-widget17__items-col2">
                                @foreach ($columns[1] as $total)
                                    <div class="m-widget17__item">
                                        <span class="m-widget17__icon">
                                            <i class="flaticon-pie-chart m--font-success"></i>
                                        </span>
                                        <span class="m-widget17__subtitle">
                                            Khách hàng cấp {{ $loop->index + 3 }}
                                        </span>
                                        <span class="m-widget17__desc">
                                            {{ number_format($total, 2, ',', '.') }}LI
                                        </span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--end:: Widgets/Activity-->
        </div>


        <div class="col-xl-4">
            <div class="m-portlet">
                <div class="m-portlet__body  m-portlet__body--no-padding">
                    <!--begin:: Widgets/Stats2-1 -->
                    <div class="m-widget1">
                        <div class="m-widget1__item">
                            <div class="row m-row--no-padding align-items-center">
                                <div class="col">
                                    <h3 class="m-widget1__title">Danh trực tiếp</h3>
                                    <span class="m-widget1__desc">Doanh thu của tôi trong tháng</span>
                                </div>
                                <div class="col m--align-right">
                                    <span class="m-widget1__number m--font-brand">+{{ number_format($myRewards, 2, ',', '.') }}LI</span>
                                </div>
                            </div>
                        </div>
                        <div class="m-widget1__item">
                            <div class="row m-row--no-padding align-items-center">
                                <div class="col">
                                    <h3 class="m-widget1__title">Doanh thu gián tiếp</h3>
                                    <span class="m-widget1__desc">Doanh thu từ khách hàng cà đại lý cấp dưới</span>
                                </div>
                                <div class="col m--align-right">
                                    <span class="m-widget1__number m--font-danger">+{{ number_format($branchRewards, 2, ',', '.') }}LI</span>
                                </div>
                            </div>
                        </div>
                        <div class="m-widget1__item">
                            <div class="row m-row--no-padding align-items-center">
                                <div class="col">
                                    <h3 class="m-widget1__title">Tổng doanh thu</h3>
                                    <span class="m-widget1__desc">Tổng doanh thu trong tháng</span>
                                </div>
                                <div class="col m--align-right">
                                    <span class="m-widget1__number m--font-success">+{{ number_format($myRewards + $branchRewards, 2, ',', '.') }}LI</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end:: Widgets/Stats2-1 -->
                </div>
            </div>

        </div>



    </div>

@endsection
@section('js')
    <script>
        new Chartist.Pie("#m_chart_profit_share", {
            series: [{
                    value: {{ $ust }},
                    className: "custom",
                    meta: {
                        color: mApp.getColor("accent")
                    }
                },
                {
                    value: {{ $ctt }},
                    className: "custom",
                    meta: {
                        color: mApp.getColor("warning")
                    }
                },
                {
                    value: {{ $cct }},
                    className: "custom",
                    meta: {
                        color: mApp.getColor("brand")
                    }
                }
            ],
            labels: [1, 2, 3]
        }, {
            donut: !0,
            donutWidth: 17,
            showLabel: !1
        }).on("draw", function(e) {
            if ("slice" === e.type) {
                var t = e.element._node.getTotalLength();
                e.element.attr({
                    "stroke-dasharray": t + "px " + t + "px"
                });
                var a = {
                    "stroke-dashoffset": {
                        id: "anim" + e.index,
                        dur: 1e3,
                        from: -t + "px",
                        to: "0px",
                        easing: Chartist.Svg.Easing.easeOutQuint,
                        fill: "freeze",
                        stroke: e.meta.color
                    }
                };
                0 !== e.index && (a["stroke-dashoffset"].begin = "anim" + (e.index - 1) + ".end"),
                    e.element.attr({
                        "stroke-dashoffset": -t + "px",
                        stroke: e.meta.color
                    }),
                    e.element.animate(a, !1)
            }
        })

        let tabActived = {};
        function addMonthChart(id, data) {
            if($('#' + id).hasClass('active')){
                if(tabActived[id]) return false;
            }else{
                return setTimeout(() => {
                    addMonthChart(id, data);
                }, 500);
            }
            tabActived[id] = true;
            let labels = [];
            let dataset = [];
            var e = $("#" + id + 'Chart');
            for (let index = 0; index < data.length; index++) {
                const d = data[index];
                labels.push(d.day);
                dataset.push(d.reward_total)

            }
            if (0 != e.length) {
                var t = {
                    labels: labels,
                    datasets: [
                        dataset
                    ]
                };
                new Chart(e, {
                    type: "bar",
                    data: t,
                    options: {
                        title: {
                            display: !1
                        },
                        tooltips: {
                            intersect: !1,
                            mode: "nearest",
                            xPadding: 10,
                            yPadding: 10,
                            caretPadding: 10
                        },
                        legend: {
                            display: !1
                        },
                        responsive: !0,
                        maintainAspectRatio: !1,
                        barRadius: 4,
                        scales: {
                            xAxes: [{
                                display: !1,
                                gridLines: !1,
                                stacked: !0
                            }],
                            yAxes:[
                                {
                                    display:!1,
                                    stacked:!0,
                                    gridLines:!1
                                }
                            ]
                        },
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 0,
                                bottom: 0
                            }
                        }
                    }
                })

            }
        }

        [{
                id: "myRevenue",
                data: @json($myRevenue)
            },
            {
                id: "referralRevenue",
                data: @json($referralRevenue)
            },
            {
                id: "affiliateRevenue",
                data: @json($affiliateRevenue)
            }
        ].map(e => addMonthChart(e.id, e.data))
    </script>
@endsection
@section('css')
    <style>
        .m-widget14__chart{
            position: relative;
        }
        .rewardTotal {
            font-size: 2.4rem;
            font-weight: 600;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
@endsection