@extends('layouts.front')

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

@section('content')
    <div class="content">
        <div class="row">
            <div class="col-md-12">@include('partials.announcement')</div>
        </div>

        <div class="d-flex align-items-center justify-content-between pt-3 pb-3">
            <div class="d-flex">
                <h4 class="m-0">
                    <a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a>
                    <span class="font-weight-semibold">@lang('crm.clients_tickets_heading')</span>
                </h4>
            </div>

            @include('partials.front-custom-menu')

        </div>

        @include('partials.messages')

        <div class="row">
            <div class="col-md-12">
                <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('front.faq.new_ticket') }}" class="btn btn-success" id="add-ticket">
                                    <i class="icon-plus-circle2"></i>
                                    @lang('crm.new_ticket')
                                </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 mt-3" id="ticket-table">
                            <thead>
                            <th>@lang('crm.clients_tickets_dt_number')</th>
                            <th>@lang('crm.clients_tickets_dt_subject')</th>
                            <th>@lang('crm.ticket_dt_submitter')</th>
                            <th>@lang('crm.clients_tickets_dt_department')</th>
                            <th>@lang('crm.clients_tickets_dt_service')</th>
                            <th>@lang('crm.priority')</th>
                            <th>@lang('crm.clients_tickets_dt_status')</th>
                            <th>@lang('crm.clients_tickets_dt_last_reply')</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        let table ;
        $(document).ready(function () {
            table = $('#ticket-table').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url': '/front/faq/postGetTickets',
                    'data': function ( d ) {
                        d.status = $('#status').val();
                    }
                },
                'columns': [
                    {data: 'ticketid'},
                    {data: 'subject'},
                    {data: 'name'},
                    {data: 'department'},
                    {data: 'service'},
                    {data: 'priority'},
                    {data: 'status'},
                    {data: 'lastreply'},
                ],
                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();
        })
    </script>
@stop