@extends('layouts.grid')
@section('content')
<script>
$(document).ready(function()
{
    $('#cb-gen').on('change', function() {
    if($(this).prop("checked") ==  "true")
    {
      $('body').addClass('P');
    } else if($(this).prop("checked") ==  "false")
    {
        $('.body').addClass('S');
    }
    });
});
    function cbToggle(cb)   {
        if(cb.value == '2')
        {
            cb.value = '1';
            cb.title = 'Substitute';
            cb.className  = 'cb-gen S';
        }
        else
        {
            cb.value = '2';
            cb.title = 'Player';
            cb.className = 'cb-gen P';
        }
    }

</script>
<style>
    .cb-gen
    {
	    -webkit-appearance: none;
        border: 1px solid #cacece;
	    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	    padding: 9px;
	    margin: -4px;
        border-radius: 3px;
	    display: inline-block;
	    position: relative;
    }
    .P
    {
        background-color:   #daffda;
    }
    .S
    {
        background-color:   gold;
    }
    .cb-gen:checked:after
    {
	    content: '\2714';
	    font-size: 14px;
	    position: absolute;
	    top: 0px;
	    left: 3px;
	    color: #99a1a7;
    }

    .cmp-box   { float:left; width:450px; height:370px; margin: 5px 10px 20px 0px ; background:#ffffff;display:block;overflow:auto;}
    .cmp-btn   { clear:both; margin: 10px 5px 5px 10px; }
    hr {margin:0px;}
</style>
    <section class="section">
        <div class="container">

        <h1 class="title">{!! mb_strtoupper(trans('labels.players'), 'UTF-8') !!}</h1>
        <form method="POST" action="/players/assign">
            @csrf
            <div class="container is-clearfix">
                <input type="reset" class="button is-primary is-outlined" value="Clear">
                <input type="submit" class="button is-primary" value="Update">
            </div>
            <br>
            <div class="container is-pulled-left box">
                <table class='table is-size-6'>
                    <thead>
                        <tr>
                            <th colspan="2">PLAYER</th>
                            @foreach($teams as $team)
                                <th>{{ $team->team_code }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                                                @foreach ($players as $player)
                            @if($counter == 10)
                                        </tbody>
                                    </table>
                                </div>
                                <div class="container is-pulled-left box" style="margin-feft:30px;">
                                    <table class='table is-size-6'>
                                        <thead>
                                            <tr>
                                                <th colspan="2">PLAYER</th>
                                                @foreach($teams as $team)
                                                    <th>{{ $team->team_code }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                            @endif
                            <tr>
                                <td>{{ $player->str_name }}</td>
                                <td>{{ $player->classif_code }}</td>
                                @foreach($teams as $team)
                                    <td><input  type="checkbox"
                                                ondblclick="cbToggle(this);"
                                                name="{{ $player->player_id }}[{{ $team->id }}]"
                                                value="2"
                                                class="cb-gen P"
                                                title = 'Player'
                                        >
                                    </td>
                                @endforeach
                            </tr>
                                                    @endforeach
                    </tbody>
                </table>
            </div>
          </form>
        </div>
    </section>
@endsection