@extends('adminlte::page')

@section('title', 'AdminLTE')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/bootstrap/dist/css/bootstrap-datepicker.min.css') }}">
@stop

@section('content_header')
    <!-- <h1>Dashboard</h1> -->
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Diamond Log <b>{{$member->member_name}}</b> (#{{$member->member_id}})</h3>
                </div>
                <div class="box-body">
                    <a href="{{ route('members.index_v2') }}" title="Back">
                        <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back
                        </button>
                    </a>
                    <form id="search-form" class="form" action="" method="post" style="margin-top: 20px">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="date-from">From: </label>
                                    <input class="form-control date" autocomplete="off" type="text" name="date_from"
                                            id="date-from" value="{{isset($dateFrom)? $dateFrom : ''}}"/>
                                </div>
                                <div class="form-group">
                                    <label for="date-to">To: </label>
                                    <input class="form-control date" autocomplete="off" type="text" name="date_to"
                                            id="date-to" value="{{isset($dateTo)? $dateTo : ''}}"/>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Search</button>
                    </form>

                    <div class="table-responsive">
                        <h3>Diamond Buy</h3>
                        <h4>
                            <span>Total buy number: </span>
                            <strong>
                                <i class="fa fa-diamond"></i><span id="total-buy-number">0</span>
                            </strong>
                        </h4>
                        <h4>
                            <span>Total buy money: </span>
                            <strong>
                                $<span id="total-buy-money">0</span>
                            </strong>
                        </h4>
                        <hr/>
                        <table id="buy-table" class="table table-borderless">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Buy Number</th>
                                <th>Buy Money</th>
                                <th>Buy Package</th>
                                <th>Buy Time</th>
                            </tr>

                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>

                    <br/>
                    <br/>
                    <div class="table-responsive">
                        <h3>Diamond Use</h3>
                        <h4>
                            <span>Total use number:
                            </span>
                            <strong>
                                <i class="fa fa-diamond"></i><span id="total-use-number">0</span>
                            </strong>
                        </h4>
                        <hr/>
                        <table id="use-table" class="table table-borderless">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Use Number</th>
                                <th>Use Time</th>
                            </tr>

                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

<script>
    function enable() {
        document.getElementById("bt_banned_status").disabled = false;
    }
</script>

@section('js')
    <script src="{{ asset('vendor/adminlte/vendor/bootstrap/dist/js/bootstrap-datepicker.min.js.download') }}"></script>
    <script type="text/javascript">
        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            defaultDate: '',
            orientation: "bottom",
        })
    </script>
    <script type="text/javascript">
        function getTotalBuy () {
            $.ajax({
                url: "{!! route('members.get_total_diamond_buy', $member->member_id) !!}",
                type: "get",
                data: {
                    date_from: $('input[name=date_from]').val(),
                    date_to: $('input[name=date_to]').val()
                },
                dataType:'json',
                success: function (response) {
                    if (response.diamond_buy_total) {
                        data = response.diamond_buy_total
                        if (data.total_buy_number) {
                            $('span#total-buy-number').text(data.total_buy_number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
                        }
                        if (data.total_buy_money) {
                            $('span#total-buy-money').text(data.total_buy_money.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
                        }
                    } else {
                        $('span#total-buy-number').text(0)
                        $('span#total-buy-money').text(0)
                    }

                }

            });
        }
        function getTotalUse () {
            $.ajax({
                url: "{!! route('members.get_total_diamond_use', $member->member_id) !!}",
                type: "get",
                data: {
                    date_from: $('input[name=date_from]').val(),
                    date_to: $('input[name=date_to]').val()
                },
                dataType:'json',
                success: function (response) {
                    if (response.diamond_use_total) {
                        data = response.diamond_use_total
                        if (data.total_use_number) {
                            $('span#total-use-number').text(data.total_use_number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
                        }
                    } else {
                        $('span#total-use-number').text(0)
                    }
                }

            });
        }

        $(document).ready(function () {
            getTotalBuy()
            getTotalUse()
        })

        buyTable = $('#buy-table').DataTable({
            dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>" +
                "<'row'<'col-xs-12't>>" +
                "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
            processing: true,
            serverSide: true,
            searching: false,
            pageLength: 10,
            ajax: {
                url: '{!! route('members.get_diamond_buy', $member->member_id) !!}',
                data: function (d) {
                    d.date_from = $('input[name=date_from]').val();
                    d.date_to = $('input[name=date_to]').val();
                }
            },
            columns: [
                {data: 'diamond_buy_id', name: 'diamond_buy_id'},
                {data: 'diamond_buy_number', name: 'diamond_buy_number'},
                {data: 'diamond_buy_money', name: 'diamond_buy_money'},
                {data: 'diamond_buy_package', name: 'diamond_buy_package'},
                {data: 'diamond_buy_time', name: 'diamond_buy_time'},
            ]
        });

        useTable = $('#use-table').DataTable({
            dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>" +
                "<'row'<'col-xs-12't>>" +
                "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
            processing: true,
            serverSide: true,
            searching: false,
            pageLength: 10,
            ajax: {
                url: '{!! route('members.get_diamond_use', $member->member_id) !!}',
                data: function (d) {
                    d.date_from = $('input[name=date_from]').val();
                    d.date_to = $('input[name=date_to]').val();
                }
            },
            columns: [
                {data: 'diamond_use_id', name: 'diamond_use_id'},
                {data: 'diamond_use_number', name: 'diamond_use_number'},
                {data: 'diamond_use_time', name: 'diamond_use_time'},
            ],
        });

        $('#search-form').on('submit', function (e) {
            getTotalBuy()
            getTotalUse()
            buyTable.draw();
            useTable.draw();
            e.preventDefault();
        });
    </script>
@endsection