@extends('admin::index')

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

@section('content')
    <section class="header">
        @include('sprints/_breadcrumb_sprint_view')
    </section>
    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs d-flex" style="justify-content: end" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('sprint.index') }}"><i class="fa fa-list-alt"></i>
                                List</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="{{ route('sprint.viewTimeLineChart') }}"><i
                                    class="fa fa-line-chart"></i> Timeline</a>
                        </li>
                    </ul>
                </div>
                <!-- Tab panes -->
                <div class="tab-content m-t-5">
                    <div id="sprint-warning" class="alert alert-danger alert-dismiwarningssible" hidden>
                        <h4><i class="icon fa fa-ban"></i>Sprint</h4>
                        <div class="content-error"><p>Not have data Sprint, please sync again!</p></div>
                    </div>
                    <div class="d-flex" style="align-items: center; flex-direction: column">
                        <div class="sprint-spin p-t-50" hidden>
                            <i class="fa fa-spinner fa-spin notify-icon"></i>
                        </div>
                        <div id="timelineSprint" style="width: 100%; height: 650px; margin: 0px auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('sprints/_modal_sync_sprint')

    <script type="text/javascript">
        $(document).ready(function () {
            getDataTimelineChart()
        });

        let chart;

        function loadTimelineChart(result) {
            if (result.status) {
                config.series = result.data;
                config.yAxis.markers[0].value = result.today;
                config.yAxis.markers[1].value[0] = result.start_date;
                config.yAxis.markers[1].value[1] = result.today;
                config.series.push(getRangeOverlaySeries(result.data, result.today, result.end_date, false));
                if(result.data_coming.length) {
                    config.series.push(getRangeOverlaySeries(result.data_coming, result.today, result.end_date, true));
                }

                setTimeout(() => {
                    chart = JSC.chart('timelineSprint', config, function (c) {
                        c.palette = @json($colorChart);
                        c.redraw();
                    });
                    $('.sprint-spin').hide();
                }, 300)
                $('#sprint-warning').hide();
            } else {
                $('#sprint-warning').show();
            }
        }

        function getDataTimelineChart() {
            $.ajax({
                type: "post",
                url: "{{route('getDataTimelineChart')}}",
                data: {
                    '_token': '{{ csrf_token() }}',
                },
                dataType: "json",
                beforeSend: function () {
                    $('.sprint-spin').show();
                },
                success: function (result) {
                    loadTimelineChart(result)
                },
                error: function (xhr) { // if error occured
                    $('#sprint-warning').show();
                },
            });
        }

        /*
        Advanced Gantt chart with slack time, markers, and milestones.
        */
        var config;
        config = {
            debug: false,
            /*Typical Gantt setup. Horizontal columns by default.*/
            type: 'horizontal column',
            /*Make columns overlap.*/
            zAxis_scale_type: 'stacked',
            /*Time Y Axis.*/
            yAxis_scale_type: 'time',
            toolbar_visible: false,

            title: {
                label: {
                    text: 'Sprint Management',
                    style_fontWeight: 'bold'
                },
                position: 'center'
            },
            legend: {
                visible: false,
                position: 'bottom',
                template: '%icon,%name'
            },
            xAxis: {
                labels: {
                    visible: true,
                }
            },
            yAxis: {
                markers: [
                    {
                        value: '5-19-2022',
                        color: '#1776BE',
                        label_text: 'Today'
                    },
                    {
                        value: ['1-1-2022', '5-19-2022'],
                        color: ['orange', 0.1],
                        label_text: 'Expired'
                    }
                ],
            },
            defaultSeries: {
                defaultPoint: {
                    legendEntry: {
                        value: '{days(%max-%min):number n0} days'
                    },
                    tooltip: '{%low:dd/MM/yyyy} - {%high:dd/MM/yyyy}<br/>{days(%high-%low) + 1} days',
                    marker_type: '',
                    label: {
                        placement: 'inside',
                        color: '#333'
                    },
                    radius: 0,
                },
                firstPoint: {
                    xAxisTick: {label: {text: '<strong>%name</strong>', style: {fontSize: '14px'}}},
                    // outline: {color: '#8DD99C', width: 1},
                }
            },
            series: [],
        };

        /**
         * Automatically generate a series that overlaps data points in the specified series for the given date ranges.
         * @param series
         * @param date1
         * @param date2
         * @returns name: string, defaultPoint: {color: string, tooltip: string}, points: Array
         */
        function getRangeOverlaySeries(series, date1, date2, upcoming = true) {
            date1 = normalizeValue(date1);
            date2 = normalizeValue(date2);
            var newSer,y1,
                y2;
            if (upcoming) {
                newSer = {
                    name: 'Upcoming',
                    legendEntry_value: '',
                    defaultPoint: {
                        opacity: 0.5,
                        color: '#0044cc',
                        tooltip: '{%low:dd/MM/yyyy} - {%high:dd/MM/yyyy}<br/>{days(%high-%low) + 1} days (upcoming)',
                        label: {
                            text: '%name',
                            placement: 'inside',
                            color: '#333',
                        },
                    },
                    points: [],
                }
            } else {
                newSer = {
                    name: 'Day Left',
                    legendEntry_value: '',
                    defaultPoint: {
                        opacity: 0,
                        color: 'gray',
                        tooltip: '{%low:dd/MM/yyyy} - {%high:dd/MM/yyyy}<br/>{days(%high-%low) + 1} days left',
                    },
                    points: [],
                }
            }

            var points = newSer.points;

            series.forEach(function (ser) {
                if (!Array.isArray(ser.points)) {
                    ser.points = Object.values(ser.points);
                }

                ser.points.forEach(function (point) {
                    if (point.y.length) {
                        y1 = normalizeValue(point.y[0]);
                        y2 = normalizeValue(point.y[1]);
                        if (date2 > y1 && date1 < y2) {
                            points.push({name: point.name, y: [date1 > y1 ? date1 : y1, date2 < y2 ? date2 : y2]});
                        }
                    }
                });
            });
            return newSer;

            function normalizeValue(v) {
                return typeof v === 'string' ? Date.parse(v) : v;
            }
        }
    </script>
@endsection