@extends('layouts.app')

@section('title', 'Tickets')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-ticket-perforated"></i> Tickets</h1>
    @auth
        @if(auth()->user()->hasPermission('create-tickets'))
            <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> New Ticket
            </a>
        @endif
    @endauth
</div>

@if($tickets->count() > 0)
    <div class="row">
        @foreach($tickets as $ticket)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span class="ticket-status status-{{ str_replace('_', '-', $ticket->status) }}">
                            {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                        </span>
                        <span class="priority-{{ $ticket->priority }}">
                            <i class="bi bi-flag-fill"></i> {{ ucfirst($ticket->priority) }}
                        </span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ $ticket->title }}</h5>
                        <p class="card-text text-muted">{{ Str::limit($ticket->description, 100) }}</p>
                        <div class="mb-2">
                            <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</span>
                        </div>
                        <div class="small text-muted">
                            <div><strong>Created by:</strong> {{ $ticket->user->name }}</div>
                            <div><strong>Created:</strong> {{ $ticket->created_at->format('M d, Y H:i') }}</div>
                            @if($ticket->assignedTo)
                                <div><strong>Assigned to:</strong> {{ $ticket->assignedTo->name }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye"></i> View
                            </a>
                            @if(auth()->user()->hasPermission('edit-tickets') || $ticket->user_id === auth()->id())
                                <a href="{{ route('tickets.edit', $ticket) }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="d-flex justify-content-center">
        {{ $tickets->links() }}
    </div>
@else
    <div class="text-center py-5">
        <i class="bi bi-ticket-perforated display-1 text-muted"></i>
        <h3 class="mt-3">No tickets found</h3>
        <p class="text-muted">You haven't created any tickets yet.</p>
        @auth
            @if(auth()->user()->hasPermission('create-tickets'))
                <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Create Your First Ticket
                </a>
            @endif
        @endauth
    </div>
@endif
@endsection