@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">
        <span id="ticket-status" class="m-r-5">
        </span>
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li><a href="{{ route('admin.tickets.index') }}">{{ __($pageTitle) }}</a></li>
            <li class="active">@lang('app.update')</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/html5-editor/bootstrap-wysihtml5.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/dropzone-master/dist/dropzone.css') }}">
<style>
    .list-group-item a {
        color: #FFFFFF !important;
    }

    .sub-button {
        margin-bottom: 66px;
        margin-top: 41px;
    }
    .dz-progress{
        display:none;
    }
</style>
@endpush

@section('content')

{!! Form::open(['id'=>'updateTicket2','class'=>'ajax-form updateTicket','method'=>'POST', 'files' => true]) !!}
<div class="form-body">
    <div class="row">
        <div class="col-xs-12">
            <div class="white-box">

                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Ticket</th>
                        </tr>
                    </thead>
                    <tbody>
                                            </tbody>
                </table>
                <div id="reply-section">

                    <div class="row">

                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="control-label">@lang('modules.tickets.reply') </label></label>
                                <textarea class="textarea_editor form-control" rows="10" name="message"
                                          id="message"></textarea>
                            </div>
                        </div>
                        <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row m-b-20">
                        <div class="col-xs-12">
                            @if($upload)
                            <button type="button"
                                    class="btn btn-block btn-outline-info btn-sm col-md-2 select-image-button"
                                    style="margin-bottom: 10px;display: none "><i class="fa fa-upload"></i> File Select Or
                                Upload</button>
                            <div id="file-upload-box">
                                <div class="row" id="file-dropzone">
                                    <div class="col-xs-12">
                                        <div class="dropzone" id="file-upload-dropzone">

                                            <div class="fallback">
                                                <input name="file" type="file" multiple />
                                            </div>
                                            <input name="image_url" id="image_url" type="hidden" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="ticketIDField" id="ticketIDField">
                            @else
                            <div class="alert alert-danger">@lang('messages.storageLimitExceed', ['here' => '<a
                                    href='.route(' admin.billing.packages'). '>Here</a>' ])</div>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-right sub-button">
                            <div class="btn-group dropup m-r-10">
                                <button aria-expanded="true" data-toggle="dropdown"
                                        class="btn btn-info btn-outline dropdown-toggle waves-effect waves-light"
                                        type="button"><i class="fa fa-bolt"></i> @lang('modules.tickets.applyTemplate')
                                    <span class="caret"></span></button>
                            </div>
                            <div class="btn-group dropup">
                                <button aria-expanded="true" data-toggle="dropdown"
                                        class="btn btn-success dropdown-toggle waves-effect waves-light"
                                        type="button">@lang('app.submit') <span class="caret"></span></button>
                                <ul role="menu" class="dropdown-menu pull-right">
                                    <li>
                                        <a href="javascript:;" class="submit-ticket"
                                           data-status="open">@lang('modules.tickets.submitOpen')
                                            <span style="width: 15px; height: 15px;"
                                                  class="btn btn-danger btn-small btn-circle">&nbsp;</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="submit-ticket"
                                           data-status="pending">@lang('modules.tickets.submitPending')
                                            <span style="width: 15px; height: 15px;"
                                                  class="btn btn-warning btn-small btn-circle">&nbsp;</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="submit-ticket"
                                           data-status="resolved">@lang('modules.tickets.submitResolved')
                                            <span style="width: 15px; height: 15px;"
                                                  class="btn btn-info btn-small btn-circle">&nbsp;</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="submit-ticket"
                                           data-status="closed">@lang('modules.tickets.submitClosed')
                                            <span style="width: 15px; height: 15px;"
                                                  class="btn btn-success btn-small btn-circle">&nbsp;</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- .row -->
</div>
{!! Form::close() !!}


@endsection


@push('footer-script')
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/html5-editor/wysihtml5-0.3.0.js') }}"></script>
<script src="{{ asset('plugins/bower_components/html5-editor/bootstrap-wysihtml5.js') }}"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/dropzone-master/dist/dropzone.js') }}"></script>

<script>
    $('.submit-ticket').click(function () {

    var status = $(this).data('status');
    $('#status').val(status);
    $.easyAjax({
    url: '{{route('admin.tickets.reply_multiple')}}',
            container: '#updateTicket2',
            type: "POST",
            data: $('#updateTicket2').serialize(),
            file: true,
            success: function (response) {
            var dropzone = 0;
            @if ($upload)
                    dropzone = myDropzone.getQueuedFiles().length;
            @endif

                    if (dropzone > 0){
            $('#ticketIDField').val(response.ticketReplyID);
            myDropzone.processQueue();
            }
            else{
            var msgs = "@lang('messages.ticketAddSuccess')";
            $.showToastr(msgs, 'success');
            window.location.href='/admin/tickets';
            }

            $('#scroll-here').remove();
            if (response.lastMessage != null){
            $('#ticket-messages').append(response.lastMessage);
            }
            $('#message').data("wysihtml5").editor.clear();
            // update status on top
            if (status == 'open')
                    $('#ticket-status').html('<label class="label label-danger">' + status + '</label>');
            else if (status == 'pending')
                    $('#ticket-status').html('<label class="label label-warning">' + status + '</label>');
            else if (status == 'resolved')
                    $('#ticket-status').html('<label class="label label-info">' + status + '</label>');
            else if (status == 'closed')
                    $('#ticket-status').html('<label class="label label-success">' + status + '</label>');
            scrollChat();
            }
    })
    });
    //Dropzone class
    @if ($upload)
            Dropzone.autoDiscover = false;
    myDropzone = new Dropzone("div#file-upload-dropzone", {
    url: "{{ route('admin.ticket-files.store') }}",
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            paramName: "file",
            maxFilesize: 10,
            maxFiles: 10,
            acceptedFiles: "image/*,application/pdf",
            autoProcessQueue: false,
            uploadMultiple: true,
            addRemoveLinks:true,
            parallelUploads:10,
            dictDefaultMessage: "@lang('modules.projects.dropFile')",
            init: function () {
            myDropzone = this;
            this.on("success", function (file, response) {
            if (response.status == 'fail') {
            $.showToastr(response.message, 'error');
            return;
            }
            })
            }
    });
    myDropzone.on('sending', function(file, xhr, formData) {
    console.log(myDropzone.getAddedFiles().length, 'sending');
    var ids = $('#ticketIDField').val();
    formData.append('ticket_reply_id', ids);
    });
    myDropzone.on('completemultiple', function () {
    var msgs = "@lang('messages.ticketReplySuccess')";
    $.showToastr(msgs, 'success');
    window.location.reload();
    });
    @endif
            $('.textarea_editor').wysihtml5();
    $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    $('.apply-template').click(function () {
    var templateId = $(this).data('template-id');
    var token = '{{ csrf_token() }}';
    $.easyAjax({
    url: '{{route('admin.replyTemplates.fetchTemplate')}}',
            type: "POST",
            data: {_token: token, templateId: templateId},
            success: function (response) {
            if (response.status == "success") {
            var editorObj = $("#message").data('wysihtml5');
            var editor = editorObj.editor;
            editor.setValue(response.replyText);
            }
            }
    })
    })



            function setValueInForm(id, data) {
            $('#' + id).html(data);
            $('#' + id).selectpicker('refresh');
            }

    function scrollChat() {
    $('#ticket-messages').animate({
    scrollTop: $('#ticket-messages')[0].scrollHeight
    }, 'slow');
    }

    scrollChat();
    $('body').on('click', '.sa-params', function () {
    var id = $(this).data('file-id');
    var deleteView = $(this).data('pk');
    swal({
    title: "@lang('messages.sweetAlertTitle')",
            text: "@lang('messages.confirmation.deleteReply')",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "@lang('messages.deleteConfirmation')",
            cancelButtonText: "@lang('messages.confirmNoArchive')",
            closeOnConfirm: true,
            closeOnCancel: true
    }, function (isConfirm) {
    if (isConfirm) {

    var url = "{{ route('admin.tickets.reply-delete',':id') }}";
    url = url.replace(':id', id);
    var token = "{{ csrf_token() }}";
    $.easyAjax({
    type: 'GET',
            url: url,
            success: function (response) {
            console.log(response);
            if (response.status == "success") {
            $.unblockUI();
            $('#replyMessageBox_' + id).fadeOut();
            /* if(response.lastMessage != null){
             $('#ticket-messages').append(response.lastMessage);
             }*/

            }
            }
    });
    }
    });
    });
    
    
</script>
@endpush