@extends('layouts.app', ['pageSlug' => 'ticketList'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Ticket</span></li>
        </ul>
    </div>
    <input type="button" class="btn btn-primary btn-sm pull-right" onclick="open_add_ticket_modal()" value=" Create ticket ">
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
           Opened
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">                
                <table id="open_tickets" class="table table-striped table-bordered dttable">
                    <thead>
                        <th>#</th>
                        <th>Subject</th>
                        <th>Created</th>
                        <th>Updated</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                    @foreach($openTickets as $key=>$tic) 
                        <tr>
                            <td>{{$key + 1}}</td>
                            <td>{{$tic->subject}}</td>
                            <td>{{$tic->created_at}}</td>
                            <td>{{$tic->updated_at}}</td>
                            <td>
                                <a href="#" onclick="open_update_ticket_modal('{{$tic->id}}')"><i class="fa fa-bars"></i></a>
                                <a href="#" onclick="confirmDelete('{{route('portal.ticket.close', $tic->id)}}')"><i class="fa fa-times"></i></a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            Closed
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">                
                <table id="close_tickets" class="table table-striped table-bordered dttable">
                    <thead>
                        <th>#</th>
                        <th>Subject</th>
                        <th>Created</th>
                        <th>Updated</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                    @foreach($closedTickets as $key=>$tic) 
                        <tr>
                            <td>{{$key + 1}}</td>
                            <td>{{$tic->subject}}</td>
                            <td>{{$tic->created_at}}</td>
                            <td>{{$tic->updated_at}}</td>
                            <td>                            
                                <a href="#"><i class="fa fa-folder-open"></i></a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

    @component('modals.create-ticket-modal')
    @endcomponent

    @component('modals.view-ticket-msg-modal')
    
    @endcomponent

@endsection

@push('js')
<script>
    function confirmDelete(route) {
        var result = confirm( "Do you want to delete this?" );
        if (result) {
            location.href = route;
        }
    }
    $(document).ready(function(){
        $('.dttable').dataTable();        
        $(".select2").select2();   
        $('.summernote').summernote({
            height:150,
            maxHeight:300,
            toolbar: [
                // ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                // ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr']],
                ['view', ['fullscreen', 'codeview']],
                // ['help', ['help']]
            ],
            
            callbacks : {
                onImageUpload: function(files, editor, welEditable) {
                    var target = $(this);
                    sendFile(files[0], target, welEditable);
                }
            }
        });     
    })
    function sendFile(file, target, welEditable) {
        console.log(target);
        data = new FormData();
        var token = '{{ csrf_token()}}';
        data.append("_token", token);
        data.append("file", file);
        $.ajax({
            data: data,
            type: "POST",
            url: "{{URL::to('/')}}/summernote/imageUpload",
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                target.summernote('editor.insertImage', url);
            }
        });
    }

    function open_add_ticket_modal(){
        $('.summernote').summernote('code', '');
        $('#create-ticket-modal').modal('show');
    }
    function open_update_ticket_modal(id){
        $('.summernote').summernote('code', '');

        data = new FormData();
        var token = '{{ csrf_token()}}';
        data.append("_token", token);
        data.append("ticketId", id);
        $.ajax({
            data: data,
            type: "POST",
            url: "{{route('portal.ticket.getTick')}}",
            cache: false,
            contentType: false,
            processData: false,
            success: function(res) {
               $('#message_part').html(res);
               var messageBody = document.querySelector('#msg-part');
                messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight + 200;  
            }
        });

        $('#view-ticket-msg-modal').modal('show');
    }

/** preview uploaded file name  */
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
        document.querySelector('#attached_files').addEventListener('change', handleFileSelect, false);
    }
    function handleFileSelect(e) {
        if(!e.target.files) {
            return;
        }
        var files = e.target.files;
        $('#selected_files').val(files.length + ' file(s) are selected');
    
        // for(var i=0; i<files.length; i++) {
        //     var f = files[i];
        //     selDiv.innerHTML += f.name + "<br/>";
        // }
    }

/** end */

/** will send scroll to bottom */
// $('#view-ticket-msg-modal').on('show.bs.modal', function(e) {
    
// })



</script>
    
@endpush