@extends('admin.layouts.default')
@section('content')
<!-- DATATABLE GLOBAL SCRIPTS -->
  {{ HTML::style('css/admin/datatable.css') }}
  {{ HTML::script("js/admin/datatable.js") }}

  <style type="text/css">
      .list-inline li {
            display: inline-table;
            padding: 5px 14px;
            /*background: #5d78ff;*/
            border-radius: 3px;
        }

        .list-inline li a {
            color: #fff;
        }
  </style>

<div class="container-fluid">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0">
            <!-- <div class="welcome-text">
                <h4>All Matches</h4>
            </div> -->
        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <!-- <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Datatable</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Series</a></li>
            </ol> -->
        </div>
    </div>
    <div class="row">
        <div class="col-12">
                    <div class="card" data-aos="fade-up">
                        <div class="card-header">

                          <h4>All Matches</h4>
                        </div>
                        <div class="card-body">

                            <div class="table-responsive">
                                <table id="dataList" class="display" style="min-width: 845px">
                                    <thead>
                                        <tr>
                                        <th>S No.</th>
                                        <th> Match Id</th>

                                        <th>
                                          <input type="text" id="filter_name" name="filter_name" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_name')">
                                          Match</th>
                                        <th>

                                          <select  id="filter_sport_type" name="filter_sport_type" onclick="cancelEvent()" onchange="filterData(event , 'filter_sport_type')">
                                            <option selected disabled>Select Sport Type </option>
                                            @foreach($sportTypes as $sport)
                                                 <option selected value="{{ $sport->id }}" > {{$sport->sport_name}}</option>
                                             @endforeach

                                          </select>


                                          Sport</th>
                                        <th>Date & Time</th>
                                        <th>

                                          Teams</th>
                                        <th>Match Action</th>
                                        <th>View Players</th>
                                    </tr>
                                    </thead>

                                    <tfoot>
                                        <tr>
                                        <th>S No.</th>
                                        <th>Match Id</th>
                                        <th>Match</th>
                                        <th>Sport</th>
                                        <th>Date & Time</th>
                                        <th>Teams</th>
                                        <th>Match Action</th>
                                        <th>View Players</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
</div>

<script type="text/javascript">


function cancelEvent(){
  event.stopPropagation();
}

var filtercolums = {

};

var input_filter_name = '';
var input_filter_sport_type = '';


function updateURL(event,fieldname){
  var value = event.target.value;

  if(fieldname == 'filter_name'){
    input_filter_name = value;
  }
  if(fieldname == 'filter_sport_type'){
    input_filter_sport_type = value;
  }


  var url = window.location.href.split('?')[0];
  history.pushState('', '', url+"?filter=1&filter_name="+input_filter_name+"&filter_sport_type="+input_filter_sport_type);

}
function filterData(event , fieldname){

  var value = event.target.value;
updateURL(event,fieldname);

if(fieldname == 'filter_name'){
  filtercolums['filter_name'] = value;
}
if(fieldname == 'filter_sport_type'){
  filtercolums['filter_sport_type'] = value;
}


  $('#dataList').DataTable().clear().destroy(); //clear table data Table

  $('#dataList').DataTable({
    // order: [0, 'desc'],
      "processing": true,
      "serverSide": true,
      "pageLength": 100,
      "ajax":{
        url:"{{route($modelName.'.view', @$sport_type)}}",
        type: "POST",
        data : {"_token": "{{ csrf_token() }}", "filter_columns":filtercolums}
      },
      "columns": [
          {data: 'DT_RowIndex', name: 'DT_RowIndex'},
          {data: 'matchkey', name: 'matchkey'},
          {data: 'name', name: 'name'},
          {data: 'sport_type', name: 'sport_type', orderable: true, searchable: false},
          {data: 'start_date', name: 'start_date', orderable: true, searchable: false},
          {data: 'teams', name: 'teams',orderable: false, searchable: false},
          {data: 'action', name: 'action', orderable: false, searchable: false},
          {data: 'view_players', name: 'view_players', orderable: false, searchable: false},
      ]
  });

  document.getElementById(fieldname).focus();

}

$(document).ready(function() {
        let filter_name = '';
        let filter_sport_type = '';
        if(filter_name!==''){
          filtercolums['filter_name'] = filter_name;
        }
        if(filter_sport_type!==''){
          filtercolums['filter_sport_type'] = filter_sport_type;
        }


    $('#dataList').DataTable({
      // order: [0, 'desc'],
        "processing": true,
        "serverSide": true,
        "pageLength": 100,
        "ajax":{
          url:"{{route($modelName.'.view', @$sport_type)}}",
          type: "POST",
          data : {"_token": "{{ csrf_token() }}", "filter_columns":filtercolums}
        },
        "columns": [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'matchkey', name: 'matchkey'},
            {data: 'name', name: 'name'},
            {data: 'sport_type', name: 'sport_type', orderable: true, searchable: false},
            {data: 'start_date', name: 'start_date', orderable: true, searchable: false},
            {data: 'teams', name: 'teams',orderable: false, searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false},
            {data: 'view_players', name: 'view_players', orderable: false, searchable: false},
        ]
    });

});
</script>
@endsection