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

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

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

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

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

  <a href="{{url('admin/businesscategory')}}" 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') }} {{ __('Business Category') }}</h5>
        </div>
        <div class="card-body">
          <form id="bcatform" method="post" enctype="multipart/form-data" action="{{url('admin/businesscategory')}}"
           >
            {{csrf_field()}}
            <div class="form-group">
              <label class="control-label" for="first-name">
                Business Category: <span class="required">*</span>
              </label>

             
                <input placeholder="Please enter Business 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"  required>
                  <label class="custom-file-label">
                                            {{__("Upload Image")}}
                                        </label>
                                                        @if ($errors->has('image'))
                <span class="invalid-feedback position-absolute d-inline-block" role="alert">
                  <strong>{{ $errors->first('image') }}</strong>
                </span>
                @endif
              
                </div>
                
 <small class="text-info"> <i class="text-dark feather icon-help-circle"></i>(Please Choose BusinessCategory
                  image)</small>


            </div>

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

                
                <div class="input-group">
                  <input type="file" class="custom-catimg-input" name="banner_image" id="banner_image" aria-describedby="inputGroupFileAddon01"  required>
                  <label class="custom-file-label">
                                            {{__("Upload Banner Image")}}
                                        </label>
                                                        @if ($errors->has('banner_image'))
                <span class="invalid-feedback position-absolute d-inline-block" role="alert">
                  <strong>{{ $errors->first('banner_image') }}</strong>
                </span>
                @endif
              
                </div>
                
 <small class="text-info"> <i class="text-dark feather icon-help-circle"></i>(Please Choose BusinessCategory
                 banner image)</small>


            </div>


             <!-- <div class="col-md-4"> -->
                            <div class="form-group">
                                <label class="text-dark">{{ __("Business Artwork Gallery : ") }}<span class="text-danger">*</span></label>
                                
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                                    </div>
                                    <div class="custom-file">
                                        <input multiple type="file" class="custom-file-input" name="gallery_images[]" id="upload_gallery"  >
                                        <label class="custom-file-label">
                                            {{__("Multiple images can be selected")}}
                                        </label>
                                    </div>
                                </div>
                                 <small class="text-muted">
               <i class="fa fa-question-circle"></i> {{__("Multiple images can be choosen")}}
                <br>
                <i class="fa fa-question-circle"></i>  {{ __('staticwords.MaxFileSize') }} : {{__("2 MB")}}
              </small>
                                
                                <!-- <small class="text-muted">
                                    <i class="fa fa-question-circle"></i> {{__("Multiple images can be choosen")}}
                                     <i class="fa fa-question-circle"></i> {{__("Max file size is 50 MB")}}
                                </small> -->
                                <div id="id-error">
              <label id="upload_gallery-error" class="error" for="upload_gallery"></label>
</div>  
                            </div>
                      <!--   </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>
   $('#bcatform').validate({
        // errorClass: "error",
        //     errorElement: 'label',

        ignore: [],
        rules: {
            title: {
                required: true
            },
           
            image: {
                required: true,
                extension: "jpeg|jpg|png|webp|gif|bmp",
                //filesize:true  
                              
            },
            banner_image: {
                required: true,
                extension: "jpeg|jpg|png|webp|gif|bmp",
                //filesize:true  
                              
            },
            "gallery_images[]": {
                required: true,
                extension: "jpeg|jpg|png|webp|gif|bmp",  
               // filesize:true                
            }
        },
        messages: {
            title: {
                required: "Please enter the business category name"
            },
           
            image: {
                required: "Please upload business category image",
                extension: "Only file type jpeg,jpg,png,webp,gif,bmp is allowed",
                filesize: "Upload file size must be greater than 200KB." 
                
                              
            },
            banner_image: {
                required: "Please upload business category banner image",
                extension: "Only file type jpeg,jpg,png,webp,gif,bmp is allowed",
                filesize: "Upload file size must be greater than 200KB." 
                
                              
            },
            "gallery_images[]": {
                required: "Please upload artwork business images",
                extension: "Only file type jpeg,jpg,png,webp,gif,bmp is allowed",  
                filesize: "Upload file size must be less than 2MB"              
            }
        },
        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 if(element.id=='banner_image')
                var limit=1048576; //mb
                else
                var limit=300000;
              // 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