@extends('layouts.app')

@section('title', 'My support tickets')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" id="supportTicketsTableCard">
                @php
                    $supportTicketsHeaderAction = can('support_tickets', 'submit')
                        ? '<a href="'.e(route('support.index')).'" class="btn btn-primary btn-sm"><i class="fas fa-plus mr-1"></i>New request</a>'
                        : null;
                    $supportTicketsHeaderToolbar = view('support.partials.ticket-flow-video-tutorial', ['mode' => 'button'])->render();
                @endphp

                <x-table-filter-card
                    action="{{ route('support.tickets.index') }}"
                    id="supportTicketsFilterForm"
                    :resetUrl="route('support.tickets.index')"
                >
                    <div class="pms-filter-field">
                        <label for="filter-search">Search</label>
                        <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                               placeholder="Search by ticket number…" value="{{ $search ?? '' }}">
                    </div>
                </x-table-filter-card>
                <x-active-filter-chips :chips="$activeChips ?? []" />

                <x-layouts.index-card
                    tableId="supportTicketsTable"
                    :showTableHeading="true"
                    tableHeading="My support tickets"
                    tableSubtitle="Search and filter your support requests"
                    :headers="['Ticket', 'Preview', 'Status', 'Submitted', 'Actions']"
                    :sortColumns="['support_requests.id', null, 'support_requests.status', 'support_requests.created_at', null]"
                    :showCreateButton="false"
                    :headerToolbar="$supportTicketsHeaderToolbar"
                    :headerAction="$supportTicketsHeaderAction"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('support.tickets.index')])"
                    emptyMessage="You have no support tickets yet."
                    :emptyHint="can('support_tickets', 'submit') ? 'Submit a support request to get help from our team.' : 'No tickets to display.'"
                    :pagination="$tickets->links('vendor.pagination.bootstrap-4')"
                >
                
                    @forelse ($tickets as $ticket)
                        <tr data-status="{{ $ticket->status }}">
                            <td class="font-weight-bold">{{ $ticket->displayLabel() }}</td>
                            <td class="text-muted">{{ \Illuminate\Support\Str::limit(strip_tags($ticket->message), 90) }}</td>
                            <td data-order="{{ $ticket->isOpen() ? 0 : 1 }}">
                                @if ($ticket->isOpen())
                                    <span class="badge badge-warning">Open</span>
                                @else
                                    <span class="badge badge-secondary">Closed</span>
                                @endif
                            </td>
                            <td data-order="{{ $ticket->created_at?->timestamp ?? 0 }}">{{ $ticket->created_at->format('d M Y, H:i') }}</td>
                            <td class="text-right">
                                <a href="{{ route('support.tickets.show', $ticket) }}" class="btn btn-sm btn-outline-primary mr-1">
                                    <i class="far fa-eye mr-1"></i>Details
                                </a>
                                @if ($ticket->isOpen() && can('support_tickets', 'chat'))
                                <a href="{{ route('support.tickets.chat', $ticket) }}" class="btn btn-sm btn-outline-info">
                                    <i class="far fa-comments mr-1"></i>Chat
                                </a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <x-table-empty-state
                                    :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                    :resetUrl="route('support.tickets.index')"
                                />
                            </td>
                        </tr>
                    @endforelse
                </x-layouts.index-card>
            </div>
        </div>
    </div>
</section>

@include('support.partials.ticket-flow-video-tutorial', ['mode' => 'modal'])
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof window.PmsIndexDataTable === 'undefined' || !document.querySelector('#supportTicketsTable')) {
        return;
    }

    PmsIndexDataTable.initLaravelPaginated('#supportTicketsTable', {
        order: [[3, 'desc']],
        columnDefs: [
            { orderable: false, targets: [4], className: 'no-colvis text-right' }
        ],
        language: {
            search: '',
            searchPlaceholder: 'Search all columns…'
        }
    });

    PmsIndexDataTable.attachServerSort('#supportTicketsTable', {
        baseUrl: '{{ route("support.tickets.index") }}',
        currentQuery: @json(request()->except(['page'])),
        currentSortCol: '{{ request('sort_col', 'created_at') }}',
        currentSortDir: '{{ request('sort_dir', 'desc') }}'
    });
});
</script>
@endpush