@extends('admin.layout.master')

@section('content')

<style>
      /* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 10px;
}

#message p {
    padding: 0px 10px;
    font-size: 14px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}
.tooltip-inner {
    background-color: #03458f !important; /* Example: Bootstrap primary color */
    color: #fff; /* Text color */
    font-size: 14px;
}
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Create Search Setting</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Create Search Setting</li>
                </ol>
            </div>
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row">

            <div class="col-md-12">

                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Create Search Setting</h3>
                    </div>

                    <form id="elasticSearchSettingsAddForm" action="{{ route('admin.search-settings-save') }}" method="post">
                       @csrf
                        <div class="card-body">

                            <div class="row">

                                <div class="col-12">
                                    <div class="card p-2">
                                        <div class="form-group p-2">
                                            <label for="name">Name</label>
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name" autocomplete="off">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">SKU</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results based on SKU matches. Applies strict matching to prioritize exact or highly relevant SKU values in search results."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group p-2">
                                            <label for="sku_boost_score">Boost Score</label>
                                            <input type="text" class="form-control" name="sku_boost_score" id="sku_boost_score" placeholder="Enter Boost Score" autocomplete="off">
                                        </div>
                                    </div>
                                </div>



                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Product Name</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the Product Name. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="product_name_boost_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="product_name_boost_score" id="product_name_boost_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_name_fuzziness" value="1" id="product_name_fuzziness"
                                                            class="custom-control-input product_name_fuzziness">
                                                        <label class="custom-control-label" for="product_name_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_name_status" value="1" id="product_name_status"
                                                            class="custom-control-input product_name_status">
                                                        <label class="custom-control-label" for="product_name_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Product Name Cleaned</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the Product Name Cleaned. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="product_name_cleaned_boost_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="product_name_cleaned_boost_score" id="product_name_cleaned_boost_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_name_cleaned_fuzziness" value="1" id="product_name_cleaned_fuzziness"
                                                            class="custom-control-input product_name_cleaned_fuzziness">
                                                        <label class="custom-control-label" for="product_name_cleaned_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_name_cleaned_status" value="1" id="product_name_cleaned_status"
                                                            class="custom-control-input product_name_cleaned_status">
                                                        <label class="custom-control-label" for="product_name_cleaned_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">ProductCode</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the ProductCode. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="product_code_boost_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="product_code_boost_score" id="product_code_boost_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_code_fuzziness" value="1" id="product_code_fuzziness"
                                                            class="custom-control-input product_code_fuzziness">
                                                        <label class="custom-control-label" for="product_code_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="product_code_status" value="1" id="product_code_status"
                                                            class="custom-control-input product_code_status">
                                                        <label class="custom-control-label" for="product_code_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Parent</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the Parent. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="parent_boost_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="parent_boost_score" id="parent_boost_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="parent_fuzziness" value="1" id="parent_fuzziness"
                                                            class="custom-control-input parent_fuzziness">
                                                        <label class="custom-control-label" for="parent_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="parent_status" value="1" id="parent_status"
                                                            class="custom-control-input parent_status">
                                                        <label class="custom-control-label" for="parent_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- <div class="col-6">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">HasPhoto</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the HasPhoto. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="hasphoto_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="hasphoto_score" id="hasphoto_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="hasphoto_fuzziness" value="1" id="hasphoto_fuzziness"
                                                            class="custom-control-input hasphoto_fuzziness">
                                                        <label class="custom-control-label" for="hasphoto_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="hasphoto_status" value="1" id="hasphoto_status"
                                                            class="custom-control-input hasphoto_status">
                                                        <label class="custom-control-label" for="hasphoto_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div> -->

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">URL Text</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the URL Text. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group p-2">
                                                    <label for="url_text_score">Boost Score</label>
                                                    <input type="text" class="form-control" name="url_text_score" id="url_text_score" placeholder="Enter Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="url_text_fuzziness" value="1" id="url_text_fuzziness"
                                                            class="custom-control-input url_text_fuzziness">
                                                        <label class="custom-control-label" for="url_text_fuzziness">Fuzziness</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3" style="margin-top:34px;">
                                                <div class="form-group p-2">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="url_text_status" value="1" id="url_text_status"
                                                            class="custom-control-input url_text_status">
                                                        <label class="custom-control-label" for="url_text_status">Status</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Photos </h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results based on photo availability. Applies additional score if a part or model has an associated image. Note: Boosting will only take effect if the photo script is enabled."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="no_image_boost_score">No Image Boost Score</label>
                                                    <input type="text" class="form-control" name="no_image_boost_score" id="no_image_boost_score" placeholder="Enter No Image Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="image_boost_score">Image Boost Score</label>
                                                    <input type="text" class="form-control" name="image_boost_score" id="image_boost_score" placeholder="Enter Image Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4" style="margin-top:43px;">
                                                <div class="form-group">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="photo_script" value="1" id="photo_script"
                                                            class="custom-control-input photo_script">
                                                        <label class="custom-control-label" for="photo_script">Photo Script</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">FNLA </h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the Fnla. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="non_fnla_boost_score">Non-FNLA Boost score</label>
                                                    <input type="text" class="form-control" name="non_fnla_boost_score" id="non_fnla_boost_score" placeholder="Enter Fnla Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="fnla_boost_score">Fnla Boost Score</label>
                                                    <input type="text" class="form-control" name="fnla_boost_score" id="fnla_boost_score" placeholder="Enter Fnla Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4" style="margin-top:43px;">
                                                <div class="form-group">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="fnla_script" value="1" id="fnla_script"
                                                            class="custom-control-input fnla_script">
                                                        <label class="custom-control-label" for="fnla_script">Fnla Script</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Special Order </h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Boost results where the search term appears anywhere within the Special order. The relevance score is multiplied to prioritize partial and full matches."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="non_special_order_boost_score">Non-special order boost score</label>
                                                    <input type="text" class="form-control" name="non_special_order_boost_score" id="non_special_order_boost_score" placeholder="Enter Special order Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group p-2">
                                                    <label for="spacial_order_boost_score">Special order Boost Score</label>
                                                    <input type="text" class="form-control" name="spacial_order_boost_score" id="spacial_order_boost_score" placeholder="Enter Special order Boost Score" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-4" style="margin-top:43px;">
                                                <div class="form-group">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="spacial_order_script" value="1" id="spacial_order_script"
                                                            class="custom-control-input spacial_order_script">
                                                        <label class="custom-control-label" for="spacial_order_script">Special order Script</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <!-- <div class="col-4">
                                    <div class="card p-2">
                                        <div class="content-header">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <h4 class="m-0">Scripts</h4><a href="#" tabindex="0" class="text-primary mt-1 ml-2" data-toggle="tooltip" data-placement="right" title="Apply boost if the part is not marked as FNLA. This increases the relevance score for non-FNLA parts in search results."> <i class="fas fa-info-circle"></i> </a>
                                                </div>
                                            </div>
                                        </div>
                                       <div class="row p-2">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="fnla_script" value="1" id="fnla_script"
                                                            class="custom-control-input fnla_script">
                                                        <label class="custom-control-label" for="fnla_script">FNLA Script</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" name="special_order_demotion" value="1" id="special_order_demotion"
                                                            class="custom-control-input special_order_demotion">
                                                        <label class="custom-control-label" for="special_order_demotion">Special Order Demotion</label>
                                                    </div>
                                                </div>
                                            </div>

                                       </div>

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

                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <a href="{{ route('admin.search-settings') }}" class="btn btn-info">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</section>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
    $(function () {

      $('#elasticSearchSettingsAddForm').validate({
          rules: {
                name: {
                    required: true
                },
                sku_boost_score: {
                    required: true
                },
                product_name_boost_score: {
                    required: true
                },
                product_name_cleaned_boost_score: {
                    required: true
                },
                no_image_boost_score: {
                    required: true
                },
                image_boost_score: {
                    required: true
                },

          },
          messages: {
                name: {
                    required: "Please enter a name"
                },
                sku_boost_score: {
                    required: "Please enter a sku boost score"
                },
                product_name_boost_score: {
                    required: "Please enter a product name boost score"
                },
                product_name_cleaned_boost_score: {
                    required: "Please enter a product name cleaned boost score"
                },
                no_image_boost_score: {
                    required: "Please enter a no image boost score"
                },
                image_boost_score: {
                    required: "Please enter a image boost score"
                },
          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
              $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
          }
      });
    });
</script>

@endsection