@extends('admin.layouts.default')
@section('content')
<!-- DATATABLE GLOBAL SCRIPTS -->
  <link rel="stylesheet" href="{{asset('css/admin/datatable.css')}}">
<script src="{{asset('js/admin/datatable.js')}}"></script>

  <!-- {{ HTML::style('css/admin/dataTables.checkboxes.css') }}
  {{ HTML::script("js/admin/dataTables.checkboxes.min.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 leaguesMatches" >
        <div class="col-12">
                    <div class="card" data-aos="fade-up">
                        <div class="card-header">
                          <!-- <a href="{{route('Series.add')}}" class="btn btn-primary btn-sm"> Add New {{$modelName}}</a> -->
                          <h4 class="form-inline">Select Challenges  &ensp;
                              {{ Form::open(['role' => 'form','id'=>'challengesDatatableForm','route'=>[$modelName.'.submitleaguesforlaunch'], 'files' => true]) }}

                            <input type="hidden" name="matchId" value="{{ $matchkey }}">
                            <input type="hidden" name="sport_type" value="{{ $sport_type }}">
                            <button type="submit" class="btn btn-primary">Update Contest</button>
                              {{ Form::close() }}
                          </h4>

                        </div>
                        <div class="card-body">

                            <div class="table-responsive ">

                              @if(!empty($allchallengecategory))
                                @foreach($allchallengecategory as $challenge_category)

                                <h4 style="margin-bottom:-46px;"> Category :  {{ $challenge_category->name }}</h4>
                              <table id="dataList_{{ $loop->index }}" class="display" style="min-width: 845px">

                                  <thead>
                                      <tr>
                                        <th><input type="checkbox" onchange="checkAllCheckboxes({{ $loop->index }} , event)"></th>
                                        <th>S No.</th>
                                        <th>Sorting Order</th>
                                      <th>Wining amount</th>
                                      <th>Entry fees</th>
                                      <th>Sport Type</th>
                                      <th>Challenge Type</th>
                                      <th>Maximum users</th>
                                      <th>Winning Percentage</th>
                                      <th>Multiple Entry</th>
                                      <th>Can Use Bonus</th>
                                      <th>Is running</th>
                                      <th>Confirm Leauge</th>
                                      <th>Category</th>

                                  </tr>
                                  </thead>

                                  <tfoot>
                                      <tr>
                                      <th><input type="checkbox" onchange="checkAllCheckboxes({{ $loop->index }})"></th>
                                      <th>S No.</th>
                                      <th>Sorting Order</th>
                                      <th>Wining amount</th>
                                      <th>Entry fees</th>
                                      <th>Sport Type</th>
                                      <th>Challenge Type</th>
                                      <th>Maximum users</th>
                                      <th>Winning Percentage</th>
                                      <th>Multiple Entry</th>
                                      <th>Can Use Bonus</th>
                                      <th>Is running</th>
                                      <th>Confirm Leauge</th>
                                      <th>Category</th>

                                  </tr>
                                  </tfoot>
                              </table>

                              @endforeach
                              @endif

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

<script type="text/javascript">

var challengeIds = [];

function checkAllCheckboxes(index , event){
var elementChecked = $("#dataList_"+index+" :input[type='checkbox']").first().prop("checked");

if(elementChecked){
  var checkboxes = document.querySelectorAll("#dataList_"+index+" input[type='checkbox'][name='challenge_id']");
// console.log(checkboxes); exit;
  for (var j = 0; j < checkboxes.length; j++) {

    if(challengeIds.findIndex(x => x.challenge_id == checkboxes[j].value) === -1){
      let sort_order_val = document.getElementsByName('sort_order_'+checkboxes[j].value)[0].value;
      challengeIds.push({"challenge_id":checkboxes[j].value ,"sort_order":sort_order_val});
      checkboxes[j].checked = true;
    }
}
}else{
  var checkboxes = document.querySelectorAll("#dataList_"+index+" input[type='checkbox'][name='challenge_id']");
  for (var j = 0; j < checkboxes.length; j++) {
    checkboxes[j].checked = false;
    if(challengeIds.findIndex(x => x.challenge_id == checkboxes[j].value) !== -1){
        challengeIds.splice(challengeIds.findIndex(x => x.challenge_id === checkboxes[j].value) , 1);
    }
}
}
console.log(challengeIds);
}
function editSortingOrderInArray(challengeId , event){

  if(challengeIds.findIndex(x => x.challenge_id == challengeId) !== -1){
      challengeIds[challengeIds.findIndex(x => x.challenge_id == challengeId)].sort_order = event.target.value;
  }
  console.log(challengeIds);
}

function addOrRemoveChallenge(event){
  if(event.target.checked){
    let sort_order_val = document.getElementsByName('sort_order_'+event.target.value)[0].value;
    challengeIds.push({"challenge_id" : event.target.value , "sort_order":sort_order_val});
  }else{

    if(challengeIds.findIndex(x => x.challenge_id == event.target.value) !== -1){
      challengeIds.splice(challengeIds.findIndex(x => x.challenge_id === event.target.value) , 1);
    }
    // if(challengeIds.indexOf(event.target.value) !== -1){
    //   challengeIds.splice(challengeIds.indexOf(event.target.value) , 1);
    // }
  }
  console.log(challengeIds);
}
   // Handle form submission event
   $('#challengesDatatableForm').on('submit', function(e){
     var form = this;

      $.each(challengeIds, function(index, rowId){

        // rowIds.push(rowId);
         // Create a hidden element
         $(form).append(
             $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'challenge_ids[]')
                .val(JSON.stringify(rowId))
         );
      });
      // submitleaguesforlaunch
   });


$(document).ready(function() {
@if(!empty($allchallengecategory))
  var matchkey = '{{$matchkey}}';
  var sport_type = {{$sport_type}}
  @foreach($allchallengecategory as $challenge_category)

    $('#dataList_{{ $loop->index }}').DataTable({

      order: [0, 'desc'],
      "iDisplayLength": 1000,
        "processing": true,
        "serverSide": true,
        "ajax":{
          url:"{{route($modelName.'.view_edit_challenges')}}" ,
          type: "POST" ,
          data : {"_token": "{{ csrf_token() }}" ,"matchkey":matchkey , "sport_type":sport_type, "categoryId": "Tjs="  }
        },
        "columns": [
            {data: '#', name: '#'},
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'sort_order', name: 'sort_order'},
            {data: 'win_amount', name: 'win_amount'},
            {data: 'entryfee', name: 'entryfee'},
            {data: 'sport_type', name: 'sport_type'},
            {data: 'challenge_type', name: 'challenge_type'},
            {data: 'maximum_user', name: 'maximum_user'},
            {data: 'winning_percentage', name: 'winning_percentage'},
            {data: 'multi_entry', name: 'multi_entry'},
            {data: 'bonus', name: 'bonus'},
            {data: 'is_running', name: 'is_running'},
            {data: 'confirmed_challenge', name: 'confirmed_challenge'},
            {data: 'name', name: 'name'}
        ],
        "searching": false,
        "bLengthChange": false,
   "bFilter": true,
   "ordering": false

    });
    @endforeach
    @endif

});
</script>
@endsection