@extends('inventory.layout') 
@section('title', 'Add Enquiry')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css">
        <style type="text/css">
            .gsterror{
                color: red;
            }
            .emailerror{
                color: red;
            }
            .gstverify{
                color: #4b9732;
            }
            .protable{
                overflow-x: auto;
            }
        </style>
    @endpush

    
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-user-plus bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{ __('Add Enquiry')}}</h5>
                            <span>{{ __('Create new Enquiry')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{url('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">{{ __('Add Enquiry')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <form class="forms-sample" method="POST" action="{{ route('enquiry.store') }}" enctype= multipart/form-data id="clientform">
        @csrf
        @include('include.message')

            <div class="row">
                <!-- start message area-->
                
                <!-- end message area-->
                <div class="col-md-12">
                    <div class="card ">
                        <div class="card-header">
                            <strong><h3>{{ __('Basic Information')}}</h3></strong>
                        </div>
                        <div class="card-body">
                            
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                       <label class="d-block">Client Name (Company Name)<span class="text-red">*</span></label>
                                       

                                        <select class="form-control select2" name="client" id="clientdetail" data-url="{{url('searchclient')}}" required="">
                                            <option value="">Select Client</option>
                                            @foreach($clients as $client)
                                            
                                            <option value="{{$client->first_name.' '.$client->last_name .'-'.$client->company_name.'-'.$client->citydetail->name}}" data-id="{{$client->id}}">{{$client->first_name.' '.$client->last_name .'-'.$client->company_name.'-'.$client->citydetail->name}}</option>
                                            @endforeach
                                        </select>
                                        {{-- <input id="client_name" type="text" class="form-control" name="client_name" value="{{old('client_name')}}" placeholder="Enter Client Name"> --}}
                                    </div>
                                </div>
                                <div class="col-sm-6">  
                                    <div class="form-group">

                                        <label>Corporate Name (Company Name )<span class="text-red">*</span></label>
                                        <select class="form-control select2" name="corporate_name" id="corpdetail" data-url="{{url('corporatesearch')}}" required="">
                                        <option value="">Select Corporate</option>
                                        @foreach($corporates as $corporate)
                                        <option value="{{$corporate->first_name.' '.$corporate->last_name .'-'.$corporate->company_name.'-'.$corporate->citydetail->name}}" data-id="{{$corporate->id}}">{{$corporate->first_name.' '.$corporate->last_name .'-'.$corporate->company_name.'-'.$corporate->citydetail->name}}</option>
                                        @endforeach
                                        </select>
                                        <!-- <input id="corporate_name" type="text" class="form-control" name="corporate_name" value="" placeholder="Enter Corporate Name"> -->
                                            

                                    </div>
                                </div>
                                <div class="col-sm-6">    
                                        <div class="form-group">
                                            <label for="first_name">Client Quotation Number</label>
                                            <input id="first_name" type="text" class="form-control" name="client_quotation_number" value="" placeholder="Enter Client Quotation Number" >
                                            <div class="help-block with-errors"></div>


                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="middle_name">Email Received from<span class="text-red">*</span></label>
                                            <input id="middle_name" type="text" class="form-control" name="email_received_from" value="" placeholder="Enter Email" required="">
                                            


                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="last_name">Email Received On (Date)<span class="text-red">*</span></label>
                                            <input id="last_name" type="date" class="form-control" name="email_received_date" value="" placeholder="Enter Email Received On" required="">
                                            


                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="email">Sales and Procurement Specialist</label>
                                            
                                            <select  class="form-control sales" name="sales_procurement_specialist" id="sales" >

                                                <option value="">Select Sales Specialist</option> 
                                                @foreach($users as $user)
                                                    @if($user->id==$user_id)
                                                        <option value="{{$user->user_code}}" selected>{{$user->name}}</option> 
                                                    @else
                                                        <option value="{{$user->user_code}}" >{{$user->name}}</option> 
                                                    @endif
                                                @endforeach
                                                
                                                </select>
                                                        
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="user_id">User ID</label>
                                            <input id="user_id" type="text" class="form-control userid" name="user_id" value="{{$user->user_code}}" placeholder="Enter User ID" readonly>
                                           
                                        </div>
                                    </div>
                                    
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="location">Location</label>
                                            <select  class="form-control location" name="location" id="location" >

                                                <option value="">Select Location</option> 
                                                 
                                                <option value="single">Single</option> 
                                                <option value="multiple">Multiple</option> 
                                                
                                            </select>
                                           
                                        </div>
                                    </div>

                                
                            </div>
                            
                           
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!-- start message area-->
                
                <!-- end message area-->
                <div class="col-md-6">
                    <div class="card ">
                        
                        <div class="card-body">
                            <div class="form-group">
                                <label for="client_code">Client Code</label>

                                <input type="hidden" class="clientid" name="client_id" value="">

                                <!-- <input id="Client_Name" type="hidden" class="form-control client" name="client_name" value="" placeholder="Enter Client Name" readonly=""> -->

                                <input id="client_code" type="text" class="form-control client_code" name="client_code" value="" placeholder="Enter Client Code" readonly>
                                
                            </div>       
                        
                        
                            <div class="form-group">
                                <label class="d-block">Client (Contact Person)</label>
                                <input id="contact_person" type="text" class="form-control contact_person client" name="contact_person" value="" placeholder="Enter Contact Person" readonly>
                            </div>
                        
                            <div class="form-group">
                                <label class="d-block">Email</label>
                                <input id="Email" type="text" class="form-control clemail" name="email" value="" placeholder="Enter Email" readonly>
                            </div>

                            <div class="form-group">
                                <label class="d-block">Mobile</label>
                                <input id="Mobile" type="text" class="form-control clmobile" name="mobile" value="" placeholder="Enter Mobile" readonly>
                            </div>

                            <div class="form-group">
                                <label class="d-block">Landline</label>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <input type="hidden" name="countl_code" id="countl_code" value="">
                                        <input id="city_code" type="text" class="form-control" name="city_code" style="width:200px;" value="" placeholder="Enter STD Code" maxlength="5" readonly>
                                    </div>
                                    <div class="col-sm-6">
                                        <input id="company_name" type="text" class="form-control cllandline" name="landline" value="" placeholder="Enter Landline" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="d-block">Company Name</label>
                                <input id="company_name" type="text" class="form-control company_name" name="company_name" value="" placeholder="Enter Company Name" readonly>
                            </div>
                        

                            <div class="form-group">
                                <label>Address Line 1</label>
                                <textarea class="form-control address_1" name="client_address_line1" rows="2" readonly></textarea>

                            </div>

                            <div class="form-group">
                                <label>Address Line 2</label>
                                <textarea class="form-control address_2" name="client_address_line2" rows="2" readonly></textarea>

                            </div>
                        
                            <div class="form-group">
                                <label for="state">State</label>
                                <select  class="form-control clstate" name="client_state_id" id="tradestate" data-url="{{route('getCity')}}" readonly>

                                    <option value="">Select State</option> 
                                        @foreach($states as $state)
                                            <option value="{{$state->id}}">{{$state->name}}</option> 
                                         @endforeach
                                    
                                    </select>
                                <div class="help-block with-errors"></div>
                            </div>
                       

                            <div class="form-group">
                                <label for="city">City</label>
                                <select  class="form-control clcity" name="client_city_id" id="tradecity" readonly>
                                            
                                </select>
                                <div class="help-block with-errors"></div>
                            </div>

                                  

                            <div class="form-group">
                                <label for="pincode">Pincode</label>
                                <input id="pincode" type="text" class="form-control clpincode" name="pincode" value="" placeholder="Enter Pincode" readonly>
                                
                            </div>
                      
                            <div class="form-group">
                                <label for="country">Country</label>
                                <select  class="form-control clcountry" name="client_country_id" id="country" readonly>
                                    <option value="">Select Country</option> 
                                        @foreach($countries as $country)
                                        @if($country->id==99)
                                        <option value="{{$country->id}}" selected="selected">{{$country->name}}</option>
                                        @else
                                            <option value="{{$country->id}}">{{$country->name}}</option>
                                        @endif 
                                        @endforeach
                                    
                                    </select>
                            </div>
                                        
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card ">
                        
                        <div class="card-body">
                                        
                                
                                        <div class="form-group">
                                            <label for="corporate_id">Corporate code</label>
                                            <input type="hidden" name="corporate_id" class="corpid" value="">
                                             <input id="corporate_id" type="text" class="form-control corpcode" name="corporate_code" value="" placeholder="Enter Corporate Id" readonly>
                                            
                                        </div>

                                        <div class="form-group">
                                        <label class="d-block">Corporate (Contact Person)</label>
                                        <input id="corp_contact_person" type="text" class="form-control corpname" name="corp_contact_person" value="" placeholder="Enter Corporate Contact Person" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block">Email</label>
                                        <input id="Email" type="text" class="form-control coemail" name="corporate_email" value="" placeholder="Enter Email" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block">Mobile</label>
                                        <input id="Mobile" type="text" class="form-control comobile" name="corporate_mobile" value="" placeholder="Enter Mobile" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block">Landline</label>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <input type="hidden" name="countl_code" id="countl_code" value="">
                                                <input id="corp_city_code" type="text" class="form-control" 
                                                name="corp_city_code" style="width:200px;" value="" placeholder="Enter STD Code" maxlength="5" readonly>
                                            </div>
                                            <div class="col-sm-6">
                                                <input id="corporate_landline" type="text" class="form-control colandline" name="corporate_landline" value="" placeholder="Enter Landline" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="d-block">Company Name</label>
                                        <input id="company_name" type="text" class="form-control corpcompany" name="corporate_company_name" value="{{old('company_name')}}" placeholder="Enter Company Name" readonly>
                                    </div>

                                    

                                    <div class="form-group">
                                        <label>Address Line 1</label>
                                        <textarea class="form-control coaddress" name="corporate_address_line1" rows="2" readonly></textarea>

                                    </div>

                                    <div class="form-group">
                                        <label>Address Line 2</label>
                                        <textarea class="form-control coaddress_2" name="corporate_address_line2" rows="2" readonly></textarea>

                                    </div>

                                    <div class="form-group">
                                        <label for="state_id">State</label>
                                        <select  class="form-control costate" name="corporate_state_id" id="corporate_id" data-url="{{route('getCity')}}" readonly>

                                            <option value="">Select State</option> 
                                                @foreach($states as $state)
                                                    <option value="{{$state->id}}">{{$state->name}}</option> 
                                                 @endforeach
                                            
                                            </select>
                                            
                                    </div>

                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <select  class="form-control cocity" name="corporate_city_id" id="secondarycity" readonly>
                                               <option value="">Select City</option> 
                                                    @foreach($cities as $city)
                                                        <option value="{{$city->id}}">{{$city->name}}</option> 
                                                     @endforeach 
                                            </select>
                                            
                                        </div>

                                        <div class="form-group">
                                            <label for="secondpincode">Pincode</label>
                                            <input id="secondpincode" type="text" class="form-control copincode" name="corporate_pincode" value="" placeholder="Enter Pincode" readonly>
                                            <div class="help-block with-errors"></div>
                                        </div>  

                                        <div class="form-group">
                                            <label for="country">Country</label>
                                            <select  class="form-control cocountry" name="corporate_country_id" id="corp_country" readonly>
                                                <option value="">Select Country</option> 
                                                    @foreach($countries as $country)
                                                    @if($country->id==99)
                                                    <option value="{{$country->id}}" selected="selected">{{$country->name}}</option>
                                                    @else
                                                        <option value="{{$country->id}}">{{$country->name}}</option>
                                                    @endif 
                                                    @endforeach
                                                
                                            </select>
                                        </div>      
                        </div>
                    </div>
                </div>
            </div>

        <div class="protable">
            <table class="table" id="producttable" width="100%">
                <thead>
                    <tr>
                        <th style="width:1%"></th>
                        <th title="Field #1" style="width:15%">Client Product Description<span class="text-red">*</span></th>
                        <th title="Field #2" style="width:5%">Customer UOM<span class="text-red">*</span></th>
                        <th title="Field #3" style="width:10%">Quantity<span class="text-red">*</span></th>
                        <th title="Field #4" style="width:15%">Product<span class="text-red">*</span></th>
                        <th title="Field #5" style="width:10%">Image</th>
                        <th title="Field #6" style="width:10%">Product Group</th>
                        <th title="Field #7" style="width:10%">Product Category</th>
                        <th title="Field #8" style="width:10%">Product Sub Category</th>
                        <!-- <th width="8%">Remove</th> -->
                        <th title="Field #9" style="width:10%">Product Specification</th>
                        <th title="Field #10" style="width:10%">Product Name</th>
                        <th title="Field #11" style="width:15%">UOM</th> 
                        <th title="Field #12" style="width:15%">Remarks</th> 

                    </tr>
                </thead>
                <tbody>
                
                    <tr id="1" class="inventoryadjust" > 
                        <td></td>
                        <td>
                            <textarea class="form-control" id="search_selected" name="customer_product_description[]" rows="2"     style="width: 125px;height: 82px;" required=""></textarea>
                            
                        </td>
                        <td>
                            <select  class="form-control customeruom" name="customer_UOM[]" id="customeruom" style="width:100px;" required="">

                                    <option value="">Select UOM</option> 
                                        @foreach($measurements as $measurement)
                                            
                                            <option value="{{$measurement->id}}">{{$measurement->name}}</option> 
                                            
                                        @endforeach
                                    
                                </select>
                             
                        </td>
                        <td>
                           <input type="number" name="quantity[]" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" value="" min="1" style="width:100px;" required=""> 
                        </td>
                        <td>
                            <select class="form-control select2" name="product[]" id="productdetail" data-url="{{url('searchproduct')}}" data-publicurl="{{url('/')}}" required="">
                                <option value="">Select Product</option>
                                @foreach($products as $product)
                                
                                <option value="{{$product->name.'-'.$product->brand.'-'.$product->model_details.'-'.$product->color.'-'.$product->size.'-'.$product->description}}" data-id="{{$product->id}}">{{$product->name.'-'.$product->brand.'-'.$product->model_details.'-'.$product->color.'-'.$product->size.'-'.$product->description}}</option>
                                @endforeach
                            </select>
                            
                        </td>
                        <td>
                            <input type="hidden" id="product_id" name="product_id[]"  class="form-control product_id" placeholder="Product Id">

                            <input type="hidden" name="image[]" class="imgval">
                            <img src="{{url('img/Image.png')}}" alt="" id="output_image"  class="img" style="width: 100px; height: 70px;object-fit: contain;border: 1px solid #dbdbdb;">
                        </td>
                        
                        <td>
                            <input type="hidden" id="progroup" name="product_group_id[]"  class="form-control parentcat" placeholder="Product Group"  autocomplete="off">

                            
                            <textarea class="form-control parentname" id="groupname" name="product_group[]" rows="2" style="width: 100px;height: 82px;" readonly></textarea>

                            
                        </td>
                        <td>

                            

                            <div class="pcatappend"></div>

                            <textarea class="form-control subcat" id="search_selected" name="product_category_name[]" rows="2" data-url="{{url('/')}}" style="width: 100px;height: 82px;" readonly></textarea>
                            
                                       
                        </td>
                        <td>
                           

                            <div class="childcatappend"></div>

                            

                           <textarea class="form-control prosubcat" id="search_selected" name="product_subcategory_name[]"  id="prosubcat" rows="2" data-url="{{url('/')}}" style="width: 100px;height: 82px;" readonly></textarea>
                            
                        </td>
                        <td>
                            <textarea class="form-control spec" name="product_specification[]" rows="2" id="spec" style="width: 100px;height: 82px;" readonly></textarea>
                        </td>
                        <td>
                            <input id="title" type="text" class="form-control proname" name="product_name[]" value="" placeholder="Enter  Product Name" style="width:100px;" readonly>
                             <input id="title" type="hidden" class="form-control product_code" name="product_code[]" value="" placeholder="Enter  Product Code" >
                        </td>
                        
                        <td>
                           
                                <select  class="form-control measurement" name="UOM[]" id="measurement" style="width:100px;" readonly>

                                    <option value="">Select UOM</option> 
                                        {{--@foreach($measurements as $measurement)
                                            
                                            <option value="{{$measurement->id}}">{{$measurement->name}}</option> 
                                            
                                        @endforeach--}}
                                    
                                </select>
                        </td>
                        
                        <td>
                            <textarea class="form-control remarks" name="remarks[]" rows="2" id="remarks" style="width: 100px;height: 82px;"></textarea>
                        </td>
                        
                        <!-- <td > <label></label><a href="javascript:;" data-count_val="" class="deleterow"><i class="ik ik-trash-2 f-16 text-red"></i></a></td> -->

                    </tr>
               
                </tbody>
            </table>
            <div >
                <input type="button" id="addrow" value="Add Row" class="btn btn-info addrow" data-url="{{url('/')}}" data-products="{{isset($products) ? $products:''}}" data-measurement="{{isset($measurements) ? $measurements:''}}">
            </div>
        </div>


            <div class="row">
                <!-- start message area-->
                
                <!-- end message area-->
                <div class="col-md-12">
                    <div class="card ">
                        <div class="card-body">
                            <div class="col-md-12" style="text-align: center;">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">{{ __('Submit')}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </form>
    </div>
    <!-- push external js -->
    @push('script') 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">

    var route = "{{ url('searchclient') }}";
    $('#client_name').typeahead({
            source: function (query, process) {
                return $.get(route, {
                    query: query
                }, function (data) {
                    console.log(data);
                    return process(data);
                });
            }
        });
    
    </script>

    
<script type="text/javascript">
function selectRefresh() {
  $('.tradepro .select2').select2({
    
    tags: false,
    placeholder: "Select an Option",
    allowClear: true,
    width: '100%'
  });
}
    $("#addrow").click(function() {
    //console.log(counter);
    var row ='';
    var count = $("#producttable>tbody tr").length;
    //console.log(count);
    var counter=count+1;
    //console.log(counter);
    var products=$(this).data('products');

    var measurements=$(this).data('measurement');

    var url=$(this).data('url');

    row +=  '<tr id="'+ counter +'" class="inventoryadjust">';
    row +=  '<td>';
    row +=  '</td>';
    row +=  '<td>';
    row +=  '<textarea class="form-control" id="search_selected" name="customer_product_description[]" rows="2" style="width: 125px;height: 82px;" required=""></textarea>';
    row +=  '</td>';

    row+=   '<td>';
    row+=   '<select  class="form-control customeruom" name="customer_UOM[]" id="customeruom" style="width:100px;" required="">';
    row+='<option value="">Select UOM</option>';
        $.each(measurements, function(i, measurement) {

    row+='<option value="' + measurement.id +'">'+measurement.name+'</option>';
            
            });
                                    
    row +=  '</select>';
    row +=  '</td>';

    row +=  '<td>';
    row +=  '<input type="number" name="quantity[]" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" min="1"  value=""style="width:100px;" required=""> ';
    row +=  '</td>';
    row+=   '<td>';
    row+= '<div class="tradepro">';
    row+='<select class="form-control select2" name="product[]" id="productdetail_'+counter+'" required="">';
    row+='<option value="">Select Product</option>';
            $.each(products, function(i, product) {

    row+='<option value="' + product.name +'-'+ product.brand +'-'+ product.model_details +'-'+product.color+'-'+ product.size+'-'+ product.description+'" data-id="'+product.id+'">'+product.name +'-'+ product.brand +'-'+ product.model_details +'-'+product.color+'-'+ product.size+'-'+ product.description+'</option>';
            
            });

    row+='</select>';
    row+= '</div>';
    row += '</td>';

    row+= '<td>';
    row+= '<input type="hidden" id="product_id" name="product_id[]"  class="form-control product_id" placeholder="Product Id" >';
     row+='<input id="title" type="hidden" class="form-control product_code" name="product_code[]" value="" placeholder="Enter  Product Code" >';

    row+='<input type="hidden" name="image[]" class="imgval">';

    row+= '<img src="'+url+'/img/Image.png'+'" alt="" id="output_image" class="img"  style="width: 100px; height: 70px;object-fit: contain;border: 1px solid #dbdbdb;">';
    row += '</td>';

    row+= '<td>';
    row+= '<input type="hidden" id="progroup" name="product_group_id[]"  class="form-control parentcat" placeholder="Product Group" style="width: 100px;height: 82px;" autocomplete="off">';
    
    row+='<textarea class="form-control parentname" id="groupname" name="product_group[]" rows="2" style="width: 100px;height: 82px;"readonly></textarea>';

    //row+= '<input type="text" id="groupname" name="product_group_name[]"  class="form-control parentname" placeholder="Product Group"  autocomplete="off">';
    row +='</td>';

    row+= '<td>';
    row+= '<select class="form-control select2 subcategory" id="procat" name="product_category_id[]" multiple="multiple" data-url="'+url+'" style="display:none;">';
    row+= '</select>';

    row+= '<textarea class="form-control subcat" id="search_selected" name="product_category_name[]" rows="2" data-url="'+url+'" style="width: 100px;height: 82px;" readonly></textarea>';

    row+= '</select>';
    row +='</td>';

    row+= '<td>';
    row+= '<select class="form-control select2 prochild" id="prochild" name="product_subcategory_id[]" multiple="multiple" style="display:none;">';
    row+= '</select>';

   row+= '<textarea class="form-control prosubcat" id="search_selected" name="product_subcategory_name[]"  id="prosubcat" rows="2" data-url="{{url('/')}}" style="width: 100px;height: 82px;" readonly></textarea>';

    row +='</select>';
    row +='</td>';

    row+=   '<td>';
    row+=   '<textarea class="form-control spec" name="product_specification[]" rows="2" style="width: 100px;height: 82px;" readonly></textarea>';
    
    row +=  '</td>';

    row+=   '<td>';
    row+=   '<input id="title" type="text" class="form-control proname" name="product_name[]" value="" placeholder="Enter Product Name" style="width:100px;" readonly>';
    row +=  '</td>';

    row+=   '<td>';
    row+=   '<select  class="form-control measurement" name="UOM[]" id="measurement" style="width:100px;" readonly>';
    row+='<option value="">Select UOM</option>';
        /*$.each(measurements, function(i, measurement) {

    row+='<option value="' + measurement.id +'">'+measurement.name+'</option>';
            
        });  */          
    row+=   '</select>';
    row +=  '</td>';
    
    row +=  '<td>';
    row +=  '<textarea class="form-control remarks" name="remarks[]" rows="2" id="remarks" style="width: 100px;height: 82px;"></textarea>';
    row +=  '</td>';
    
    
    row +=  '</tr>';

    $('.inventoryadjust:last').after(row);

    $('#productdetail_'+counter+'').change(function() { 
            //alert('gnjghjgh');
            var scope = $(this).closest('tr'); 
            var url=$('#productdetail').data('url');
            var publicurl=$("#addrow").data('url');
            var id=scope.find('#productdetail_'+counter+' option:selected').data('id');
            console.log(publicurl);
            console.log(id);
             $.ajax({
                    url:url,
                    type:'GET',
                    data:{'id':id},
                    success:function(res){
                        console.log(res);   
                       scope.find('.product_id').val(res.pro.id);
                        //$('.client').val(res.client.first_name);
                        scope.find('.product_code').val(res.pro.product_code);

                        jQuery.each(res.pro.productcategory, function(index, value){

                        var cat = scope.find('.parentname').val(value.parentgroup.name);
                        var pcategory = scope.find('.parentcat').val(value.parentgroup.id);
                        });

                        var subcat=scope.find('.subcat');
                        var subcategory=scope.find('.subcategory');
                        subcategory.find('option').remove();
                       
                        jQuery.each(res.parentcategory, function(index, value){
                           
                            subcategory.append($("<option value="+value.id+" selected='true'>"+value.name+"</option>"));
                            if(index==0) {
                               
                                subcat.append(value.name); 
                            }else{
                               
                                subcat.append(','+value.name);
                            }
                        });
                        
                            

                            var prosubcat=scope.find('.prosubcat');
                            //
                            var prochild=scope.find('.prochild');
                            prochild.find('option').remove();

                        jQuery.each(res.childcategory, function(index, value){
                            
                                prochild.append($("<option value="+value.id+" selected='true'>"+value.name+"</option>")); 
                                
                                if (index==0) {
                                       
                                     prosubcat.append(value.name); 
                                 }else{
                                     
                                    prosubcat.append(','+value.name);
                                 }
                            
                            });

                        
                        scope.find('.proname').val(res.pro.name);

                        scope.find('.spec').val(res.pro.model_details);

                        var uom = scope.find('.measurement');
                        
                        jQuery.each(res.measurements, function(index, value){
                            
                            if(value.id == res.pro.measurement_id){ 
                                uom.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }
                            /*else{
                                uom.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }*/
                        });

                        var uomval=scope.find('.measurement option:selected').val();
                        console.log(uomval);

                        var cusuom=scope.find('.customeruom option:selected').val();
                        console.log(cusuom);

                        if(cusuom!=uomval){
                            scope.focus().css('color','red');
                            scope.find('.parentname').focus().css('color','red');
                            scope.find('.subcat').focus().css('color','red');
                            scope.find('.prosubcat').focus().css('color','red');
                            scope.find('.proname').focus().css('color','red');
                            scope.find('.spec').focus().css('color','red');
                            
                            
                        }
                        else{
                            //console.log('else');
                            scope.focus().css('color','black');
                            scope.find('.parentname').focus().css('color','black');
                            scope.find('.subcat').focus().css('color','black');
                            scope.find('.prosubcat').focus().css('color','black');
                            scope.find('.proname').focus().css('color','black');
                            scope.find('.spec').focus().css('color','black');
                        }

                        scope.find('.imgval').val(res.pro.image);

                        var detailUrl=publicurl+'/images/upload/item/'+res.pro.image;
                        //console.log(detailUrl);
                        scope.find("img#output_image").attr('src' , detailUrl);
                           
                    }
                });
    });
    
    selectRefresh();

    });

    
    
</script>
<!-- <script>
    $(document).on('click', '.deleterow', function(event) {
        //event.preventDefault();
        alert('ghgfhf');
        $($(this).closest("tr")).remove();
        
    });
</script> -->
    <script type="text/javascript">
        $(function () {
        $('#dropify').dropify();
        });
    </script>
    <!-- image -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/css/intlTelInput.css" rel="stylesheet" media="screen">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"></script>
<script type="text/javascript">
    $(".clmobile").intlTelInput({

  separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});

    
    $(".comobile").intlTelInput({

  separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});

    

    $('#city_code').intlTelInput({
    separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});
 
 $('#corp_city_code').intlTelInput({
    separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});
</script>
    <script>
    
$(document).ready(function(){
            var id=$('.sales option:selected').val();
            //console.log(id);
            $('.userid').val(id);
        });
        
        $('#clientdetail').change(function() { 
            //alert('gnjghjgh');
            var url=$(this).data('url');
            var id=$('#clientdetail option:selected').data('id');
            console.log(url);
            console.log(id);
             $.ajax({
                    url:url,
                    type:'GET',
                    data:{'id':id},
                    success:function(res){
                        console.log(res);   
                        $('.clientid').val(res.client.id);
                        $('.client').val(res.client.first_name);
                        $('.client_code').val(res.client.client_code);
                        $('.company_name').val(res.client.company_name);

                        $('.clemail').val(res.client.email);
                        $('.clmobile').val(res.client.mobile);
                        $('#city_code').val(res.client.city_code);
                        $('.cllandline').val(res.client.landline);

                        $('.address_1').val(res.client.address);
                        $('.address_2').val(res.client.address_1);

                        //var state='';
                        //state+='<option value="'+res.statedetail.id+'">'+res.statedetail.name+'</option>';

                        var $select = $('.clstate');
                        $select.find('option').remove();

                        jQuery.each(res.states, function(index, value){

                            if(value.id == res.client.statedetail.id){ 
                                $select.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $select.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });


                        var $selectcity = $('.clcity');
                        $selectcity.find('option').remove();

                        jQuery.each(res.cities, function(index, value){

                            if(value.id == res.client.citydetail.id){ 
                                $selectcity.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $selectcity.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });

                        $('.clpincode').val(res.client.pincode);

                        var $country = $('.clcountry');
                        $country.find('option').remove();

                        jQuery.each(res.countries, function(index, value){

                            if(value.id == res.client.countrydetail.id){ 
                                $country.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $country.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });



                        /*$('.clstate').append(
                              $.map(selectValues, (v,k) => $("<option>").val(res.statedetail.id).text(res.statedetail.name))
                              // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
                            );*/
                        //append($('<option>').val(res.statedetail.id).text(res.statedetail.name));
                        //$('.clstate').append('<option value="'+res.statedetail.id+'">'+res.statedetail.name+'</option>');
                        
                        
                        
                        
                        
                    }
                });
        });

        $('#corpdetail').change(function() { 
            //alert('gnjghjgh');
            var url=$(this).data('url');
            var id=$('#corpdetail option:selected').data('id');
            console.log(url);
            console.log(id);
             $.ajax({
                    url:url,
                    type:'GET',
                    data:{'id':id},
                    success:function(res){
                        console.log(res);   

                        /*$('.client').val(res.first_name);*/
                        
                        $('.corpid').val(res.corp.id);
                        $('.corpcode').val(res.corp.corporate_code);
                        $('.corpname').val(res.corp.first_name);
                        $('.corpcompany').val(res.corp.company_name);

                        $('.coemail').val(res.corp.email);
                        $('.comobile').val(res.corp.mobile);
                        $('#corp_city_code').val(res.corp.city_code);
                        $('.colandline').val(res.corp.landline);

                        $('.coaddress').val(res.corp.address);
                        $('.coaddress_2').val(res.corp.address_1);

                        var $select = $('.costate');
                        $select.find('option').remove();

                        jQuery.each(res.states, function(index, value){

                            if(value.id == res.corp.statedetail.id){ 
                                $select.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $select.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });

                        var $selectcity = $('.cocity');
                        $selectcity.find('option').remove();

                        jQuery.each(res.cities, function(index, value){

                            if(value.id == res.corp.citydetail.id){ 
                                $selectcity.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $selectcity.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });

                        //$('.costate').val(res.address_1);
                        //$('.cocity').val(res.address_1);
                        $('.copincode').val(res.corp.pincode);
                        //$('.cocountry').val(res.address_1);
                        var $country = $('.cocountry');
                        $country.find('option').remove();

                        jQuery.each(res.countries, function(index, value){

                            if(value.id == res.corp.countrydetail.id){ 
                                $country.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }else{

                                $country.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }
                        });
                        
                    }
                });
        });

        $('.sales').change(function(){
            //alert('ghfhgf');
            var id=$('.sales option:selected').val();
            //console.log(id);
            $('.userid').val(id);
        });

        $('#productdetail').change(function() { 
            //alert('gnjghjgh');
            var scope = $(this).closest('tr'); 
            var url=$(this).data('url');
            var publicurl=$(this).data('publicurl');
            var id=$('#productdetail option:selected').data('id');
            //console.log(url);
            console.log(id);
             $.ajax({
                    url:url,
                    type:'GET',
                    data:{'id':id},
                    success:function(res){
                        console.log(res);
                        console.log(res.parentcategory);   
                        //console.log(res.selected_tags);
                        scope.find('.product_id').val(res.pro.id);
                        //$('.client').val(res.client.first_name);
                        scope.find('.product_code').val(res.pro.product_code);

                        jQuery.each(res.pro.productcategory, function(index, value){

                        var cat = scope.find('.parentname').text(value.parentgroup.name);
                        var cat = scope.find('.parentcat').val(value.parentgroup.id);
                        });

                        var subcat=scope.find('.subcat');
                        var subcategory=scope.find('.subcategory');
                        subcategory.find('option').remove();
                        //console.log(subcategory);
                        var pcat='';
                        //console.log(pcat);
                        pcat+='<select class="form-control select2 subcategory" id="procat" name="product_category_id[]" multiple="multiple"  style="display:none;">';

                        jQuery.each(res.parentcategory, function(index, value){
                            //alert(index);

                            pcat+='<option value='+value.id+'  selected="true">'+value.name+'</option>';

                           
                            if(index==0) {
                                
                                subcat.append(value.name); 
                            }else{
                                
                                subcat.append(','+value.name);
                            }
                        });
                        scope.find('.pcatappend').append(pcat);
                         pcat+='</select>';
                            /*var pcat=value.id.split(",");
                               console.log(pcat);*/
                            //$subcat.text(pcat.name);
                            
                                //$subcat.append($("<option value="+value.id+" selected='true'>"+value.name+"</option>"));
                            
                            /*if(jQuery.inArray(value.id,parentcat)){
                                console.log('if');
                                $subcat.append($("<option value="+value.id+" selected='true'>"+value.name+"</option>")); 
                            }
                            else{
                                console.log('else');
                                $subcat.append($("<option value="+value.id+">"+value.name+"</option>")); 
                            }*/
                            

                            var prosubcat=scope.find('.prosubcat');
                            //
                            var prochild='';
                            //prochild.find('option').remove();

                            prochild+='<select class="form-control select2 prochild" id="prochild" name="product_subcategory_id[]" multiple="multiple" style="display:none;">';
                            

                        jQuery.each(res.childcategory, function(index, value){
                            
                                prochild+='<option value='+value.id+' selected="true">'+value.name+'</option>'; 
                                
                                if (index==0) {
                                       
                                     prosubcat.append(value.name); 
                                 }else{
                                     
                                    prosubcat.append(','+value.name);
                                 }
                            
                        
                            });
                        scope.find('.childcatappend').append(prochild);

                        prochild+='</select>'

                        

                        

                        scope.find('.proname').val(res.pro.name);

                        scope.find('.spec').val(res.pro.model_details);

                        

                        var uom = scope.find('.measurement');
                        //console.log($uom);
                        uom.find('option').remove();
                        
                        jQuery.each(res.measurements, function(index, value){
                            //console.log(value.parentcategory.id);
                            if(value.id == res.pro.measurement_id){ 

                                uom.append($("<option value="+value.id+" selected='selected'>"+value.name+"</option>"));
                            }
                            /*else{
                                uom.append($("<option value="+value.id+">"+value.name+"</option>"));
                            }*/
                        });

                        var uomval=$('.measurement option:selected').val();
                        console.log(uomval);

                        var cusuom=$('.customeruom option:selected').val();
                        console.log(cusuom);

                        if(cusuom!=uomval){
                            scope.focus().css('color','red');
                            scope.find('.parentname').focus().css('color','red');
                            scope.find('.subcat').focus().css('color','red');
                            scope.find('.prosubcat').focus().css('color','red');
                            scope.find('.proname').focus().css('color','red');
                            scope.find('.spec').focus().css('color','red');
                            
                            
                        }
                        else{
                            //console.log('else');
                            scope.focus().css('color','black');
                            scope.find('.parentname').focus().css('color','black');
                            scope.find('.subcat').focus().css('color','black');
                            scope.find('.prosubcat').focus().css('color','black');
                            scope.find('.proname').focus().css('color','black');
                            scope.find('.spec').focus().css('color','black');
                        }

                        scope.find('.imgval').val(res.pro.image);
                        var detailUrl=publicurl+'/images/upload/item/'+res.pro.image;
                        //console.log(detailUrl);
                        scope.find("img#output_image").attr('src' , detailUrl);
                           
                    }
                });
        });
        
        $(document).on('change', '.customeruom', function(event) {
        
        var scope = $(this).closest("tr");
        
        var customer=scope.find('.customeruom option:selected').val();
        //console.log(customer);
        
        //console.log(scope);
        var uom=scope.find('.measurement option:selected').val();
        //console.log(uom);
        if(customer!=uom){
            //console.log('if');
            scope.focus().css('color','red');
            scope.find('.parentname').focus().css('color','red');
            scope.find('.subcat').focus().css('color','red');
            scope.find('.prosubcat').focus().css('color','red');
            scope.find('.proname').focus().css('color','red');
            scope.find('.spec').focus().css('color','red');
                                   
        }
        else{
            //console.log('else');
            scope.focus().css('color','black');
            scope.find('.parentname').focus().css('color','black');
            scope.find('.subcat').focus().css('color','black');
            scope.find('.prosubcat').focus().css('color','black');
            scope.find('.proname').focus().css('color','black');
            scope.find('.spec').focus().css('color','black');
        }
});




    </script>  

     
    @endpush
@endsection