@extends('adminlte::page')

@section('title', 'HeroLegend')

@section('content_header')
    <!-- <h1>Server</h1> -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('css')
    <link rel="stylesheet" style="text/css" href="{{ asset('vendor/jquery/jquery.datetimepicker.min.css') }}" />
@endsection

@section('content')
    <div class="row">
        @include('layouts.message')
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Hall Legend</h3>
                </div>
                <div class="box-body">
                    <a href="{{route('servers.index')}}" title="Back">
                        <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back
                        </button>
                    </a>
                    <br><br>
                    <form class="form-inline filter-form" action="{{action('HallLegendController@index')}}">
                        <input type="hidden" name="server_id" value="{{$serverID ?? 0}}">
                        <div class="form-group">
                            <label for="member_id">Member ID</label>
                            <input type="text" class="form-control" name="member_id" id="member_id"
                                   value="{{$memberID ?? null}}">
                        </div>
                        <div class="form-group">
                            <label for="from_damage">From Damage</label>
                            <input type="number" class="form-control" name="from_damage" id="from_damage"
                                   value="{{$fromDamage ?? null}}">
                        </div>
                        <div class="form-group">
                            <label for="date">Date</label>
                            <input id="date" name="date" class="form-control" type="text" value="{{$date ?? ''}}"/>
                        </div>
                        <button type="submit" class="btn btn-primary">Find</button>
                        <button type="button" class="btn btn-default clear-filter-btn">Clear Filter</button>
                    </form>
                    <hr/>
                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead>
                            <tr>
                                <th> M.ID</th>
                                <th> M.Name</th>
                                <th> M.Level</th>
                                <th> M.Vip</th>
                                <th> Server ID</th>
                                <th> Damage</th>
                                <th> Time</th>
                                <th> Rewarded</th>
                                <th> Formation</th>
                                <th> Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($hallLegends as $hallLegend)
                                <tr>
                                    <td>{{$hallLegend->hall_legend_member}}</td>
                                    <td>{{$mapMemberInfo[intval($hallLegend->hall_legend_member)]->member_name}}</td>
                                    <td>{{$mapMemberInfo[intval($hallLegend->hall_legend_member)]->member_level}}</td>
                                    <td>{{$mapMemberInfo[intval($hallLegend->hall_legend_member)]->member_vip_level ?? 0}}</td>
                                    <td>{{$hallLegend->hall_legend_server}}</td>
                                    <td>
                                        <div class="view-block">
                                            <span>{{$hallLegend->hall_legend_damage}}</span>
                                            <br/>
                                            <a href="javascript:void(0)" class="edit-btn">Edit</a>
                                        </div>
                                        <div class="update-block" style="display: none">
                                            <form class="" method="POST"
                                                  action="{{ action('HallLegendController@update', sprintf('%d_%d', $hallLegend->hall_legend_member, $hallLegend->hall_legend_time)) }}">
                                                <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
                                                <input name="_method" type="hidden" value="POST">
                                                <input name="damage" type="number"
                                                       value="{{$hallLegend->hall_legend_damage}}"/>
                                                <p class="text-danger" style="display: none; margin-bottom: -10px"></p>
                                                <br/>
                                                <a href="javascript:void(0)"
                                                   data-id="{{sprintf('%d_%d', $hallLegend->hall_legend_member, $hallLegend->hall_legend_time)}}"
                                                   class="save-btn">Save</a> |
                                                <a href="javascript:void(0)" class="cancel-btn">Cancel</a>
                                            </form>
                                        </div>
                                    </td>
                                    <td>{{date("Y/m/d H:i", $hallLegend->hall_legend_time)}}</td>
                                    <td>{{$hallLegend->hall_legend_rewarded ?? 0}}</td>
                                    <td><textarea readonly>{{$hallLegend->hall_legend_formation}}</textarea></td>
                                    <td>
                                        {!! Form::open(['action' => ['HallLegendController@destroy', sprintf('%d_%d', $hallLegend->hall_legend_member, $hallLegend->hall_legend_time)],
                                            'method' => 'DELETE',
                                            'data-confirm-message' => trans('labels.confirm_delete'),
                                            'class' => 'inline',
                                            ]) !!}
                                        {{ Form::button('<i class="glyphicon glyphicon-trash"></i> Delete', ['title'=>'Delete','type' => 'submit', 'class' => 'btn btn-danger btn-sm', 'onClick' => 'return window.confirm("Are you sure want to delete?")']) }}
                                        {!! Form::close() !!}
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <div class="pagination-wrapper container-fluid">
                            <div class="row pull-right">
                                @if(isset($hallLegends))
                                    {{ $hallLegends->links() }}
                                @endif
                            </div>
                        </div>
                    </div>

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


@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsonform/deps/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery/jquery.datetimepicker.full.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input#date')
                .attr("autocomplete", "off")
                .datetimepicker({
                    format: 'Y/m/d',
                    dayOfWeekStart: 1,
                    timepicker:false,
                    defaultTime: '00:00'
                    // step: 5,
                    // startDate: '2001/01/01',
                })

            $('.clear-filter-btn').on('click', function () {
                $('input#member_id').val(0)
                $('input#from_damage').val(0)
                $('input#date').val('')
            })

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.edit-btn').on('click', function () {
                $(this).parent('.view-block').hide();
                $(this).parents('td:first').children('.update-block').show();
            })

            $('.cancel-btn').on('click', function () {
                $(this).parents('.update-block:first').hide();
                $(this).parents('td:first').children('.view-block').show();
            })

            $('.save-btn').on('click', function () {
                const saveBtn = $(this);
                const viewBlock = $(this).parents('td:first').children('.view-block');
                const updateBlock = $(this).parents('.update-block:first');
                const textDanger = $(this).parent('form').children('.text-danger');
                let id = saveBtn.data('id');
                let url = "{{action('HallLegendController@update', "0")}}"
                url = url.replace('0', id);
                const damage = saveBtn.parent('form').children('input[name="damage"]').val()

                $.ajax({
                    url: url,
                    type: "PUT",
                    data: {
                        'damage': damage,
                    },
                    dataType: 'json',
                    success: function (response) {
                        viewBlock.children('span').text(damage);
                        viewBlock.show();
                        textDanger.hide();
                        updateBlock.hide();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        textDanger.text(`error: ${errorThrown}`)
                        textDanger.show()
                    }
                });
            })
        })

    </script>
@endsection