@extends('admin.layouts.default')
@section('content')
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
<style>
.playerName{
  cursor: pointer;
}
.playerName:hover{
  color:blue;
}
.active{
  background-color: #5d78ffcc;
}
.table-responsive {
    max-height:500px;
}
.kabaddi_team { padding: 20px 20px; border-bottom: #f5f5f5 1px solid;}
.kabaddi_logo { padding-right:20px;}
.kabaddi_logo img { max-width: 80px; max-height: 80px; }
.left_team {border-right: #f5f5f5 1px solid;}

</style>
<!--********************************** Content body start  ***********************************-->
<div class="container-fluid">
    <!-- <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
        </div>

    </div> -->
    <!-- row -->


        <div class="row">


             <div class="col-md-3">

               <div class="kabaddi_header">
                 <div class="row m-0">
                   <div class="col-md-6 p-0 left_team">

               <div class="kabaddi_team">
                 <div class="media">
                   <div class="media-left">
                     <div class="kabaddi_logo">
                       <img src="https://www.pinclipart.com/picdir/big/73-736278_image-india-flag-clothing-icon-id-527-png.png" class="img-fluid">
                     </div>
                   </div>
                                    </div>
               </div>
             </div>
             </div>
             </div>

             </div>



             <div class="col-md-6">
               <div class="col-md-12">
                 
               <div class="media-body">

                  <div class="row">
                    <div class="">
                     <h5>{{$team1name}}</h5>
                     <div class="input-group mb-3">
                       <input type="text" class="form-control" placeholder="" id="team1score_value" value="{{$team1score}}" aria-label="" aria-describedby="">
                       
                     </div>
                      
                    </div>   
                    <div class="" style="padding: 5px; padding-top: 30px;">  

                      <div class="input-group mb-3">
                         <button class="btn btn-primary team1score_btn team2score_btn" type="button">Update</button>
                       </div>
                    </div>
                    <div class="">
                     <h5>{{$team2name}}</h5>
                     <div class="input-group mb-3">
                       
                     <input type="text" class="form-control" placeholder="" id="team2score_value" value="{{$team2score}}" aria-label="" aria-describedby="">
                  <!--      <div class="input-group-append">
                         <button class="btn btn-primary team2score_btn" type="button">Update</button>
                       </div> -->
                     </div>
 
                    </div>
                  </div>
                     
                   </div>

               </div>
                  <!--  <div class="col-md-6">
                     
                   <div class="media-body">
                     
                     <div class="input-group mb-3">
                       
                     </div>
                   </div>

                   </div> -->
             </div>

             <div class="col-md-3">

               <div class="kabaddi_header">
                 <div class="row m-0">
                   <div class="col-md-6 p-0 left_team">
               <div class="kabaddi_team">
                 <div class="media">
                   <div class="media-left">
                     <div class="kabaddi_logo">
                       <img src="https://www.pinclipart.com/picdir/big/73-736278_image-india-flag-clothing-icon-id-527-png.png" class="img-fluid">
                     </div>
                   </div> 
                 </div>
               </div>
             </div>
           </div>
           </div>
           </div>


      </div>


    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="card" data-aos="fade-up">
                <!-- <div class="card-header">
                    <h4 class="card-title">View/Edit match Scores</h4>
                </div> -->


                <div class="card-body">

                    <div class="basic-form">

                      <div class="row">
                        <div class="col-md-6">
                          <button name="add_Subsctitute" type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-primary col-md-3">Add Substitute</button>

                          <!-- <button name="all_outModal" type="button" data-toggle="modal" data-target="#allOutModal" class="btn btn-primary col-md-3">All Out</button> -->

                          <button type="button" style="float:right;" class="btn btn-primary col-md-3" onclick="updatePoints()" >Update Points </button>

                         
                          <select class="form-control col-md-5" onchange="fetchMatchPlayersByMatchId()" id="teamId">
                            <option value="0">Both Teams</option>
                            <option value=""> </option>
                            <option value=""></option>
                          </select>
                        </div>
                      </div>

                      <!-- hk code  -->

                      <div class="row">
                      <div class="col-md-4">
                      <table  class="table table-responsive" >

                      <thead>
                        <!-- <tr>
                          <th><button type="button" class="btn btn-primary" onclick="updatePoints()">Update Points </button></th>
                          <th></th>
                        </tr> -->

                        <tr>
                          <th>Player Name</th>
                          <th>Points</th>
                        </tr>
                      <thead>

                      <tbody id="playersData">
                      </tbody>

                      <!--  -->
                       </table>
                      </div>

                      <div class="col-md-6">


                        <!-- <div class="basic-form">
                          <div class="form-row" >

                            <button type="button" class="btn btn-primary" onclick="updatePoints()">Update Points </button>

                          </div>
                          </div> -->

                      <div class="basic-form">
                        <div class="form-row" >




                       <!--  <div class="form-group col-md-4" >
                        <label>Goal </label>
                        <label class="form-text text-muted" id="starting7Points">0</label>
                        </div>
                        <div class="form-group col-md-4" >
                        <label>Substitute </label>
                        <label class="form-text text-muted" id="substitutePoints">0</label>
                        </div>
 -->
                        <div class="form-group col-md-4" >
                        <label>Goal </label>
                        <input type="number" class="form-control" id="goals" >
                        <small class="form-text text-muted" id="goalsPoints">0</small>
                        </div>

                      <div class="form-group col-md-4">
                      <label>Saves(GK ONLY) </label>
                      <input type="number" class="form-control" id="saves">
                      <small class="form-text text-muted" id="savesPoints">0</small>
                      </div>

                      <div class="form-group col-md-4">
                      <label>Penalty Saved(GK ONLY) </label>
                      <input type="number" class="form-control" id="penaltysave">
                      <small class="form-text text-muted" id="penaltysavePoints">0</small>
                      </div>


                      <div class="form-group col-md-4">
                      <label>Yellow Card </label>
                      <input type="number" class="form-control" id="yellowcard">
                      <small class="form-text text-muted" id="yellowcardPoints">0</small>
                      </div>


                      <div class="form-group col-md-4">
                      <label>Ejections </label>
                      <input type="number" class="form-control" id="ejections">
                      <small class="form-text text-muted" id="ejectionsPoints">0</small>
                      </div>


                      <div class="form-group col-md-4">
                      <label>Blue Card </label>
                      <input type="number" class="form-control" id="bluecard">
                      <small class="form-text text-muted" id="bluecardPoints">0</small>
                      </div>


                        <div class="form-group col-md-4">
                        <label>Red Card</label>
                        <input type="number" class="form-control" id="redcard">
                        <small class="form-text text-muted" id="redcardPoints">0</small>
                        </div>

                        <div class="form-group col-md-4">
                        <label>Penalty Missed</label>
                        <input type="number" class="form-control" id="penaltymiss">
                        <small class="form-text text-muted" id="penaltymissPoints">0</small>
                        </div>

                      


                        </div>
                      </div>

                      </div>
                      </div>

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <form action="" method="post" name="playerform">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Players</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                                  <select name="Cmpt_matc_players" class="form-control">
                                                                      </select>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-primary">Add Substitute</button>
                            </div>
                          </form>
                          </div>
                        </div>
                      </div>


                      <!-- Modal all out -->
                      <div class="modal fade" id="allOutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <form action="{{route($modelName.'.teamAllOut')}}" method="post" name="playerform">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">All Out Team</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <input type="hidden" name="match_id" value="{{ $match_id }}">
                              <input type="hidden" name="sport_type" value="{{ $sport_type }}">
                               <input type="hidden" name="teams[team1]" value="{{$livematch->team1}}">
                               <input type="hidden" name="teams[team2]" value="{{$livematch->team2}}">
                              <select class="form-control col-md-12" name="team_id">
                                <option value="0">Select Team</option>
                                <option value=""></option>
                                <option value=""></option>
                              </select>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                          </form>
                          </div>
                        </div>
                      </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--
<link rel="stylesheet" href="{{WEBSITE_URL.'resources/views/admin/Matches/assets/multi-select.css'}}"/> -->

<!-- <script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/jquery.min.js'}}"></script> -->
<script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/bootstrap.min.js'}}"></script>
<script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/jquery.multi-select.js'}}"></script>
<script type="text/javascript">

$( document ).ready(function() {


  $("#main-wrapper").removeClass("show");
  $("#main-wrapper").addClass("show menu-toggle");
onLoadData();

// setInterval(onLoadData, 30000);

// hk code
$(".team1score_btn").on("click",function(){
    var team1score = $("#team1score_value").val();
  // alert(team1score);
    $.ajax({
        url: "{{route($modelName.'.updateTeam1score1')}}",
        type: "post",
        data: {"team1score":team1score,"match_id":{{$match_id}}},
        success: function(res){
        },
        error: function(err){
          alert("Team 1 score could not update.");
            console.log(err);
        }
    });
});

$(".team2score_btn").on("click",function(){
    var team2score = $("#team2score_value").val();
  //  alert(team2score);
    $.ajax({
        url: "{{route($modelName.'.updateTeam2score1')}}",
        type: "post",
        data: {"team2score":team2score,"match_id":{{$match_id}}},
        success: function(res){
        },
        error: function(err){
          alert("Team 2 score could not update.");
            console.log(err);
        }
    });
});


});

function onLoadData(){
  // alert('a');
  fetchMatchPlayersByMatchId();
  var queryString = window.location.search;
  var urlParams = new URLSearchParams(queryString);
  var player_id = urlParams.get('player_id');
  var role_id = urlParams.get('role_id');

if(player_id){
fetchScoreData(player_id,role_id);
}

}
function fetchMatchPlayersByMatchId(){

var teamId = $("#teamId").val();
    $.ajax({
        url: "{{route($modelName.'.fetchMatchPlayersByMatchId')}}",
        type: "post",
        data: {"match_id" :  , "team_id": teamId},
        success: function(res){

$("#playersData").empty();


var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var player_id_new = urlParams.get('player_id');

var activeClass = '';

          console.log(res);
res.forEach((item, i) => {


    if(player_id_new == item.player_id){
      activeClass = 'active';
    }else{
      activeClass = '';
    }


    var player_html = '<tr class="playerName mp_'+item.player_id+' '+activeClass+'" onclick="fetchScoreData('+item.player_id+','+ item.role_id + ')"><td>'+item.player_name+'</td><td>'+item.total_points;

    if (item.is_substitute) {

    player_html += `</td><td><button onclick="removeSubstitute(this,${item.player_id})" class="btn btn-danger"><i class="fa-solid fa-trash-can"></i></button></td></tr>`;
    }


  $("#playersData").append(player_html);
});


          // $("#unsuccessfulRaidP").val(res.resultPoints_raidbonus);
          // $("#redCard").val(res.resultMatches_raidbonus)

        },
        error: function(err){
            console.log(err);
        }
    });

}


function removeSubstitute(e,player_id) {
  $.ajax({
    url: "{{route($modelName.'.removeSubstitute')}}",
    type: "post",
    data: {"player_id":player_id},
    success: function(res) {
    $(e).parent().parent().remove();
    },
    error: function(err) {
      alert("Something went wrong");
      // window.location.reload();
    }
  });
}

function fetchScoreData(player_id,role_id){


  var url = window.location.href.split('?')[0];
   history.pushState('', '', url+"?player_id="+player_id+`&role_id=${role_id}`);

$(".playerName").removeClass("active");

$(".mp_"+player_id).addClass("active");

  $.ajax({
      url: "{{route($modelName.'.fetchMatchPlayerScoreById')}}",
      type: "post",
      data: {"player_id":player_id, "match_id" :  , "sport_type" : },
      success: function(res){

        $("#goals").val(res.resultMatches_goals);
        $("#saves").val(res.resultMatches_saves);
        $("#penaltysave").val(res.resultMatches_penaltysave);
        $("#yellowcard").val(res.resultMatches_yellowcard);
        $("#ejections").val(res.resultMatches_ejections);
        $("#bluecard").val(res.resultMatches_bluecard);
        $("#redcard").val(res.resultMatches_redcard);
        $("#penaltymiss").val(res.resultMatches_penaltymiss); 


// $("#starting7Points").text(res.resultPoints_Starting7);
// $("#substitutePoints").text(res.resultPoints_Substitute);



        $("#goalsPoints").text(res.resultPoints_goals); 
        $("#savesPoints").text(res.resultPoints_saves == null ? 0 : res.resultPoints_saves);
        $("#penaltysavePoints").text(res.resultPoints_penaltysave == null ? 0 : res.resultPoints_penaltysave); 
        $("#yellowcardPoints").text(res.resultPoints_yellowcard);
        $("#ejectionsPoints").text(res.resultPoints_ejections);
        $("#bluecardPoints").text(res.resultPoints_bluecard);
        $("#redcardPoints").text(res.resultPoints_redcard); 
        $("#penaltymissPoints").text(res.resultPoints_penaltymiss);  

      },
      error: function(err){
          console.log(err);
      }
  });

}


function updatePoints(){

var queryString = window.location.search;

var urlParams = new URLSearchParams(queryString);

var player_id = urlParams.get('player_id');
var role_id = urlParams.get('role_id');

var goals = $("#goals").val(); 
var saves = $("#saves").val(); 
var penaltysave = $("#penaltysave").val();
var yellowcard = $("#yellowcard").val();
var ejections = $("#ejections").val();
var bluecard = $("#bluecard").val();
var redcard = $("#redcard").val();
var penaltymiss = $("#penaltymiss").val(); 


// console.log(successFullRaid);
    $.ajax({
        url: "{{route($modelName.'.updateMatchPlayerScoreById')}}",
        type: "post",
        data: {"player_id":player_id  ,"role_id": role_id  ,"sport_type": , "match_id" :  ,
        "goals" : goals, 
        "saves" : saves, 
        "penaltysave" : penaltysave,
        "yellowcard" : yellowcard,
        "ejections" : ejections,
        "bluecard" : bluecard,
        "redcard" : redcard,
        "penaltymiss" : penaltymiss
      },
        success: function(res){


          fetchScoreData(player_id,role_id);
          fetchMatchPlayersByMatchId();
          // $("#unsuccessfulRaidP").val(res.resultPoints_raidbonus);
          // $("#redCard").val(res.resultMatches_raidbonus)

        },
        error: function(err){
            console.log(err);
        }
    });


}

</script>
<!-- //Multiselect// -->

<style type="text/css">
/*.hide_one{ display: none; }*/

</style>


<!--**********************************
Content body end
***********************************-->
@endsection