@extends('admin::index')

@section('title', 'Page Title')

@section('content')
    <section class="header">
        @include('projects/_breadcrumb_project_sprint_detail')
    </section>
    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('project.detail', [$project_id]) }}"><i class="fa fa-th-large"></i> <span style="font-weight: 500;">Detail</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('project.backlogs', [$project_id]) }}">
                                <i class="fa fa-th-list"></i>
                                <span style="font-weight: 500;">Backlogs</span>
                                @if(session()->exists('totalIssueBacklogs'))
                                    <span class="label-issue label label-md label-danger">{{ session('totalIssueBacklogs') }}</span>
                                @endif
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link"><i class="fa fa-th-large"></i> <label>Sprint Detail</label> <span class="label-issue label label-md label-danger">{{ $milestoneProject->title }}</span></a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content container-fluid">
                    <div class="content tab-pane active">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="row box sprint-box">
                                    <div class="col-lg-12">
                                        <h2 class="h2-custom">{{ $milestoneProject->title }}</h2>
                                        <span class="span-date">From {{ date('d-m-Y', strtotime($milestoneProject->start_date)) }}</span>
                                        <span class="span-date"> @if($milestoneProject->due_date != NULL) To {{ date('d-m-Y', strtotime($milestoneProject->due_date)) }} @endif</span>
                                    </div>
                                    <div class="col-lg-12 milestone-description-item">
                                        <div class="progress progress-sm progress-striped sprint-progress">
                                            @if($project->scrum_point == 0)
                                                @php
                                                    $totalCompleteIssues = $milestoneProject->countIssuesComplete($project_id);
                                                    $percent = $totalCompleteIssues ? $totalCompleteIssues / $totalIssues * 100 : 0;
                                                @endphp
                                            @else
                                                @php
                                                    $percent = $sprint_points ? $burned_points / $sprint_points * 100 : 0;
                                                @endphp
                                            @endif
                                            <div class="progress-bar progress-bar-{{ strtotime($milestoneProject->start_date) <= strtotime(Date('Y-m-d')) && strtotime($milestoneProject->due_date) >= strtotime(Date('Y-m-d')) || strtotime($milestoneProject->start_date) > strtotime(Date('Y-m-d')) ? 'green' : 'red' }}" style="width:{{$percent}}%"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">{{ $totalIssues }} Issues</div>
                                            <div class="col-lg-6 text-right">{{ ceil($percent) }}%</div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12  milestone-description-item">
                                        <div class="row">
                                            <div class="col-lg-6"><label class="sprint-detail-label-title">{{ $totalIssues }}</label> Issues</div>
                                            <div class="col-lg-6 text-right factor-sprint">
                                                <label class="sprint-box-label label label-md bg-red" style="width: 100%; margin-bottom: 2px">Bug ({{ $typeIssues['bugIssues'] }})</label>
                                                <label class="sprint-box-label label label-md bg-blue" style="width: 100%; margin-bottom: 2px">Feature ({{ $typeIssues['featureIssues'] }})</label>
                                                <label class="sprint-box-label label label-md bg-gray" style="width: 100%; margin-bottom: 2px">Others ({{ $typeIssues['otherIssues'] }})</label>
                                                @if(count($pointsPlatformService) > 0)
                                                    @foreach($pointsPlatformService as $key => $value)
                                                        <label class="sprint-box-label label label-md bg-green" style="width: 100%; margin-bottom: 2px">{{ $key }} ({{ $value }})</label>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 milestone-description-item">
                                        <span><h4 class="h4-custom">Members ({{ count($memberMilestones) }})</h4></span>
                                        <div>
                                            @foreach($memberMilestones as $memberMilestone)
                                                <div class="member-milestone mr-1">
                                                    <div>
                                                        <a data-toggle="tooltip" title="{{ $memberMilestone->name }}" class="avt">
                                                            <img style="max-width: 30px;" alt="Avatar" src="{{ $memberMilestone->avatar_url }}">
                                                        </a>
                                                        <div class="time-member-working text-center hidden">
                                                            <label data-toggle="tooltip" title="hour" class="label label-md label-point-sprint">{{ !empty($timeMembersMilestone[$memberMilestone->id]) ? $timeMembersMilestone[$memberMilestone->id] : 0 }}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @if($project->scrum_point == true)
                                        <div class="col-lg-12 milestone-description-item">
                                            <span><h4 class="h4-custom" style="margin-bottom: 0">Points</h4></span>
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <span>Total point of Sprint</span>
                                                </div>
                                                <div class="col-lg-4 text-right">
                                                    <span>{{ $sprint_points }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 milestone-description-item">
                                            <span><h4 class="h4-custom" style="margin-bottom: 0">Burned Points</h4></span>
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <span>Burned points of Sprint</span>
                                                </div>
                                                <div class="col-lg-4 text-right">
                                                    <span>{{ $burned_points }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 milestone-description-item">
                                            <span><h4 class="h4-custom" style="margin-bottom: 0">BPD</h4></span>
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <span>Burnable points per day</span>
                                                </div>
                                                <div class="col-lg-4 text-right">
                                                    <span>{{ $BPDRealTime }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <div class="row box sprint-box m-t-15">
                                    <div class="col-lg-12">
                                        <h3 class="h3-custom">{{ __('Sprint member') }}</h3>
                                        <div id="member-gird">
                                            {!! $memberGrid !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 sprint-detail-group">
                                <div id="sprint-warning" class="alert alert-danger alert-dismiwarningssible" hidden>
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                    <h4><i class="icon fa fa-ban"></i>Sprint</h4>
                                    <p>Sprint warning</p>
                                    <br>
                                </div>

                                @if($project->scrum_point == true)
                                <h3 class="h3-custom">Burndown Chart</h3>
                                <div class="box sprint-box">
                                    <canvas id="burndown-chart"></canvas>
                                </div>
                                @else

                                    <h3 class="h3-custom">Issue Chart</h3>
                                    <div class="box sprint-box">
                                        <canvas id="issue-chart"></canvas>
                                    </div>
                                @endif
                                <div class="reopen-group">
                                    <div class="d-flex align-items-center space-between">
                                        <h3 class="h3-custom">Reopened issues ({{count($issueReopenMost)}})</h3>
                                        <a class="toggle__button reopen-button">
                                            Hide
                                        </a>
                                    </div>
                                    <div class="box sprint-box reopen-box">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                @if(count($issueReopenMost))
                                                    <table class="table table-hover mb-0">
                                                        <thead class="row">
                                                            <th class="col-lg-8">Title</th>
                                                            <th class="col-lg-1 text-center">Reopen</th>
                                                            <th class="col-lg-3 text-right" width="150px">Members</th>
                                                        </thead>
                                                        @foreach($issueReopenMost as $key => $item)
                                                            <tr>
                                                                <td class="col-lg-8">
                                                                    <span class="title-span1" title="{{ $item->title }}"><a target="_blank" href="{{ $item->web_url }}" class="member-item"><strong>{{ $item->title }}</strong></a></span>
                                                                </td>
                                                                <td class="col-lg-1">
                                                                    <div class="text-center">
                                                                        <label class="label-issue label label-md bg-red">{{ $item->reopen }}</label>
                                                                    </div>
                                                                </td>
                                                                <td class="col-lg-3">
                                                                    <div class="pr-3 text-right">
                                                                        @foreach($item->members as $member)
                                                                            <span data-toggle="tooltip" title="{{ $member->name }}" class="avt"><img alt="{{ $member->name }}" src="{{ $member->avatar_url }}"></span>
                                                                        @endforeach
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </table>
                                                @else
                                                    <div class="no-data text-center">
                                                        <div class="no-data-img">
                                                            <img src="{{ asset('images/nodata.jpg') }}" />
                                                        </div>
                                                        <div>
                                                            <span>NO REOPEN ISSUE</span>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="deadline-group">
                                    <div class="d-flex align-items-center space-between">
                                        <h3 class="h3-custom">Overdue issues ({{ count($issueDeadlines) }})</h3>
                                        <a class="toggle__button deadline-button">
                                            Hide
                                        </a>
                                    </div>
                                    <div class="box sprint-box deadline-box">
                                        @if(count($issueDeadlines))
                                            <table class="table table-hover mb-0">
                                                @foreach($issueDeadlines as $key => $issueDeadline)
                                                    <tr>
                                                        <td class="row">
                                                            <div class="col-lg-9">
                                                                <div class="title-span" title="{{ $issueDeadline->title }}"><a target="_blank" href="{{ $issueDeadline->web_url }}" class="member-item"><strong>{{ $issueDeadline->title }}</strong></a></div>
                                                                <div class="row calendar-deadline">
                                                                    <div class="col-lg-4">
                                                                        <span data-toggle="tooltip" class="text-yellow" title="Due date">
                                                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                                                            @if($issueDeadline->due_date != NULL) {{ date('d-m-Y', strtotime($issueDeadline->due_date)) }} @endif
                                                                        </span>
                                                                    </div>
                                                                    @if($issueDeadline->done_at != NULL)
                                                                    <div class="col-lg-4">
                                                                        <span data-toggle="tooltip" class="text-success" title="Done date">
                                                                            <i class="fa fa-calendar-check-o" aria-hidden="true"></i>
                                                                            {{ date('d-m-Y', strtotime($issueDeadline->done_at)) }}
                                                                        </span>
                                                                    </div>
                                                                    @endif
                                                                    @if($issueDeadline->closed_at != NULL)
                                                                    <div class="col-lg-4">
                                                                        <span data-toggle="tooltip" class="text-red" title="Closed date">
                                                                            <i class="fa fa-calendar-times-o" aria-hidden="true"></i>
                                                                            {{ date('d-m-Y', strtotime($issueDeadline->closed_at)) }}
                                                                        </span>
                                                                    </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-3 text-right members">
                                                                @foreach($issueDeadline->members as $member)
                                                                    <a data-toggle="tooltip" title="{{ $member->name }}" class="avt"><img  alt="{{ $member->name }}" src="{{ $member->avatar_url }}"></a>
                                                                @endforeach
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </table>
                                        @else
                                            <div class="no-data text-center">
                                                <div class="no-data-img">
                                                    <img src="{{ asset('images/nodata.jpg') }}" />
                                                </div>
                                                <div>
                                                    <span>NO OVERDUE ISSUES</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $('.deadline-button').click(function() {
            if(!$('.deadline-box').hasClass('extend')) {
                $('.deadline-box').addClass('extend')
                $('.deadline-box').toggle(300);
                $('.deadline-button').html('{{ __('Show') }}');
                $('.deadline-button.bottom').hide();
            } else {
                $('.deadline-box').removeClass('extend')
                $('.deadline-box').toggle(300);
                $('.deadline-button').html('{{ __('Hide') }}');
                $('.deadline-button.bottom').show();
            }
        })

        $('.reopen-button').click(function() {
            if(!$('.reopen-box').hasClass('extend')) {
                $('.reopen-box').addClass('extend')
                $('.reopen-box').toggle(300);
                $('.reopen-button').html('{{ __('Show') }}');
            } else {
                $('.reopen-box').removeClass('extend')
                $('.reopen-box').toggle(300);
                $('.reopen-button').html('{{ __('Hide') }}');
            }
        })
        @if($project->scrum_point == true)
        $configBurndownChart = {
            type: 'line',
            options: {
                title: {
                    display: true,
                },
                scales: {
                    xAxes: {
                        ticks: {
                        }
                    }
                }
            }
        }
        var burndownChartElement = document.getElementById('burndown-chart').getContext('2d');
        var burndownChart = new Chart(burndownChartElement, $configBurndownChart);

        $( document ).ready(function() {
            displayBurndownChart();
            $.getScript('https://adminlte.io/themes/AdminLTE/bower_components/jquery-knob/js/jquery.knob.js', function()
            {
                $('.dial').knob({
                    'min':0,
                    'max': '{{ $totalReopenIssue }}',
                    'fgColor': '#dd4b39'
                });
                $('.dial')
                    .val({{ $totalReopenIssue }})
                    .trigger('change');
            });

        });
        function displayBurndownChart() {
            var sprint = '{{ $milestoneProject->id }}'
            var project_id = '{{ $project_id }}';
            $.ajax({
                type: "post",
                url: "{{route('project.displayBurndownChart')}}",
                data: {
                    'sprint': sprint,
                    'project_id': project_id,
                    '_token': '{{ csrf_token() }}',
                },
                dataType: "json",
                success: function (result){
                    loadChart(result);
                }
            });


        }

        function loadChart($result) {
            if($result['status'] == 'fail' ){
                jQuery('#sprint-warning').show();
                jQuery('#sprint-warning p').text($result['message']);

            }else{
                jQuery('#sprint-warning').hide();
                $labels = $result['labels'];
                $redLine = $result['redPoints'];
                $blueLine = $result['bluePoints'];
                $orangeLine = $result['orangePoints'];
                $greenPoints = $result['greenPoints'];
                $length = $result['labels'].length - 1;
                $autoSkip = false;
                $maxTicksLimit = 11;
                $k = 0;
                if($length >= 100) {
                    for(var i = 0; i <= $length;i++){
                        if(i != 0 && i % 10 != 0 && i != $length ) {
                            $labels[i] = '';
                        }

                        if(i % 10 == 0) {
                            $k++;
                        }
                    }
                    $maxTicksLimit = 30;
                    $keyDateLastDivided = ($k - 1) * 10;
                    if($length - $keyDateLastDivided <= 7) {
                        $labels[$keyDateLastDivided] = '';
                    }
                }

                burndownChart.data.labels = $labels;
                burndownChart.data.datasets = [{
                    borderColor: '#00c0ef',
                    fill: false,
                    lineTension: 0,
                    label: 'Estimated Points',
                    data: $blueLine
                },
                    {
                        borderColor: 'red',
                        fill: false,
                        lineTension: 0,
                        label: 'Real Points',
                        data: $redLine
                    },
                    {
                        borderColor: 'orange',
                        fill: false,
                        lineTension: 0,
                        label: 'Today Points',
                        data: $orangeLine
                    },
                    {
                        borderColor: 'green',
                        fill: false,
                        lineTension: 0,
                        label: 'Done Points',
                        data: $greenPoints
                    }];
                burndownChart.options.responsive = true;
                burndownChart.options.scales.xAxes.ticks.autoSkip = $autoSkip;
                burndownChart.options.scales.xAxes.ticks.maxTicksLimit = $maxTicksLimit;
                burndownChart.update();
            }
        }
        @else

        $configIssueChart = {
            type: 'line',
            options: {
                title: {
                    display: true,
                },
                scales: {
                    xAxes: {
                        ticks: {
                        }
                    }
                }
            }
        }

        var IssueChartElement = document.getElementById('issue-chart').getContext('2d');
        var issueChart = new Chart(IssueChartElement, $configIssueChart);

        $(document).ready(function () {
            displayIssueChart();
            $.getScript('https://adminlte.io/themes/AdminLTE/bower_components/jquery-knob/js/jquery.knob.js', function()
            {
                $('.dial').knob({
                    'min':0,
                    'max': '{{ $totalReopenIssue }}',
                    'fgColor': '#dd4b39'
                });
                $('.dial')
                    .val({{ $totalReopenIssue }})
                    .trigger('change');
            });
        });

        function displayIssueChart() {
            var sprint = '{{ $milestoneProject->id }}'
            var project_id = '{{ $project_id }}';
            $.ajax({
                type: "post",
                url: "{{route('project.getIssueChart')}}",
                data: {
                    'sprint': sprint,
                    'project_id': project_id,
                    '_token': '{{ csrf_token() }}',
                },
                dataType: "json",
                success: function (result) {
                    loadChart(result);
                }
            });

        }

        function loadChart($result) {
            if ($result['status'] == 'fail') {
                jQuery('#sprint-warning').show();
                jQuery('#sprint-warning p').text($result['message']);

            } else {
                jQuery('#sprint-warning').hide();
                $labels = $result['labels'];
                $redLine = $result['redLines'];
                $blueLine = $result['blueLines'];
                $greenLine = $result['greenLines'];
                $orangeLine = $result['orangeLines'];
                $length = $result['labels'].length - 1;
                $autoSkip = false;
                $maxTicksLimit = 11;
                $k = 0;
                if($length >= 100) {
                    for(var i = 0; i <= $length;i++){
                        if(i != 0 && i % 10 != 0 && i != $length ) {
                            $result['labels'][i] = '';
                        }

                        if(i % 10 == 0) {
                            $k++;
                        }
                    }
                    $maxTicksLimit = 30;

                    $keyDateLastDivided = ($k - 1) * 10;
                    if($length - $keyDateLastDivided <= 7) {
                        $labels[$keyDateLastDivided] = '';
                    }
                }
                issueChart.data.labels = $result['labels'];
                issueChart.data.datasets = [{
                    borderColor: '#00c0ef',
                    fill: false,
                    lineTension: 0,
                    label: 'Estimated Issue',
                    data: $blueLine
                },
                    {
                        borderColor: 'red',
                        fill: false,
                        lineTension: 0,
                        label: 'Real Issue',
                        data: $redLine
                    },
                    {
                        borderColor: 'green',
                        fill: false,
                        lineTension: 0,
                        label: 'Done Issue',
                        data: $greenLine
                    },
                    {
                        borderColor: 'orange',
                        fill: false,
                        lineTension: 0,
                        label: 'Today Issue',
                        data: $orangeLine
                    }
                ];
                issueChart.options.responsive = true;
                issueChart.options.scales.xAxes.ticks.autoSkip = $autoSkip;
                issueChart.options.scales.xAxes.ticks.maxTicksLimit = $maxTicksLimit;
                issueChart.update();
            }
        }
        @endif
    </script>
@endsection