@extends('admin.layouts.default')
@section('content')
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
<style type="text/css">
  #team_one_added_player,#team_two_added_player {
    padding: 5px;
  }
</style>
<!--********************************** Content body start  ***********************************-->
<div class="container-fluid">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
        </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 active"><a href="{{route($modelName.'.matchmapping')}}">View all Upcoming Matches</a></li>
                <li class="breadcrumb-item">Match Lineup</li>
            </ol>
        </div>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                    <h4 class="card-title">View/Edit match lineup</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">

                        {{ Form::open(['role' => 'form','id'=>'matchAddForm','route'=>[$modelName.'.addlinup',$match_detail->matchkey], 'files' => true]) }}

                            <div class="form-row">
                                <div class="col-md-12 team1_players">
                                    <h4></h4>
                                    <select id='team_one' name='playing_11_team[]' multiple='multiple'>
                                                                            </select>
                                    <div id="team_one_added_player" style="font-weight:bold;">
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-md-12 team2_players">
                                    <h4></h4>
                                    <select id='team_two' name='playing_11_team[]' multiple='multiple'>
                                                                            </select>
                                    <div id="team_two_added_player" style="font-weight:bold;">
                                    </div>
                                </div>
                            </div>

                            <div class="py-2">
                                <input type="hidden" name="matchid" value="">

                                <input type="hidden" name="palying_eleven" value="palying_eleven">
                                <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                <button class="btn btn-gray" type="button" id="cancel_btn">Cancel</button>
                            </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{{WEBSITE_URL.'resources/views/admin/Matches/assets/multi-select.css'}}"/>

<!-- <script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/jquery.min.js'}}"></script> -->
<script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/bootstrap.min.js'}}"></script>
<script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/jquery.multi-select.js'}}"></script>
<script type="text/javascript">

  $('#team_one').multiSelect(
  {
    afterSelect: function(values)
    {
      var fooCount =  $('#team_one option:selected').length ;

      $("#team_one_added_player").html('Added Player: '+fooCount);

      // alert(fooCount);

      if(fooCount == 11)
      {
        alert('Only 11 Options Allowed');
      $('#ms-team_one .ms-selectable li').addClass('disabled');
      }
      if(fooCount > 8)
      {
        $('#submit_button').removeClass('hide_one');
      }
    },

    afterDeselect: function(values)
    {
      // alert("Deselect value: "+values);

      var fooCount =  $('#team_one option:selected').length ;

      $("#team_one_added_player").html('Added Player: '+fooCount);

      if(fooCount < 11)
      {
        $('#ms-team_one .ms-selectable li').removeClass('disabled');
      }
      if(fooCount < 9)
      {
        $('#submit_button').addClass('hide_one');
      }
    }
  });

  $('#team_two').multiSelect(
  {

    afterSelect: function(values)
    {
      var fooCount =  $('#team_two option:selected').length ;

      $("#team_two_added_player").html('Added Player: '+fooCount);

      if(fooCount == 11)
      {
        alert('Only 11 Options Allowed');
      $('#ms-team_two .ms-selectable li').addClass('disabled');
      }
      if(fooCount > 8)
      {
        $('#submit_button').removeClass('hide_one');
      }
    },
    afterDeselect: function(values)
    {
      // alert("Deselect value: "+values);
      var fooCount =  $('#team_two option:selected').length ;

      $("#team_two_added_player").html('Added Player: '+fooCount);

      if(fooCount < 11)
      {
        $('#ms-team_two .ms-selectable li').removeClass('disabled');
      }
      if(fooCount < 9)
      {
        $('#submit_button').addClass('hide_one');
      }
    }

  });
</script>
<!-- //Multiselect// -->

<style type="text/css">
/*.hide_one{ display: none; }*/
.hide_two{ display: none; }
</style>


<!--**********************************
Content body end
***********************************-->
@endsection