@extends('template.app')

@section('meta')
@endsection

@section('title')
    Role Insert
@endsection

@section('styles')
<style>
    .col-sm-3{
        font-size: 15px;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Roles</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('role') }}" class="text-muted">Roles</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Insert</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('role.insert') }}" name="form" id="form" method="post">
                        @csrf
                        @method('POST')

                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label for="name">Name</label>
                                <input type="text" name="name" id="name" class="form-control" placeholder="Plese enter name" value="{{ @old('name') }}">
                                <span class="kt-form__help error name"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="r_data">Data</label>
                                 <select class="form-control" name="r_data" id="r_data">
                                    <option value="" selected disabled>Select Any One</option>
                                    <option value="ONLY_MY_DATA">Only My Data</option>
                                    <option value="ALL_DATA">All Data</option>
                                    <option value="MY_TEAM_DATA">My Team Data</option>
                                </select>
                                <span class="kt-form__help error r_data"></span>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="addto-search">
                                    <label>Search</label>
                                    <div class="form-input">
                                        <input class="keyword form-control" type="text" placeholder="Search Permissions">
                                    </div>
                                </div>                                
                            </div>
                            <div class="form-group col-md-3">
                                <label for="from_amt">Due From Amount</label>
                                <input type="text" name="from_amt" class="form-control from_amt" placeholder="Plese Enter Due From Amount" value="{{ @old('from_amt') }}">
                            </div>
                            <div class="form-group col-md-3">
                                <label for="from_amt">Due To Amount</label>
                                <input type="text" name="to_amt" class="form-control to_amt" placeholder="Plese Enter Due To Amount" value="{{ @old('to_amt') }}">
                            </div>
                            <div class="form-group col-md-3"></div>
                            <div class="form-group">
                                <input type="checkbox" class="checkboxClass mr-1" id="ckbCheckAll" value=""><span></span><b>Select All Permissions :</b>
                                <div class="form-group">
                                    
                                    <div class="row">
                                        @foreach($permissions as $value)
                                            <div class="col-sm-3">
                                                <label class="ui-checkbox ui-checkbox-success mt-2 label_get" for="checkbox-{{ $value->id }}">
                                                    <input type="checkbox" class="checkboxClass" name="permissions[]" id="checkbox-{{ $value->id }}" value="{{ $value->id }}">
                                                    <span class="input-span"></span>{{ $value->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <span class="kt-form__help error permissions"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('role') }}" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('.from_amt, .to_amt').on('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '');
            });
        
            $('.from_amt, .to_amt').on('keypress', function (e) {
                // Allow: backspace, delete, tab, escape, enter, ., and numbers
                if ((e.which !== 46 || $(this).val().indexOf('.') !== -1) && // only one dot
                    (e.which < 48 || e.which > 57)) { // not a digit
                    e.preventDefault();
                }
            });
            
            var form = $('#form');
            $('.kt-form__help').html('');
            form.submit(function(e) {
                $('.help-block').html('');
                $('.m-form__help').html('');
                $.ajax({
                    url : form.attr('action'),
                    type : form.attr('method'),
                    data: new FormData($(this)[0]),
                    dataType: 'json',
                    async: false,
                    processData: false,
                    contentType: false,
                    success : function(json){
                        return true;
                    },
                    error: function(json){
                        if(json.status === 422) {
                            e.preventDefault();
                            var errors_ = json.responseJSON;
                            $('.kt-form__help').html('');
                            $.each(errors_.errors, function (key, value) {
                                $('.'+key).html(value);
                            });
                        }
                    }
                });
            });
        });


        $("#ckbCheckAll").on('click',function () {
            if(this.checked){
            $('.checkboxClass').each(function(){
                // $(".checkboxClass").prop('checked', true);
                var hidden_chk =  $(this).is(":hidden");
                /*console.log('ccc--');
                console.log(hidden_chk);*/
                if(hidden_chk == false){

                    if(this.checked == false){
                        $(this).prop('checked', true);    
                    }
                    // console.log('ccc--8');                        
                }                    
                // $(".checkboxClass").prop('checked', true);
            })
        }else{
            $('.checkboxClass').each(function(){
                $(".checkboxClass").prop('checked', false);
            })
        }
        });

        (function($){
          $(".keyword").on('keyup', function(e) {
            var $this = $(this);
            var exp = new RegExp($this.val(), 'i');

            console.log($this.val());
            if($this.val() == ''){
                $("#ckbCheckAll").prop('checked', false);
            }

            
            $(".user_row_data .label_get").each(function() {
              var $self = $(this);
              /*console.log('----');
              console.log($self);
              console.log($self.text());*/

              if(!exp.test($self.text())) {
                // console.log('----hide');
                // console.log($self);
                $self.parent().hide();
              } else {
                // console.log('----showw');
                $self.parent().show();
              }
            });
          });
        })(jQuery);

    </script>
@endsection