@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: "✖";
}
</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">Add Model Category</h1>
            </div><!-- /.col -->

        </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">
            <!-- left column -->
            <div class="col-md-6">
                <!-- general form elements -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Add Model Category</h3>
                    </div>

                    <form id="ModelCategoryAddForm" action="{{ route('admin.model-category-save') }}" method="post"  enctype="multipart/form-data">
                       @csrf
                        <div class="card-body">
                            <div class="form-group">
                                <label for="Brand">Brand</label>
                                <select name="Brand" id="Brand" style="width: 100%" data-palcehoder="Select Template" class="form-control">
                                    <option value="" disabled selected>Select Brand</option>
                                        <option data-id="new" value="create">Create Brand</option>
                                        @if(!empty($BrandsData))
                                            @foreach ($BrandsData as $b)
                                                <option data-id="{{ $b->Brand }}" value="{{ $b->Brand }}">{{ $b->Brand }}</option>
                                            @endforeach
                                        @endif
                                </select>
                            </div>
                            <div class="form-group" id="brandcreate" style="display: none;">
                                <label for="CreateBrand">Create Brand</label>
                                <input type="text" class="form-control" name="CreateBrand" id="CreateBrand" placeholder="Enter Brand" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="Category">Category</label>
                                <select name="Category" id="Category" style="width: 100%" data-palcehoder="Select Category" class="form-control">
                                    <option value="" disabled selected>Select Category</option>

                                </select>
                            </div>
                            {{--  <div class="form-group">
                                <label for="Category">Sub Category</label>
                                <select name="CategorySub" id="CategorySub" style="width: 100%" data-palcehoder="Select Sub Category" class="form-control">
                                    <option value="" disabled selected>Select Sub Category</option>
                                </select>
                            </div>  --}}



                            <div class="form-group">
                                <label for="ModelNumber">ModelNumber</label>
                                <input type="text" class="form-control" name="ModelNumber" id="ModelNumber" placeholder="Enter ModelNumber" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="RecordType">RecordType</label>
                                <select name="RecordType" id="RecordType" style="width: 100%" data-palcehoder="Select RecordType" class="form-control">
                                    <option value="" disabled selected>Select RecordType</option>

                                        @if(!empty($RecordTypeData))
                                            @foreach ($RecordTypeData as $r)
                                                <option data-id="{{ $r->RecordType }}" value="{{ $r->RecordType }}">{{ $r->RecordType }}</option>
                                            @endforeach
                                        @endif
                                </select>
                            </div>



                            <div class="form-group row m-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="ARI" name="ARI" value="1">
                                    <label class="form-check-label" for="ARI">
                                        <b>ARI</b>
                                    </label>
                                  </div>

                                  <div class="form-check ml-3">
                                    <input type="checkbox" class="form-check-input" id="ShowPINs" name="ShowPINs" value="1">
                                    <label class="form-check-label" for="ShowPINs">
                                        <b>ShowPINs</b>
                                    </label>
                                  </div>
                            </div>

                            <div class="form-group">
                                <label for="Ordering">Ordering</label>
                                <input type="number" class="form-control" min="0" value="0" max="255" name="Ordering" id="Ordering" placeholder="Enter Ordering" autocomplete="off">
                            </div>

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

                            <div class="form-group">
                                <label for="MainImage">MainImage</label>
                                <input type="text" class="form-control" name="MainImage" id="MainImage" placeholder="Enter MainImage" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="MFGimage">MFGimage</label>
                                <input type="text" class="form-control" name="MFGimage" id="MFGimage" placeholder="Enter MFGimage" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="PWimage">PWimage</label>
                                <input type="text" class="form-control" name="PWimage" id="PWimage" placeholder="Enter PWimage" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="Template">Template</label>
                                <select name="Template" id="Template" style="width: 100%" data-palcehoder="Select Template" class="form-control">
                                    <option value="" disabled selected>Select Template</option>
                                    @if(!empty($Template))
                                        @foreach ($Template as $t)
                                            <option data-id="{{ $t->Template }}" value="{{ $t->Template }}">{{ $t->Template }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="URL">URL</label>
                                <input type="text" class="form-control" name="URL" id="URL" placeholder="Enter URL" autocomplete="off">
                            </div>

                            {{-- <div class="form-group" style="display: none;" id="showProductCodeInput">
                                <label for="ProductCode">ProductCode</label>
                                <input type="text" class="form-control" name="ProductCode" id="ProductCode" placeholder="Enter ProductCode" autocomplete="off">
                            </div> --}}

                            <div class="form-group">
                                <label for="Vertical">Vertical</label>
                                <select name="Vertical" id="Vertical" style="width: 100%" data-palcehoder="Select Vertical" class="form-control">
                                    <option value="" disabled selected>Select Vertical</option>
                                    @if(!empty($Vertical))
                                        @foreach ($Vertical as $t)
                                            <option data-id="{{ $t->Vertical }}" value="{{ $t->Vertical }}">{{ $t->Vertical }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

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

                    </form>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
{{-- <script>
   $('#RecordType').on('change', function() {
        var type = this.value;
        if(type == "model"){
            $('#showProductCodeInput').show()
        }else{
            $('#showProductCodeInput').hide()
        }
    });
</script> --}}
<script>
    $('#Brand').change(function(){
        var brandid = $(this).val();
        $.ajax({
            type: "POST",
            url: "{{ route('admin.brand-wise-category') }}",
            dataType:"json",
            data:{'_token': '{{ csrf_token() }}','brandid':brandid},
            success: function(cdata){
                $('#Category').html('');
                $('#Category').html('<option value="">Select Category</option>');
                if(cdata.length > 0){
                    $.each(cdata, function(key, value) {
                        $('#Category').append("<option value='" + value.ParentCatID + "'>"+ value.Name +"</option>");
                   });
                   $('#Category').select2({
                    placeholder: "Select Category",
                    theme: 'bootstrap4',
                });
                }
            }
        });

    });

  /*  $('#Category').change(function(){
        var catid = $(this).val();
        $.ajax({
            type: "POST",
            url: "{{ route('admin.category-wise-subcategory') }}",
            dataType:"json",
            data:{'_token': '{{ csrf_token() }}','catid':catid},
            success: function(cdata){
                $('#CategorySub').html('');
                $('#CategorySub').html('<option value="">Select Sub Brand</option>');
                if(cdata.length > 0){
                    $.each(cdata, function(key, value) {
                        $('#CategorySub').append("<option value='" + value.CatID + "'>"+ value.Name +"</option>");
                   });
                   $('#CategorySub').select2({
                    placeholder: "Select sub Category",
                    theme: 'bootstrap4',
                });
                }
            }
        });

    });
*/
        $('#Brand').change(function(){
            var brand = $(this).val();
            $('#brandcreate').hide();
            if(brand == 'create'){
                $('#brandcreate').show();
            }
        });
        $( document ).ready(function() {
            $('#Category').select2({
                placeholder: "Select Category",
                theme: 'bootstrap4',
            });
            $('#Brand').select2({
                placeholder: "Select a Brand",
                theme: 'bootstrap4',
            });
            $('#RecordType').select2({
                placeholder: "Select a RecordType",
                theme: 'bootstrap4',
            });
            $('#ParentCatID').select2({
                placeholder: "Select a ParentCatID",
                theme: 'bootstrap4',
            });
            $('#Template').select2({
                placeholder: "Select a Template",
                theme: 'bootstrap4',
            });
            $('#Vertical').select2({
                placeholder: "Select a Vertical",
                theme: 'bootstrap4',
            });
        });

    $(function () {

      $('#ModelCategoryAddForm').validate({
          rules: {
            Category: {
                required: true,
            },
             Brand: {
                  required: true,
              },
              ModelNumber: {
                  required: true,
              },
              RecordType: {
                  required: true,
              },
              CatID: {
                  required: false,
              },
              ParentCatID: {
                  required: false,
              },
              Ordering: {
                  required: false,
              },
              Name: {
                  required: true,
              },
              MainImage: {
                  required: false,
              },
              MFGimage: {
                  required: false,
              },
              PWimage: {
                  required: false,
              },
            //   ProductCode: {
            //       required: true,
            //   },
              Vertical: {
                  required: true,
              },
          },
          messages: {

            Brand: {
                  required: "Please enter a Brand",
              },
              ModelNumber: {
                  required: "Please enter a ModelNumber",
              },
              RecordType: {
                  required: "Please enter a RecordType",
              },
              CatID: {
                  required: "Please enter a CatID",
              },
              ParentCatID: {
                  required: "Please enter a ParentCatID",
              },
              Ordering: {
                  required: "Please enter a Ordering",
              },
              Name: {
                  required: "Please enter a Name",
              },
              MainImage: {
                  required: "Please enter a MainImage",
              },
              MFGimage: {
                  required: "Please enter a MFGimage",
              },
              PWimage: {
                  required: "Please enter a PWimage",
              },
            //   ProductCode: {
            //       required: "Please enter a ProductCode",
            //   },
              Vertical: {
                  required: "Please enter a Vertical",
              },
          },
          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