@extends('admin.layouts.default')
@section('content')
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

<!--********************************** 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">

        </div>

        <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-xl-12 col-xxl-12">
         <div class="card aos-init aos-animate" data-aos="fade-up">
          <div class="card-header">
              <h4 class="card-title text-center">Kabaddi</h4>
          </div>
          <div class="card-body p-0">
            <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 class="media-body">
                        <h5>India</h5>
                        <div class="input-group mb-3">
                          <input type="text" class="form-control" placeholder="" value="239 / 10" aria-label="" aria-describedby="">
                          <div class="input-group-append">
                            <button class="btn btn-primary" type="button">Update</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                <div class="points_update_table">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th scope="col">Player Name</th>
                        <th scope="col">Points</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                </div>
                
                <div class="col-md-6 p-0">
                  <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 class="media-body">
                        <h5>India</h5>
                        <div class="input-group mb-3">
                          <input type="text" class="form-control" placeholder="" value="239 / 10" aria-label="" aria-describedby="">
                          <div class="input-group-append">
                            <button class="btn btn-primary" type="button">Update</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="points_update_table">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th scope="col">Player Name</th>
                        <th scope="col">Points</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                      <tr class="player_name"  data-toggle="modal" data-target="#update_point">
                        <td>Player 1</td>
                        <td>198</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                </div>

              </div>
            </div>




        </div>
        </div>
       </div>
    </div>
</div>

<!--Update Point Modal -->
<div class="modal fade" id="update_point" tabindex="-1" role="dialog"  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Select Point type</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="point_type">
          <div class="row">

            <div class="col-6">
              <button class="">
               <span><svg><use xlink:href="#kabaddi_icon" /></svg></span>
               Leg Grapple
              </button>
            </div>

            <div class="col-6">
              <button class="">
               <span><svg><use xlink:href="#kabaddi_icon" /></svg></span>
               Leg Grapple
              </button>
            </div>

            <div class="col-6">
              <button class="">
               <span><svg><use xlink:href="#kabaddi_icon" /></svg></span>
               Leg Grapple
              </button>
            </div>

            <div class="col-6">
              <button class="">
               <span><svg><use xlink:href="#kabaddi_icon" /></svg></span>
               Leg Grapple
              </button>
            </div>

          </div>

      </div>
      </div>
    </div>
  </div>
</div>
<svg display="none">
<symbol width="53" height="53" viewBox="0 0 53 53" fill="" id="kabaddi_icon">
<path d="M36.4376 9.67251C38.8768 9.67251 40.8542 7.6951 40.8542 5.25584C40.8542 2.81658 38.8768 0.839172 36.4376 0.839172C33.9983 0.839172 32.0209 2.81658 32.0209 5.25584C32.0209 7.6951 33.9983 9.67251 36.4376 9.67251Z" fill=""/>
<path d="M53 26.235V15.8558L41.8479 11.13C39.7058 10.2246 37.2325 10.9975 35.9958 12.985L33.7875 16.5183C32.3079 19.1242 29.5696 21.0675 26.2571 21.6417L26.3896 21.7742C27.9133 23.2979 29.7463 24.1371 31.8221 24.3579C33.5888 23.4304 35.1788 22.1937 36.4375 20.7362L37.7625 27.3612L35.2008 29.7904L33.125 31.7558V48.3183H37.5417V35.0683L42.1792 30.6517L46.1542 48.3183H50.7917L45.9775 24.0267L44.6083 17.1808L48.5833 18.7267V26.235H53ZM22.7238 17.8654C23.2096 18.1967 23.7617 18.3954 24.3138 18.5058C24.6008 18.55 24.8658 18.5942 25.1529 18.5942C25.44 18.5942 25.7271 18.5721 25.9921 18.5058C26.2792 18.4617 26.5442 18.3733 26.8092 18.2629C27.3392 18.0421 27.8471 17.7329 28.2667 17.2912C29.3488 16.2092 29.7463 14.7075 29.4813 13.3162C29.3267 12.4992 28.9292 11.6821 28.2667 11.0417C27.8471 10.6221 27.3392 10.2908 26.8092 10.07C26.5442 9.95957 26.2792 9.87124 25.9921 9.82707C25.705 9.78291 25.44 9.73874 25.1529 9.73874C24.8879 9.73874 24.645 9.76082 24.38 9.80499C24.0708 9.84916 23.7617 9.93749 23.4746 10.0479C22.9667 10.2908 22.4588 10.6221 22.0392 11.0417C21.3767 11.6821 20.9792 12.4992 20.8246 13.3162C20.5596 14.7075 20.9571 16.2092 22.0392 17.2912C22.2379 17.5121 22.4808 17.6887 22.7238 17.8654Z" fill=""/>
<path d="M24.8217 23.32L20.405 18.9033C20.1842 18.6825 19.9633 18.5058 19.7204 18.3292C19.2375 18.018 18.6967 17.8077 18.1304 17.7108C17.8433 17.6446 17.5783 17.6225 17.2912 17.6225C16.165 17.6225 15.0387 18.0642 14.1775 18.9254L6.80166 26.3012C5.89625 27.2067 5.4325 28.4654 5.52083 29.7021C5.52083 30.0996 5.60916 30.5192 5.76375 30.9167L8.12666 37.4312L0.110413 45.4475L3.22416 48.5833L12.5875 39.22V34.3175L15.4583 36.9896V48.3183H19.875V35.0683L15.1933 30.3867L20.405 25.175L21.9729 26.7429C24.8217 29.5254 28.5317 31.2479 33.0808 31.2479L32.7717 26.6767C29.4592 26.6325 26.8092 25.3075 24.8217 23.32Z" fill=""/>
</symbol>
</svg>



<style type="text/css">
  .kabaddi_header { }
  .kabaddi_team { padding: 20px 20px; border-bottom: #f5f5f5 1px solid;}
  .left_team {border-right: #f5f5f5 1px solid;}
  .kabaddi_logo { padding-right:20px;}
  .kabaddi_logo img { max-width: 80px; max-height: 80px; }
  .player_name { cursor: pointer; }
  .point_type button { background: #fff; color: #636363; display: block; border-radius: 20px; border:#717171 1px solid; min-height: 120px; font-size: 16px; font-weight: 600; text-align: center; padding: 15px 10px; width: 100%; margin: 10px 0px;}
  .point_type button span{ display: block; padding-bottom: 10px; }
  .point_type button svg {width: 53px; height: 53px; fill: #636363;}
  .point_type button:hover { color: #fff; border-color: #fff;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#825ced+0,4013c0+100 */
    background: rgb(130,92,237); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(130,92,237,1) 0%, rgba(64,19,192,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(130,92,237,1) 0%,rgba(64,19,192,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(130,92,237,1) 0%,rgba(64,19,192,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#825ced', endColorstr='#4013c0',GradientType=0 ); /* IE6-9 */
     }
  .point_type button:hover svg {fill: #fff; }
  .points_update_table table thead tr th { font-size: 16px; font-weight: 600; color: #000; text-transform: none; }
  .points_update_table table tbody tr td { color: #000; }
.points_update_table .table-striped tbody tr:nth-of-type(odd) {
    background-color: #F9FAFF;
}

@media only screen and (max-width: 479px) {
  .left_team {border-bottom: #f5f5f5 1px solid; border-right: none;}
}
</style>
<script type="text/javascript">
    $(document).ready(function(){
       
</script>
<!--**********************************
    Content body end
***********************************-->
@endsection