@extends('layouts.main')
@section('content')


    <div class="container">
        <div class="page-header">
            <h1>Picks <small>{{$week->name}}</small></h1>
            <div class="form-group">
                <label class="control-label" for="">Choose Week:</label>
                <select name="" id="week-select" class="form-control">
                    @foreach($weeks as $sweek)
                        <option{!!($sweek->id==$week->id)? ' selected="selected"':''!!} value="{{$sweek->id}}">{{$sweek->name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        {!!Form::open(['action'=>['PicksController@store']])!!}
        <input type="hidden" name="week_id" value="{{$week->id}}"/>
        <div class="row">
            @foreach($week->games as $index=>$game)
                <div class="col-md-6">
                    @include('pages.partials.matchup')
                </div>
            @endforeach
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-9">
                <button type="submit" class="btn btn-success save-button btn-block">Save</button>
            </div>
        </div>

        {!!Form::close()!!}
    </div>
    <script>
        jQuery(document).ready(function () {
            $('#week-select').on('change', function () {
                var value = $(this).val();
                window.location = '{{url('/picks/')}}/' + value;
            });
            openGames = $('.game:not(".locked")');

            $('.thumbnail',openGames).on('click',function(){
                var $self = $(this);
                var $parent = $self.closest('.game');
                    $parent.find('.thumbnail.selected').each(function(){$(this).removeClass('selected')});
                    $self.addClass('selected');
                    $($self.data('target')).trigger('click');

            });
        });
    </script>
@endsection