@extends('layouts.master')

@section('title')
    LT-168 :: DASHBOARD
@endsection

@php 
$me = Auth::user();
if ($me->isAssist()) {
    $me = $me->upline;
}
$myMembers = $me->downlines()->where(['user_type' => 1])->whereNull(['position', 'store_id']);
$allMembers = $myMembers->count();
$newDepositRequest = \App\DepositRequest::where('status', 0)->whereIn('deposit_requests.user_id', function ($q) use ($me) {
    $q->selectRaw('id')->from('users')->where('advisor_id', $me->id);
})->count();
$newWithdrawRequest = \App\WithdrawRequest::where('status', 0)->whereIn('withdraw_requests.user_id', function ($q) use ($me) {
    $q->selectRaw('id')->from('users')->where('advisor_id', $me->id);
})->count();
$newMembers = $myMembers->whereDate('created_at', date('Y-m-d'))->count();
@endphp

@section('content')
    <div class="row">
        <div class="col-sm-auto d-flex mb-3 mb-sm-0">
            <span class="badge badge-default text-xl d-flex px-3">
                <span class="m-auto">{{ lotteryName(session('lottery')) }}</span>
            </span>
        </div>
        <div class="col-sm">
            <div class="input-group input-group-alternative flex-nowrap">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-link mr-0 mr-sm-2"></i><span
                            class="d-none d-sm-inline">ลิงค์สมัคร :</span></span>
                </div>
                @if (Auth::user()->isAssist())
                <input id="ref-link" type="text" class="form-control text-darker bg-white" readonly
                    value="{{ route('agent.registerLink', [base64_url_encode(Auth::user()->upline->username)]) }}">
                @else
                <input id="ref-link" type="text" class="form-control text-darker bg-white" readonly
                    value="{{ route('agent.registerLink', [base64_url_encode(Auth::user()->username)]) }}">
                @endif
                <div class="input-group-append">
                    <button class="btn btn-primary px-3" onclick="copyUrl()"><i class="fas fa-copy mr-0 mr-sm-2"></i><span
                            class="d-none d-sm-inline">คัดลอก</span></button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-xl-8">
            <div class="card bg-default">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-light text-uppercase ls-1 mb-1">รายงานยอด</h6>
                            <h5 class="h3 text-white mb-0">ยอดตามเวลา</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="chart-summary">
                        <div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                            <div class="chartjs-size-monitor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0;"></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 200%; height: 200%; left: 0; top: 0;"></div>
                            </div>
                        </div>
                        <!-- Chart wrapper -->
                        <canvas id="chart-summary" class="chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 777px;" width="1554" height="700"></canvas>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-xl-8">
            <div class="card bg-default">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-light text-uppercase ls-1 mb-1">รายงานยอด</h6>
                            <h5 class="h3 text-white mb-0">ยอดคีย์ตามเวลา</h5>
                        </div>
                        <div class="col">
                            <ul class="nav nav-pills justify-content-end">
                                <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update='{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}' data-prefix="$" data-suffix="k">
                                    <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
                                        <span class="d-none d-md-block">Month</span>
                                        <span class="d-md-none">M</span>
                                    </a>
                                </li>
                                <li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update='{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}' data-prefix="$" data-suffix="k">
                                    <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
                                        <span class="d-none d-md-block">Week</span>
                                        <span class="d-md-none">W</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="chart">
                        <div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                            <div class="chartjs-size-monitor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0;"></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 200%; height: 200%; left: 0; top: 0;"></div>
                            </div>
                        </div>
                        <!-- Chart wrapper -->
                        <canvas id="chart-sales-dark" class="chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 777px;" width="1554" height="700"></canvas>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-muted ls-1 mb-1">รายงานยอด</h6>
                            <h5 class="h3 mb-0">ยอดตามสาขา</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Chart -->
                    <div class="chart">
                        <div class="chartjs-size-monitor" style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                            <div class="chartjs-size-monitor-expand" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0;"></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                <div style="position: absolute; width: 200%; height: 200%; left: 0; top: 0;"></div>
                            </div>
                        </div>
                        <canvas id="store-summary" class="chart-canvas chartjs-render-monitor" width="1554" height="700" style="display: block; height: 350px; width: 777px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>    

    <div class="row mt-5">
        <div class="col-xl col-md-6">
            <a href="{{ route('member.index') }}" class="card card-stats border border-info">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-black-50 mb-0">เมมเบอร์ทั้งหมดภายใต้คุณ</h5>
                            <span class="h1 font-weight-bold mb-0">{{ number_format($allMembers) }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white bg-gradient-info text-white rounded-circle shadow">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl col-md-6">
            <a href="{{ route('member.index') }}" class="card card-stats border border-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-black-50 mb-0">เมมเบอร์ใหม่วันนี้</h5>
                            <span class="h1 font-weight-bold mb-0">{{ number_format($newMembers) }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white bg-gradient-blue text-white rounded-circle shadow">
                                <i class="fas fa-user"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-xl col-md-4">
            <a href="{{ route('agent.deposit-request.index') }}" class="card card-stats border border-success">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-black-50 mb-0">รายการฝากที่ยังไม่ดำเนินการ</h5>
                            <span class="h1 font-weight-bold mb-0">{{ number_format($newDepositRequest) }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white bg-gradient-green text-white rounded-circle shadow">
                                <i class="fas fa-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl col-md-4">
            <a href="{{ route('agent.withdraw-request.index') }}" class="card card-stats border border-danger">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-black-50 mb-0">รายการถอนที่ยังไม่ดำเนินการ</h5>
                            <span class="h1 font-weight-bold mb-0">{{ number_format($newWithdrawRequest) }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white bg-gradient-red text-white rounded-circle shadow">
                                <i class="fas fa-minus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl col-md-4">
            <a href="javascript:;" class="card card-stats border border-warning">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="card-title text-uppercase text-black-50 mb-0">เครดิต SMS</h5>
                            <span class="h1 font-weight-bold mb-0">{{ number_format(smsCredit()) }}</span>
                        </div>
                        <div class="col-auto">
                            <div class="icon icon-shape bg-white bg-gradient-red text-white rounded-circle shadow">
                                <i class="fas fa-comments"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/vendor/chart.js/dist/Chart.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/chart.js/dist/Chart.extension.js') }}"></script>
    <script src="{{ asset('assets/js/argon.mine209.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>
    <script>
        const refLinkInput = document.getElementById('ref-link');

        function copyUrl() {
            refLinkInput.select();
            refLinkInput.setSelectionRange(0, 99999);
            document.execCommand('copy');
            return swal('คัดลอกเรียบร้อย', '', 'success');
        }

        async function loadChartData()
        {
            const res = await axios.get(`{{ route('api.sandbox') }}`);
            const data = res.data;

            let label = [], amount = [];
            let storeLabel = [], storeAmount = [];

            for (const k in data.bills) {
                let bill = data.bills[k];

                label.push(bill.hour);
                amount.push(bill.amount);
            }

            label = label.slice(-8);
            amount = amount.slice(-8);

            for (const k in data.store) {
                let store = data.store[k];
                storeLabel.push(store.store_name);
                storeAmount.push(store.amount);
            }

            storeLabel = storeLabel.slice(0, 6);
            storeAmount = storeAmount.slice(0, 6);


            let exportData = {
                labels: label,
                amount: amount,
                storeLabel: storeLabel,
                storeAmount: storeAmount
            };

            return exportData;
        }

        $(document).ready(async function () {
            
            let datasLabel = await loadChartData();

            const tooltips = {
                callbacks: {
                    label: function(tooltipItem, data) {
                        return tooltipItem.yLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                    }
                }
            };

            const data = {
                labels: datasLabel.labels,
                datasets: [{
                    label: 'ยอดแทงตามเวลา',
                    data: datasLabel.amount,
                }],
            };

            const config = {
                type: 'line',
                data: data,
                options: {
                    scales: {
                        yAxes: [{
                            gridLines: {
                                color: Charts.colors.gray[700],
                                zeroLineColor: Charts.colors.gray[700]
                            },
                            ticks: {}
                        }]
                    },
                    tooltips: tooltips
                },
            };
            
            const chartTarget = $('#chart-summary');

            new Chart(
                chartTarget,
                config
            );

            const storeData = {
                labels: datasLabel.storeLabel,
                datasets: [{
                    label: 'ยอดแทงตามสาขา',
                    data: datasLabel.storeAmount,
                }],
            };
            const storeConfig = {
                type: 'bar',
                data: storeData,
                options: {
                    tooltips: tooltips
                },
            };
            new Chart(
                $('#store-summary'),
                storeConfig
            );

        });

    </script>
@endsection