@extends('layouts.admin')
@section('title', 'Product | Mintavia Admin')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Item Window</h3>
                    <div class="ml-auto">
                        <a href="{{route('admin.products.index')}}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>
                <form action="{{route('admin.products.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                <!-- /.card-header -->
                <div class="card-body">
      <div class="row"><!--first row-->
        <div class="col-6">
             <div class="row">
                <div class=" col-3">
                    
                     <div class="form-group">
                     <label for="product_type_id">Type Of Group </label>
                    </div>
                </div>
                <div class="col-7">
                                   
                         <select id="product_type_id" name="product_type_id"
                          class="form-control form-control-sm js-select2" style="width: 100%">
                          @foreach($types as $type)
                        <option @if(old('product_type_id') == $type->id) selected
                          @endif value="{{$type->id}}">{{$type->type_name}}</option>
                            @endforeach
                        </select>
                 </div>
                <div class="col-1 px-1">
                    <a href="{{route('admin.types.index')}}" target="_blank">
                    <button type="button" class="btn btn-block btn-sm btn-success"><i
                    class="fas fa-plus"></i></button>
                    </a>
                 </div>
                                          
                <div class="col-1 px-1">
                    <button type="button" data-type="types"
                    class="refresh-button btn-block btn-sm btn btn-info"><i
                    class="fas fa-sync"></i></button>
                </div>
                                    @error('product_type_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
            </div><!--end cat--> 

            <div class="row">
                <div class="col-md-3">
                                <div class="form-group">
                                    <label for="product_group_id">Type Of Sub Group </label>
                                </div>
                </div>
                <div class="col-7">
                                            <select id="product_group_id" name="product_group_id"
                                                    class="form-control form-control-sm js-select2" style="width: 100%">
                                                    <!-- <option value="">Car/ Bike/ scooty/auto</option> -->
                                                @foreach($groups as $group)
                                                    <option @if(old('product_group_id') == $group->id) selected
                                                            @endif value="{{$group->id}}">{{$group->group_name}}</option>
                                                @endforeach
                                            </select>
                 </div>
                                        <div class="col-1 px-1">
                                            <a href="{{route('admin.productgroup.index')}}" target="_blank">
                                                <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                        class="fas fa-plus"></i></button>
                                            </a>
                                        </div>
                                        <div class="col-1 px-1">
                                            <button type="button" data-type="groups"
                                                    class="refresh-button btn-block btn-sm btn btn-info"><i
                                                    class="fas fa-sync"></i></button>
                                        </div>
                                
                                    @error('product_group_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
         </div><!--end sub group-->
                        
            <div class="row">
              <div class=" col-3">
                                <div class="form-group">
                                    <label for="product_barcode">Part No./Barcode </label>
                                </div>
              </div>
              <div class="col-9">
                                    <input value="{{old('product_barcode')}}" type="text"
                                           class="form-control form-control-sm @error('product_barcode') is-invalid @enderror"
                                           placeholder=" Duplicate Not Allowed" name="product_barcode" id="product_barcode">
              </div>
                                    @error('product_barcode')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
      </div><!--end part-->
      
      <div class="row">
              <div class=" col-3">  
                                <div class="form-group">
                                    <label for="company">Company Name  </label>
                                </div>
              </div>
                <div class="col-7">
                                            <select id="company" name="company"
                                                    class="form-control form-control-sm js-select2 @error('company') is-invalid @enderror"
                                                    style="width: 100%">
                                                    <!-- <option value="">company name</option> -->
                                                @foreach($bikes as $bike)
                                                    <option @if(old('company') == $bike->id) selected
                                                            @endif value="{{$bike->id}}">{{$bike->brand}}</option>
                                                @endforeach
                                            </select>
               </div>
                  <div class="col-1 px-1">
                                            <a href="{{route('admin.bikes.index')}}" target="_blank">
                                                <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                        class="fas fa-plus"></i></button>
                                            </a>
                 </div>
                 <div class="col-1 px-1">
                                            <button type="button" data-type="bikes"
                                                    class="refresh-button btn-block btn-sm btn btn-info"><i
                                                    class="fas fa-sync"></i></button>
                 </div>  <!-- </div> -->
                                    @error('company')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
             </div><!--end company-->

             <div class="row">
              <div class=" col-3">  

                                <div class="form-group">
                                    <label for="model"> Bike Or Car Model</label>
                                </div>
              </div>
              <div class="col-9">
                                    <select id="model" name="model"
                                            class="form-control form-control-sm js-select2 @error('model') is-invalid @enderror"
                                            style="width: 100%">
                                            
                                        @foreach($models as $model)
                                            <option @if(old('model') == $model->id) selected
                                                    @endif value="{{$model->id}}">{{$model->model}}</option>
                                        @endforeach
                                    </select>
              </div>
                                    @error('model')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
          </div><!--end model-->

          <div class="row">
              <div class=" col-3">
                                <div class="form-group">
                                    <label for="product_name">Product Name</label>
                                </div>
              </div>
              <div class=" col-9">
                                    <input value="{{old('product_name')}}" type="text"
                                           class="form-control form-control-sm @error('product_name') is-invalid @enderror"
                                           placeholder="Item" name="product_name" id="product_name">
              </div>
              
                                    @error('product_name')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
              </div><!--end product-->

              <div class="row">
              <div class=" col-3">  

                                <div class="form-group">
                                    <label for="brand_id"> Brand Name </label>
                                </div>
              </div>
              <div class=" col-7"> 
                                    <select id="brand_id" name="brand_id"
                                                    class="form-control form-control-sm js-select2" style="width: 100%">
                                                    <!-- <option value="">Home Brand, Polo etc.</option> -->
                                                @foreach($brands as $brand)
                                                    <option @if(old('brand_id') == $brand->id) selected
                                                            @endif value="{{$brand->id}}">{{$brand->brand_name}}</option>
                                                @endforeach
                                            </select>
              </div>
             <div class="col-1 px-1">
                                           <a href="{{route('admin.brands.index')}}" target="_blank">
                                                <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                        class="fas fa-plus"></i></button>
                                            </a>
             </div>
            <div class="col-1 px-1">
                                            <button type="button" data-type="brands"
                                                    class="refresh-button btn-block btn-sm btn btn-info"><i
                                                    class="fas fa-sync"></i></button>
             </div>
                                    @error('brand_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
         </div><!--end brand-->

         <div class="row">
              <div class=" col-3">
                         <div class="form-group">
                                    <label for="color">Product Color  </label>
                         </div>
              </div>
              <div class=" col-9">
                                    <input value="{{old('color')}}" list="color_list" type="text"
                                           class="form-control form-control-sm @error('color') is-invalid @enderror"
                                           placeholder="Color" name="color" id="color">
              </div>
                                    @error('color')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
    </div><!--color-->

    <div class="row">
                 <div class="col-3">
                                <div class="form-group">
                                    <label for="size">Product Size</label>
                                </div>
                 </div>
                 <div class="col-9">
                                    <input value="{{old('size')}}" list="size_list" type="text"
                                           class="form-control form-control-sm @error('size') is-invalid @enderror"
                                           placeholder="Size" name="size" id="size">
                 </div>
                                    @error('size')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
              </div><!--end size-->

              <div class="row">
                 <div class="col-3">
                                <div class="form-group">
                                    <label for="desc">Description</label>
                                </div>
                 </div>
                 <div class="col-9">
                                    <input value="{{old('desc')}}" type="text"
                                           class="form-control form-control-sm @error('desc') is-invalid @enderror"
                                           placeholder="Company , Bike name, Item Name, Brand" name="desc" id="desc">
                 </div>
                                    @error('desc')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
              </div><!--end desc-->
              
              <div class="row">
                 <div class="col-12">
                 NOTE (Explanation about the usage of item) & also it should be saved at the back end, 
                 so that this note will be reused again for same item & also create a master based on items 
                 at reset.
                 </div>
              </div>

      </div><!--end firstcolumn-->
                        
                <div class="col-6">
  
        <div class="row no-gutters mb-2">
      <div class="col-md-4 px-1 text-center">
        <div class="row no-gutters">
            <div class="col-12">
                <label class="w-100" >Product Image 1</label>
            </div>
            <div class="col-md-12 text-center">
                <img src="{{asset('noimage.jpg')}}" alt="" class="img-fluid"
                     id="product-image-img-1"
                     onclick="" style="max-width: 150px; max-height: 150px;"><br>
                <input name="product_image_1"
                       class="form-control form-control-sm-file image-select w-100 d-none"
                       type="file"
                       accept="image/*"
                       id="product_image_1" data-img="#product-image-img-1" style="z-index:83">
                <input type="hidden" name="product_input_1" id="product_input_1">
                <div class="row no-gutters">
                    <div class="col-7 px-1 pt-2">
                        <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                onclick="document.getElementById('product_image_1').click()" style="font-size: 14px;">
                            Select Image
                        </button>
                    </div>
                    <div class="col-5 px-1 pt-2">
                        <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                onclick="take_snapshot('#product-image-img-1', '#product_input_1')"  style="font-size: 14px;">
                            Capture
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-4 px-1 text-center">
                                <div class="row no-gutters">
                                    <div class="col-12">
                                        <label class="w-100">Product Image 2</label>
                                    </div>
                                    <div class="col-md-12 text-center">
                                        <img src="{{asset('noimage.jpg')}}" alt="" class="img-fluid"
                                             id="product-image-img-2"
                                             onclick="" style="max-width: 150px; max-height: 150px;"><br>
                                        <input name="product_image_2"
                                               class="form-control form-control-sm-file image-select w-100 d-none"
                                               type="file"
                                               accept="image/*"
                                               id="product_image_2" data-img="#product-image-img-2" style="z-index:83">
                                        <input type="hidden" name="product_input_2" id="product_input_2">
                                        <div class="row no-gutters">
                                            <div class="col-7 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="document.getElementById('product_image_2').click()">
                                                    Select
                                                    Image
                                                </button>
                                            </div>
                                            <div class="col-5 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="take_snapshot('#product-image-img-2', '#product_input_2')">
                                                    Capture
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 px-1 text-center">
                                <div class="row no-gutters">
                                    <div class="col-12">
                                        <label class="w-100">Product Image 3</label>
                                    </div>
                                    <div class="col-md-12 text-center">
                                        <img src="{{asset('noimage.jpg')}}" alt="" class="img-fluid"
                                             id="product-image-img-3"
                                             onclick="" style="max-width: 150px; max-height: 150px;"><br>
                                        <input name="product_image_3"
                                               class="form-control form-control-sm-file image-select w-100 d-none"
                                               type="file"
                                               accept="image/*"
                                               id="product_image_3" data-img="#product-image-img-3" style="z-index:83">
                                        <input type="hidden" name="product_input_3" id="product_input_3">
                                        <div class="row no-gutters">
                                            <div class="col-7 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="document.getElementById('product_image_3').click()">
                                                    Select
                                                    Image
                                                </button>
                                            </div>
                                            <div class="col-5 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="take_snapshot('#product-image-img-3', '#product_input_3')">
                                                    Capture
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
        </div>
        <div class="row">
                            <div class="col-md-4 px-1 text-center">
                                <div class="row no-gutters">
                                    <div class="col-12">
                                        <label class="w-100">Product Image 4</label>
                                    </div>
                                    <div class="col-md-12 text-center">
                                        <img src="{{asset('noimage.jpg')}}" alt="" class="img-fluid"
                                             id="product-image-img-4"
                                             onclick="" style="max-width: 150px; max-height: 150px;"><br>
                                        <input name="product_image_4"
                                               class="form-control form-control-sm-file image-select w-100 d-none"
                                               type="file"
                                               accept="image/*"
                                               id="product_image_4" data-img="#product-image-img-4" style="z-index:83">
                                        <input type="hidden" name="product_input_4" id="product_input_4">
                                        <div class="row no-gutters">
                                            <div class="col-7 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="document.getElementById('product_image_4').click()">
                                                    Select
                                                    Image
                                                </button>
                                            </div>
                                            <div class="col-5 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="take_snapshot('#product-image-img-4', '#product_input_4')">
                                                    Capture
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                             <div class="col-md-4 px-1 text-center">
                                <div class="row no-gutters">
                                    <div class="col-12">
                                        <label class="w-100">Product Image 5</label>
                                    </div>
                                    <div class="col-md-12 text-center">
                                        <img src="{{asset('noimage.jpg')}}" alt="" class="img-fluid"
                                             id="product-image-img-2"
                                             onclick="" style="max-width: 150px; max-height: 150px;"><br>
                                        <input name="product_image_2"
                                               class="form-control form-control-sm-file image-select w-100 d-none"
                                               type="file"
                                               accept="image/*"
                                               id="product_image_2" data-img="#product-image-img-2" style="z-index:83">
                                        <input type="hidden" name="product_input_2" id="product_input_2">
                                        <div class="row no-gutters">
                                            <div class="col-7 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="document.getElementById('product_image_2').click()">
                                                    Select
                                                    Image
                                                </button>
                                            </div>
                                            <div class="col-5 px-1 pt-2">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="take_snapshot('#product-image-img-2', '#product_input_2')">
                                                    Capture
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 px-1 text-center">
                                <div class="row no-gutters">
                                    <div class="col-12">
                                        <label class="w-100">Preview</label>
                                    </div>
                                    <div class="col-md-12 text-center">
                                        <div class="row no-gutters">
                                            <div class="col-12 px-1 pt-1">
                                                <button type="button" class="btn btn-info rounded-0 btn-sm btn-block"
                                                        onclick="attachCamera()">
                                                    Attach Webcam
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-1" id="my_camera"></div>
                                </div>
                            </div>
                        </div>
                  </div>
      </div>
         </div><!--end first row-->
                
         <div class="card-body">
          <div class="row"><!--second row-->
         <div class="col-4">

              <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="unit">Primery Unit </label>
                                </div>
                        </div>
                        <div class="col-4">
                                       <select id="unit" name="unit"
                                                    class="form-control form-control-sm js-select2"
                                                    style="width: 100%">
                                                    <option value="" disabled selected>pcs,Box,Etc.</option>
                                                @foreach($units as $unit)
                                                    <option @if(old('unit') == $unit->id) selected
                                                            @endif value="{{$unit->id}}">{{$unit->unit_name}}</option>
                                                @endforeach
                                            </select>
                         </div>
                         <div class="col-1 px-1">
                                            <a href="{{route('admin.units.index')}}" target="_blank">
                                                <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                        class="fas fa-plus"></i></button>
                                            </a>
                         </div>
                          <div class="col-1 px-1">
                                            <button type="button" data-type="units"
                                                    class="refresh-button btn-block btn-sm btn btn-info"><i
                                                    class="fas fa-sync"></i></button>
                         </div>
                                    @error('unit')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
              </div><!--unit-->

               <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="">Group Of Filter </label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <select id="filter" name="filter"
                                            class="form-control form-control-sm js-select2" style="width: 100%" >
                                            <option value="" disabled selected>Eg:- Filter --> Oil Filter/Air Filter --></option>
                                    </select>
                        </div>
                                    @error('fiter')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
               </div><!--end filter type-->


               <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="tax_id">GST Tax</label>
                                </div>
                        </div>
                        <div class="col-4">
                                     <select id="tax_id" name="tax_id"
                                                    class="form-control form-control-sm js-select2"
                                                    style="width: 100%">
                                                @foreach($taxes as $tax)
                                                    <option @if(old('tax_id') == $tax->id) selected
                                                            @endif value="{{$tax->id}}">{{$tax->tax_name}}</option>
                                                @endforeach
                                            </select>
                          </div>
                          <div class="col-1 px-1">
                                            <a href="{{route('admin.taxes.index')}}" target="_blank">
                                                <button type="button" class="btn btn-block btn-sm btn-success"><i
                                                        class="fas fa-plus"></i></button>
                                            </a>
                          </div>
                          <div class="col-1 px-1">
                                            <button type="button" data-type="taxes"
                                                    class="refresh-button btn-block btn-sm btn btn-info"><i
                                                    class="fas fa-sync"></i></button>
                             </div>
                                    
                                    @error('tax_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
           </div><!-- gst tax-->

           <div class="row">  
                        <div class="col-6">
                             <div class="form-group">
                                    <label for="sale_price">Sale Price</label>
                            </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('sale_price')}}" type="text"
                                           class="form-control form-control-sm @error('sale_price') is-invalid @enderror"
                                           placeholder="Sale Price" name="sale_price" id="sale_price">
                        </div>
                                    @error('sale_price')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
             </div><!-- sale price-->
             
             <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="b2b_pricing_desc">B2B Pricing Desc %</label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('b2b_pricing_desc')}}" type="text"
                                           class="form-control form-control-sm @error('b2b_pricing_desc') is-invalid @enderror"
                                           placeholder="B2B Pricing Desc %" name="b2b_pricing_desc"
                                           id="b2b_pricing_desc">
                        </div>
                                    @error('b2b_pricing_desc')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                </div><!--end b2b-->
            
             <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="customer_pricing_desc">Customer Pricing Desc %</label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('customer_pricing_desc')}}" type="text"
                                           class="form-control form-control-sm @error('customer_pricing_desc') is-invalid @enderror"
                                           placeholder="Customer Pricing Desc %" name="customer_pricing_desc"
                                           id="customer_pricing_desc">
                        </div>
                                    @error('customer_pricing_desc')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
               </div><!--pricing desc-->

                 <div class="row">
                 <div class="col-6">
                                  <div class="form-group">
                                    <label for="minimum_level">MINIMUM LEVEL</label>
                                  </div>
                 </div>
                 <div class="col-6">
                                    <input value="{{old('minimum_level')}}" type="text"
                                           class="form-control form-control-sm @error('minimum_level') is-invalid @enderror"
                                           placeholder="MINIMUM LEVEL" name="minimum_level" id="minimum_level">
                 </div>
                                    @error('minimum_level')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
         </div><!--end level-->

              
                 </div><!--end fcolumn-->
             <div class="col-4">
  
             <div class="row">

                    <div class="col-6">
                             <div class="form-group">
                                    <label for="model_year">Model Year</label>
                             </div>
                    </div>
                    <div class="col-6">
                                    <input value="{{old('model_year')}}" list="model_year_list" type="text"
                                           class="form-control form-control-sm @error('model_year') is-invalid @enderror"
                                           placeholder="Model Year" name="model_year" id="model_year">
                    </div>
                                    @error('model_year')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div><!--model-->

                                <div class="row">
    <div class="col-6">
        <div class="form-group">
            <label for="">Stock Position</label>
        </div>
    </div>

    <div class="col-3">
        <div class="form-group">
            <input value="{{old('rack_no')}}" list="rack_list" type="text"
                class="form-control form-control-sm @error('rack_no') is-invalid @enderror"
                placeholder="Rack No" name="rack_no" id="rack_no">
            @error('rack_no')
            <span class="invalid-feedback d-block" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
    </div>

    <div class="col-3">
        <div class="form-group">
            <input value="{{old('box_no')}}" list="box_list" type="text"
                class="form-control form-control-sm @error('box_no') is-invalid @enderror"
                placeholder="Box No" name="box_no" id="box_no">
            @error('box_no')
            <span class="invalid-feedback d-block" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>
    </div>
</div><!--stoke position-->


<div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="cost_price">Cost Price (WO Gst)</label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('cost_price')}}" type="text"
                                           class="form-control form-control-sm @error('cost_price') is-invalid @enderror"
                                           placeholder="Cost Price (WO Gst)" name="cost_price" id="cost_price">
                        </div>
                                    @error('cost_price')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
             </div><!--end cost price-->

             <div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="op_qty">OP Qty</label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('op_qty')}}" type="text"
                                           class="form-control form-control-sm @error('op_qty') is-invalid @enderror"
                                           placeholder="Opening Qty" name="op_qty" id="op_qty">
                        </div>
                                    @error('op_qty')
                                    <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                    @enderror
                 </div><!-- quantity-->


<div class="row">  
                        <div class="col-6">
                                <div class="form-group">
                                    <label for="mechanic_pricing_desc">Mechanic Pricing Desc %</label>
                                </div>
                        </div>
                        <div class="col-6">
                                    <input value="{{old('mechanic_pricing_desc')}}" type="text"
                                           class="form-control form-control-sm @error('mechanic_pricing_desc') is-invalid @enderror"
                                           placeholder="Mechanic Pricing Desc %" name="mechanic_pricing_desc"
                                           id="mechanic_pricing_desc">
                        </div>
                                    @error('mechanic_pricing_desc')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
               </div><!--mechanic-->

               <div class="row">
                 <div class="col-6">
                                <div class="form-group">
                                    <label for="printing"> Print View </label>
                                </div>
                 </div>
                 <div class="col-6">
                                    <input value="{{old('printing')}}" type="text"
                                           class="form-control form-control-sm @error('printing') is-invalid @enderror"
                                           placeholder="Part Name , Item Name , Brand " name="printing" id="printing">
                 </div>
                                    @error('printing')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
             </div><!--end print-->


                 <div class="row">
                 <div class="col-6">
                            <div class="form-group">
                                    <label for="maximum_level">MAXIMUM LEVEL</label>
                            </div>
                 </div>
                 <div class="col-6">
                                    <input value="{{old('maximum_level')}}" type="text"
                                           class="form-control form-control-sm @error('maximum_level') is-invalid @enderror"
                                           placeholder="MAXIMUM LEVEL" name="maximum_level" id="maximum_level">
                 </div>
                                    @error('maximum_level')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
         </div><!--end max-->
           
                 </div><!--end seccolumn-->
                 <div class="col-4">


                 <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="vehicle_type">Type Of vehicle </label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <select id="vehicle_type" name="vehicle_type"
                                            class="form-control form-control-sm js-select2" style="width: 100%" >
                                            <option value="" disabled selected>ALLOY WHEEL/ FORKS WHEEL/ KICKER START/SELF START/Digital Meter/Normal Meter/ OTHER</option>
                                        @foreach(\App\Models\Product::VEHICLETYPE as $key => $vtype)
                                            <option @if(old('vehicle_type') == $key) selected
                                                    @endif value="{{$key}}">{{$vtype}}</option>
                                        @endforeach
                                    </select>
                        </div>
                                    @error('vehicle_type')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
               </div><!--end vehicle type-->

               <div class="row">
                 <div class="col-5">
                             <div class="form-group">
                                    <label for="hsn_code">HSN Code</label>
                             </div>
                 </div>
                 <div class="col-7">
                                    <input value="{{old('hsn_code')}}" type="text"
                                           class="form-control form-control-sm @error('hsn_code') is-invalid @enderror"
                                           placeholder="HSN Code" name="hsn_code" id="hsn_code">
                 </div>
                                    @error('hsn_code')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
            </div><!--end hsn-->

            <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="mrp">MRP</label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <input value="{{old('mrp')}}" type="text"
                                           class="form-control form-control-sm @error('mrp') is-invalid @enderror"
                                           placeholder="MRP" name="mrp" id="mrp">
                        </div>
                                    @error('mrp')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                 </div><!--mrp-->

                 <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="op_val">Op Val</label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <input value="{{old('op_val')}}" type="text"
                                           class="form-control form-control-sm @error('op_val') is-invalid @enderror"
                                           placeholder="Opening Value" name="op_val" id="op_val">
                        </div>
                                    @error('op_val')
                                    <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                    @enderror
                 </div><!--end op-->

             <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="supplier_pricing_desc">Supplier Pricing Desc %</label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <input value="{{old('supplier_pricing_desc')}}" type="text"
                                           class="form-control form-control-sm @error('supplier_pricing_desc') is-invalid @enderror"
                                           placeholder="Supplier Pricing Desc %" name="supplier_pricing_desc"
                                           id="supplier_pricing_desc">
                        </div>
                                    @error('supplier_pricing_desc')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
              </div><!--supplier-->

                
             <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="usage">Usage </label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <select id="usage" name="usage" class="form-control form-control-sm js-select2"
                                            style="width: 100%">
                                            <option value="" disabled selected>Fast Moving / Medium Moving/ Slow Moving</option>
                                        @foreach(\App\Models\Product::USAGE as $key => $usage)
                                            <option @if(old('usage') == $key) selected
                                                    @endif value="{{$key}}">{{$usage}}</option>
                                        @endforeach
                                    </select>
                        </div>
                                    @error('product_group_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
             </div><!--end usage-->
           

         <div class="row">  
                        <div class="col-5">
                                <div class="form-group">
                                    <label for="reorder_level">REORDER LEVEL</label>
                                </div>
                        </div>
                        <div class="col-7">
                                    <input value="{{old('reorder_level')}}" type="text"
                                           class="form-control form-control-sm @error('reorder_level') is-invalid @enderror"
                                           placeholder="REORDER LEVEL" name="reorder_level" id="reorder_level">
                        </div>
                                    @error('reorder_level')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                 </div><!--end reorder-->


                 </div><!--end thirdcoloumn-->
                  </div><!--end secondrow-->

                  <div class="row">  
                        <div class="col-2">
                                <div class="form-group">
                                    <label for="">Remark</label>
                                </div>
                        </div>
                        <div class="col-10">
                                    <textarea class="form-control form-control-sm @error('') is-invalid @enderror"
                                            name="remark" id="remark">
                                           
                                    </textarea>
                        </div>
                                    @error('reorder_level')
                                    <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                 </div><!--end remark-->

                  
                  <div class="row">
                            <div class="col-12">
                                <h5>App Entry</h5>
                                <hr>
                            </div>
                  </div>
                  <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <x-admin-input label="Select Sale Type" type="select" id="sale_type_id" name="sale_type_id" class="js-select2" >
                                        @foreach($saleTypes as $type)
                                            <option value="{{$type->id}}">{{$type->name}}</option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <x-admin-input type="number" label="Sale Price" id="sale-price" name="saleprice" step=".01" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button class="btn btn-success" type="submit">Create</button>

                    </div>
                </form>
            </div>
        </div>
                 </div>  
            <!-- /.card -->
        </div>
    </div>
    
    <datalist id="rack_list">
        @foreach($datalist['rackList'] as $rack)
            <option>{{$rack->rack_no}}</option>
        @endforeach
    </datalist>
    <datalist id="box_list">
        @foreach($datalist['boxList'] as $box)
            <option>{{$box->box_no}}</option>
        @endforeach
    </datalist>
    <datalist id="model_year_list">
        @foreach($datalist['modelYearList'] as $modelYear)
            <option>{{$modelYear->model_year}}</option>
        @endforeach
    </datalist>
    <datalist id="color_list">
        @foreach($datalist['colorList'] as $color)
            <option>{{$color->color}}</option>
        @endforeach
    </datalist>
    <datalist id="size_list">
        @foreach($datalist['sizeList'] as $size)
            <option>{{$size->size}}</option>
        @endforeach
    </datalist>
@endsection

@section('css')

@endsection

@section('plugins.Select2', true)

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>

    <script src="{{asset('js/myfunc.js')}}"></script>
    <script>
        function attachCamera() {
            Webcam.set({
                dest_width: 640,
                dest_height: 480,
                height: 250,
                image_format: 'jpeg',
                jpeg_quality: 90,
                force_flash: false
            });

            Webcam.attach('#my_camera');
        }


        function take_snapshot(image_selector, input_selector) {
            Webcam.snap(function (data_uri) {
                $(input_selector).val(data_uri);
                $(image_selector).attr("src", data_uri)
            });
        }

        let ajaxurl = '{{route('admin.models.ajax')}}'
        let ajaxurl2 = '{{route('admin.products.ajax')}}'

        function getModels() {
            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {'company_id': $('#company').val()},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function (res) {
                return JSON.parse(res)
            }).done(function (json) {
                let html = ''
                json.forEach(function (row) {
                    html += '<option value="' + row.id + '">' + row.model + '</option>'
                })
                $('#model').html(html)
                generateDesc()
            })
        }
function generateDesc() {
	const ParentCategory = $('#product_group_id option:selected').html()
    const Category = $('#product_type_id option:selected').html()
    const Company = $('#company option:selected').html()
    const Model = $('#model option:selected').html()
    const productName = $('#product_name').value()
  
    const desc = `${ParentCategory} ${Category} ${Company} ${Model} ${productName}`
    $('#desc').val(desc)

}



        $(document).ready(function () {
            getModels()
            
            $('#company').on('change', function () {
                getModels()

            })
        })
            $(document).ready(function () {
            
            generateDesc()
            $('#product_group_id').on('change', function () {
               generateDesc()
            })
            $('#product_type_id').on('change', function () {
               generateDesc()
            })
            $('#model').on('change', function () {
               generateDesc()
            })
            
            $('#product_name').on('keyup', function () {
               generateDesc()
            })
            $('.js-select2').select2({
                width: '100%'
            });

            $('.image-select').on('change', function () {
                const $img = $(this).attr('data-img');
                window.readURL(this, $img)
            });
        });
        $(document).ready(function () {
            $('.refresh-button').on('click', function () {
                let type = $(this).attr('data-type')
                toastr.info('Refreshing...')
                $.ajax({
                    url: ajaxurl2,
                    type: "POST",
                    data: {type: type},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                }).then(function (res) {
                    return JSON.parse(res)
                }).done(function (json) {
                    let html = ''
                    json.data.forEach(function (row) {
                        html += '<option value="' + row.id + '">' + row.name + '</option>'
                    })
                    $('#' + json.type).html(html);
                    if (json.type == 'company') {
                        getModels()
                    }
                    toastr.success('Refreshed')
                })
            })
        });
        
    </script>
@endsection