@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 mb-3">
            <div class="border p-3 rounded-4">
            	               <h1 class="crick-blog-title">{{$match->title}}, {{$match->subtitle}} - Live Cricket Score</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}} </span>
               </div>
               <hr class="my-4">
               <div class="row">
                  <div class="col-md-8">
                     <div class="border rounded-4 p-3">
                        <div class="d-flex justify-content-between flex-wrap ">
                           <p class="text-nowrap font-low mb-0">
                              @if($match->status == 2)<span class="success-text">Completed </span>
                              @elseif($match->status == 1)<span class="live-text">Live </span>@endif<span
                                 class="style_dark_match_date"> - {{$match->subtitle}}</span> - {{json_decode($match->venue)->location}}</p>
                           <p class="text-nowrap font-low mb-0"><span class="text-dark fw-bold">
                        </div>
                        <div class="team_list_box pt-3">
                           <div class="team_list_items d-flex justify-content-between align-items-center">
                              <div class="d-flex align-items-center text-dark">
                                 <img src="{{asset(json_decode($match->teama)->thumb_url)}}" class="rounded mx-auto d-block" alt="">
                                 <span class="first_tema_name font-low ms-2">{{json_decode($match->teama)->name}}</span>
                              </div>
                              <p class="mb-0 font-low">{{$score1->scores}}</p>
                           </div>
                           <div class="team_list_items d-flex justify-content-between align-items-center">
                              <div class="d-flex align-items-center">
                                 <img src="{{asset(json_decode($match->teamb)->thumb_url)}}" class="rounded mx-auto d-block" alt="">
                                 <span class="second_tema_name font-low ms-2">{{json_decode($match->teamb)->name}}</span>
                              </div>
                              <p class="mb-0 font-low">{{$score2->scores}}</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  
               </div>

               <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])}}">Highlights</a></li>
                        <li><a href="{{route('pointTable',['id'=>$match->match_id])}}" class="active">Points Table</a></li>
                     </ul>
                  </div>
               </div>

              <div class="row">

                  <div class="points-table score1">
                     <h4>Points Table</h4>

                     <div class="border rounded-4 table-responsive font-semi mb-3">
                        <table class="table">
                           <thead>
                              <tr>
                                 <th class="bg-dark text-white">Team</th>
                                 <th class="bg-dark text-white">P</th>
                                 <th class="bg-dark text-white">W</th>
                                 <th class="bg-dark text-white">L</th>
                                 <th class="bg-dark text-white">CRR</th>
                                 <th class="bg-dark text-white">NRR</th>
                                 <th class="bg-dark text-white">PTS</th>
                              </tr>
                           </thead>
                           <tbody>