@extends('layouts.app')
@section('content')
    <section class="contnet addGroup">
        <div class="container-fluid">
        <form action="javascript:void(0)" method="post" enctype="multipart/form-data" id="save_group" class="search-group-form">
            @csrf
            <div class="row">
                <div class="col-12">
                    <h1 class="page-title">{!!$title!!}</h1>
                        <div class="form-row ">
                            <div class="form-group col-xl-2 col-lg-3 col-md-4 col-12">
                                <input type="text" value="{{(@$grp_name) ? $grp_name : @old('grp_name')}}" class="form-control" name="grp_name" id="grp_name" placeholder="Group Name">
                                <input type="hidden" name="grp_id" value="{{(@$grp_id > 0) ? $grp_id : ''}}" placeholder="" id="grp_id" class="form-control"/>
                            </div>

                                <span class="invalid-feedback" style="display: none;" role="alert">

                                </span>
                        </div>
                    <hr>
                </div>
            </div>
            <!--Start User List Tabel -->
            <!--Start Group Section -->
            <div class="row">
                            </div>
            <!-- Start Form Actions -->
            <div class="col-12 text-right form-action-checkbox">
                <button class="btn btn-light save">SAVE</button>
            </div>
        </form>
        </div>
    </section>
@endsection
@section('script')
    <script>
        // Select all
        $("#ckbCheckAll_0").click(function() {
            $("#ADD .overflow-control-input").prop('checked', $(this).prop('checked'));
        });
        $("#ckbCheckAll_1").click(function() {
            $("#EDIT .overflow-control-input").prop('checked', $(this).prop('checked'));
        });
        $("#ckbCheckAll_2").click(function() {
            $("#DELETE .overflow-control-input").prop('checked', $(this).prop('checked'));
        });
        $("#ckbCheckAll_3").click(function() {
            $("#VIEW .overflow-control-input").prop('checked', $(this).prop('checked'));
        });

        if ($("#save_group").length > 0) {
            $("#save_group").validate({
                rules: {
                    'grp_name': {
                        required: true,
                        maxlength: 50
                    }
                },
                messages: {
                    'grp_name': {
                        required: "Please enter group name",
                        maxlength: "Group name maxlength should be 50 characters long."
                    }

                },
                submitHandler: function(form) {
                    loading();
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '{{$action}}' ,
                        type: "POST",
                        data: $('#save_group').serialize(),
                        success: function( response ) {
                            unLoading();
                            // success message should appear
                            if(response.status){
                                setTimeout(function(){
                                    window.location.href= "{{env('APP_URL')}}" + "groupList";
                                },300);
                            } else {
                                // error should appear
                                $(".invalid-feedback").html("<strong>"+response.msg+"</strong>" );
                                $(".invalid-feedback").show();
                            }
                        }
                    });
                }
            });
        }
    </script>
@endsection