@extends('layouts.app')

@section('content')

<div class="col-lg-6 col-lg-offset-3">
    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">Option Value for {{ $attribute->name }}</h3>
        </div>

        <!--Horizontal Form-->
        <!--===================================================-->
        <form class="form-horizontal" action="{{ URL::to('admin/attributes/storeoptionval')}}/{{$attribute->id}}" method="POST" enctype="multipart/form-data" name="attributesForm">
            @csrf
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="name">{{ translate('Value')}}</label>
                    <div class="col-sm-10">
                        <input type="text" placeholder="Please enter option value" id="name" name="name" class="form-control" required>
                        <input type="hidden" name="attributeId" value="{{$attribute->id}}" id="attributeId">
                    </div>
                </div>
            </div>
            <div class="panel-footer text-right">
                <button class="btn btn-purple submitBtn" type="submit">{{ translate('Save')}}</button>
            </div>
        </form>
        <!--===================================================-->
        <!--End Horizontal Form-->



    </div>
</div>


<div class="panel">
    <div class="row">
    <div class="col-sm-12">
        <div class="panel-heading">
         <h3 class="panel-title">{{ translate('Attributes option values')}}</h3>
        </div>
    </div>
</div>
    <div class="panel-body">
        <table class="table table-striped table-bordered demo-dt-basic" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{{ translate('Option Values')}}</th>
                    @if(Auth::user()->user_type == 'admin')
                    <th width="10%">{{ translate('Options')}}</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($optionattributes as $key => $attribute)
                    <tr>
                        <td>{{$key+1}}</td>
                        <td>{{$attribute->attribute_option_value}}</td>
                        @if(Auth::user()->user_type == 'admin')
                        <td>
                            <div class="btn-group dropdown">
                                <button class="btn btn-primary dropdown-toggle dropdown-toggle-icon" data-toggle="dropdown" type="button">
                                    {{ translate('Actions')}} <i class="dropdown-caret"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="{{ URL::to('admin/attributes/editoptionattribute')}}/{{$attribute->attribute_option_value_id }}" >{{ translate('Edit')}}</a></li>
                                    <li>
                                        <a style="cursor: pointer;" onclick="confirm_modal('{{ URL::to('admin/attributes/distroyoptionattribute')}}/{{$attribute->attribute_option_value_id }}');">{{ translate('Delete')}}</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>

    </div>
</div>
<style type="text/css">
  .error {
    color: red;
}
</style>
<script type="text/javascript" src="{{asset('js/jquery.validate.min.js')}}"></script>
<script type="text/javascript">
    jQuery.validator.addMethod("lettersonly", function(value, element) {
      return this.optional(element) || /^[a-zA-Z0-9\s]+$/i.test(value);
    }, "Letters or digits only please");


    jQuery.validator.addMethod("alphanumeric", function(value, element) {
      return this.optional(element) || /^\w+$/i.test(value);
    }, "Letters, numbers or underscores only please");

    $('form[name="attributesForm"]').validate({
      ignore: [],
      debug: false,
      rules: {

        name:{
          required:true,
          //lettersonly: true,
           //alphanumeric: true,
            remote: {
              url: '{{url("admin/attributes/check") }}',
              type: "post",
              data: {"_token": "{{ csrf_token() }}",
              id: $("#attributeId").val()
              },
              dataFilter: function(data) {
                  var json = JSON.parse(data);
                  if (json.msg == "true") {
                      return "\"" + "value already exit in database" + "\"";
                  } else {
                      return 'true';
                  }
              }
          },

        },
      },
      errorPlacement: function(error, element)
        {
          if(element.is(":checkbox"))
          {
              //error.appendTo( element.parents('.errrocontainer'));
              error.insertAfter(element.closest('td'));
          }
          else
          { // This is the default behavior
              error.insertAfter( element );
          }
        },

      messages: {
      },

    submitHandler: function(form) {
      $(".submitBtn").attr("disabled", true);
      form.submit();

    }
  });
</script>
@endsection