@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">
          <div class="row">
            <div class="col-md-10">
              <h4 class="form-inline">Select Challenges: &ensp; </h4>
            </div>
            <div class="col-md-2">
              {{ Form::open(['role' => 'form','id'=>'challengesDatatableForm','route'=>['Matches.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-4">rocket_launch</i> <span class="fs-5">Launch Match</span></button>
              {{ Form::close() }}
            </div>
          </div>
          

          </h4>

        </div>
        <div class="card-header d-flex flex-wrap gap-3">
            @foreach($leaugeGroup as $group)
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="group_ids[]" value="{{ $group->id }}" id="group_{{ $group->id }}" onchange="checkAllCheckboxesByGroup({{ $group->id }})">
                    <label class="form-check-label" for="group_{{ $group->id }}">
                        {{ $group->group_name }}
                    </label>
                </div>
            @endforeach
        </div>
        <div class="card-body">

          <class="col-sm-12">

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

            </br></br>
            <h6> Category : {{ $challenge_category->name }}</h6>
            <table id="dataList_{{ $loop->index }}"  class="table table-striped table-hover" style="width:100%">

              <thead>
                <tr>
                  <th style="width: 32px;"><input type="checkbox"   onchange="checkAllCheckboxes({{ $loop->index }} , event)"></th>
                  <th style="width:10px">S No.</th>
                  <th>Sorting Order</th>
                  <th>Wining amount</th>
                  <th>Entry fees</th>
                  <th>Discount</th>
                  <!-- <th>Sport Type</th> -->
                  <th>Challenge Type</th>
                  <th>Maximum users</th>
                  <th>Winning Percentage</th>
                  <th>IS Gadget</th>
                  <th>IS Flexible</th>
                  <th>Multiple Entry</th>
                  <th>Use Bonus</th>
                  <th>Use Coin</th>
                  <th>Confirm Challenge</th>
                  <th style="width:180px!important">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 checkAllCheckboxesByGroup(groupId) {
    const isChecked = document.getElementById("group_" + groupId).checked;

    $(".check_box_" + groupId + "[name='challenge_id']").each(function () {
      this.checked = isChecked;

      const index = challengeIds.findIndex(x => x.challenge_id == this.value);

      if (isChecked) {
        // Add only if not already added
        if (index === -1) {
          let sort_order_val = document.getElementsByName('sort_order_' + this.value)[0]?.value || 0;
          challengeIds.push({
            "challenge_id": this.value,
            "sort_order": sort_order_val
          });
        }
      } else {
        // Remove from challengeIds array
        if (index !== -1) {
          challengeIds.splice(index, 1);
        }
      }
  });

  console.log(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,
      "paging": false,
      "info": false,
      "ajax": {
        url: "{{route('Matches.view_challenges')}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "categoryId": "Tjs="
        }
      },
      "columns": [{
          data: '#',
          name: '#',
          leagues_groups:'leagues_groups'
        },
        {
          data: 'DT_RowIndex',
          name: 'DT_RowIndex'
        },
        {
          data: 'sort_order',
          name: 'sort_order'
        },
        {
          data: 'win_amount',
          name: 'win_amount'
        },
        {
          data: 'entryfee',
          name: 'entryfee'
        },
        {
          data: 'dis_price',
          name: 'dis_price'
        },
        /*{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: 'is_gadgets',
          name: 'is_gadgets'
        },
        {
          data: 'is_flexible',
          name: 'is_flexible'
        },
        {
          data: 'multi_entry',
          name: 'multi_entry'
        },
        {
          data: 'bonus',
          name: 'bonus'
        },
        {
          data: 'bonus_coin',
          name: 'bonus_coin'
        },
        {
          data: 'confirmed_challenge',
          name: 'confirmed_challenge'
        },
        {
          data: 'name',
          name: 'name'
        }
      ],
      "searching": false,
      "bLengthChange": false,
      "bFilter": true,
      "ordering": false

    });
    @endforeach
    @endif

  });
</script>
@endsection