@extends('admin.layout')
@section('content')
    <div class="wrapper-md">
        <div class="row">
            <div class="col-md-9">
                <div class="panel panel-default">

                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-md-10">
                                <p class="m-n font-thin h3">Ticket Details #{{ $ticket->id ?? '' }}</p>
                            </div>
                            <div class="col-md-2 text-right">
                                <button type="button" class="btn btn-sm btn-default  modelBtn"
                                        data-ref="{{url('addTicketNote')}}" data-title="Add Notes({{ $ticket->id ?? ''}})"  data-toggle="tooltip"  data-placement="auto"  data-original-title="Add Notes"><i class="far fa-sticky-note"></i></button>

                                <a href="{{ url('/ticket')}}" title="Back">
                                    <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left"
                                                                              aria-hidden="true"></i>
                                        Back
                                    </button>
                                </a>

                            </div>
                        </div>
                    </div>


                    <div class="panel-body">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <h3>{{ $ticket->first_name }} {{ $ticket->last_name }} ({{ $ticket->last_name }})</h3>

                                    {!! $ticket->issue->message ?? ''   !!}
                                    @if(isset($ticket->issue->ticket_attachment) && sizeof($ticket->issue->ticket_attachment)>0)
                                        <h4>Attachment</h4>
                                        <ul>

                                            @foreach($ticket->issue->ticket_attachment as $key=>$attachment)

                                                <li><a href="{{url('download-attachment/?ftoken='.$attachment->token)}}" class="text-primary-dk">{{ $attachment->file_name }} <i class="fas fa-paperclip"></i> </a> </li>

                                            @endforeach

                                        </ul>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default  " draggable="true">
                    <div class="panel-heading">
                        Ticket Replies <span class="badge"></span>
                    </div>
                    <div class="panel-body">

                        @if(isset($ticket->messages))
                            @foreach($ticket->messages as $key=>$item)
                                <article class="media {{ ($item->seen == 0) ?'bg-light':''}} padder-v">
                                    <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-user-circle fa-stack-2x"></i>
              </span>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="h4">{{ $item->name ?? '' }} ({{ $item->user_type ?? '' }})</h4>
                                        <em class="text-xs">Posted on <span
                                                    class="text-danger">{{ date('jS F,Y',strtotime($item->created_at.' '.$timezone)) }}</span></em>
                                        <p class="block m-t-xs">{!! $item->message ?? '' !!}</p>

                                            @if(sizeof($item->ticket_attachment)>0)
                                                <h4>Attachment</h4>
                                                <ul>
                                                @foreach($item->ticket_attachment as $key=>$attachment)

                                                       <li><a href="{{url('download-attachment/?ftoken='.$attachment->token)}}" class="text-primary-dk">{{ $attachment->file_name }} <i class="fas fa-paperclip"></i> </a> </li>

                                                    @endforeach
                                                </ul>
                                            @endif

                                    </div>

                                </article>
                                <div class="line pull-in"></div>
                            @endforeach
                        @endif



                            @if (count($errors) > 0)
                                <div class="alert alert-danger">
                                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif


                            <form method="POST" action="{{ url('/ticket/' . $ticket->id) }}" accept-charset="UTF-8"
                              enctype="multipart/form-data">
                            {{ method_field('PATCH') }}
                            {{ csrf_field() }}

                                <div class="form-group {{ $errors->has('email_to') ? 'has-error' : ''}}">
                                    <label for="email_to" class="control-label">{{ 'Email To' }}</label>
                                    <input name="email_to" id="email_to" type="text" value="{{$ticket->email}}" class="form-control"/>
                                </div>
                                <div class="form-group {{ $errors->has('email_cc') ? 'has-error' : ''}}">
                                    <label for="email_cc" class="control-label">{{ 'CC' }}</label>
                                    <input name="email_cc" id="email_cc" type="text" class="form-control"/>
                                </div>

                            <div class="form-group {{ $errors->has('details') ? 'has-error' : ''}}">
                                <label for="details" class="control-label">{{ 'Write a  Reply' }}</label>
                                <input name="details" id="inp_htmlcode" type="hidden" required="required" />
                                <div id="div_editor1" class="richtexteditor" style="width: 100%;margin:0 auto;">

                                    {!! trim($signature->signature ?? '')  !!}
                                </div>
                                {!! $errors->first('details', '<p class="help-block">:message</p>') !!}
                            </div>
                                <link rel="stylesheet" href="{{ asset('/plugins/richtexteditor/rte_theme_default.css') }}" />
                                <script type="text/javascript" src="{{asset('plugins/richtexteditor/rte.js')}}"></script>
                                <script type="text/javascript" src='{{asset('plugins/richtexteditor/plugins/all_plugins.js')}}'></script>
                                <script>
                                    var editor1 = new RichTextEditor(document.getElementById("div_editor1"));
                                    editor1.attachEvent("change", function () {
                                        document.getElementById("inp_htmlcode").value = editor1.getHTMLCode();
                                    });
                                </script>
                            <div class="row">
                                <div class="form-group {{ $errors->has('attachment') ? 'has-error' : ''}} col-md-5">
                                    <table id="example2" class="table table-striped table-bordered">
                                        <thead>
                                        <tr>
                                            <th colspan="3"><strong> Attachments</strong>
                                                <button type="button" onClick="addBrand(),eraseBrand()" id="addFile"
                                                        name="add" class="btn btn-primary btn-flat pull-right"><i
                                                            class="fa fa-plus"></i></button>
                                                <div id="erase"></div>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody id="testFile">
                                        </tbody>
                                    </table>
                                    <small>Valid file type: jpg, jpeg, gif, png and File size max: 2 MB.</small>
                                </div>
                            </div>

                            <div class="form-group">
                                <input class="btn btn-success" type="submit" value="Submit">
                            </div>
                        </form>

                    </div>
                </div>
            </div>


            <div class="col-md-3">
                <div class="panel panel-default  " draggable="true">
                    <div class="panel-heading h3">Ticket Info</div>
                    <div class="panel-body">

                        <h6><strong>Subject</strong></h6>
                        <p class="text-primary-dk"> {{ $ticket->subject ?? ''   }}</p>

                        <h6><strong>Department</strong></h6>
                        <p class="text-primary-dk"> {!! $ticket->department_info->title ?? ''   !!} </p>
                        <h6><strong>Category</strong></h6>
                        <p class="text-primary-dk"> {!! $ticket->service->title ?? ''   !!}
                        <h6><strong>Sub Category</strong></h6>
                        <p class="text-primary-dk"> {!! $ticket->sub_catategory->title ?? ''   !!}
                        <h6><strong>Sub Category Item</strong></h6>
                        <p class="text-primary-dk"> {!! $ticket->sub_cat_item->item_name ?? ''   !!}

                        </p>

                    </div>
                </div>

                <div class="panel panel-default  " draggable="true">
                    <div class="panel-heading">
                        @php
                            if($ticket->status == 'Closed')
                                $status = 'bg-light';
                               elseif($ticket->status == 'Open')
                                  $status = 'bg-primary';
                                   elseif($ticket->status == 'Answered')
                                  $status = 'bg-success';
                        @endphp
                        <h6><strong>Status</strong>
                           Note: <span class="badge {{$status ?? ''}}"> {{ $ticket->status ?? ''   }}</span></h6>
                    </div>
                    <div class="panel-body">
                        <h6><strong>Opened</strong></h6>
                        <p class="text-primary-dk"> {!! date($date_format, strtotime($ticket->created_at.' '.$timezone))   !!} </p>
                        <h6><strong>Last Response</strong></h6>
                        <p class="text-primary-dk"> {!! date($date_format, strtotime($ticket->updated_at.' '.$timezone))   !!}
                        </p>
                        @if(!empty($ticket->note))
                        <div class="alert-danger alert">{{  $ticket->note ?? ''   }} </div>
                        <button class="btn btn-success" id="reply">Go to Reply</button>
                        @endif
                        <div class="form-group">
                            <hr>
                           <strong class=" text-primary"> Assign Technician:</strong>
                            <select  name="assigned_to" id="assigned_to" class="form-control selectpicker" data-size="8" data-live-search="true">
                                <option value="">-- Assign To --</option>
                                @foreach($ticket->technician as $item)
                                    <option value="{{$item->user_id ?? ''}}" @if($ticket->assigned_to == $item->user_id) selected @endif> {{$item->userInfo->name ?? ''}}</option>
                                @endforeach
                            </select>
                            <small>(If this ticket is not for you, you can forward to others)</small>
                        </div>

                       @if($ticket->status != 'Closed')
                              <div class="modal-footer">
                            <button type="button" data-title="Ticket Closing Note" data-ref="{{url('close-ticket-note', $ticket->token)}}" class="btn btn-dark pull-right modelBtn">Close the Ticket</button>
                             </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="wrapper-md">

    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            $(document).on('change', '#assigned_to', function () {
                 var assigned_to = $('#assigned_to option:selected').val();
                 var id = '{{$ticket->id ?? ''}}'

                $.ajax({
                    url: '{{url('ticket_assigned')}}' ,
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'id': id,'assigned_to': assigned_to},
                    success: function( responce ) {
                        $.snackbar({content: "Save Successfully", timeout: 3000});
                    }
                })
            })



                $(document).on('click', '.modelBtn', function () {
                id = '{{$ticket->id}}'


                $('#ajaxModal .modal-dialog').removeClass('modelWidth80');
                $('#ajaxModalContent').html('')
                $('#ajaxModalLabel').html( $(this).data('title'))
                $('#ajaxModal').data('id', id).modal('show');

                $.ajax({
                    url: $(this).data('ref')  ,
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'id': id},
                    success: function( responce ) {
                        $('#ajaxModal .modal-dialog').addClass('modelWidth80');
                        $('#ajaxModalContent').html(responce)
                    }
                })

            });


            $('#reply').click(function () {
                $("html, body").animate({scrollTop: $(document).height()}, "slow");
            })


            $('#addFile').click(function () {
                var fieldTest = Number($('#testFile tr').length);
                html = "";
                if (fieldTest != 30) {
                    // html+=se;
                    html = '<tr><td><input type="file" name="filename[]" value=""  class="form-control" /></td>'
                        + '<td><button  type="button" class="btn btn-danger btn-flat ng-scope  pull-right deletebtn" onclick="this.parentNode.parentNode.remove(this.parentNode);" ><i class="fa fa-trash" data-toggle="tooltip" data-original-title="Remove" ></i></button></td></tr>';
                    fieldTest += 1;

                    //$('#openoptions table').addClass('.table');
                } else {
                    html = "<br />Only 30 data entries allowed.";
                    $('#addFile').attr('disabled', 'disabled');
                    //document.form.add.disabled=true;
                }

                $('#testFile').append(html);
            })

        /*    var editor = CKEDITOR.replace( 'details', {height:['200px'],
                filebrowserUploadUrl: '{{ asset('uploadImage/') }}',
                filebrowserBrowseUrl: '{{ asset('filebrowser/') }}'

            } );

            CKFinder.setupCKEditor( editor, 'ckfinder/' );*/

        })
    </script>
@endsection