@extends('layouts.app')

@section('link')

<link href="{{ asset('css/tournament_second.css') }}" rel="stylesheet">
<link href="{{ asset('css/links.css') }}" rel="stylesheet">
<link href="{{ asset('css/jquery.datetimepicker.css') }}" rel="stylesheet">
@endsection


@section('style')
<style>
    
    a, a:visited, li a.active {
        color: #156aa3;
        text-decoration: underline;
    }
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section {
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    
    
    
    #knockout-bracket .round-2 .round-heading {
        margin-bottom: 52px;
    }
    #knockout-bracket .main {
        width:100%;
       }

       #knockout-bracket .round-1 .round-heading {
        margin-bottom:14.5px;
       }
       #knockout-bracket .round-1 .match {
        margin-bottom:20px;
       }
       #knockout-bracket .line-column-1 .first {
        margin-top:88.5px;
       }
       #knockout-bracket .line-column-1 .bracket-line-top {
        height:37px;
       }
       #knockout-bracket .line-column-1 .bracket-line-bottom {
        margin-bottom:101.04px;
        height:37px;
       }
       #knockout-bracket .round-2 .round-heading {
        margin-bottom:65px;
       }
       #knockout-bracket .round-2 .match {
        margin-bottom:121px;
       }
       #knockout-bracket .line-column-2 .first {
        margin-top:139.5px;
       }
       #knockout-bracket .line-column-2 .bracket-line-top {
        height:87.5px;
       }
       #knockout-bracket .line-column-2 .bracket-line-bottom {
        margin-bottom:201px;
        height:88.5px;
       }
       #knockout-bracket .round-3 .round-heading {
        margin-bottom:166px;
       }
       #knockout-bracket .round-3 .match {
        margin-bottom:323px;
       }
       #knockout-bracket .line-column-3 .first {
        margin-top:240.5px;
       }
       #knockout-bracket .line-column-3 .bracket-line-top {
        height:189.5px;
       }
       #knockout-bracket .line-column-3 .bracket-line-bottom {
        margin-bottom:402px;
        height:189.5px;
       }
       #knockout-bracket .round-4 .round-heading {
        margin-bottom:369px;
       }
       #knockout-bracket .round-4 .match {
        margin-bottom:727px;
       }
       #knockout-bracket .line-column-4 .first {
        margin-top:442.5px;
       }
       #knockout-bracket .line-column-4 .bracket-line-top {
        height:392.5px;
       }
       #knockout-bracket .line-column-4 .bracket-line-bottom {
        margin-bottom:806.5px;
        height:392.5px;
       }
       
       #knockout-bracket .round-5 .round-heading {
        margin-bottom:774px;
       }
       #knockout-bracket .round-5 .match {
        margin-bottom:1537px;
       }
       #knockout-bracket .line-column-5 .first {
        margin-top:848px;
       }
       #knockout-bracket .line-column-5 .bracket-line-top {
        height:796.5px;
       }
       #knockout-bracket .line-column-5 .bracket-line-bottom {
        margin-bottom:1615.5px;
        height:796.5px;
       }
       
       #knockout-bracket .round-6 .round-heading {
        margin-bottom:1583.5px;
       }
       #knockout-bracket .round-6 .match {
        margin-bottom:3154px;
       }
       #knockout-bracket .line-column-6 .first {
        margin-top:1657px;
       }
       #knockout-bracket .line-column-6 .bracket-line-top {
        height:1606px;
       }
       #knockout-bracket .line-column-6 .bracket-line-bottom {
        margin-bottom:3234.5px;
        height:1606px;
       }
       
       #knockout-bracket .round-7 .round-heading {
        margin-bottom:3202.5px;
       }
       #knockout-bracket .round-7 .match {
        margin-bottom:6392px;
       }
       #knockout-bracket .line-column-7 .first {
        margin-top:3278px;
       }
       #knockout-bracket .line-column-7 .bracket-line-top {
        height:3223.5px;
       }
       #knockout-bracket .line-column-7 .bracket-line-bottom {
        margin-bottom:806.5px;
        height:3223.5px;
       }
       
       #knockout-bracket .round-8 .round-heading {
        margin-bottom:6442px;
       }

       
       .label{
           background-color: transparent !important;
           line-height: 40px !important;
           font-size:14px !important;    
           font-weight: normal !important;
       }
       
       .hover a{
           font-weight:700;
       }
       
       .modal .form-control{
           padding: 2px !important
       }
       
       .name{
           margin-right:10px;
       }

</style>
@endsection


@section('content')
<div class="container">
    @include('shared.messages')
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{$tournament->name}}</h3>
                    <div class="pull-right" style="margin-top:-24px;">
                        @if(count($tournament->matches)>0)
                        <button class="btn btn-danger delete_button" title='Изтрий схемата' data-target='#modal-delete' data-toggle='modal'>Изтрий схемата</button>
                        @endif
                         <button class="btn btn-primary back-btn" onclick="window.history.back()">Назад</button>
                    </div>
                </div>
                    
                <div class="panel-body">
                    <div id="knockout-bracket-wrapper" class="knockout-bracket-processed">
                        <div id="knockout-bracket" class="">
                            <div class="knockout-bracket-pane main active-pane">
                                @foreach($tournament->rounds as $round)
                                    <div class="round round-{{$round->round}}">
                                        <div class="round-heading">
                                          <h4 class='rnd_name' id='rnd_{{$round->id}}'>
                                              {{$round->name}}
                                          </h4>
                                          <div class="round-heading-rule"></div>
                                        </div>

                                        @foreach($matches->where('round_id',$round->id) as $index=>$match)
                                        <div class="match status-16 {{!isset($matches[$index+1]) || $match->round!=$matches[$index+1]->round ? 'last' : $index}}">
                                            <div class="participant top participant-{{$match->user1_id!=0 ? $match->user1_id : 0}} {{$match->winner_id!=0 && $match->winner_id==$match->user1_id ? 'winner' : ''}}" participant-id="{{$match->user1_id!=0 ? $match->user1_id : 0}}">
                                                <span class="name">
                                                    <span class="label"><a href="">{{$match->user1_id!=0 ? $match->user1->name : ''}}</a></span>
                                                </span>         
                                                @if(count($match->sets)>0)
                                                    @foreach($match->sets as $set)
                                                        <span class="score">{{$set->user_1_result}}</span>
                                                    @endforeach
                                                @endif
                                            </div>

                                            @if($match->winner_id==0)
                                            <div class="match-divider">{{$match->start_time!=null ? date('d.m.Y H:i',strtotime($match->start_time)): ""}}</div>
                                            <button type="button" class="btn btn-success match-link details-link" data-id="{{$match->id}}" style="margin:4px auto;">Match details</button>                                        
                                            @endif

                                            <div class="participant bottom participant-{{$match->user2_id!=0 ? $match->user2_id : 0}} {{$match->winner_id!=0 && $match->winner_id==$match->user2_id ? 'winner' : ''}}" participant-id="{{$match->user2_id!=0 ? $match->user2->id : 0}}">
                                                <span class="name">
                                                    <span class="label"><a href="">{{$match->user2_id!=0 ? $match->user2->name : ''}}</a></span>
                                                </span>
                                                @if(count($match->sets)>0)
                                                    @foreach($match->sets as $set)
                                                        <span class="score">{{$set->user_2_result}}</span>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>                                    
                                        @endforeach                                    
                                    </div>    
       
                                    @if($round->round<count($tournament->rounds))
                                    <div class="line-column line-column-{{$round->round}}">
                                                                                @while($k<count($matches->where('round_id',$round->id))/2)
                                        <div class="bracket-line-top {{$k==0 ? 'first' : ''}}"></div>
                                        <div class="bracket-top-connector"></div>
                                        <div class="bracket-bottom-connector"></div>
                                        <div class="bracket-line-bottom {{$k==count($matches->where('round_id',$round->id))/2-1 ? 'last' : ''}}"></div>
                                                                                @endwhile
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                    
                    <div id="modal-delete" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content animated flipInY">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 id="modal-label" class="modal-title">Изтриване на схемата на турнира</h4>
                                </div>
                                <div class="modal-body">Сигурни ли сте, че искате да изтриете схемата на този турнир ?</div>
                                <div class="modal-footer">
                                    <button id="confirm_delete" type="button" class="btn btn-default" onclick="delete_scheme({{$tournament->id}})">Да</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal"> Не</button>
                                </div>
                            </div>
                        </div>
                    </div>                    
                    
                    <div id="modal-match" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content animated flipInY">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 id="modal-label" class="modal-title">Детайли за среща</h4>
                                </div>
                                <form id='update_match_data' method="POST" action="" role="form" class="form-horizontal">
                                    <div class="modal-body">
                                        {{ csrf_field() }}
                                        {{ method_field('PATCH') }}

                                        <input type="hidden" id="match_id" name="match_id" value="" />
                                        <input type="hidden" id="match_round_points" name="match_round_points" value="" />


                                        <div class="form-group{{ $errors->has('start_time') ? ' has-error' : '' }}">
                                            <label for="start_time" class="control-label col-sm-3">Начало на мача</label>
                                            <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                                <label class="input-group-addon" for="start_time"><i class="glyphicon glyphicon-calendar"></i></label>
                                                <input type="text" class="form-control" id="start_time" name="start_time" value="{{ old('start_time') }}" placeholder="Начало на мача" required/>
                                                @if ($errors->has('start_time'))
                                                    <span class="help-block"><strong>{{ $errors->first('start_time') }}</strong></span>
                                                @endif
                                            </div>
                                            <div class="errorBox" style="padding-left:19%;"></div>
                                        </div> 




                                        <div class="form-group{{ $errors->has('result') ? ' has-error' : '' }}">
                                            <table class='table'>
                                                <tr>
                                                    <th>Играч</th>
                                                    <th>Резултат</th>
                                                    <th>Победител</th>
                                                    <th>Точки</th>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label id="match_player_1" for="match_player_1"></label>
                                                    </td>
                                                    <td>   
                                                        <div id="player_1_div" class="input-group"> 
                                                            <input type="text" name="user_1_set_1" class="form-control user1_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_1_set_2" class="form-control user1_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_1_set_3" class="form-control user1_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_1_set_4" class="form-control user1_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_1_set_5" class="form-control user1_sets" style="width:15%;margin-right:3px;" value="">  
                                                        </div>
                                                    </td>
                                                    <td style="padding-left:5%">
                                                        <input type="radio" class="winner-radio" data-id="" value="1" id="user_1_winner" name="winner_id">
                                                    </td>
                                                    <td>
                                                        <input type="text" id="user1_points" name="user1_points" class="form-control" value="">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label id="match_player_2" for="match_player_2"></label>
                                                    </td>
                                                    <td>                                                        
                                                        <div id="player_2_div" class="input-group">                                                
                                                            <input type="text" name="user_2_set_1" class="form-control user2_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_2_set_2" class="form-control user2_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_2_set_3" class="form-control user2_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_2_set_4" class="form-control user2_sets" style="width:15%;margin-right:3px;" value="">
                                                            <input type="text" name="user_2_set_5" class="form-control user2_sets" style="width:15%;margin-right:3px;" value="">                                                            
                                                        </div>
                                                    </td>
                                                    <td style="padding-left:5%">
                                                        <input type="radio" class="winner-radio" data-id="" value="1" id="user_2_winner" name="winner_id">
                                                    </td>
                                                    <td>
                                                        <input type="text" id="user2_points" name="user2_points" class="form-control" value="">
                                                    </td>
                                                </tr>                                            
                                            </table>
                                        </div>                      

                                    </div>
                                    <div class="modal-footer">
                                        <button id="confirm_update" type="button" class="btn btn-default">Готово</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal"> Откажи</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery.gracket.min.js') }}"></script>
<script src="{{ asset('js/dragscrollable.js') }}"></script>
<script src="{{ asset('js/jquery.datetimepicker.full.min.js') }}"></script>
<script>

// Add drag scrolling
        $('#knockout-bracket-wrapper').dragscrollable({dragSelector: '#knockout-bracket'});

        // Drag cursors
        $('#knockout-bracket')
        .mousedown(function() {
          $(this).addClass('grabbing');
        })
        .mouseup(function() {
          $(this).removeClass('grabbing');
        });
        // Participant highlighting
        $('.participant').hover(
          function() {
            var id = $(this).attr('participant-id');
            if (id != '0') {
              $(".participant-" + id).addClass('hover');
            }
          },
          function() {
            var id = $(this).attr('participant-id');
            if (id != '0') {
              $(".participant-" + id).removeClass('hover');
            }
          }
        );

        // Toggle knockout tabs
        $('#knockout-bracket-tabs a').click(function() {
          var location = $(this).attr('location');

          // Set the tab active
          $('#knockout-bracket-tabs a').removeClass('active-pane');
          $(this).addClass('active-pane');

          // Set the tab contents active
          $('div.knockout-bracket-pane').removeClass('active-pane');
          $('div.knockout-bracket-pane.' + location).addClass('active-pane');
          return false;
        });
        
        $('.match-link').on('click', function(){
            var id = $(this).attr('data-id');
            $('#match_id').val(id);
            
            get_match_details(id);
        });

        function get_match_details(id){
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/admin/get_match_details',
                        type: 'POST',
                data: { 'id' : id},
                success: function(response){
                            if(response.warning){
                                alert(response.warning);
                            }
                            else{
                                $('#start_time').val(response.start_time);
                                
                                $('#match_player_1').html(response.user1_id!=0 ? response.user1.name : "Играч 1");
                                $('#match_player_2').html(response.user2_id!=0 ? response.user2.name : "Играч 2");
                                
                                $("#user_1_winner").val(response.user1_id);
                                $("#user_2_winner").val(response.user2_id);
                                
                                $("#user1_points").val(response.user1_points).attr('readonly',response.tournament.manual_points==1 ? false : true);
                                $("#user2_points").val(response.user2_points).attr('readonly',response.tournament.manual_points==1 ? false : true);
                                
                                if(response.winner_id!==0){
                                    $("input[data-id='"+response.winner_id+"']").prop('checked',true);
                                }
                                else{
                                    $("input:radio").prop('checked',false);
                                }
                                
                                if(response.sets.length>0){
                                    for(var i in response.sets){
                                        $('input[name="user_1_set_'+response.sets[i]['set']+'"').val(response.sets[i]['user_1_result']);
                                        $('input[name="user_2_set_'+response.sets[i]['set']+'"').val(response.sets[i]['user_2_result']);
                                    }
                                }
                                else{
                                    $('#player_1_div').find('.form-control').val('');
                                    $('#player_2_div').find('.form-control').val('');
                                }
                                
                                $('#match_round_points').val(response.round.points);
                                
                                $('#modal-match').modal('show');
                            }
                        }
            });    
        }
                
        
        $('#start_time').datetimepicker({format:'d.m.Y H:i'});
        
        $('#confirm_update').on('click', function(){
            $('#update_match_data').attr('action','/admin/matches/'+$('#match_id').val());
            $('#update_match_data').submit();
        });

        function delete_scheme(id){
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/admin/delete_tournament_scheme',
                        type: 'POST',
                data: { 'id' : id},
                success: function(response){
                            $("button[data-dismiss=\"modal\"]").click();
                            if(response.error){
                                alert(response.error);
                            }
                            else{
                                alert(response.success);
                                window.location.replace('/admin/tournaments');
                            }
                        }
            });    
        }
        
        $('.rnd_name').on('click', function(){
            var id = $(this).attr('id').replace('rnd_','');
            $('#modal-round-'+id).modal('show');
        });
        
        if({{$tournament->add_points}}==1){
            $(document).on('change','.user1_sets', function(){
                calculate_points(1);
            });

            $(document).on('change','.user2_sets', function(){
                calculate_points(2);
            });
        }
        
        $('.winner-radio').on('click', function(){
            calculate_points(1);
            calculate_points(2);
        });
        
        function calculate_points(index){
            var user_points=0;
            
            if({{$tournament->add_points}}==1){
                $('.user'+index+'_sets').each(function(){
                    user_points+=parseInt($(this).val()!='' ? $(this).val() : 0);  
                });
            }
            if($('#user_'+index+'_winner').prop('checked')==true){
                user_points+=parseInt($('#match_round_points').val());
            }
            $('#user'+index+'_points').val(user_points);
        }
    
</script>
@endsection