@extends('userPanel.user')
@section('pageLevelCSS')
<style>
.select2-selection{
    height: 40px !important;
    border-radius: 11px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: #000 !important;
    padding: 5px 24px 17px 13px;
}   
.select2-results{
      color: #000 !important;
} 
.select2-search__field{
     background-color: #fff !important;
    /* border-color: red; */
    color: #000 !important;
}
.select2-selection__placeholder{
    color: #000 !important;
}
select{
  width:100% !important;
}

</style>
@endsection
@section('content')
<div class="game_bid_parent">
                    <div class="row game_type_parent_inner">
                        <div class="col-sm game_type_card_wrap">
                            <div class="card body_game_type_parent">
                                <div class="card-body body_game_card2">
                                    <div class="d-flex align-items-start justify-content-between">
                                        <div>
                                            <h5 class="card-title txt_game_market">{{ $game->game_name }}</h5>
                                            <p class="card-text">
                                               @php
                                                $game_type=array(
                                                     "1" => 'Single Digit',
                                                     "2" => 'Jodi Digit',
                                                     "3" => 'Single Pana',
                                                     "4" => 'Double Pana',
                                                     "5" => 'Triple Pana',
                                                     "6" => 'Half Sangam',
                                                     "7" => 'Full Sangam',             
                                                );
                                               @endphp
                                                <span class="txt_game_type">{{ $game_type[$type]}}</span>
                                            </p>
                                        </div>
                                        <div>
                                            <div class="online_parent">
                                                <div class="online_inner"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="game_id" id="game_id" value="{{ $game->id}}">
                                    <input type="hidden" name="game_type" id="game_type" value="{{ $type }}">
                                    <input type="hidden" name="bids" id="bids" value="[]">
                                    <input type="hidden" name="available_points" id="available_points" value="{{ \Auth::user()->available_balance }}">
                                    <input type="hidden" name="count" id="count" value="0">
                                    <!-- START FORM -->
                                    <form class="form_bid_container" method="post" id="bidForm">
                                        <div class="row">
                                            <div class="col-sm">
                                                <input type="date" class="form-control date_form_bid" disabled value = "{{ date('Y-m-d') }}">
                                            </div>
                                        </div>
                                       
                                        <div class="row">
                                            <div class="col-sm" id="open_div" style="display:@if(time() > strtotime(date('Y-m-d').' '.$open_time)) none; @else block; @endif">
                                                @if($type == '1')
                                                <label class="form-label">Open Digit</label>
                                                <select class="form-control form_select_bid" name="open_digit" id="open_digit" width="100%">
                                                <option></option>
                                                @foreach($singleDigit as $value )
                                                    <option value="{{ $value->number}}">{{ $value->number}}</option>
                                                @endforeach
                                                </select>
                                                
                                               
                                                
                                                @elseif($type == '3' || $type == '4' || $type == '5') 
                                                 <label class="form-label">Open Pana</label>
                                                 <select class="form-control form_select_bid" name="open_pana" id="open_pana" width="100%">
                                                    @php
                                                    if($type == '3'){
                                                    	$variableName=$singlePana;
                                                    }elseif($type == '4'){
                                                    	$variableName=$doublePana;
                                                    }elseif($type == '5'){
                                                    	$variableName=$triplePana;
                                                    }else{
                                                    	$variableName=$singlePana;
                                                    }
                                                    
                                                    @endphp
                                                    <option></option>
                                                    @foreach($variableName as $value )
                                                    <option value="{{ $value->number}}">{{ $value->number}}</option>
                                                    @endforeach
                                                
                                                </select>
                                                
                                                @endif
                                            </div>
                                            
                                        </div>
                                        
                                        <div class="row" style="margin-top: 15px;">
                                            <div class="col-sm">
                                                <input type="text" class="form-control input_form_bid" id="points" name="points" value = "" placeholder="points">
                                            </div>
                                        </div>
                                        <button type="submit" id="" class="btn btn_form_bid" style="margin-top: 15px;">Proceed</button>
                                        <button type="button" id="submit" class="btn btn_submit_bid" style="margin-top: 15px;">Submit</button>
                                    </form>
                                    <!-- END FORM -->
                                    <!-- START BID PARENT -->
                                    <div class="game_parent3" id="bid_list">
                                       
                                        
                                    </div>
                                    <!-- END BID PARENT -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@endsection                
@section('pageLevelJS')
<script>
 $.ajaxSetup({
         headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
         });
$("select").select2({

    allowClear: true,
    placeholder: "Select Number",
    
   });
$(document).on('select2:open', (e) => {
        const selectId = e.target.id;
        $(".select2-search__field[aria-controls='select2-"+selectId+"-results']").each(function (key,value,){
            value.focus();
        });
    });


$(document).on('click','.close_icon',function(){

   var bids=$('#bids').val();
   var available_points=$('#available_points').val();
   var count=$(this).data('id');
   
   $.ajax({
		 type: 'post',
		 dataType: 'json',
		 url: "{{ url('/removeBid')}}",
		 data: {
			
			 available_points:available_points,
			 bids:bids,
			 count:count
		 },
		 success: function(data) {
			var html='';	
			if(data.error == false){
			       
			       
                             $('#available_points').val(data.available_points);
                             $('#bids').val(data.bids);
                             //$('#count').val(count + 1);
                             $('#div_'+count).remove();
                             $('.game_bid_parent').scrollTop($('.game_bid_parent')[0].scrollHeight);
			       
			}else{
			     
			   Swal.fire("Alert!",data.msg, "error");
			}
                }
  });
});

$("#bidForm").validate({
    rules: {
        points: {
            required: true,
            number:true
        },
        open_digit: {
            required: true,
        },
        open_pana: {
            required: true,
        }

    },
    errorPlacement: function(error, element) {
        error.addClass('mt-2 text-danger');
        if (element.hasClass('form_select_bid') && element.next('.select2-container').length) {
            error.insertAfter(element.next('.select2-container'));
        } else if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
    
   var game_id = $('#game_id').val();
   var game_type = $('#game_type').val();
   var points = $('#points').val();
   var bids=$('#bids').val();
   var available_points=$('#available_points').val();
   var count=$('#count').val();
   
   var open_digit=($('#open_digit').val() === null) ? '' : $('#open_digit').val();
   var open_pana=($('#open_pana').val() === null) ? '' : $('#open_pana').val();
   
   
   $.ajax({
		 type: 'post',
		 dataType: 'json',
		 url: "{{ url('/starlineBidProccess')}}",
		 async:false,
		 data: {
			 game_id: game_id,
			 game_type: game_type,
			 points: points,
			 open_digit: open_digit,
			 open_pana: open_pana,
			 available_points:available_points,
			 bids:bids,
			 count:count
		 },
		 success: function(data) {
			var html='';	
			if(data.error == false){
			       
			      html+='<div class="card body_bid_card_parent" id="div_'+count+'">';
                             html+='<div class="card-body body_game_type_card2">';
                             html+='<div class="d-flex align-items-center justify-content-between w-100">';
                             html+='<div class="d-flex align-items-start justify-content-between w-100 bid_container1">';
                             html+='<div>';
                             if(game_type == '1'){
                             html+='<h5 class="card-title txt_bid_title">Open Digit<span class="txt_game_dot">:</span>'+open_digit+'</h5>';
                             }else if(game_type == '3' || game_type == '4' || game_type == '5'){
                             html+='<h5 class="card-title txt_bid_title">Open Pana<span class="txt_game_dot">:</span>'+open_pana+'</h5>';
                             
                             }
                             html+='</div>';
                             html+='<div class="d-flex align-items-center">';
                             html+='<h5 class="card-title txt_bid_points2">'+points+' PTS</h5>';
                             html+='</div>';
                             html+='</div>';
                             html+='<div>';
                             html+='<span class="material-symbols-rounded close_icon" data-id="'+count+'">close</span>';
                             html+='</div>';
                             html+='</div>';
                             html+='</div>';
                             html+='</div>';
                             
                             $('#bid_list').append(html);
                             $('#available_points').val(data.available_points);
                             $('#bids').val(data.bids);
                             $('#count').val(count + 1);
                             $("select").val('').trigger('change');
		             $('#points').val('');		   
                             $('.game_bid_parent').scrollTop($('.game_bid_parent')[0].scrollHeight);
			       
			}else{
			     
			   swal("Alert!",data.msg, "error");
			}
                }
  });
        
    }
});


$('#submit').click(function(){

   var game_id = $('#game_id').val();
   var game_type_id = $('#game_type').val();
   var bid_list = $('#bids').val();
   if(bid_list == '[]'){
   
       swal("Alert!",'Please placed atleast one bid.', "error");
       return;
   }
$.ajax({
		 type: 'post',
		 dataType: 'json',
		 url: "{{ url('/starlineCreateBid')}}",
		 async:false,
		 data: {
			 game_id: game_id,
			 game_type_id: game_type_id,
			 bid_list: bid_list,
		 },
		 success: function(data) {
		 
			if(data.error == false){
			      
                            
                            swal({
				       title: "Success!", 
				       text: "Bid submitted Successfully", 
				       type: "success"
				     },
				   function(){ 
				       window.location.href="{{ url('/starlineGameList')}}";
				   }
				);
			      
			}else{
			     
			   swal("Alert!",data.message, "error");
			}     
                }
  });



});
</script>
@endsection