@extends('layout')
@section('title','Assign Lotteries')
@section('content')

               <ul class="breadcrumb">
                  <li><p>Dashboard</p></li>
                  <li><a href="#" class="active">Business Partners</a> </li>
                  <li><a href="#" class="active">View Business Partner</a> </li>
                  <li><a href="#" class="active">Assign Lotteries</a> </li>
               </ul>
               <div class="row">
                  <div class="col-md-12">
                     <div class="grid simple form-grid">
                        <div class="grid-title no-border">
                           <h3><span class="semi-bold"><i class="fa fa-user"></i> Assign Lotteries</span></h3>
                        </div>
                        <div class="grid-body no-border">
                           <form class="form-no-horizontal-spacing" id="form-condensed" action="{{route('business_partners.assign_lotteries.update', $business_edit->id)}}" method="POST" enctype="multipart/form-data">
                               @csrf
                              <div class="row column-seperation">
                                 <div class="col-md-12">
                                    <h4>Basic Information</h4>
                                    
                                    <div class="row form-row">
                                       <div class="col-md-6">
										   <select name="region_id" id="region_id" style="width:100%" onchange="get_region($(this),{{$business_edit->country_id ?? ''}});" required>
											  <option>Choose Region</option>
											  @foreach($region as $regions)
											  @if(isset($business_edit) && $business_edit->region_id == $regions->id)
											  <option value="{{$regions->id}}" selected>{{$regions->region_name}}</option>
											  @else
											  <option value="{{$regions->id}}" >{{$regions->region_name}}</option>
											  @endif
											  @endforeach
										   </select>
                                       </div>
									   <div class="col-md-6">
										   <select name="country_id" id="country_id" style="width:100%" onchange="get_country($(this),{{$business_edit->state_id ?? ''}});" required>
											  <option>Choose Country</option>
											 
										   </select>
                                       </div>
                                       
                                    </div>
                                     <input type="hidden" name="hidden_region" id="hidden_region" value="{{$business_edit->region_id ?? ''}}"/>
                                       <input type="hidden" name="hidden_country" id="hidden_country" value="{{$business_edit->country_id ?? ''}}"/>
                                       <input type="hidden" name="hidden_state" id="hidden_state" value="{{$business_edit->state_id ?? ''}}"/>
                                       <input type="hidden" name="hidden_city" id="hidden_city" value="{{$business_edit->city_id ?? ''}}"/>
                                    
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-12">
                                    <input type="hidden" name="lottery_edit_id" id="lottery_edit_id" value="{{$business_edit->lottery_id ?? ''}}" />
                                 </div>
								<div class="col-md-12">
								  <div class="grid simple ">
									<div class="grid-title no-border">
									<div class="grid-body no-border">
									  <h3>Assign / Allocate <span class="semi-bold">Lotteries</span> {{$business_edit->poc_first_name}}</h3>
									  <br>
									  <table class="table table-bordered no-more-tables" id="example">
										<thead>
										  <tr>
											<th style="width:1%">
											  <div class="checkbox check-default">
												<input id="checkbox20" type="checkbox" value="1" class="checkall">
												<label for="checkbox20"></label>
											  </div>
											</th>
											<th class="text-center" style="width:8.5%">Lottery Name</th>
											<th class="text-center" style="width:8.5%">Region</th>
											<th class="text-center" style="width:8.5%">Country</th>
											<th class="text-center" style="width:8.5%">Price</th>
											<th class="text-center" style="width:6%">Status</th>
										  </tr>
										</thead>
										<tbody id="allocate_div">
										    @foreach($lottery as $lotterys)
										    @php
										    $selectedLottery = explode(',', $business_edit->lottery_id ?? ''); // Convert to array
										    @endphp
										  <tr>
											<td>
											  <div class="checkbox check-default">
												<input id="checkbox{{$lotterys->id}}" type="checkbox" name="lottery_id[]" value="{{$lotterys->id}}" @if($lotterys->status == 0) disabled @endif   {{ in_array($lotterys->id, $selectedLottery) ? 'checked' : '' }}>
												<label for="checkbox{{$lotterys->id}}"></label>
											  </div>
											</td>
											<td class="text-center">{{$lotterys->lottery_name}}</td>
											<td class="text-right">{{$lotterys->region_name}}</td>
											<td class="text-right">{{$lotterys->country_name}}</td>
											<td class="text-right"><i class="fa fa-euro"></i>{{$lotterys->price}}</td>
											<td class="text-center">@if($lotterys->status == 0)<span class="label label-important"> {{'In-Active'}} @else <span class="label label-success"> {{'Active'}} @endif</span></td>
										  </tr>
										  @endforeach
										 
 										 
										</tbody>
									  </table>
									</div>
									</div>
								  </div>
								</div>
                              </div>
                              <div class="form-actions">
                                 <div class="pull-left">
                                    <div class="lottery_checkbox">
                                    </div>
                                 </div>
                                 <div class="pull-right">
                                     @if(isset($business_edit))
                                    <button class="btn btn-success btn-cons" type="submit"><i class="icon-ok"></i> Update Business Parner</button>
                                    @else
                                    <button class="btn btn-success btn-cons" type="submit"><i class="icon-ok"></i> Create Business Partner</button>
                                    @endif
                                    <button class="btn btn-white btn-cons" type="reset">Cancel</button>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
            
         


@endsection

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    
    // $('input[type=checkbox][name="lottery_id[]"]:checked').each(function(key,val){
    //     // console.log($(val));
    //     get_lottery_check($(val));
    // })
    // get_country($('#hidden_country'),$('#hidden_state'));
    // $('#city_id').on('change',function(){
    // console.log($(this).val());
   get_region($('#hidden_region'),$('#hidden_country').val());
   get_country($('#hidden_country'),$('#hidden_state'))
    get_state($('#hidden_state'),$('#hidden_city'));
    if($('#lottery_edit_id').val() > 0){
         var region_id = $('#hidden_region').val();
    var country_id = $('#hidden_country').val();
// })
$('#allocate_div').html('');
         $.ajax({
            url: "{{ url('business_partners/partner/get_lottery_data') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "region_id" :  region_id,
                "country_id" : country_id
                
            },
            success: function(data) {
                // console.log(data);
                // console.log(data['doneMessage']);
                var tr= '';
              $(data).each(function(key, value) {
                  tr += `<tr>
                  <td>
											  <div class="checkbox check-default" >
												<input id="checkbox${value['id']}" type="checkbox" value="${value['id']}" name="lottery_id[]"  ${value['status'] == 0 ? '' : 'disabled'} >
												<label for="checkbox${value['id']}"></label>
											  </div>
											</td>
											<td class="text-center">${value['lottery_name']}</td>
											<td class="text-right">${value['region_name']}</td>
											<td class="text-right">${value['country_name']}</td>
											<td class="text-right"><i class="fa fa-euro"></i>${value['price']}</td>
											<td class="text-center">
                                                <span class="label ${value['status'] == 0 ? 'label-success' : 'label-important'}">
                                                    ${value['status'] == 0 ? 'In-Active' : 'Active'}
                                                </span>
                                            </td>
                  </tr>`;
              })
              
               $('#allocate_div').append(tr);
var selectedIds = $("input[name='lottery_edit_id']").val().split(',');
// console.log(selectedIds);
        // Loop through each checkbox and check if its value is in the array
        $("input[name='lottery_id[]']").each(function() {
            if (selectedIds.includes($(this).val())) {
                $(this).prop("checked", true);
            }
        });
            }
        });
    }
   


 function get_lottery_data() {
     var region_id = $('#region_id').val();
     var country_id = $('#country_id').val();
        // console.log('Lottery data function triggered');
        $('#allocate_div').html('');
         $.ajax({
            url: "{{ url('business_partners/partner/get_lottery_data') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "region_id" :  region_id,
                "country_id" : country_id
                
            },
            success: function(data) {
                // console.log(data);
                // console.log(data['doneMessage']);
                var tr= '';
              $(data).each(function(key, value) {
                  tr += `<tr>
                  <td>
											  <div class="checkbox check-default" >
												<input id="checkbox${value['id']}" type="checkbox" value="${value['id']}" name="lottery_id[]"  ${value['status'] == 0 ? '' : 'disabled'} >
												<label for="checkbox${value['id']}"></label>
											  </div>
											</td>
											<td class="text-center">${value['lottery_name']}</td>
											<td class="text-right">${value['region_name']}</td>
											<td class="text-right">${value['country_name']}</td>
											<td class="text-right"><i class="fa fa-euro"></i>${value['price']}</td>
											<td class="text-center">
                                                <span class="label ${value['status'] == 0 ? 'label-success' : 'label-important'}">
                                                    ${value['status'] == 0 ? 'In-Active' : 'Active'}
                                                </span>
                                            </td>
                  </tr>`;
              })
              
               $('#allocate_div').append(tr);

            }
        });
    }

    $('#region_id, #country_id').on('change', function() {
        // console.log('Change event detected'); // Debugging log
        get_lottery_data();
    });
    
    
    
      $('.checkall').on('change', function () {
            let isChecked = $(this).is(':checked');
            
            // Loop through each checkbox inside the table (excluding disabled ones)
            $('input[name="lottery_id[]"]').each(function () {
                if (!$(this).is(':disabled')) {
                    $(this).prop('checked', isChecked);
                }
            });
        });
});

    // function get_lottery_data(){
    //     console.log('test');
    // }
// $('#region_id, #country_id').on('change', get_lottery_data);
    // $('#region_id,#country_id').on('change',get_lottery_data);

    function get_region(val,id){
    //  console.log(id)
     $('#country_id').html('');
   
    var region_id = $(val).val();
    var country_id = id;
    console.log(country_id);
   
   
   
    $.ajax({
            url: "{{ url('business_partners/partner/get_region') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "region_id" :  region_id,
                
            },
            success: function(data) {
                console.log(data);
                // console.log(data['doneMessage']);
                 $('#country_id').append('<option>Select Country</option>')
                 $(data).each(function(key, value) {
                     var select = '';
                    if(country_id == value.id){
                        select = 'selected';
                    }
                    $('#country_id').append('<option value="'+value.id+'" '+select+'>'+value.country_name+'</option>');
                });
              

            }
        });
    }
    
     function get_country(val,id){
    //  console.log(id)
     $('#state_id').html('');
      $('#city_id').html('');
    var country_id = $(val).val();
    var state_id = $(id).val();
    // console.log(state_id);
   
    $.ajax({
            url: "{{ url('business_partners/partner/get_country') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "country_id" :  country_id,
                
            },
            success: function(data) {
                // console.log(data);
                // console.log(data['doneMessage']);
                 $('#state_id').append('<option>Select State</option>')
                 $(data).each(function(key, value) {
                      var select = '';
                      if(state_id == value.id){
                          select = 'selected';
                      }
                      else{
                          select = '';
                      }
                //     // console.log(value.address);
                    $('#state_id').append('<option value='+value.id+' '+select+'>'+value.state_title+'</option>')
                });
              

            }
        });
    }
    
    function get_state(val,id){
        // console.log($(id).val());
        $('#city_id').html('');
         var state_id = $(val).val();
         var city_id = $(id).val();
             $.ajax({
            url: "{{ url('business_partners/partner/get_state') }}",
            type: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                "state_id" :  state_id,
                
            },
            success: function(data) {
                // console.log(data);
                // console.log(data['doneMessage']);
                 $('#city_id').append('<option>Select City</option>')
                 $(data).each(function(key, value) {
                      var select = '';
                      if(city_id == value.id){
                          select = 'selected';
                      }
                      else{
                          select = '';
                      }
                //     // console.log(value.address);
                    $('#city_id').append('<option value='+value.id+' '+select+'>'+value.name+'</option>')
                });
              

            }
        });

    }
    
    
//     function get_lottery_check(val) {
//     let value = $(val).val(); // Get checkbox value
//     let name = $(val).attr('name'); // Get checkbox name

//     if ($(val).is(':checked')) {
//         // Add hidden input with the same value
//         $('<input>').attr({
//             type: 'hidden',
//             name: name, // Keep the same name
//             value: value,
//             class: 'hidden-lottery-' + value // Unique class for removal
//         }).appendTo('.lottery_checkbox');
//     } else {
//         // Remove hidden input if checkbox is unchecked
//         $('.hidden-lottery-' + value).remove();
//     }
// }
</script>