@extends('layouts.main')

@section('page-specific-styles')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<style>
    .Back {
        background: rgb(114, 187, 239) !important;        
    }
    .Lay {
        background: rgb(249, 148, 186) !important;
    }
</style>
@endsection

@section('content')
<div class="container">
  <table class="table table-bordered" id="sports">
    <thead>
      <tr>
        <th>Time</th>
        <th>Matches</th>
        <th>1</th>
      </tr>
    </thead>
    <tbody>
    @forelse($sport_matches as $sport_match)
    <tr>
        <td>{{ date("Y-m-d h:i a", strtotime($sport_match->commence_time)) }}</td>
        <td>{{ $sport_match->home_team }} V {{ $sport_match->away_team }} ({{ $sport_match->sport_title }})</td>
        <td>
            @foreach($sport_match->bookmakers as $bookmark)
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th colspan="3">{{ $bookmark->title }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Team</td>
                        @php $first_teams = array();$second_teams = array() @endphp
                        @foreach($bookmark->markets as $market)
                            @php  
                                $name = $market->key; 
                                if($market->key == "h2h") { 
                                    $name = "Back";
                                }
                                if($market->key == "h2h_lay") { 
                                    $name = "Lay";
                                }
                            @endphp
                            <td>{{ $name }}</td>
                            @foreach($market->outcomes as $key => $outcome)  
                                @php
                                    $key == 0 ? array_push($first_teams,$outcome) : array();
                                    $key == 1 ? array_push($second_teams,$outcome) : array();
                                @endphp
                            @endforeach
                        @endforeach 
                    </tr>
                    <tr>
                        <td>{{ $first_teams[0]->name }}</td>
                        @foreach($first_teams as $key => $first_team)
                        <td class="{{ $key == 0 ? 'Back' : '' }}{{ $key == 1 ? 'Lay' : '' }}">
                            {{ $first_team->price }}
                        </td>
                        @endforeach
                    </tr>
                    <tr>
                        <td>{{ $second_teams[0]->name }}</td>
                        @foreach($second_teams as $key => $second_team)
                        <td class="{{ $key == 0 ? 'Back' : '' }}{{ $key == 1 ? 'Lay' : '' }}">
                            {{ $second_team->price }}
                        </td>
                        @endforeach
                    </tr>
                </tbody>
            </table>
            @endforeach
        </td>
    </tr>
    @empty
    <tr>
        <td>No Sports</td>
    </tr>
    @endforelse
    </tbody>
  </table>
</div>
@endsection

@section('page-specific-scripts')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script>
    let table = new DataTable('#sports1', {
    });
</script>
@endsection