@extends($user['vendor'] == 1?'user.layout.supportlayout':'user.layout_user.supportlayout')

@section('tab1','active')
@section('tab')
    <div class="h-20"></div>
    @if(count($supports) == 0)
        <div class="text-center">
            <img src="/assets/images/empty/productssupport.png">
            <div class="h-20"></div>
            <span class="empty-first-line">{{{ trans('main.no_sup_ticket_courses') }}}</span>
            <div class="h-20"></div>
        </div>
    @else
        <div class="row">
            <div class="accordion-off col-xs-12">
                <ul id="accordion" class="accordion off-filters-li">
                    @foreach($supports as $content)
                        <li @if(isset($_GET['openid']) && $content->id == $_GET['openid']) class="open" @endif>
                            <div class="link"><h2>{{{ $content->title or '' }}} ({{{ count($content->supports->groupBy('sender_id')) }}})</h2><i class="mdi mdi-chevron-down"></i></div>
                            <ul class="submenu" @if(isset($_GET['openid']) && $content->id == $_GET['openid']) style="display: block;" @endif>
                                <div class="table-responsive">
                                <table class="table ucp-table" id="suport-table">
                                    <thead class="back-orange">
                                        <th>{{{ trans('main.customer') }}}</th>
                                        <th class="text-center" width="200">{{{ trans('main.status') }}}</th>
                                        <th class="text-center" width="100">{{{ trans('main.messages') }}}</th>
                                        <th class="text-center" width="200">{{{ trans('main.date') }}}</th>
                                        <th class="text-center" width="100">{{{ trans('main.controls') }}}</th>
                                    </thead>
                                    <tbody>
                                    @if($content->supports->count()>0)
                                        @foreach(listByKey($content->supports->toArray(),'sender_id') as $support)
                                            <tr>
                                            <td>{{{ $support[0]['sender']['name'] or $support[0]['sender']['username'] }}}</td>
                                            @if(isset($support['child']) && count($support['child'])>0)
                                                @if(end($support['child'])['user_id'] != $user['id'])
                                                    <td class="text-center">{{{ trans('main.waiting_reply') }}}</td>
                                                @else
                                                    <td class="text-center">{{{ trans('main.replied') }}}</td>
                                                @endif
                                            @else
                                                <td class="text-center">{{{ trans('main.waiting_reply') }}}</td>
                                            @endif
                                            @if(isset($support['child']))
                                                <td class="text-center"><b>{{{ count($support['child'])+1 }}}</b></td>
                                            @else
                                                <td class="text-center"><b>1</b></td>
                                            @endif
                                            <td class="text-center">{{{ date('d F Y | H:i',$support[0]['create_at']) }}}</td>
                                            <td class="text-center">
                                                <a href="javascript:void(0)" class="replyBtn" data-toggle="modal" data-target="#answerBox" sender-id="{{{ $support[0]['sender']['id'] or 0 }}}" content-id="{{{ $content->id or 0 }}}" title="View/Reply"><i class="fa fa-comment" aria-hidden="true"></i></a>
                                            </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                                </div>
                            </ul>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="modal fade" id="answerBox">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">{{{ trans('main.course_support') }}}</h4>
                    </div>
                    <div class="modal-body modal-body-e" id="supportModalBody">
                        <div class="loader"></div>
                    </div>
                    <div class="modal-footer">
                        <form method="post" class="form-horizontal">
                            <div class="form-group">
                                <input type="hidden" name="sender_id" id="modalSenderId">
                                <input type="hidden" name="content_id" id="modalContentId">
                                <div class="col-md-12">
                                    <textarea type="text" class="form-control" rows="2" name="comment" id="modalComment"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="submit" class="btn btn-custom pull-left" id="sendReply" value="Send">
                                </div>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

    @endif
@endsection
@section('script')
    <script>
        $('document').ready(function () {
            $('.replyBtn').click(function () {
                var contentId = $(this).attr('content-id');
                var senderId = $(this).attr('sender-id');
                $.getJSON('/user/ticket/support/json/'+contentId+'/'+senderId,function (data) {
                    $('#modalContentId').val(contentId);
                    $('#modalSenderId').val(senderId);
                    $('#supportModalBody').html('');
                    $.each(data,function (i,item) {
                        if(item.user_id != item.supporter_id)
                        var appendHtml = '<div class="alert alert-danger marb8"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><p><b>'+ item.name +' : </b>'+ item.comment +'</p></div>';
                        else {
                            var mode = '';
                            if(item.mode != 'publish') {
                                mode = '(Pending)';
                            }
                            var appendHtml = '<div class="alert alert-success marb8"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><p><b>' + item.name + ' : </b>' + item.comment + ' ' + mode +'</p></div>';
                        }
                        $('#supportModalBody').append(appendHtml);
                    });
                    $('#supportModalBody').animate({ scrollTop: $('#supportModalBody').height()+2000 }, 2000);
                })
            })
        })
    </script>
    <script>
        $('document').ready(function () {
            $('#sendReply').click(function (e) {
                e.preventDefault();
                var comment = $('#modalComment').val();
                var senderId = $('#modalSenderId').val();
                var contentId = $('#modalContentId').val();
                $.post('/user/ticket/support/jsonStore',{'comment':comment,'sender_id':senderId,'content_id':contentId},function (data) {
                    $('#modalComment').val('');
                    var appendHtml = '<div class="alert alert-success marb8"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><p><b>'+ data.name +' : </b>'+ data.comment +' (Pending)</p></div>';
                    $('#supportModalBody').append(appendHtml);
                    $('#supportModalBody').animate({ scrollTop: $('#supportModalBody').height()+2000 }, 2000);
                })
            })
        });
    </script>
@endsection