@include('plantillas.header')
					<!--begin::Content-->
					<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
						<!--begin::Subheader-->
						<div class="subheader py-2 py-lg-5 subheader-transparent" id="kt_subheader">
							<div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
								<!--begin::Info-->
								<div class="d-flex align-items-center flex-wrap mr-1">
									<!--begin::Heading-->
									<div class="d-flex flex-column">
										<!--begin::Title-->
										<h2 class="text-white font-weight-bold my-2 mr-5">{{ __('message.page_title_merge') }}</h2>
										<!--end::Title-->
										<!--begin::Breadcrumb-->
										
										<!--end::Breadcrumb-->
									</div>
									<!--end::Heading-->
								</div>
								<!--end::Info-->
							
							</div>
						</div>
						<!--end::Subheader-->
						<!--begin::Entry-->
						
					@php 
					if(isset($_GET['code'])){
					$code = $_GET['code'];
				
					}
					
					@endphp	
					<form action="{{URL('/createmergefields')}}" method="post" id="testform">  	
                 @csrf	
						<div class="d-flex flex-column-fluid">
							<!--begin::Container-->
							<div class="container">
								<!--begin::Dashboard-->
								<!--begin::Row-->
								<div class="row">
									<div class="col-xl-12">
										<!--begin::Tiles Widget 1-->
										<div class="card card-custom gutter-b card-stretch">
											<!--begin::Header-->
											<div class="card-header border-0 pt-5">
												<div class="card-title">
													<div class="card-label">
														<div class="font-weight-bolder"></div>
														
													</div>
												</div>
                
											<div class="card-toolbar">
            <!--begin::Button-->
              
            
            <button type="submit" style="background:#008AA7;border-color:#008AA7;" class="btn btn-primary font-weight-bolder">
                
                
             
                <span class="svg-icon svg-icon-md">
                    <!--begin::Svg Icon | path:/metronic/theme/html/demo2/dist/assets/media/svg/icons/Design/Flatten.svg-->
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"></rect>
                            <circle fill="#000000" cx="9" cy="15" r="6"></circle>
                            <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3"></path>
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                </span>{{ __('message.boton_guardar') }} 
                
                
                  </button> 
            <!--end::Button-->
           
                                    </div>
											</div>
											<!--end::Header-->
											<!--begin::Body-->
											
											<div class="card-body">
											     <div class="col-12">
        
        <!--h4>New Lead in Zoho CRM</h4-->
        
    </div>
    <div class="col-12">
      <div class="col col-xs-12 row" style="margin:0 0 20px 0 !important;background-color: whitesmoke;padding: 10px;">
			<div class="col-lg-1 col-xs-12">			
          <i style="font-size: 25px; margin-top: 10%;" class="fas fa-file-signature"></i>
          </div>	
          <div class="col-lg-11 col-xs-12">
          <span>{{ __('message.mensaje_ayuda_fields_p1') }} <br> {{ __('message.mensaje_ayuda_fields_p2') }} </span>
          </div>
        </div>
        
        <div class="col-12">
           @if($fields_required_zoho_count>0) 
         <div class="col-12">
           <h2 class="font-weight-bold my-2 mr-5">{{ __('message.campos_obligatorios') }}</h2>   
       </div>
       @endif
       <input type="hidden" name="cuenta_id" value="{{ $idcuenta ?? '' }}"> 
          @php $contador=1; @endphp   
         @foreach($fields_required_zoho as $fields_required_zoho)
        
        <div class="col-12">
          <div class="row">
            
            <div class="col-4">      
            <div class="form-group">
      <div class="col-12">
          <div class="row">
             
     <div class="col-6" style="position: relative;left: 25%;">  
    <label>{{ __('message.campos_rd') }}</label>
<fieldset id="select1">     
    <select  id="required1" class="form-control" name="name{{$contador}}[]" >
    @foreach($fields_rd as $fields_rd2)    
      <option value="{{$fields_rd2->id}}">{{$fields_rd2->label}}</option>
    @endforeach
    </select>
</fieldset>      
  </div> 
          </div>
          
          
      </div>
      
   </div>
            </div>
            
            <div style="text-align:center;" class="col-4">
         
          <i style="font-size:2.9rem;position: relative;top: 20%;" class="fa fa-arrows-h" aria-hidden="true"></i>
         
     </div>
     
   

      <div class="col-4">
         
          <div class="form-group">
      <div class="col-12">
          <div class="row">
             
     <div class="col-6" style="position: relative;left: 25%;">  
    <label>{{ __('message.campos_zoho') }}</label>
<fieldset id="select21">    
    <select class="form-control" readonly="readonly" name="name{{$contador}}[]" >
       
      <option value="{{$fields_required_zoho->id}}" >{{$fields_required_zoho->label}}</option>
    
    </select>
  </fieldset>    
  </div> 
          </div>
          
          
      </div>
      
   </div>
     </div>
          
          </div>      
                
            
        </div>
        @php $contador=$contador+1 @endphp 
        @endforeach    
   

        <div class="col-12">
    
    <div class="col-12">
           <h2 class="font-weight-bold my-2 mr-5">{{ __('message.nuevos_campos') }}</h2>
           
       </div>        
     <div class="row">
          <div class="col-4">
         
         <div class="form-group">
      <div class="col-12">
          <div class="row">
             
     <div class="col-6" style="position: relative;left: 25%;">  
    <label for="exampleFormControlSelect1">{{ __('message.campos_rd') }}</label>
<fieldset id="input{{$contador}}" class="clonedInput">     
    <select  id="name{{$contador}}" class="form-control" name="name{{$contador}}[]" >
    <option value="NULL">{{ __('message.nuevo_campo') }}</option>       
    @foreach($fields_rd as $fields_rd)    
      <option value="{{$fields_rd->id}}">{{$fields_rd->label}}</option>
    @endforeach
    </select>
</fieldset>      
  </div> 
          </div>
          
          
      </div>
      
   </div>
     </div>
     
      <div style="text-align:center;" class="col-4">
         
          <i style="font-size:2.9rem;position: relative;top: 20%;" class="fa fa-arrows-h" aria-hidden="true"></i>
         
     </div>
     
   

      <div class="col-4">
         
          <div class="form-group">
      <div class="col-12">
          <div class="row">
             
     <div class="col-6" style="position: relative;left: 25%;">  
    <label for="exampleFormControlSelect1">{{ __('message.campos_zoho') }}</label>
<fieldset id="input2{{$contador}}" class="clonedInput2">    
    <select  id="namez{{$contador}}" class="form-control" name="name{{$contador}}[]" >
    <option value="NULL">{{ __('message.nuevo_campo') }}</option>    
      @foreach($fields_zoho as $fields_zoho)    
      <option value="{{$fields_zoho->id}}">{{$fields_zoho->label}}</option>
    @endforeach
    </select>
  </fieldset>    
  </div> 
          </div>
          
          
      </div>
      
   </div>
     </div>
    
     
     </div>
    
     
    
   
</div>
 
<br>
<br>

   <div class="col-6" style="position: relative;left: 40%;">
      <fieldset>
      <label>{{ __('message.agregar_nuevo_campo') }}</label>
      <input type="button" class="btn btn-primary" id="btnAdd" value="+" />
      <input type="button" class="btn btn-primary" id="btnDel" value="-" />
   </fieldset>
        
    </div >
    
   
    
    
        </div>
        
        <br>
        
   
        
    </div>
										
									</div>
							
											<!--end::Body-->
									
										</div>
										<!--end::Tiles Widget 1-->
									</div>
									
								</div>
							
								<!--end::Dashboard-->
							</div>
							<!--end::Container-->
						</div>
						
				</form>		
						<!--end::Entry-->
					</div>
					<!--end::Content-->
					
    	
@include('plantillas.footer')	
<script>
 $(document).ready(function() {
 $( '#btnAdd' ).click( function() {
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		//var newNum	= new Number( num + 1 );		// the numeric ID of the new input field being added
		var num4= {{$contador}};
		var newNum = new Number( num + num4 );
		var newElem = $( '#input' + num4 ).clone().attr( 'id', 'input' + newNum );
		console.log(newNum);
		newElem.children( ':first' ).attr( 'id', 'name' + newNum ).attr( 'name', 'name' + newNum+'[]' );
		$( '#input' + num4 ).after( newElem );
		$( '#btnDel' ).attr( 'disabled', false );
	
		
		var num2 = $( '.clonedInput2' ).length;		// how many "duplicatable" input fields we currently have
		
		var num5 ={{$contador}};
		var newNum2	= new Number( num2 + num5);		// the numeric ID of the new input field being added
		var newElem2 = $( '#input2' + num5 ).clone().attr( 'id', 'input2' + newNum2 );
		
	    newElem2.children( ':first' ).attr( 'id', 'name' + newNum2 ).attr( 'name', 'name' + newNum2+'[]' );
	
		$( '#input2' + num5 ).after( newElem2 );
		$( '#btnDel' ).attr( 'disabled', false );
		
			
	});
	
	$( '#btnDel' ).click( function() {
		var num = $( '.clonedInput' ).length;		// how many "duplicatable" input fields we currently have
		var num4= {{$contador}};
		var num10= num+num4-1;
		console.log(num);
		console.log(num4);
		console.log(num10);
		
		$( '#input' + num10 ).remove();				// remove the last element
		$( '#btnAdd' ).attr( 'disabled', false );	// enable the "add" button
		
		// if only one element remains, disable the "remove" button
		if ( num-1 == 1 ){
			$( '#btnDel' ).attr( 'disabled', 'disabled' );
		    
		}
			
			
	    var num2 = $( '.clonedInput2' ).length;		// how many "duplicatable" input fields we currently have
	    var num5= {{$contador}};
		var num11= num2+num5-1;
		$( '#input2' + num11 ).remove();				// remove the last element
		$( '#btnAdd' ).attr( 'disabled', false );	// enable the "add" button
		
		// if only one element remains, disable the "remove" button
		if ( num2-1 == 1 )
			$( '#btnDel' ).attr( 'disabled', 'disabled' );
			
	});
			
	$( '#btnDel' ).attr( 'disabled', 'disabled' );

});
</script>