@extends('layouts.layout-2')

@section('content')

    @if ($errors->any())
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.my_team') }}
    </h4>
    <div class="card">
        <h5 class="card-header">
            {{ __('team.points') }}
        </h5>
        <div class="card-body">
            {!! Form::open(['action' => route('user_team_points'), 'class' => 'form-horizontal', 'id'=>'form_filter_user_points']) !!}

            <div class="form-row align-items-center px-0 pb-2 pt-0">
                 <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                     <select class="custom-select on_change_select_filter" name="team_user_points_filter_month">
                        @foreach($filter_months as $key=>$value)
                            <option value="{{$key}}" @if(session('team_user_points_filter_month') == $key) selected @endif>{{$value}}</option>
                        @endforeach
                    </select> 
                </div>
                <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                    <select class="custom-select on_change_select_filter" name="team_user_points_filter_year">
                        @foreach($filter_years as $key=>$value)
                            <option value="{{$value}}" @if(session('team_user_points_filter_year') == $value) selected @endif>{{$value}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            {!! Form::close() !!}
            <hr class="container-m-nx border-light mt-0">
            <div id="user_team_points_sum">
                @include('user.team._points_sum', ['userSalesVolume' => $userSalesVolume])
            </div>
            <div class="card">
                <div class="card-datatable table-responsive">
                    <table class="table table-striped table-bordered"  id="datatable-user-points">
        
                        <thead>
                        <tr>
                            <th>{{__('tables.date') }}</th>
                            <th>{{__('tables.points')}}</th>
                            <th>{{__('tables.net_sales')}}</th>
                            <th>{{__('tables.ve')}}</th>
                            <th>{{__('tables.art')}}</th>
                            <th>{{__('tables.order')}}</th>
                            <th>{{__('tables.info') }}</th>
                            <th>{{__('tables.note') }}</th>

                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
        <script>

            $( document ).ready(function() {

                function callback_ajax_team_user_points_sum(data){
                   $("#user_team_points_sum").html(data.html);
                }
                function load_team_user_points_sum(){
                        var $elem = $('<div/>');
                        $elem.data('action', 'load_team_user_points_sum');
                        $elem.data('team_user_points_filter_month',   $('select[name=team_user_points_filter_month]').val());
                        $elem.data('team_user_points_filter_year',   $('select[name=team_user_points_filter_year]').val());
                        $elem.data('url', '{{route('user_team_load')}}');
                        ajax_object_action(false, $elem, callback_ajax_team_user_points_sum);
                }
                
                var oTable = $('#datatable-user-points').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "stateSave": true,
                    "searching": false,
                    ajax: {
                        url: '{!! route('user_team_datatable_points') !!}',
                        data: function(d) {
                            d.team_user_points_filter_month = $('select[name=team_user_points_filter_month]').val();
                            d.team_user_points_filter_year = $('select[name=team_user_points_filter_year]').val();
                        }
                    },
                    "order": [[0, "desc" ]],
                    "columns": [
                        { data: 'date', name: 'date' },
                        { data: 'points', name: 'points' },
                        { data: 'total_net', name: 'total_net' },
                        { data: 'status_turnover', name: 'status_turnover' },
                        { data: 'status', name: 'status', searchable: false },
                        { data: 'order', name: 'order', orderable: false },
                        { data: 'message', name: 'message', searchable: false },
                        { data: 'info', name: 'info', searchable: false },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/datatables-{{ \App::getLocale() }}.json"
                    },
                    "drawCallback": function( settings ) {
                        load_team_user_points_sum();
                    }
                });

                $('select.on_change_select_filter').on('change', function(){
                    oTable.draw();
                });
    
                $('input.on_keyup_input_filter').on('keyup', function(){
                    oTable.draw();
                });
    
            });
        </script>
@endsection