@include('includes.web-header')
<style type="text/css">
  #player_info_modal{
    margin: 0px !important;
    max-width: 477px;
    /*max-width: 560px !important;
    margin: auto;*/
  }
  #player_info_modal .modal, .modal-dialog {
    max-width: 478px !important; margin: 0px !important; margin-left: -1px !important;
  }
  #player_info_modal .player-info-content {
    padding:0px;
  }
  #player_info_modal .rg_main {
      height: auto;
  }

#player_info_modal .modal-dialog { height: 100%;   }
#player_info_modal .modal-content { height: 100%; border-radius: 0px; }
#player_info_modal .modal-body { padding: 0px; overflow: auto;}
#player_info_modal .modal-header { background: #6b3d95; border-radius: 0px; border:none;}

</style>

<!--New Rules Modal -->
    <div class="modal fade modal_rg" id="create_team_rules" tabindex="-1" role="dialog" aria-labelledby="create_team_rules" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20.909" height="20.909" class="x_icon" viewBox="0 0 13.909 13.909">
              <path id="Path_348" data-name="Path 348" d="M951.61,2989.949l4.959-4.959a1.169,1.169,0,0,0-1.653-1.653l-4.959,4.959L945,2983.336a1.169,1.169,0,0,0-1.653,1.653l4.959,4.959-4.959,4.959a1.169,1.169,0,0,0,1.653,1.653l4.959-4.959,4.959,4.959a1.169,1.169,0,0,0,1.653-1.653Z" transform="translate(-943.002 -2982.994)" fill="#0D141A"/>
            </svg></span>
            </button>
            <h2>New Rules</h2>
            <p class="pt-4">Now you can select upto 4 wicket-keepers, 6 Batsmen, 4 all-rounders & 6 bowlers.</p>
               <div class="team_rules_table pt-4">
         <table class="table text-left">
           <thead>
            <tr>
              <th></th>
              <th>WK</th>
              <th>BAT</th>
              <th>AR</th>
              <th>BOWL</th>
            </tr>
            </thead>
            <tbody>
              <tr>
              <td>MIN</td>
              <td>1</td>
              <td>3</td>
              <td>1</td>
              <td>3</td>
            </tr>
            <tr>
              <td>MAX</td>
              <td>4</td>
              <td>9</td>
              <td>4</td>
              <td>6</td>
            </tr>

          </tbody>
        </table>
      </div>
          </div>
        </div>
      </div>
    </div>
    <!--New Rules Modal end  -->

    <!--Clear Team Modal -->
    <div class="modal fade modal_rg" id="clear_team_modal" tabindex="-1" role="dialog" aria-labelledby="clear_team_modal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20.909" height="20.909" class="x_icon" viewBox="0 0 13.909 13.909">
              <path id="Path_348" data-name="Path 348" d="M951.61,2989.949l4.959-4.959a1.169,1.169,0,0,0-1.653-1.653l-4.959,4.959L945,2983.336a1.169,1.169,0,0,0-1.653,1.653l4.959,4.959-4.959,4.959a1.169,1.169,0,0,0,1.653,1.653l4.959-4.959,4.959,4.959a1.169,1.169,0,0,0,1.653-1.653Z" transform="translate(-943.002 -2982.994)" fill="#0D141A"/>
            </svg></span>
            </button>
            <h2 class="pt-3">Confirmation</h2>
            <p class="pt-3" style="font-size: 17px;">Are you sure you want to clear selected  team?</p>
          </div>
          <div class="modal-footer clear_team_footer">
        <button type="button" class="btn_cancel" data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn_clear clear_edit_team_btn">Clear Team</button>
      </div>
        </div>
      </div>
    </div>
    <!--Clear Team Modal end  -->

     <!--Player info modal -->
    <div class="modal fade modal_rg" id="player_info_modal" tabindex="-1" role="dialog" aria-labelledby="player_info_modal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-top" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="text-white">Player Info</h3> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20.909" height="20.909" class="x_icon" viewBox="0 0 13.909 13.909">
              <path id="Path_348" data-name="Path 348" d="M951.61,2989.949l4.959-4.959a1.169,1.169,0,0,0-1.653-1.653l-4.959,4.959L945,2983.336a1.169,1.169,0,0,0-1.653,1.653l4.959,4.959-4.959,4.959a1.169,1.169,0,0,0,1.653,1.653l4.959-4.959,4.959,4.959a1.169,1.169,0,0,0,1.653-1.653Z" transform="translate(-943.002 -2982.994)" fill="#fff"/>
            </svg></span>
            </button>
          </div>
          <div class="modal-body">
            <div class="player-info-content">
              <!-- player info  -->
                <div class="rg_main ">
                    <div class="rg_header pb-2 header_shadow">
                      <div class="col-12 pt-4 text-center">
                        <div class="player_info_avtar_url player_info_avtar"></div>
                        <h4 class="text-white player-info-name"></h4>
                      </div>

                      <div class="col-12 pt-4">
                        <div class=" top_card_box_main_info">
                          <div class="media">
                            <div class="media-body">
                              <div class="row">
                                <div class="col">
                                  <h6>Credits</h6>
                                  <h2 class="player-info-credits"></h2>
                                </div>
                                <div class="col">
                                  <h6>Total Points</h6>
                                  <h2 class="player-info-points"></h2>
                                </div>
                              </div>
                            </div>
                            <div class="media-right">
                              <a href="javascript:void(0);" data-point="" data-id="" data-player-type="" data-team-id="" data-img="" data-name="" class="btn btn-primary add_team_btn">Add In Team</a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 pt-2">
                        <div class="card_box_top card_box_main ">
                          <table width="100%">
                            <tbody>
                            <tr>
                              <td><h6>Bats</h6><h2 class="player-info-bats"></h2></td>
                              <td><h6>Bowl</h6><h2 class="player-info-bowl"></h2></td>
                            </tr>
                            <tr>
                              <td><h6>Nationality</h6><h2 class="player-info-nationality"></h2></td>
                              <td><h6>Birthday</h6><h2 class="player-info-birthday"></h2></td>
                            </tr>
                            </tbody>  
                          </table>
                        </div>
                      </div>
                    </div>
                </div>

              <!-- end player info-->

            </div>

            <h5 class="p-4 mb-0">Matchwise Fantasy Stats</h5>
        <div class="matchwise_stats">
        <table class="table">
                  <thead>
                    <tr>
                      <td>Match</td>
                      <td>Points</td>
                      <td>Selected By</td>
                    </tr>
                  </thead>
                  <tbody id="show_match">                  
                  </tbody>
                </table>
      
        </div>


          </div>

          
        </div>
      </div>
    </div>
    <!--Player info Modal end  -->


<script src="