ultimatepos/Modules/ManagementTools/Resources/views/tickets/index.blade.php

@extends('layouts.app')

@section('title', __('managementtools::lang.tickets'))

@section('content')
@include('managementtools::layouts.nav')

<section class="content no-print mt-page">
    <div class="mt-page-header">
        <h1><i class="fas fa-life-ring" style="color:#2563eb;margin-left:8px;"></i> @lang('managementtools::lang.tickets')</h1>
        @can('managementtools.ticket_own')
        <a href="{{ action([\Modules\ManagementTools\Http\Controllers\TicketController::class, 'create']) }}" class="mt-btn-primary">
            <i class="fa fa-plus"></i> @lang('managementtools::lang.ticket_new')
        </a>
        @endcan
    </div>

    <div class="row" style="margin:0 15px 20px;">
        <div class="col-md-3 col-sm-6" style="padding:0 8px;">
            <div class="mt-ticket-stat mt-ticket-stat--open">
                <span class="mt-ticket-stat__value">{{ $stats['open'] }}</span>
                <span class="mt-ticket-stat__label">@lang('managementtools::lang.ticket_status_open')</span>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="padding:0 8px;">
            <div class="mt-ticket-stat mt-ticket-stat--progress">
                <span class="mt-ticket-stat__value">{{ $stats['in_progress'] }}</span>
                <span class="mt-ticket-stat__label">@lang('managementtools::lang.ticket_status_in_progress')</span>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="padding:0 8px;">
            <div class="mt-ticket-stat mt-ticket-stat--resolved">
                <span class="mt-ticket-stat__value">{{ $stats['resolved'] }}</span>
                <span class="mt-ticket-stat__label">@lang('managementtools::lang.ticket_status_resolved')</span>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="padding:0 8px;">
            <div class="mt-ticket-stat mt-ticket-stat--total">
                <span class="mt-ticket-stat__value">{{ $stats['total'] }}</span>
                <span class="mt-ticket-stat__label">@lang('managementtools::lang.ticket_total')</span>
            </div>
        </div>
    </div>

    <div class="mt-card">
        <div class="mt-card-header">
            <h3 class="mt-card-title">@lang('managementtools::lang.ticket_list')</h3>
            <div class="mt-ticket-filters">
                <select id="ticket_filter_status" class="form-control input-sm">
                    <option value="all">@lang('managementtools::lang.ticket_filter_all_status')</option>
                    @foreach($statuses as $code => $label)
                    <option value="{{ $code }}">{{ $label }}</option>
                    @endforeach
                </select>
                <select id="ticket_filter_priority" class="form-control input-sm">
                    <option value="all">@lang('managementtools::lang.ticket_filter_all_priority')</option>
                    @foreach($priorities as $code => $label)
                    <option value="{{ $code }}">{{ $label }}</option>
                    @endforeach
                </select>
                @if($can_manage && $users->isNotEmpty())
                <select id="ticket_filter_user" class="form-control input-sm select2" style="min-width:160px;">
                    <option value="">@lang('managementtools::lang.ticket_filter_all_users')</option>
                    @foreach($users as $uid => $uname)
                    <option value="{{ $uid }}">{{ $uname }}</option>
                    @endforeach
                </select>
                @endif
            </div>
        </div>
        <div class="mt-card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="mt_tickets_table" style="width:100%">
                    <thead>
                        <tr>
                            <th>@lang('managementtools::lang.ticket_reference')</th>
                            <th>@lang('managementtools::lang.ticket_subject')</th>
                            @if($can_manage)
                            <th>@lang('managementtools::lang.ticket_requester')</th>
                            @endif
                            <th>@lang('managementtools::lang.ticket_assignee')</th>
                            <th>@lang('managementtools::lang.ticket_priority')</th>
                            <th>@lang('managementtools::lang.ticket_status')</th>
                            <th>@lang('managementtools::lang.date')</th>
                            <th>@lang('managementtools::lang.action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>

<style>
.mt-ticket-stat {
    border-radius: 14px; padding: 18px 20px; margin-bottom: 12px;
    background: #fff; border: 1px solid #e8edf5;
    box-shadow: 0 4px 16px rgba(27,39,51,0.04);
}
.mt-ticket-stat__value { display: block; font-size: 28px; font-weight: 700; color: #0f172a; }
.mt-ticket-stat__label { font-size: 13px; color: #64748b; }
.mt-ticket-stat--open { border-right: 4px solid #f59e0b; }
.mt-ticket-stat--progress { border-right: 4px solid #3b82f6; }
.mt-ticket-stat--resolved { border-right: 4px solid #22c55e; }
.mt-ticket-stat--total { border-right: 4px solid #6366f1; }
.mt-ticket-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt-ticket-filters select { min-width: 140px; }
</style>
@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    var columns = [
        { data: 'reference', name: 'id' },
        { data: 'subject', name: 'subject' },
        @if($can_manage)
        { data: 'requester', name: 'requester', orderable: false, searchable: false },
        @endif
        { data: 'assignee_name', name: 'assignee_name', orderable: false, searchable: false },
        { data: 'priority_label', name: 'priority', orderable: false, searchable: false },
        { data: 'status_label', name: 'status', orderable: false, searchable: false },
        { data: 'updated_at', name: 'updated_at' },
        { data: 'action', name: 'action', orderable: false, searchable: false }
    ];

    var tickets_table = $('#mt_tickets_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ action([\Modules\ManagementTools\Http\Controllers\TicketController::class, "index"]) }}',
            data: function(d) {
                d.status = $('#ticket_filter_status').val();
                d.priority = $('#ticket_filter_priority').val();
                d.user_id = $('#ticket_filter_user').val();
            }
        },
        columns: columns,
        order: [[{{ $can_manage ? 6 : 5 }}, 'desc']]
    });

    $('#ticket_filter_status, #ticket_filter_priority, #ticket_filter_user').on('change', function() {
        tickets_table.ajax.reload();
    });
});
</script>
@endsection