@extends('admin.layout.master')

@section('content')

<style>
    .error{
        color: red;
    }
  /* 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">Edit 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">Edit Model Category</h3>
                    </div>

                    <form id="ModelCategoryEditForm" action="{{ route('admin.model-category-update') }}" method="post"  enctype="multipart/form-data">
                       @csrf
                        <div class="card-body">
                            <input type="hidden" name="id" value="{{ $modelcategory->CatID }}">
                            <div class="form-group">
                                <label for="Brand">Setect 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 }}" {{ (($modelcategory->Brand == $b->Brand) ? "selected" : "") }}>{{ $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" value="{{ $modelcategory->ModelNumber }}" name="ModelNumber" id="ModelNumber" placeholder="Enter ModelNumber" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="RecordType">Setect 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 $rt)
                                            <option  value="{{ $rt->RecordType }}" {{ (($modelcategory->RecordType == $rt->RecordType) ? "selected" : "") }}>{{ $rt->RecordType }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="form-group row m-2">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input"  {{ (($modelcategory->ARI == 'Y') ? "checked" : "") }} 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" {{ (($modelcategory->ShowPINs == '1') ? "checked" : "") }} 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" value="{{ $modelcategory->Ordering }}" min="0" max="255" value="1" 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" value="{{ $modelcategory->Name }}" 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" value="{{ $modelcategory->MainImage }}" 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" value="{{ $modelcategory->MFGimage }}" 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" value="{{ $modelcategory->PWimage }}" name="PWimage" id="PWimage" placeholder="Enter PWimage" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="Template">Setect 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 }}" {{ (($modelcategory->Template == $t->Template) ? "selected" : "") }}>{{ $t->Template }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="URL">URL</label>
                                <input type="text" class="form-control" value="{{ $modelcategory->URL }}" name="URL" id="URL" placeholder="Enter URL" autocomplete="off">
                            </div>
                            {{-- @if($modelcategory->RecordType == "model")
                                <div class="form-group" id="showProductCodeInput">
                                    <label for="ProductCode">ProductCode</label>
                                    <input type="text" class="form-control" value="{{ $modelcategory->ProductCode }}" name="ProductCode" id="ProductCode" placeholder="Enter ProductCode" autocomplete="off">
                                </div>
                            @endif --}}

                            <div class="form-group">
                                <label for="Vertical">Setect 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 }}" {{ (($modelcategory->Vertical == $t->Vertical) ? "selected" : "") }}>{{ $t->Vertical }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </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>
    @if(!empty($mainCat) && !empty($mainCat->ParentCatID))
    var subcatsel =  '{{ (!empty($mainCat->CatID) ? $mainCat->CatID : "") }}';
    var catsel = '{{ $mainCat->ParentCatID  }}';
@endif
@if(!empty($mainCat) && $mainCat->ParentCatID == 0)
var subcatsel =  '';
var catsel = '{{ $modelcategory->ParentCatID  }}';
@endif


$('#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) {

                    if(parseInt(catsel) == value.ParentCatID){
                    $('#Category')
                        .append($("<option selected></option>")
                                   .attr("value", value.ParentCatID)
                                   .text(value.Name));
                    }else{
                        $('#Category')
                        .append($("<option></option>")
                                   .attr("value", value.ParentCatID)
                                   .text(value.Name));
                    }
               });
               $('#Category').val(parseInt(catsel)).change();
               $('#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) {
                        if(subcatsel == value.CatID){
                            $('#CategorySub').append($("<option selected></option>").attr("value", value.CatID).text(value.Name));
                        }else{
                            $('#CategorySub').append($("<option></option>").attr("value", value.CatID).text(value.Name));
                        }
                   });
                   $('#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',
        });
        $('#Brand').val('{{ $modelcategory->Brand  }}').change();
    });

$(function () {

  $('#ModelCategoryEditForm').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",
          },

          ParentCatID: {
              required: "Please enter a ParentCatID",
          },
          Ordering: {
              required: "Please enter a Ordering",
          },
          Name: {
              required: "Please enter a Name",
          },
          MainImage: {
              required: "Please enter a MainImage",
          },
          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