@extends('layouts.admin')

@section('page-title', trans('crm.tickets'))

@section('content')


    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a> <span class="font-weight-semibold">@lang('crm.tickets')</span>
                </h4>
                {{--<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>--}}
            </div>
        </div>
    </div>

    <div class="content">

        @include('partials.messages')
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">@lang('crm.tickets_summary')</h5>
            </div>
            <div class="card-body">
                <div class="d-sm-flex align-items-sm-center justify-content-sm-between flex-sm-wrap">
                    @foreach($counts_by_status as $count)
                        <div class="d-flex align-items-center mb-3 mb-sm-0">
                            <div>
                                <h4 class="font-weight-semibold mb-0">{{ $count['cnts'] }}</h4>
                                <span class="badge badge-mark mr-1" style="border-color: {{$count['statuscolor']}}"></span>
                                <span style="color: {{$count['statuscolor']}}">{{ $count['name'] }}</span>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">@lang('crm.tickets')</h5>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                        <a class="list-icons-item" data-action="reload"></a>
                        <a class="list-icons-item" data-action="remove"></a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row header-controls">
                    <div class="col-6">
                        <a href="{{ route('admin.tickets.create') }}" class="btn btn-success" id="add-ticket">
                            <i class="icon-plus-circle2"></i>
                            @lang('crm.new_ticket')
                        </a>
                        <a href="javascript:deleteTicket();" class="btn btn-danger" id="del-ticket">
                            <i class="icon-cross2"></i>
                            @lang('crm.mass_delete')
                        </a>
                    </div>
                    <div class="col-6">
                        <div style="width: 150px; float: right">
                        <select class="form-control select" id="status" name="status" data-fouc>
                            <option value="">All</option>
                            @foreach($statuses as $status)
                                <option value="{{ $status['ticketstatusid'] }}">{{ $status['name'] }}</option>
                            @endforeach
                        </select>
                        </div>
                    </div>

                </div>


                <table class="table" id="client-table">
                    <thead>
                    <th></th>
                    <th>@lang('crm.clients_tickets_dt_number')</th>
                    <th>@lang('crm.clients_tickets_dt_subject')</th>
                    <th>@lang('crm.clients_tickets_dt_department')</th>
                    <th>@lang('crm.clients_tickets_dt_service')</th>
                    <th>@lang('crm.ticket_dt_submitter')</th>
                    <th>@lang('crm.priority')</th>
                    <th>@lang('crm.clients_tickets_dt_status')</th>
                    <th>@lang('crm.clients_tickets_dt_last_reply')</th>
                    <th>@lang('crm.ticket_date_created')</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

@stop

@section('scripts')
    <script>
        let table ;
        $(document).ready(function () {
            table = $('#client-table').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url': '/admin/tickets/postGetTickets',
                    'data': function ( d ) {
                        d.status = $('#status').val();
                    }
                },
                'columns': [
                    {
                        "title": "<label class='form-check-label'><input type='checkbox' class='form-check-input-styled th-checkbox' data-fouc></label>",
                        "data": 'ticketid',
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return "<label class='form-check-label'><input type='checkbox' class='form-check-input-styled td-checkbox' name='tick[]' value='" + data + "' /></label>";
                            }
                            return data;
                        },
                        "className": "td-select-checkbox",
                        orderable: false,
                        searchable: false,
                    },
                    {data: 'ticketid'},
                    {data: 'subject'},
                    {data: 'department'},
                    {data: 'service'},
                    {data: 'name'},
                    {data: 'priority'},
                    {data: 'status'},
                    {data: 'lastreply'},
                    {data: 'date'},
                ],
                rowCallback: function (row, data) {
                    $(row).addClass('has-row-options');
                    if ( data.clientread === 0) {
                        $(row).addClass('alert-danger');
                    }
                },
                'order': [[2, 'asc']]
            });
        });

        $('#status').on('change', function () {
            table.ajax.reload();
        })

        function deleteTicket() {
            var ids = [];
            $(".td-checkbox:checked").each(function() {
                ids.push($(this).val());
            });

            if(ids.length == 0){
                infoAlert('Warning','Please select at least one.');
                return;
            }

            confirmAlert('Please confirm!','Are you sure to delete selected tickets?','Yes, delete it.','Cancel', function () {
                $.ajax({
                    url: '/admin/tickets/action',
                    method: 'POST',
                    data: { ticks: ids, action: 'delete'},
                    dataType: 'json',
                    success: function( data, status, xhr ) {
                        if(data.status == '1'){
                            successAlert('Success', data.msg,function () {
                                if($.fn.DataTable.isDataTable('.dataTable') && $('.dataTable').DataTable().ajax.url()){
                                    $('.dataTable').DataTable().ajax.reload(null, false);
                                }else{
                                    window.location.reload();
                                }
                            })
                        }else {
                            errorAlert('Error', data.msg, function () {
                                if($.fn.DataTable.isDataTable('.dataTable') && $('.dataTable').DataTable().ajax.url()){
                                    $('.dataTable').DataTable().ajax.reload(null, false);
                                }
                            })
                        }
                    },error:function (data) {
                        errorAlert('Error', data.responseJSON.message);
                    },finally: function () {

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