@extends('admin.layouts.masterlayout')
@section('styles')

<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
@endsection
@section('content')
<div class="main-content">

  <div class="row">
    <div class="col-12">
      <div class="card" data-aos="fade-up">
        <div class="card-header">
          <h4>User  Created Teams</h4>

        </div>
        <div class="card-body">
            <div class="col-12">
                    <div class="card" data-aos="fade-up">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="example" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Sno</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Team ID</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Team Number</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Match Key</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Players</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Captain</th>
                                        <th style="border: 1px solid #ccc; padding: 10px;">Vice Captain</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(isset($Json) && !empty($Json))
                                        @foreach($Json as $key=>$player)
                                            <tr>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $key+1 }}</td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $player['teamid'] }}</td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $player['teamnumber'] }}</td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $player['matchkey'] }}</td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">
                                                    <ul style="padding-left: 20px; margin: 0;">
                                                        <li>
                                                            <strong>Keeper</strong>
                                                            <ul>
                                                                @foreach($player['keeper'] ?? [] as $value)
                                                                    <li>{{ $value->playername }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <strong>Batsman</strong>
                                                            <ul>
                                                                @foreach($player['batsman'] ?? [] as $value)
                                                                    <li>{{ $value->playername }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <strong>All Rounder</strong>
                                                            <ul>
                                                                @foreach($player['allrounder'] ?? [] as $value)
                                                                    <li>{{ $value->playername }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <strong>Bowler</strong>
                                                            <ul>
                                                                @foreach($player['bowler'] ?? [] as $value)
                                                                    <li>{{ $value->playername }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $player['captain'] }}</td>
                                                <td style="border: 1px solid #ccc; padding: 10px;">{{ $player['vicecaptain'] }}</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                               
                            </table>

                                </tfoot>
                            </table>


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

@endsection
@section('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function() {
        var table = $('#example').DataTable( {
            lengthChange: false,
            buttons: [ 'copy', 'excel', 'pdf', 'print']
        } );

        table.buttons().container()
            .appendTo( '#example_wrapper .col-md-6:eq(0)' );
    } );
</script>
@endsection