@extends('layout.index')
@section('title', 'Vendor Assign')
<!-- Dashboard Ecommerce start -->
<style>
    *{
        font-size: 15px;
    }
</style>

@section('content')

    <section>

        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0"> Field Executive</h2>
                        </div>
                    </div>
                </div>
                <!-- <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
                    <div class="mb-1 breadcrumb-right">
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb" style="justify-content: flex-end">
                                <li class="breadcrumb-item"><a href="#">Home</a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">Field Executive</a>
                                </li>
                                <li class="breadcrumb-item active"> Field Executive Vendors
                                </li>
                            </ol>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
       
        @if ($message != "")
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @endif
        {{-- @if ($message = Session::get('success'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @endif --}}
        
       
      
        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body"> 
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
    
                                            <label for="country">Master District<span style="color:red;">
                                                    *</span></label>
    
                                            <select name="district" id="district" class="form-control form-select" onchange="get_block(); get_village(); get_farmer();">
                                                {{-- <option value="">Select District</option> --}}
                                                    
                                            </select>
                                            <h5><small class="text-danger" id="district_err"></small></h5>
                                            @error('district')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
    
                                            <label for="country">Master Block<span style="color:red;">
                                                    *</span></label>
    
                                            <select name="block" id="block" class="form-control form-select" onchange="get_village(); get_farmer();">
                                                {{-- <option value="">Select Block</option> --}}
                                                    
                                            </select>
                                            <h5><small class="text-danger" id="block_err"></small></h5>
                                            @error('block')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
    
                                            <label for="country">Master Village<span style="color:red;">
                                                    *</span></label>
    
                                            <select name="village" id="village" class="form-control form-select" onchange="get_farmer();">
                                                {{-- <option value="">Select Village</option> --}}
                                                    
                                            </select>
                                            <h5><small class="text-danger" id="village_err"></small></h5>
                                            @error('village')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <form class="form" action="" method="post" enctype="multipart/form-data">
                                    <input type="hidden" name="form_type" value="fe_farmers">
                                    {{ csrf_field() }}

											<div class="row">
												<div class="col-xs-6 col-md-6">
													<div class="form-group">
														<table class="table">
															<thead>
                                                                <tr></tr>
															  <tr>
																<th scope="col"><label class="float-left" for="farmer_mapped" style="margin-top:5px">Vendors Mapped </label>
																</th>
															  </tr>
															</thead>
															<tbody>
                                                                <tr> 
                                                                    <td>
                                                                        <input type="checkbox" class="checkall" name="checkall" style="width: 20px; height: 20px;" value="checkall" onclick="check_all()">
                                                                        <label for="checkall"> Check All Vendors </label>
                                                                    </td>
                                                                </tr>
															    <tr>
                                                               
																<td id="farmers_list"> <!-- This cell spans across two columns for the checkboxes -->
																																		<h5 class="mt-3"><small class="text-danger" id="checkbox_err"></small></h5>
																	@error('checkbox')
																	<span class="error" style="color:red;">{{ $message }}</span>
																	@enderror
																</td>
                                                               
															</tr>
															</tbody>
														</table>
													</div>
                                                    <!-- <div class="row  align-items-center">
                                                        <div class="col-sm-5"><hr></div>
                                                        <div class="col-sm-2 text-center">
                                                            <p class="m-0 text-primary">OR</p>
                                                        </div>
                                                        <div class="col-sm-5"><hr></div>
                                                    </div> -->
												</div>

												<div class="col-12  ">
                                                  
                                                        <!-- <div class=" col-md-2 form-group">
                                                            <label for="fe_farmer_file">Upload Document </label>
                                                            <input type="file" id="fe_farmer_file" name="fe_farmer_file" class="form-control ">
                                                            @if ($errors->has('fe_farmer_file'))
                                                                <span class="text-danger">{{ $errors->first('fe_farmer_file') }}</span>
                                                            @endif
                                                            <h5><small class="text-danger" id="fe_farmer_file_err"></small></h5>
                
                                                        </div> -->
                                                        <div class="col-md-2 mt-2 text-center">
                                                            <button type="submit" class="btn btn-primary mr-1" >Submit</button>
                                                            <a href="{{ url('/field_executive') }}" type="reset"
                                                             class="btn btn-outline-secondary">Cancel</a>
                                                        </div>
                                                </div>
												
											</div>
                                          
											
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
              
			</section>
            <script>
                var clicked = false;
                function check_all() {
                    $(".checkbox").prop("checked", !clicked);
                    clicked = !clicked;
                
                    this.innerHTML = clicked ? 'Deselect' : 'Select';
                };
            
                var a_districts = [];
                var a_block = [];
                var a_village = [];
                var a_Farmer = [];
                var feId = ;

                var country_id=0;
             
                $(document).ready(function() {
            
                        get_district();
                        get_block();
                        get_village();
                        get_farmer();
                    
                });
                function get_district() {
            
                    var selectedCountry = country_id;
            
                    s_district_options = '<option value=0>Select district</option>';
                    $.each(a_districts, function(key, district_obj) {
                    
                    
                        if(country_id != 0 ){
                        
                        if(country_id != 0){
                                if( district_obj.country_id == country_id){
                                    s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+'  >' + district_obj.district_name +
                                '</option>'
                                }
                            }
                        }else{
                            s_district_options += '<option value=' + district_obj.id + '  country_id='+district_obj.country_id+' >' + district_obj.district_name +
                                '</option>'
                        }
                    })
                    $('#district').html(s_district_options);
            
                }
            
            
                function get_block() {
                    var district_id = $('#district').val();
            
                            var selectedCountry = country_id;
                
                    s_block_options = ' <option value=0>Select Block</option>';
                    $.each(a_block, function(key, block_obj) {
                        
                        if(country_id != 0 ||  district_id != 0){
                        if(district_id != 0){
                        
                            if(block_obj.country_id == selectedCountry && block_obj.district_id == district_id ){
                                s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                            '</option>'
                            }
                           
                        }else if(country_id != 0){
                            if( block_obj.country_id == country_id){
                            
                                s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                            '</option>'
                            }
                        }
                    }else{
                        s_block_options += '<option value=' + block_obj.id + '  country_id='+block_obj.country_id+' >' + block_obj.block_name +
                            '</option>'
                    }
                        
                    })
                    $('#block').html(s_block_options);
            
                }
            
                function get_village() {
            
                
                    var district_id = $('#district').val();
                    var block_id = $('#block').val();
            
                    var selectedCountry = country_id;
            
            
                        s_village_options = ' <option value=0>Select Village</option>';
                        $.each(a_village, function(key, village_obj) {
                        
                            if(country_id != 0 || state_id != 0 || district_id != 0 || block_id !=0){
                            
                                if(block_id != 0){
                                    
                                    if(village_obj.country_id == selectedCountry && village_obj.block_id == block_id){
                                    
                                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' >' + village_obj.village_name +
                                        '</option>'
                                    }
                              
                                
                                }else if(district_id != 0){
                                
                                  
                                    if(village_obj.country_id == selectedCountry && village_obj.district_id == district_id ){
                                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' >' + village_obj.village_name +
                                    '</option>'
                                    }
                               
                                }else if(country_id != 0){
                                    
                                    if( village_obj.country_id == country_id){
                                    
                                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' >' + village_obj.village_name +
                                        '</option>'
                                    }
                                }
                            
                            }else{
                                    s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' >' + village_obj.village_name +
                                        '</option>'
                            }
                    
                    })  
            
                    $('#village').html(s_village_options);
            
                }
               
                function get_farmer() {
                    // console.log(a_Farmer);
                    var district_id = $('#district').val();
                    var block_id = $('#block').val();
                    var village_id = $('#village').val();
                    var selectedCountry = country_id;

                    var farmers_html = '';

                    var  farmerIds ='';
                    $.each(a_Farmer, function(key, farmer_obj) {
                     
                        var selected = (farmer_obj.field_executive == feId) ? 'checked' : '';
                       
                        if (farmer_obj.country_id == selectedCountry) {
                         
                            if (village_id != 0 && farmer_obj.village_id == village_id) {
                                farmerIds += (farmerIds ? ',' : '') + farmer_obj.id;
                                farmers_html += '<div>' +
                                    '<input type="checkbox" class="checkbox" name="checkbox[]" id="' + farmer_obj.id + '" value="' + farmer_obj.id + '" ' + selected + '>' +
                                    '<span style="margin-left: 10px;">' + farmer_obj.name + ' ('+farmer_obj.code+')</span>' +
                                     '<input type="hidden" id="allFarmerIds" name="allFarmerIds" value="'+farmerIds+'">'+
                                     '</div>';

                            } else if (block_id != 0 && farmer_obj.block_id == block_id) {
                                farmerIds += (farmerIds ? ',' : '') + farmer_obj.id;
                                 farmers_html += '<div>' +
                                    '<input type="checkbox" class="checkbox" name="checkbox[]" id="' + farmer_obj.id + '" value="' + farmer_obj.id + '" ' + selected + '>' +
                                    '<span style="margin-left: 10px;">' + farmer_obj.name + ' ('+farmer_obj.code+')</span>' +
                                     '<input type="hidden" id="allFarmerIds" name="allFarmerIds" value="'+farmerIds+'">'+
                                     '</div>';

                            } else if (district_id != 0 && farmer_obj.district_id == district_id) {
                                farmerIds += (farmerIds ? ',' : '') + farmer_obj.id;
                                farmers_html += '<div>' +
                                    '<input type="checkbox" class="checkbox" name="checkbox[]" id="' + farmer_obj.id + '" value="' + farmer_obj.id + '" ' + selected + '>' +
                                    '<span style="margin-left: 10px;">' + farmer_obj.name + ' ('+farmer_obj.code+')</span>' +
                                    '<input type="hidden" id="allFarmerIds" name="allFarmerIds" value="'+farmerIds+'">'+
                                     '</div>';

                            } else if (district_id == 0 && block_id == 0 && village_id == 0) {
                                farmerIds += (farmerIds ? ',' : '') + farmer_obj.id;
                                farmers_html += '<div>' +
                                    '<input type="checkbox" class="checkbox" name="checkbox[]" id="' + farmer_obj.id + '" value="' + farmer_obj.id + '" ' + selected + '>' +
                                    '<span style="margin-left: 10px;">' + farmer_obj.name + ' ('+farmer_obj.code+')</span>' +
                                    '<input type="hidden" id="allFarmerIds" name="allFarmerIds" value="'+farmerIds+'">'+
                                    '</div>';
                            }
                        }
                    });

                  
                    $('#farmers_list').html(farmers_html);
                   
                }


            </script>
		@endsection