@extends('admin.layout.main')
@section('title', $header['title'])
  
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">

      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-4 mt-2">
            <div class="col-sm-12 align-items-center d-flex breadcrumb-style">
              <h1 class="m-0">@lang('category.addCategory')</h1>
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">@lang('category.dashboard') </a></li>
                <li class="breadcrumb-item"><a href="{{ route('category.index') }}">@lang('category.moduleHeading') </a></li>
                <li class="breadcrumb-item active">@lang('category.add')</li>
              </ol>
            </div><!-- /.col -->

          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <!-- Info boxes -->
          <div class="row">
            <div class="card pb-4 w-100 px-3 py-2">
                <form method="post" action="{{route('category.store')}}" class="form row mb-0 pt-3 validate" id="dataForm" enctype="multipart/form-data">
                @csrf
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                      <input type="text" id="name" class="is-valid" name="name" autocomplete="off" value="" required>
                        <label for="name">@lang('category.categoryName') <span class="req-star">*</span></label>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-item form-float-style">
                        <input type="file" id="image" name="image" class="file-upload" autocomplete="off" required>
                        <label for="file">@lang('category.uploadCategoryImage') <span class="req-star">*</span></label>
                        <span style="font-size: 10px; color: #121010; font-style: italic;">Only Upload JPEG, PNG or JPG Format and image size must be max 2MB.</span>
                  </div>
                  
                
                </div>
                
                <div class="col-md-6">
                    <div class="form-item form-float-style serach-rem">
                        <div class="select top-space-rem after-drp form-item form-float-style ">
                            <select data-live-search="true" id="is_parent" class="selectpicker select-text height_drp is-valid" name="is_parent">
                                <option value="1" selected>Parent</option>
                                <option value="0">Child</option>
                            </select>
                            <label class="select-label searchable-drp">Select Category Type <span class="req-star">*</span></label>
                        </div>                        
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-item form-float-style">
                        <input type="number" id="sort_order" class="is-valid" name="sort_order" autocomplete="off" required value="0">
                        <label for="sort_order">@lang('category.sortOrder') <span class="req-star">*</span></label>
                    </div>
                </div>
                
                  <!-- <div class="form-item"> -->
                  <div class="col-md-12 form-floating" id="parent_category_div">
                    <div class="select top-space-rem after-drp form-item form-float-style ">
                        <!--<select id="mySelect" class="select2 form-control" style="width:400px;"></select>-->
                        <select data-live-search="true" id="SelExample" class="selectpicker width-set-serc select-text height_drp is-valid" name="parent_id">
                             <option value="">Select Parent</option> 
                            
                            @foreach($parentCategories as $category)

                                                           
                                <option class="level_0" value="{{$category['id']}}"> @if($category['parent_category_name'] != "") {{$category['parent_category_name']}} >> @endif {{$category['name']}} </option>
                                
                                @if(!empty($category['child_category']))
                                
                                    @foreach($category['child_category'] as $childCategory)
                                    
                                        @if($childCategory['is_parent']==1)
                                            
                                        <option style="display: none;"  class="level_1 select2-results__option" value="{{ @$childCategory['id'] }}"><span>{{ucwords(@$childCategory['name'])}}</span></option>
                                            
                                        @endif
                                       
                                    @endforeach                     
                                    
                                @endif
                            @endforeach
                         

                        </select>
                      <label class="select-label searchable-drp">@lang('category.selectParentCategory')</label>
                    </div>
                  </div>
                  <!-- </div> -->
                
                
                <!-- Content Wrapper. Contains page content -->
                <div class="editable mb-4">
                    <label for="">@lang('category.categoryDescription')</label>
                    <textarea name="description"></textarea>
                </div>

                <div class="">
                  <div class="col-md-12 row p-0">
                    <div class="col-md-6">
                      <!-- <div class="form-item"> -->
                      <div class="form-item form-float-style serach-rem">
                        <div class="select top-space-rem after-drp form-float-style ">
                            <select data-live-search="true" id="SelExample" name="status" class="selectpicker select-text height_drp is-valid" required>
                              <option value="1" selected>@lang('category.active')</option>
                                <option value="0">@lang('category.inActive')</option>
                            </select>
                          <label  class="select-label searchable-drp">@lang('category.status')</label>

                        </div>                        
                      </div>
                      <!-- </div> -->
                    </div>
                  </div>
                </div>

               
                <div class="discount mb-0">
                  <h3 class="mb-3">@lang('category.seoMetaTags')</h3>
                  <div class="col-md-12 row p-0">
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                        
                          <input type="text" id="meta_title" name="meta_title" class="is-valid" autocomplete="off" value="">
                        <label for="meta_title">@lang('category.metaTitle')</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" id="slug_url" name="slug_url" class="is-valid" autocomplete="off" value="">
                        <label for="slug_url">Slug URL</label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-12 row p-0">
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <textarea type="text" id="meta_description" name="meta_description" class="is-valid" autocomplete="off" value=""></textarea>
                        <label for="meta_description">@lang('category.metaDescription')</label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-item form-float-style">
                          <input type="text" id="keywords" name="keywords" class="is-valid" autocomplete="off" value="">
                        <label for="keywords">@lang('category.keywords')</label>
                      </div>
                    </div>
                  </div>

                </div>

                <div class="cards-btn">
                  <button type="submit" id="disBtn" class="btn btn-success form-btn-success">@lang('category.submit')</button>
                  <a href="{{ route('category.index') }}" type="button" class="btn btn-danger form-btn-danger">@lang('category.cancel')</a>
                </div>

              </form>



            </div>
            <!-- /.row -->
          </div>
          <!--/. container-fluid -->
      </section>
@endsection
@section('js')
  <script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>
  <!-- Page specific script -->
  <script>
    
    CKEDITOR.replace('description');
    CKEDITOR.on('instanceReady', function (evt) {
      var editor = evt.editor;

      editor.on('change', function (e) {
        var contentSpace = editor.ui.space('contents');
        var ckeditorFrameCollection = contentSpace.$.getElementsByTagName('iframe');
        var ckeditorFrame = ckeditorFrameCollection[0];
        var innerDoc = ckeditorFrame.contentDocument;
        var innerDocTextAreaHeight = $(innerDoc.body).height();
        console.log(innerDocTextAreaHeight);
      });
    });
    
    $("#category_discount_div").hide();
    
    $("#is_parent").change(function(e){
        if(e.target.value == 0){            
            $("#category_discount_div").show();
        }else{            
            $("#category_discount_div").hide();
        }
    });
    
    jQuery.validator.addMethod("lettersonly", function (value, element) {
      return this.optional(element) || /^[a-z ]+$/i.test(value);
    }, "Letters only please");
    
    //dealer
    $.validator.addMethod('dealerMinStrict', function (value, el, param) {
        if($("#dealer_max_val").val() != "" && value != ""){
            var maxVal = parseInt($("#dealer_max_val").val());
            return value < maxVal;
        }else{
            return true;
        }
    },'value should minimum value than maximum value');    
    $.validator.addMethod('dealerMaxStrict', function (value, el, param) {
        if($("#dealer_min_val").val() != "" && value != ""){
            var minVal = parseInt($("#dealer_min_val").val());
            return value > minVal;
        }else{
            return true;
        }
    },'value should maximum value than minimum value');
    
    //exclusive dealer
    $.validator.addMethod('exDealerMinStrict', function (value, el, param) {
        if($("#ex_dealer_max_val").val() != "" && value != ""){
            var maxVal = parseInt($("#ex_dealer_max_val").val());
            return value < maxVal;
        }else{
            return true;
        }
    },'value should minimum value than maximum value');    
    $.validator.addMethod('exDealerMaxStrict', function (value, el, param) {
        if($("#ex_dealer_min_val").val() != "" && value != ""){
            var minVal = parseInt($("#ex_dealer_min_val").val());
            return value > minVal;
        }else{
            return true;
        }
    },'value should maximum value than minimum value');
    
    //channel partner
    $.validator.addMethod('channelPartnerMinStrict', function (value, el, param) {
        if($("#channel_partner_max_val").val() != "" && value != ""){
            var maxVal = parseInt($("#channel_partner_max_val").val());
            return value < maxVal;
        }else{
            return true;
        }
    },'value should minimum value than maximum value');    
    $.validator.addMethod('channelPartnerMaxStrict', function (value, el, param) {
        if($("#channel_partner_min_val").val() != "" && value != ""){
            var minVal = parseInt($("#channel_partner_min_val").val());
            return value > minVal;
        }else{
            return true;
        }
    },'value should maximum value than minimum value');
    
    //channel partner
    $.validator.addMethod('distributorMinStrict', function (value, el, param) {
        if($("#dist_max_val").val() != "" && value != ""){
            var maxVal = parseInt($("#dist_max_val").val());
            return value < maxVal;
        }else{
            return true;
        }
    },'value should minimum value than maximum value');    
    $.validator.addMethod('distributorMaxStrict', function (value, el, param) {
        if($("#dist_min_val").val() != "" && value != ""){
            var minVal = parseInt($("#dist_min_val").val());
            return value > minVal;
        }else{
            return true;
        }
    },'value should maximum value than minimum value');
    
    $(function () {
      //jquery Form validation
      $('*[value=""]').removeClass('is-valid');
      $('#dataForm').validate({
        rules: {
          name: {
            required: true,
            //lettersonly: true,
            remote: {
                url: "{{route('admin.category.checkExist')}}",
                type: "post",
                data: {
                  name: function() {
                    return $("#name").val();
                  },
                  "_token": '{{ csrf_token() }}'
                }
              }
          },
          parent_id:{
              required: function(element){
                  return $("#is_parent").find(":selected").val()=="0";
              }
          },
          sort_order: {
            required: true,
            digits: true
          },
          image: {
            required: true,
            extension: "jpg|jpeg|png",
            maxsize: 2000000
          },
          dealer_min_val:{
                required: function(element){
                    return $("#dealer_min_disc").val()!="" || $("#dealer_max_val").val()!="" || $("#dealer_max_disc").val()!="";
                },
                dealerMinStrict: true
          },
          dealer_min_disc:{
                required: function(element){
                    return $("#dealer_min_val").val()!="" || $("#dealer_max_val").val()!="" || $("#dealer_max_disc").val()!="";
                }
          },
          dealer_max_val:{
                required: function(element){
                    return $("#dealer_min_val").val()!="" || $("#dealer_min_disc").val()!="" || $("#dealer_max_disc").val()!="";
                },
                dealerMaxStrict: true
          },
          dealer_max_disc:{
              required: function(element){
                    return $("#dealer_min_val").val()!="" || $("#dealer_min_disc").val()!="" || $("#dealer_max_val").val()!="";
                }
          },
          ex_dealer_min_val:{
                required: function(element){
                    return $("#ex_dealer_min_disc").val()!="" || $("#ex_dealer_max_val").val()!="" || $("#ex_dealer_max_disc").val()!="";
                },
                exDealerMinStrict: true
          },
          ex_dealer_min_disc:{
                required: function(element){
                    return $("#ex_dealer_min_val").val()!="" || $("#ex_dealer_max_val").val()!="" || $("#ex_dealer_max_disc").val()!="";
                }
          },
          ex_dealer_max_val:{
                required: function(element){
                    return $("#ex_dealer_min_val").val()!="" || $("#ex_dealer_min_disc").val()!="" || $("#ex_dealer_max_disc").val()!="";
                },
                exDealerMaxStrict: true
          },
          ex_dealer_max_disc:{
              required: function(element){
                    return $("#ex_dealer_min_val").val()!="" || $("#ex_dealer_min_disc").val()!="" || $("#ex_dealer_max_val").val()!="";
                }
          },
          channel_partner_min_val:{
                required: function(element){
                    return $("#channel_partner_min_disc").val()!="" || $("#channel_partner_max_val").val()!="" || $("#channel_partner_max_disc").val()!="";
                },
                channelPartnerMinStrict: true
          },
          channel_partner_min_disc:{
                required: function(element){
                    return $("#channel_partner_min_val").val()!="" || $("#channel_partner_max_val").val()!="" || $("#channel_partner_max_disc").val()!="";
                }
          },
          channel_partner_max_val:{
                required: function(element){
                    return $("#channel_partner_min_val").val()!="" || $("#channel_partner_min_disc").val()!="" || $("#channel_partner_max_disc").val()!="";
                },
                channelPartnerMaxStrict: true
          },
          channel_partner_max_disc:{
              required: function(element){
                    return $("#channel_partner_min_val").val()!="" || $("#channel_partner_min_disc").val()!="" || $("#channel_partner_max_val").val()!="";
                }
          },
          dist_min_val:{
                required: function(element){
                    return $("#dist_min_disc").val()!="" || $("#dist_max_val").val()!="" || $("#dist_max_disc").val()!="";
                },
                distributorMinStrict: true
          },
          dist_min_disc:{
                required: function(element){
                    return $("#dist_min_val").val()!="" || $("#dist_max_val").val()!="" || $("#dist_max_disc").val()!="";
                }
          },
          dist_max_val:{
                required: function(element){
                    return $("#dist_min_val").val()!="" || $("#dist_min_disc").val()!="" || $("#dist_max_disc").val()!="";
                },
                distributorMaxStrict: true
          },
          dist_max_disc:{
              required: function(element){
                    return $("#dist_min_val").val()!="" || $("#dist_min_disc").val()!="" || $("#dist_max_val").val()!="";
                }
          },
        },


        messages: {
          name: {
                required: "Please enter a Category Name",
                remote: "Category Name is already taken"
          },
          parent_id: {
            required: "Please select Parent Category"  
          },
          sort_order: {
                required: "Please enter a Sort Order"
          },
          image: {
                required: "Please Upload Category Image",
                extension: "Please select image format must be .jpg, .jpeg or .png",
                maxsize: "Please upload image size less than 2MB"
          },
          status: {
                required: "Please select Status"
          },
          "dealer_min_val": {
                required: "Please enter minimum value"
          },
          "dealer_min_disc": {
                required: "Please enter minimum discount value"
          },
          dealer_max_val: {
              required: "Please enter maximum value"
          },
          dealer_max_disc: {
              required: "Please enter maximum discount value"
          },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-item').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) { 
              $("#disBtn").attr("disabled", true);
              form.submit();
        }
      });
    });    
  </script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

  @append