@extends('web.layout.master')
@section('content')
  <div class="container my-2">
        <input type="hidden" name="match_id" value="{{$match->match_id}}" id="match_id">
   <div id="update-score">
      <div class="row">
                     <div class="col-lg-9 col-md-12">
            <div class="border p-3 rounded-4 mb-4">
               <h1 class="crick-blog-title">{{$match->title}}, {{$match->subtitle}} - Live Cricket Score, Commentary</h1>
               <div class="circ-meta-tags font-semi d-flex justify-content-between flex-wrap gap-2 pt-3">
                  <span><b>Series:</b> <a href="#">{{json_decode($match->competition)->title}}</a></span> <span><b>Venue:</b>
                     {{json_decode($match->venue)->name}}, {{json_decode($match->venue)->location}}</span> <span><b>Date & Time:</b>  {{$formattedDateTime}} LOCAL</span>
               </div>
               <hr class="my-4">

               <div class="row">
                  <div class="col-md-12 py-2 py-md-4">
                     <ul
                        class="scroll-list flex-nowrap text-nowrap resp-scroll pages-link d-flex align-items-center gap-1">
                        <li><a href="{{route('commentary',['id'=>$match->match_id])}}">Commentary</a></li>
                        <li><a href="{{route('scorecard',['id'=>$match->match_id])}}">Scorecard</a></li>
                        <li><a href="{{route('squads',['id'=>$match->match_id])}}">Squads</a></li>
                        <li><a href="{{route('highlights',['id'=>$match->match_id])}}" class="active">Highlights</a></li>
                        <li><a href="{{route('pointTable',['id'=>$match->match_id])}}">Points Table</a></li>
                     </ul>
                  </div>
               </div>

               <div class="highlights-tabs">
                  <nav>
                     <div class="scroll-list flex-nowrap text-nowrap resp-scroll nav nav-tabs mt-0" id="nav-tab"
                        role="tablist">
                        <button class="nav-link active" id="nav-fours-tab" data-bs-toggle="tab" data-bs-target="#nav-fours"
                           type="button" role="tab" aria-controls="nav-fours" aria-selected="false">Fours</button>

                        <button class="nav-link" id="nav-sixes-tab" data-bs-toggle="tab" data-bs-target="#nav-sixes"
                           type="button" role="tab" aria-controls="nav-sixes" aria-selected="false">Sixes</button>

                        <button class="nav-link" id="nav-wickets-tab" data-bs-toggle="tab" data-bs-target="#nav-wickets"
                           type="button" role="tab" aria-controls="nav-wickets" aria-selected="true">Wickets</button>
                       <!--  <button class="nav-link" id="nav-fifties-tab" data-bs-toggle="tab" data-bs-target="#nav-fifties"
                           type="button" role="tab" aria-controls="nav-fifties" aria-selected="false">Fifties</button>
                        <button class="nav-link" id="nav-hundreds-tab" data-bs-toggle="tab"
                           data-bs-target="#nav-hundreds" type="button" role="tab" aria-controls="nav-hundreds"
                           aria-selected="false">Hundreds</button>

                        <button class="nav-link" id="nav-dropped-catches-tab" data-bs-toggle="tab"
                           data-bs-target="#nav-dropped-catches" type="button" role="tab"
                           aria-controls="nav-dropped-catches" aria-selected="true">Dropped Catches</button>
                        <button class="nav-link" id="nav-others-tab" data-bs-toggle="tab" data-bs-target="#nav-others"
                           type="button" role="tab" aria-controls="nav-others" aria-selected="false">Others</button> -->
                     </div>
                  </nav>
                  <div class="tab-content" id="nav-tabContent">

                     
                     <div class="tab-pane fade show active" id="nav-fours" role="tabpanel" aria-labelledby="nav-fours-tab">
                        <div class="highlights-items">{{$four1}}</div>
                     </div>

                     <div class="tab-pane fade" id="nav-sixes" role="tabpanel" aria-labelledby="nav-sixes-tab">
                        <div class="highlights-items">
                           {{$six1}}
                        </div>
                     </div>

                     <div class="tab-pane fade show" id="nav-wickets" role="tabpanel" aria-labelledby="nav-wickets-tab">
                        <div class="highlights-items">
                           {{$wicket1}}
                        </div>
                     </div>

                     <div class="tab-pane fade" id="nav-fifties" role="tabpanel" aria-labelledby="nav-fifties-tab">
                        <div class="highlights-items">
                           Fifties
                        </div>
                     </div>

                     <div class="tab-pane fade" id="nav-hundreds" role="tabpanel" aria-labelledby="nav-hundreds-tab">
                        <div class="highlights-items">
                           Hundreds
                        </div>
                     </div>

                     <div class="tab-pane fade show" id="nav-dropped-catches" role="tabpanel"
                        aria-labelledby="nav-dropped-catches-tab">
                        <div class="highlights-items">
                           Dropped Catches
                        </div>
                     </div>
                     <div class="tab-pane fade" id="nav-others" role="tabpanel" aria-labelledby="nav-others-tab">
                        <div class="highlights-items">
                           Others
                        </div>
                     </div>

                  </div>
               </div>

            </div>
         </div>

          <div class="col-lg-3 col-md-12">
            <!-- Right sidebar start -->
            <div class="widget-box px-0 mb-4">
               <h2 class="widget-title mb-3">CURRENT SERIES</h2>
               <ul class="series-links-tabs">
                  @foreach(series() as $key=>$value)
                    <li><a class="#" href="{{route('series',['id'=>$value->cid])}}">{{$value->abbr}}</a></li>
                  @endforeach
               </ul>
           </div>
         </div>
      </div>
   </div>
</div>
   <!-- Footer start  -->
  
@endsection
@section('scripts')
<script>
    $(document).ready(function() {
    // alert('working'); 
    // Call fetchData function every 30 seconds
     setInterval(fetchData, 10000); 
   });
   function fetchData() {
      // alert('working');   
      var matchId = $('#match_id').val();
      var url = '/update-highlights/' + matchId;
      $.ajax({
         url: url,
         type: 'GET',
         success: function(response) {
             console.log(response);
             if(response.success == 1)
                  {
                     $('#update-score').html(response.data);
                  }
             // Handle the response here
         },
         error: function(xhr, status, error) {
             console.error('Error:', error);
         }
      });
      
   }
</script>
@endsection