{{-- resources/views/admin/support/index.blade.php --}}
{{-- Support tickets listing with status filter --}}
{{-- Controller: Admin\SupportController@index --}}

@extends('layouts.admin')

@section('title', 'Support Tickets')
@section('page_title', 'Support Tickets')

@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/tables.css') }}">
@endsection

@section('content')

    <x-admin.page-header
        title="Support Tickets"
        :breadcrumb="[['label' => 'Support']]"
    />

    <div class="table-toolbar">
        <form method="GET" action="{{ route('admin.support.index') }}" class="table-toolbar__search-form">
            <div class="table-toolbar__search-wrap">
                <i class="bi bi-search table-toolbar__search-icon"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search tickets..." class="table-toolbar__search-input">
            </div>
            <select name="status" class="table-toolbar__filter-select">
                <option value="">All Statuses</option>
                <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>New</option>
                <option value="open" {{ request('status') === 'open' ? 'selected' : '' }}>Open</option>
                <option value="replied" {{ request('status') === 'replied' ? 'selected' : '' }}>Replied</option>
                <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>Closed</option>
            </select>
            <select name="type" class="table-toolbar__filter-select">
                <option value="">All Types</option>
                <option value="general" {{ request('type') === 'general' ? 'selected' : '' }}>General</option>
                <option value="booking" {{ request('type') === 'booking' ? 'selected' : '' }}>Booking</option>
                <option value="refund" {{ request('type') === 'refund' ? 'selected' : '' }}>Refund</option>
                <option value="complaint" {{ request('type') === 'complaint' ? 'selected' : '' }}>Complaint</option>
            </select>
            <button type="submit" class="table-toolbar__search-btn">Filter</button>
            @if(request()->hasAny(['search', 'status', 'type']))
                <a href="{{ route('admin.support.index') }}" class="table-toolbar__clear-btn">Clear</a>
            @endif
        </form>
    </div>

    <x-admin.data-table :headers="['#', 'Name', 'Email', 'Subject / Type', 'Date', 'Status', 'Action']">
        @forelse($tickets as $ticket)
            <tr class="data-table__row {{ $ticket->status === 'new' ? 'data-table__row--highlight' : '' }}">
                <td class="data-table__td">{{ $tickets->firstItem() + $loop->index }}</td>
                <td class="data-table__td data-table__td--name">{{ $ticket->name }}</td>
                <td class="data-table__td">{{ $ticket->email }}</td>
                <td class="data-table__td">
                    <span class="data-table__primary-text">{{ Str::limit($ticket->subject, 40) }}</span>
                    <span class="type-badge type-badge--{{ $ticket->type }}">{{ ucfirst($ticket->type) }}</span>
                </td>
                <td class="data-table__td">{{ $ticket->created_at->format('d M Y H:i') }}</td>
                <td class="data-table__td">
                    <span class="ticket-status-badge ticket-status-badge--{{ $ticket->status }}">
                        {{ ucfirst($ticket->status) }}
                    </span>
                </td>
                <td class="data-table__td">
                    <a href="{{ route('admin.support.show', $ticket->id) }}" class="action-btn action-btn--view" title="View & Reply">
                        <i class="bi bi-eye"></i>
                    </a>
                    <button type="button" class="action-btn action-btn--delete js-delete-trigger"
                        data-delete-route="{{ route('admin.support.destroy', $ticket->id) }}"
                        data-item-name="{{ $ticket->name }}'s ticket"
                        data-bs-toggle="modal"
                        data-bs-target="#confirmDeleteModal">
                        <i class="bi bi-trash3"></i>
                    </button>
                </td>
            </tr>
        @empty
            <tr><td colspan="7" class="data-table__empty">No support tickets found.</td></tr>
        @endforelse
    </x-admin.data-table>

    <div class="table-pagination">
        <span class="pagination-info">
            Showing <strong>{{ $tickets->firstItem() }}</strong>–<strong>{{ $tickets->lastItem() }}</strong>
            of <strong>{{ $tickets->total() }}</strong> tickets
        </span>
        {{ $tickets->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
    </div>

    <x-admin.confirm-modal />

@endsection

@section('page_js')
    <script src="{{ asset('js/admin/confirm-delete.js') }}"></script>
@endsection