@extends('admin.layouts.master-soyuz')
@section('title','Create a Category')
@section('body')

@component('admin.component.breadcumb',['thirdactive' => 'active'])

@slot('heading')
{{ __('Home') }}
@endslot

@slot('menu1')
{{ __("Category") }}
@endslot

@slot('menu2')
{{ __("Category") }}
@endslot
@slot('button')
<div class="col-md-6">
  <div class="widgetbar">

  <a href="{{url('admin/category')}}" class="btn btn-primary-rgba mr-2"><i
      class="feather icon-arrow-left mr-2"></i>Back</a>
</div>
</div>
@endslot
@endcomponent
<style>
  .custom-catimg-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;

}
</style>
<div class="contentbar">
  <div class="row">
    @if ($errors->any())
    <div class="alert alert-danger" role="alert">
      @foreach($errors->all() as $error)
      <p>{{ $error}}<button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true" style="color:red;">&times;</span></button></p>
      @endforeach
    </div>
    @endif
    <div class="col-lg-12">
      <div class="card m-b-30">
        <div class="card-header">
          <h5 class="box-title">{{ __('Add') }} {{ __('Category') }}</h5>
        </div>
        <div class="card-body">
          <form id="catform" method="post" enctype="multipart/form-data" action="{{url('admin/category')}}"
           >
            {{csrf_field()}}
            <div class="form-group">
              <label class="control-label" for="first-name">
                Category: <span class="required">*</span>
              </label>

             
                <input placeholder="Please enter Category name" type="text" required id="first-name" name="title"
                  class="form-control col-md-12" value="{{old('title')}}">

             

            </div>
            <div class="form-group">
              <label class="control-label" for="first-name"> Description <span class="required"></span>
              </label>
             
                <textarea cols="2" id="editor1" name="description" rows="5">
                      {{old('description')}}
                     </textarea>
                <small class="text-info"> <i class="text-dark feather icon-help-circle"></i>(Please Enter
                  Description)</small>

              
            </div>

            <div class="form-group">
              <label class="control-label" for="first-name">
                Icon:
              </label>
          

                <!--========================================================================-->
                <div class="input-group">
                  <input type="text" class="form-control iconvalue" name="icon" value="Choose icon">
                  <span class="input-group-append">
                    <button type="button" class="btnicon btn btn-outline-secondary" role="iconpicker"></button>
                  </span>
                </div>
                <!--========================================================================-->



            </div>
            
            <div class="form-group">
              <label class="control-label" for="first-name">
                Image:
              </label>
          

                
                <div class="input-group">
                  <input type="file" class="custom-catimg-input" name="image" id="image" aria-describedby="inputGroupFileAddon01">
                  <label class="custom-file-label">
                                            {{__("Upload Image")}}
                                        </label>
              
                </div>
                
 <small class="text-info"> <i class="text-dark feather icon-help-circle"></i>(Please Choose Category
                  image)<br>
                                 <i class="text-dark feather icon-help-circle"></i>  {{ __('Max file size:') }} : {{__("200 kb")}}
                               </small>


            </div>
              




                       



          
            
            <div class="form-group">
              <label class="control-label" for="first-name">
                Status: <span class="required">*</span>
              </label>
             <br>
                <label class="switch">
                  <input class="slider tgl tgl-skewed" type="checkbox" id="status" checked="checked">
                  <span class="knob"></span>
                </label>
                <br>
                <input type="hidden" name="status" value="1" id="status3">
                <small class="text-info"> <i class="text-dark feather icon-help-circle"></i>(Please Choose
                  Status)

               </small>

              </div>
          
            <!-- /.box-body -->

            <div class="form-group">
              <button type="reset" class="btn btn-danger"><i class="fa fa-ban"></i>
                Reset</button>
              <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i>
                Create</button>
            </div>

            <div class="clear-both"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('custom-script')

<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script>
   $('#catform').validate({
        // errorClass: "error",
        //     errorElement: 'label',

        ignore: [],
        rules: {
            title: {
                required: true
            },
           
            image: {
                required: true,
                extension: "jpeg|jpg|png|webp|gif|bmp",
                              
            }
        },
        messages: {
            title: {
                required: "Please enter the category name"
            },
           
            image: {
                required: "Please upload category image",
                extension: "Only file type jpeg,jpg,png,webp,gif,bmp is allowed", 
                //filesize: "Upload file size must be less than 200KB."
                
                              
            }
        },
        errorPlacement: function(error, element) {
            console.log(element);
            error.insertAfter(element);
        }
    });
    /* jQuery.validator.addMethod("filesize", function(value, element){
               // var fp = $("#file");
               var fp= $('#'+element.id);
               //if(element.id=='upload_gallery')
              // var limit=2097152;
                //else
                var limit=200000;
              // alert(element.id);
               console.log(element);
              // var files    =   $('#'+elem.id)[0].files;
                var lg = fp[0].files.length; // get length
               
                var items = fp[0].files;
                var fileSize = 0;
           
           if (lg > 0) {
                for (var i = 0; i < lg; i++) {
                    fileSize = fileSize+items[i].size; // get file size
                }
                
               // alert(fileSize);
               if(fileSize > limit) {
                   return false;
                }else{
                    return true;
                }
            }
}, "Upload file size must be less than 2 MB.");*/

   
    
  </script>
  @endsection