@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 active">
                            <a class="nav-link" href="{{ route('sprint.index') }}"><i class="fa fa-list-alt"></i>
                                List</a>
                        </li>
                        <li class="nav-item">
                            <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">
                    <div id="girdview" class="box-sprints">
                        {!! $grid !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('sprints/_modal_sync_sprint')

    <script type="text/javascript">
        $(document).ready(function () {
            $('#state').bootstrapSwitch();

            // $('.table').addClass('table-bordered');
            var box_header_element = document.getElementsByClassName("box-header")[0];
            if (box_header_element != undefined) {
                var pull_right_element = box_header_element.getElementsByClassName('pull-right')[0];
                pull_right_element.classList.add('filter-btn');
                $('#girdview').show();
                $('.inprocess-box').show();
            }
        });

        var source;

        // Sync milestone
        function synMilestone(milestone_id, project_id, group_id = null) {
            $('#sync_all_sprint').modal('show');
            $('#exampleModalLabel').text('Sync Sprint');
            if (typeof (EventSource) !== "undefined") {
                source = new EventSource('{{url('/sprints/synSprintNow')}}/' + project_id + '/milestoneId/' + milestone_id + '/' + group_id);
                source.addEventListener("syn_sprint", function (event) {
                    var data = JSON.parse(event.data);
                    if (data.result != 1) {
                        $('#syn_loading').hide();
                        $('#btn-create').hide();
                        $('.btn-close').show();
                        $('.body-error').show();
                    } else if (data.id == 2) {
                        $('#syn_loading_pt').width($('#syn_loading_pt').width('50%'));
                        $('#syn_text_loading').text(data.message);
                    } else if (data.id == 1) {
                        $('#syn_loading_pt').width($('#syn_loading_pt').width('100%'));
                        $('#syn_text_loading').text(data.message);
                        source.close();
                        setTimeout(function () {
                            $('#syn_loading').hide();
                            $('#btn-create').hide();
                            $('#syn-result-modal .btn-close-now').show();
                            $('.body-success').show();
                        }, 1000);
                    }
                });

                source.onerror = function (event) {
                    console.log(event);
                    source.close();
                    $('#syn_loading').hide();
                    $('.btn-close').show();
                    $('#syn-result-modal .btn-close-now').hide();
                    $('.body-error').show();
                    $('.body-success').hide();
                    $('#syn-result-modal .progress').hide();
                };
            }
        }

        // Close a modal sync and reload page
        $(".btn-close").on("click", function () {
            if (source) {
                source.close();
            }
            $.pjax.reload({container: '#pjax-container'});
        });

        // Bind a click event to the button
        $('.expand-button').click(function () {
            // Toggle the 'truncated' and 'expanded' classes on the text element
            $text = $(this).parent().find('.sprint__description');
            $text.toggleClass('truncated expanded');

            // Update the button text
            if ($text.hasClass('truncated')) {
                $(this).html('<i class="fa fa-plus"></i>');
            } else {
                $(this).html('<i class="fa fa-minus"></i>');
            }
        });
    </script>
@endsection