@extends("Admin.template" ,["table"=>true])
@section("content")
    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">  اضف لعبه </h5>
            </div>

            <div class="card-body">
                <form action="#" class="form1" id="form1">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>اسم اللوعبه
                                (game_key)
                                </label>
                                <input type="text" class="form-control" placeholder="" name="game_key"
                                       data-msg="{{__('messages.enter')}} {{__('messages.name')}}"
                                       required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>
                                    (hcm_client_id)
                                </label>
                                <input type="text" class="form-control" placeholder="" name="hcm_client_id">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>
                                    (hcm_client_secret)
                                </label>
                                <input type="text" class="form-control" placeholder="" name="hcm_client_secret">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>
                                    (fcm_server_key)
                                </label>
                                <input type="text" class="form-control" placeholder="" name="fcm_server_key">
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-danger alert-styled-left alert-dismissible" style="display: none">
                        <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                        <span class="font-weight-semibold">{{__('messages.error')}}</span>
                        <error></error>
                    </div>
                    <button type="submit" class="btn bg-teal-400">{{__('messages.save')}}<i class="icon-floppy-disk ml-2"></i> </button>
                </form>
            </div>
        </div>
    </div>
    <!-- /content area -->
@endsection
@section('scripts')
    <script>
        $('input[type=file]').bind('change', function () {
            $(this).parent().parent().find('img').attr('src', window.URL.createObjectURL(this.files[0]));
        });
        $('.form1').validate({
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            submitHandler: function (form) {
                $('body').block({
                    message: '<i class="icon-spinner4 spinner"></i>',
                    overlayCSS: {backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait'},
                    css: {border: 0, color: '#fff', padding: 0, zIndex: 1201, backgroundColor: 'transparent'}
                });
                var form_data = new FormData(document.forms["form1"]);
                $.ajax({
                    url: "{{route('game-settings.store')}}",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    method: "POST",
                    success: function (result) {
                        console.log(result);
                        $('body').unblock();
                        if (result.error_code == 0) {
                            location.href = '{{route('game-settings.index')}}';
                        } else {
                            $('error').text(result.error_msg);
                            $('.alert-danger').css('display', 'block');
                        }
                        setTimeout(function () {
                            $('.alert-danger').css('display', 'none');
                        }, 3000)
                    }
                });
                return false;
            }
        });

        $('.colorpicker-show-input').spectrum({
            showInput: true
        });

        function myFunction() {
            // 宣告變數
            var input, filter, ul, li, la, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase(); //值轉大寫，因為js分大小寫，所以將資料一律轉大寫，用意在於檢核資料不分大小寫，所以改成轉小寫也行
            ul = document.getElementById("myUL");
            li = ul.getElementsByTagName("li");

            // 用for迴圈跑完結果
            for (i = 0; i < li.length; i++) {  //資料從第一筆(index=0)開始，檢查li的資料筆數是否小於i, 是:i+1 否:停止迴圈
                la = li[i].getElementsByTagName("label")[0]; // 宣告la，以檢視label 的內容
                txtValue = la.textContent || la.innerText;  // || 或的意思， innerText 是IE8之前的專用屬性，如果只用在新瀏覽器可以不用
                if (txtValue.toUpperCase().indexOf(filter) > -1) {  //如果 txtValue 的文字內容在 filter 沒有出現，會傳-1這個值。，用來做比對。
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }

    </script>
@endsection