<div class="page-title">
    <h1><?php echo $this->user->lang("Ticket Feedback"); ?></h1>
    <span><?php echo $this->user->lang("List of ticket feedback"); ?></span>
</div>
<div class="cm-holder dt-info">
    <div class="head padding-bottom">
        <div class="dt-header">
            <div class="dt-header-left">
                <div class="dt-filters">
                    <div class="filter-group">
                        <label><?php echo $this->user->lang("Show");?></label>
                        <select id="feedback-grid-filterby"style="min-width: 120px;">
                            <option <?php if ($this->filter == 'all') { ?> selected <?php } ?> value="all">
                                <?php echo $this->user->lang("All"); ?>
                            </option>

                            <option <?php if ($this->filter == TICKET_RATE_POOR) { ?> selected <?php } ?>
                                    value="<?php echo TICKET_RATE_POOR; ?>">
                                <?php echo $this->user->lang("Poor"); ?>
                            </option>

                            <option <?php if ($this->filter == TICKET_RATE_MEDIOCRE) { ?> selected <?php } ?>
                                    value="<?php echo TICKET_RATE_MEDIOCRE; ?>">
                                <?php echo $this->user->lang("Not Great"); ?>
                            </option>

                            <option <?php if ($this->filter == TICKET_RATE_GOOD) { ?> selected <?php } ?>
                                    value="<?php echo TICKET_RATE_GOOD; ?>">
                                <?php echo $this->user->lang("Good"); ?>
                            </option>

                            <option <?php if ($this->filter == TICKET_RATE_OUTSTANDING) { ?> selected <?php } ?>
                                    value="<?php echo TICKET_RATE_OUTSTANDING; ?>">
                                <?php echo $this->user->lang("Excellent"); ?>
                            </option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="dt-header-right">
                <div class="filter-group dt-length"></div>
            </div>
        </div>
    </div>
    <div class="dt-wrapper pull-top">
        <div class="table-responsive">
            <table id="table-list" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th class=""></th>
                        <th class=""><?php echo $this->user->lang('Ticket Id'); ?></th>
                        <th class=""><?php echo $this->user->lang('Client'); ?></th>
                        <th class=""><?php echo $this->user->lang('Rating'); ?></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="table-actions">
        </div>
    </div>
</div>

<script data-cfasync="false">
    $(document).ready(function () {
        var ajaxUrl = 'index.php?fuse=support&controller=tickets&action=getfeedback';
        var table = $('#table-list').DataTable({
            columnDefs: [
                {
                    targets: 0,
                    width: '1%'
                }
            ],
            "searching": false,
            "ajax": {
                url: ajaxUrl,
                dataSrc: 'data',
                data: function(d) {
                    d.filter =  $('#feedback-grid-filterby').val();
                    d.sort = 'id';
                    d.dir = 'desc';
                }
            },
            "columns": [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {
                    "data": "id",
                    orderable: true,
                    render: function (text, type, row) {
                        str = "<a href='index.php?fuse=support&view=ticket&controller=ticket&searchfilter=closed&id=" + row.id + "'>" + text + '</a>';
                        return str;
                    },
                },
                {
                    "data": "customer",
                    orderable: true,
                    render: function (text, type, row) {
                        str = "<a href='index.php?fuse=clients&controller=userprofile&view=profilecontact&frmClientID=" + row.userid + "'>" + text + '</a>';
                        return str;
                    },
                },
                {
                    "data": "rate",
                    orderable: true,
                    render: function (text, type, row) {
                        switch(row.rate) {
                            case '0':
                                return clientexec.lang('No Rating');
                            case '1':
                                return clientexec.lang('Excellent');
                            case '2':
                                return clientexec.lang('Good');
                            case '3':
                                return clientexec.lang('Not Great');
                            case '4':
                                return clientexec.lang('Poor');
                        }
                    },
                }
            ],
            "order": [[1, 'asc']],
        });

        $('#table-list tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });

        function format(row) {
            text = clientexec.nl2br(row.feedback);
            if (text == '') {
                return clientexec.lang('No feedback provided');
            }
            return text;
        }
    });
</script>