@extends('layouts.website')


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

@section('link')
        <style>

            .page-wrapper{
                max-width:100%;
                overflow:auto;
            }
            
            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: 14px;
                font-family: inherit;
                vertical-align: baseline;
            }

            .btn-primary {
                background-color: #1ab394;
                border-color: #1ab394;
                color: #fff;
                margin-left: 15px;
                margin-top: 10px;
            }

            #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:88px;
               }
               #knockout-bracket .line-column-2 .bracket-line-bottom {
                margin-bottom:201px;
                height:88px;
               }
               #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:391.5px;
               }
               #knockout-bracket .line-column-4 .bracket-line-bottom {
                margin-bottom:806.5px;
                height:391.5px;
               }

               #knockout-bracket .round-5 .round-heading {
                margin-bottom:774px;
               }
               #knockout-bracket .round-5 .match {
                margin-bottom:1535px;
               }
               #knockout-bracket .line-column-5 .first {
                margin-top:849px;
               }
               #knockout-bracket .line-column-5 .bracket-line-top {
                height:794.5px;
               }
               #knockout-bracket .line-column-5 .bracket-line-bottom {
                margin-bottom:1615.5px;
                height:794.5px;
               }

               #knockout-bracket .round-6 .round-heading {
                margin-bottom:1583.5px;
               }
               #knockout-bracket .round-6 .match {
                margin-bottom:3151px;
               }
               #knockout-bracket .line-column-6 .first {
                margin-top:1657px;
               }
               #knockout-bracket .line-column-6 .bracket-line-top {
                height:1603px;
               }
               #knockout-bracket .line-column-6 .bracket-line-bottom {
                margin-bottom:3234.5px;
                height:1603px;
               }

               #knockout-bracket .round-7 .round-heading {
                margin-bottom:3202.5px;
               }
               #knockout-bracket .round-7 .match {
                margin-bottom:6383px;
               }
               #knockout-bracket .line-column-7 .first {
                margin-top:3278px;
               }
               #knockout-bracket .line-column-7 .bracket-line-top {
                height:3219.5px;
               }
               #knockout-bracket .line-column-7 .bracket-line-bottom {
                margin-bottom:806.5px;
                height:3219.5px;
               }

               #knockout-bracket .round-8 .round-heading {
                margin-bottom:6436px;
               }


               .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;
               }
               
               .bracket-top-connector, .bracket-bottom-connector {
                    margin-left: 14.5px;
               }
                
</style>
@endsection

@section('content') 
<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>
                        @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>

<script src="{{ asset('js/dragscrollable.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;
        });
        
        
    
</script>
@endsection