@extends('layouts.app')
@section('title') Level {{$level->title}} @endsection


@section('css')
    <link href="{{asset('assets/css/color-picker.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')
    <!-- begin:: Content Head -->
    <div class="kt-subheader   kt-grid__item" id="kt_subheader">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                Edit Level {{$level->name}}
            </h3>
            <span class="kt-subheader__separator kt-subheader__separator--v"></span>
            <div class="kt-subheader__group" id="kt_subheader_search">
									<span class="kt-subheader__desc" id="kt_subheader_total">
										 Level {{$level->name}} </span>
            </div>
        </div>

    </div>

    <!-- end:: Content Head -->

    <!-- begin:: Content -->
    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">
        <div class="kt-portlet kt-portlet--tabs">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-toolbar">
                    <ul class="nav nav-tabs nav-tabs-space-xl nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-brand"
                        role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#kt_apps_user_edit_tab_1" role="tab">
                                <i class="flaticon2-cup"></i> Level {{$level->name}} Details
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="error-alert" style="display:none"></div>
                <form method="post" enctype="multipart/form-data" id="user_form">
                    {{csrf_field()}}
                    <input type="hidden" name="id" value="{{$level->id}}">
                    <div class="tab-content">
                        <div class="tab-pane active" id="kt_apps_user_edit_tab_1" role="tabpanel">
                            <div class="kt-form kt-form--label-right">
                                <div class="kt-form__body">
                                    <div class="kt-section kt-section--first">
                                        <div class="kt-section__body">
                                            <div class="row">
                                                <label class="col-xl-3"></label>
                                                <div class="col-lg-9 col-xl-6">
                                                    <h3 class="kt-section__title kt-section__title-sm">Level
                                                        Info:</h3>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="title"
                                                       class="col-xl-3 col-lg-3 col-form-label">Title</label>
                                                <div class="col-lg-6 col-xl-6">
                                                    <input type="text" name="title" id="title"
                                                           value="{{$level->title}}" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="multiplier"
                                                       class="col-xl-3 col-lg-3 col-form-label">Multiplier</label>

                                                <div class="col-lg-6 col-xl-6">
                                                    <input type="text" name="multiplier" id="multiplier"
                                                           value="{{$level->multiplier}}" class="form-control">
                                                </div>
                                            </div>


                                            <div class="form-group row">
                                                <label for="spending"
                                                       class="col-xl-3 col-lg-3 col-form-label">Spending in JD</label>

                                                <div class="col-lg-6 col-xl-6">
                                                    <input type="text" name="spending" id="spending"
                                                           value="{{$level->spending}}" class="form-control">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="image"
                                                       class="col-xl-3 col-lg-3 col-form-label">Image:</label>
                                                <div class="col-lg-6 col-xl-6">
                                                    <input type="file" name="image" id="image" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-xl-3 col-lg-3 col-form-label"></label>
                                                <div class="col-lg-6 col-xl-6">
                                                    <button type="button" class="btn red-btn btn-bold btn-update">
                                                        Save Changes
                                                    </button>
                                                    <div class="loadingMask">
                                                        <img src="{{asset('assets/images/loader.gif')}}" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- end:: Content -->



@endsection
@section('js')
    <script src="{{asset('assets/js/demo1/pages/crud/forms/widgets/bootstrap-datepicker.js')}}"
            type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            var update_level = function () {
                $('.btn-update').on("click", function () {
                    $(".loadingMask").css('display', 'inline-block');

                    $(".loadingMask").css('display', 'inline-block');

                    $.ajax({
                        method: "post",
                        beforeSend: function () {
                            $(".loadingMask").css('display', 'inline-block');
                        },
                        url: "{{route('levels.update')}}",

                        data:
                            new FormData($("#user_form")[0])
                        ,
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').val()
                        },
                        async: true,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            //  wait.resolve();
                            $(".loadingMask").css('display', 'none');
                            if (data.errors) {
                                $('.error-alert p').remove();
                                $('.error-alert').show();
                                // swal("Errors!", "Please Enter all required field!", "error");
                                jQuery.each(data.errors, function (key, value) {

                                    $('.error-alert').append('<p>' + value + '</p>');
                                    $("body, html").animate({scrollTop: 0}, 600);

                                });
                            } else {
                                $('.error-alert p').remove();
                                $('.error-alert').hide();
                                swal.fire({
                                    type: 'success',
                                    title: 'Updated successfully',
                                    confirmButtonText: 'Ok!',
                                });
                            }
                        },
                        error: function () {
                            $(".loadingMask").css('display', 'none');
                            alert("Error, Please try again");
                        }
                    });


                });
            };
            update_level();


        });


    </script>
@endsection