@extends('adminlte::page')

@section('title', 'HeroLegend')

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

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

@section('content')
    <div class="row">
        <div class="col-md-12">
            @include('layouts.message')
        </div>
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Members</h3>

                    <div class="box-body">
                        <form id="search-form" class="form" action="" method="get">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="server-id">Server ID: </label>
                                        <input min=0 class="form-control" placeholder="Server ID" type="number" name="server_id" id="server-id" value="{{$server_id}}"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="member-name">Member Name: </label>
                                        <input class="form-control" placeholder="Member name" type="text" name="member_name" id="member-name" value="{{$member_name}}"/>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Search</button>
                        </form>
                        <hr/>
                        <div class="table table-responsive">
                            <table id="members-table" class="table table-striped">
                                <thead>
                                <tr>
                                    <th> # </th>
                                    <th> Name </th>
                                    <th> Server </th>
                                    <th> Level</th>
                                    <th> Diamond</th>
                                    <th> Exp </th>
                                    <th> Gold </th>
                                    <th> Action </th>
                                </tr>
                                </thead>
                            </table>
                        </div>

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

@push('js')
    <script src="{{ asset('vendor/adminlte/vendor/bootstrap/dist/js/bootstrap-datepicker.min.js.download') }}"></script>
    <script type="text/javascript">
        $('#use_from_date,#use_to_date,#buy_from_date,#buy_to_date').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true
        })

        oTable = $('#members-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.list_v2') !!}',
                data: function (d) {
                    d.server_id = $('input[name=server_id]').val();
                    d.member_name = $('input[name=member_name]').val();
                }
            },
            columns: [
                { data: 'member_id', name: 'member_id' },
                { data: 'member_name', name: 'member_name' },
                { data: 'member_server', name: 'member_server' },
                { data: 'member_level', name: 'member_level' },
                { data: 'member_diamond', name: 'member_diamond' },
                { data: 'member_exp', name: 'member_exp' },
                { data: 'member_gold', name: 'member_gold' },
                { data: 'action', name: 'action'},
            ]
        });

        $('#search-form').on('submit', function(e) {
            oTable.draw();
            e.preventDefault();
        });
    </script>

@endpush