@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">Add</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">Add Match</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">

                        {{ Form::open(['role' => 'form','id'=>'matchAddForm','route'=>[$modelName.'.add_match'], 'files' => true]) }}
                            <div class="form-row">

                                <div class="form-group col-md-6">
                                    <label class="lbl_frm py-2">Select Series</label>
                                    <select class="form-control in_text" name="series" id="series">
                                        <option value="">Select Series</option>
                                        @foreach($findallseries as $key => $value)
                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="lbl_frm py-2">Select Sport Type</label>
                                    <select class="form-control in_text sport_types" name="sport_type">
                                        <option value="">Select Sport</option>
                                        @foreach($sport_types as $key => $value)
                                            <option value="{{$value->id}}">{{$value->sport_name}}</option>
                                        @endforeach
                                    </select>
                                    <div class="error-message help-inline">
                                      {{$errors->first('sport_type')}}
                                    </div>
                                </div>

                                <div class="form-group col-md-6 select_format">
                                    <label class="lbl_frm py-2">Select Match Format</label>
                                    <select class="form-control in_text " name="format">
                                        <option value="">Select Format</option>
                                        <option value="t20">T20</option>
                                        <option value="one-day">One-day</option>
                                        <option value="test">Test</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="lbl_frm py-2">Start Date</label>
                                    <input id="dob" type="text" name="start_date"  value="" class="form-control datetimepickerget datepicker in_text" placeholder="Enter Match Start Date">
                                    <label class="error-message help-inline">
                                      {{$errors->first('start_date')}}
                                    </label>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="lbl_frm py-2">Select Team1</label>
                                    <select class="form-control in_text" name="team1" id="team1">
                                        <option value="">Select Team</option>
                                        @foreach($teams as $key => $value)
                                            <option value="{{$value->id}}">{{$value->team}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 team1_players">
                                    <h4>Team 1 Players</h4>
                                    <select id='team_one' name='team1_player[]' multiple='multiple'>
                                    </select>
                                    <div id="team_one_added_player" style="font-weight:bold;">
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label class="lbl_frm py-2">Select Team2</label>
                                    <select class="form-control in_text" name="team2" id="team2">
                                        <option value="">Select Team</option>
                                        @foreach($teams as $key => $value)
                                            <option value="{{$value->id}}">{{$value->team}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-md-12 team2_players">
                                    <h4>Team 2 Players</h4>
                                    <select id='team_two' name='team2_player[]' multiple='multiple'>
                                    </select>
                                    <div id="team_two_added_player" style="font-weight:bold;">
                                    </div>
                                </div>
                            </div>

                            <div class="py-2">
                            <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>


<!-- <script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/jquery.min.js'}}"></script> -->
<!-- <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script> -->
<!-- <script type="text/javascript" src="{{WEBSITE_URL.'resources/views/admin/Matches/assets/bootstrap.min.js'}}"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<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.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);

      // if(fooCount == 15)
      // {
      //   alert('Only 15 Options Allowed');
      // $('#ms-team_one .ms-selectable li').addClass('disabled');
      // }
    },

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

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

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

      // if(fooCount < 15)
      // {
      //   $('#ms-team_one .ms-selectable li').removeClass('disabled');
      // }

    }
  });

  $('#team_two').multiSelect(
  {

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

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

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

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

      /*if(fooCount < 15)
      {
        $('#ms-team_two .ms-selectable li').removeClass('disabled');
      }*/
    }

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

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

<script type="text/javascript">
    $(document).ready(function(){
      $(".select_format").hide();
      $(document).on('change',".sport_types",function(){
          var sport_type = $(this).val();
          if(sport_type == 1)
          {
              $(".select_format").show();
          }
          else
          {
              $(".select_format").hide();
          }
      });

        $('#start_date').datetimepicker();

        $(document).on("change","#series",function(){
            $("#season").val($("#series :selected").text());
        });

        $(document).on("change","#team1",function(event){
            var team1 = $(this).val().trim();
            //$("#team1_name").val($("#team1 :selected").text());
            $(".team1_players").find("h4").text($("#team1 :selected").text());
            $("#team2").children('option').removeAttr('disabled');
            $('#team2').children('option[value="'+team1+'"]').attr('disabled','disabled');
            if (team1 != '' || team1 != 0) {
                $.ajax({
                    url: "{{route($modelName.'.getTeamPlayers')}}",
                    type: "post",
                    data: {"team_id":team1},
                    success: function(res){
                        // console.log(res.players[2].id);
                        var output = [];
                        $.each(res.players, function(key, value)
                        {
                          output.push('<option value="'+ value.id +'">'+ value.player_name +'</option>');
                        });
                        $('#team_one').html(output.join(''));
                        $(document).find('#team_one').multiSelect('refresh');
                    },
                    error: function(err){
                        console.log(err);
                    }
                });
            }
        });

        $(document).on("change","#team2",function(event){
            var team2 = $(this).val().trim();
            //$("#team2_name").val($("#team2 :selected").text());
            $(".team2_players").find("h4").text($("#team2 :selected").text());
            $("#team1").children('option').removeAttr('disabled');
            $('#team1').children('option[value="'+team2+'"]').attr('disabled','disabled');
            if (team2 != '' || team2 != 0) {
                $.ajax({
                    url: "{{route($modelName.'.getTeamPlayers')}}",
                    type: "post",
                    data: {"team_id":team2},
                    success: function(res){
                        console.log(res);
                        var output = [];
                        $.each(res.players, function(key, value)
                        {
                          output.push('<option value="'+ value.id +'">'+ value.player_name +'</option>');
                        });
                        $('#team_two').html(output.join(''));
                        $('#team_two').multiSelect('refresh');
                    },
                    error: function(err){
                        console.log(err);
                    }
                });
            }
        });

    });
</script>

<!-- <script type="text/javascript">

    $('#dob').datepicker({
        startDate: new Date()
    });

</script> -->

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on("click","#cancel_btn", function(){
            let href = $(".breadcrumb-item.active a").attr("href");
            window.location = href;
        });
    });
</script>


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