@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 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="badge bg-grd-voilet"><i class="material-icons-outlined material-icons-outlined fs-5">rocket_launch</i>
              <h6>Launch Match</h6>
            </button>
            {{ Form::close() }}
          </h4>

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

          <div class="table-responsive ">

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

            <h4> 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>


            </table>

            @endforeach
            @endif

          </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">
  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']");
      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))
    @foreach($allchallengecategory as $challenge_category)

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

      order: [0, 'desc'],
      "iDisplayLength": 1000,
      "processing": true,
      "serverSide": true,
      "ajax": {
        url: "{{route($modelName.'.view_challenges')}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "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