@extends('web.layout.master')
@section('content')
   <div class="container my-2">
      <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(json_decode($match->competition))->name}}</a></span> <span><b>Venue:</b>
                     {{json_decode(json_decode($match->venue))->name}}, {{json_decode(json_decode($match->venue))->city}}</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])}}">Highlights</a></li>
                        <li><a href="{{route('pointTable',['id'=>$match->match_id])}}" >Points Table</a></li>
                        <li><a href="{{route('fantasy',['id'=>$match->match_id])}}" class="active">Fantasy</a></li>
                     </ul>
                  </div>
               </div>

              <div class="row">

                  <div class="points-table score1">
                     <h4>Fantasy Pre match Analysis</h4>

                        <div class="row mt-3">
                  <div class="col-xl-6 col-md-12 mb-3">
                     <div class="expert-analysis mt-2">
                        <div class="expert-card commentary-profile score1">
                           <div class="title d-flex gap-2 align-items-center ps-3 mb-2">
                              <div class="image">
                                 <img src="{{asset('web/images/expert.png')}}" alt="">
                              </div>
                              <div class="content">
                                 <p>Expert Analysis </p>
                                 <span>Based on 1 Expert</span>
                              </div>
                           </div>

                           <div class="rounded-4 table-responsive font-semi">
                              <table class="table">
                                 <thead>
                                    <tr>
                                       <th class="bg-dark text-white">TEAM TYPES</th>
                                       <th class="bg-dark text-white">NO. OF TEAMS</th>
                                    </tr>
                                 </thead>
                                 <tbody>

                                    <tr>
                                       <td>Mega League Teams</td>
                                       <td>0</td>
                                    </tr>

                                    <tr>
                                       <td>Head to Head Teams</td>
                                       <td>1</td>
                                    </tr>

                                    <tr>
                                       <td>Small League Teams</td>
                                       <td>1</td>
                                    </tr>

                                    <tr>
                                       <td>SEE ALL EXPERT TIPS</td>
                                       <td><a href="/"><img src="{{asset('web/images/right-arrow.png')}}" class="img-fluid"
                                                alt=""></a></td>
                                    </tr>




                                 </tbody>
                              </table>
                           </div>

                        </div>

                     </div>
                  </div>

                  <div class="col-xl-6 col-md-12 mb-3">
                     <div class="expert-analysis mt-2">
                        <div class="expert-card commentary-profile score1">
                           <div class="title d-flex gap-2 align-items-center ps-3 mb-2">
                              <div class="image">
                                 <img src="{{asset('web/images/venue.png')}}" alt="">
                              </div>
                              <div class="content">
                                 <p>Venue</p>
                                 <span>Ground location</span>
                              </div>
                           </div>
                           <hr>

                           <div class="content ps-3">
                              <p>Kolkata</p>
                              <span>Eden Gardens</span>
                           </div>
                           <hr>

                           <div class="expert-inner d-flex gap-2 align-items-center justify-content-between">
                              <div class="title d-flex gap-2 align-items-center">
                                 <div class="image">
                                    <img src="{{asset('web/images/venue.png')}}" alt="">
                                 </div>
                                 <div class="content">
                                    <p>Venue</p>
                                    <span>Ground location</span>
                                 </div>
                              </div>
                              <div class="right">
                                 <p>Avg Score</p>
                                 <span>202</span>
                              </div>
                           </div>
                           <hr>

                           <div class="expert-inner d-flex gap-2 align-items-center justify-content-between">
                              <div class="title d-flex gap-2 align-items-center">
                                 <div class="image">
                                    <img src="{{asset('web/images/venue.png')}}" alt="">
                                 </div>
                                 <div class="content">
                                    <p>Venue</p>
                                    <span>Ground location</span>
                                 </div>
                              </div>
                              <div class="right">
                                 <p>Avg Score</p>
                                 <span>202</span>
                              </div>
                           </div>
                           <hr>

                           <div class="expert-inner d-flex gap-2 align-items-center justify-content-between">
                              <div class="content">
                                 <p>SEE TOP PLAYERS AT VENUE</p>
                              </div>

                              <div class="right">
                                 <span><img src="{{asset('web/images/right-arrow.png')}}" class="img-fluid" alt=""></span>
                              </div>
                           </div>
                        </div>

                     </div>
                  </div>
                  <div class="col-xl-6 col-md-12 mb-3">
                     <div class="expert-analysis probability mt-2 ">
                        <div class="expert-card commentary-profile">
                           <div class="title d-flex gap-2 align-items-center ps-3 mb-2">
                              <div class="image">
                                 <img src="{{asset('web/images/expert.png')}}" alt="">
                              </div>
                              <div class="content">
                                 <p>Team Comparison </p>
                                 <span>Based on last 2 years data</span>
                              </div>
                           </div>
                           <hr>

                           <div class="card-body">
                              <div class="d-flex align-items-center justify-content-between mb-3">
                                 <button class="btn btn-primary btn-sm"><span class="second_tema_name font-low ms-2">{{json_decode(json_decode($match->teama))->name}}</span></button>
                                 <button class="btn btn-success btn-sm">{{json_decode(json_decode($match->teamb))->name}}</button>
                              </div>
                              <ul class="d-flex align-items-center justify-content-between">
                                 <li>60%</li>
                                 <li class="win">Win Probability</li>
                                 <li>40%</li>
                              </ul>
                              <div class="progress">
                                 <div class="progress-bar" role="progressbar"
                                    style="width: 35%;background-color: #3793FF;" aria-valuenow="35" aria-valuemin="0"
                                    aria-valuemax="100">35</div>
                                 <div class="progress-bar bg-success" role="progressbar" style="width: 40%"
                                    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40</div>
                                 <div class="progress-bar bg-danger" role="progressbar" style="width: 35%"
                                    aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35</div>
                              </div>

                              <ul class="d-flex align-items-center justify-content-between mt-3">
                                 <li>2/5</li>
                                 <li class="win">Recent Form</li>
                                 <li>2/5</li>
                              </ul>

                              <div class="full-team d-flex align-items-center justify-content-between gap-2 ">
                                 <div class="left-team">
                                    <button type="button" class="btn btn-success btn-sm">W</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>
                                    <button type="button" class="btn btn-success btn-sm">W</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>

                                 </div>
                                 <div class="right-team">
                                    <button type="button" class="btn btn-success btn-sm">W</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>
                                    <button type="button" class="btn btn-success btn-sm">W</button>
                                    <button type="button" class="btn btn-danger btn-sm">L</button>
                                 </div>

                              </div>
                           </div>

                           <hr>
                           <div class="expert-inner d-flex gap-2 align-items-center justify-content-between">
                              <div class="content">
                                 <p>SEE TEAM STRENGTHS</p>
                              </div>

                              <div class="right">
                                 <span><img src="{{asset('web/images/right-arrow.png')}}" class="img-fluid" alt=""></span>
                              </div>
                           </div>

                        </div>

                     </div>
                  </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>
   <!-- Footer start  -->
  
@endsection
@section('scripts')
@endsection