@extends('layouts.app')

@section('title', 'Tickets de Suporte - Admin VagalumeTV')

@push('styles')
<style>
    .admin-tickets-container {
        background-color: #2a2a2a;
        padding: 25px;
        border-radius: 15px;
        color: #d1d1d1;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 2rem;
    }

    .admin-tickets-container h1 {
        color: #E9B258;
        margin-bottom: 1.5rem;
        font-weight: 600;
    }

    .table {
        background-color: #343434;
        color: #d1d1d1;
        border-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 1rem;
    }

    .table thead.table-dark th {
        background-color: #171717;
        color: #E9B258;
        border-color: rgba(255, 255, 255, 0.15);
        font-weight: 600;
    }

    .table tbody tr {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .table tbody tr:hover {
        background-color: #3f3f3f;
        color: #fff;
    }

    .table th, .table td {
        vertical-align: middle;
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .status-badge {
        padding: 0.35em 0.65em;
        font-size: .75em;
        font-weight: 700;
        line-height: 1;
        color: #1a1a1a; 
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .375rem;
        display: inline-block;
    }
    .status-novo { background-color: #5bc0de; }
    .status-em_atendimento { background-color: #f0ad4e; }
    .status-respondido { background-color: #5cb85c; }
    .status-fechado { background-color: #d9534f; color: #fff; } 
    
    .btn-action {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        border-radius: 30px;
    }
    .btn-action-view {
        background: linear-gradient(90deg, #4e54c8, #8f94fb); 
        color: #fff;
        border: none;
    }
    .btn-action-view:hover {
        background: linear-gradient(90deg, #3c41a0, #7075d4);
        color: #fff;
    }
    .btn-action-reply { 
        background: linear-gradient(90deg, #E9B258, #CB9A4B);
        color: #1a1a1a;
        border: none;
    }
     .btn-action-reply:hover {
        background: linear-gradient(90deg, #d8a145, #b9893a);
        color: #1a1a1a;
    }

    .pagination .page-item .page-link {
        background-color: #343434;
        border-color: rgba(255, 255, 255, 0.1);
        color: #E9B258;
    }
    .pagination .page-item.active .page-link {
        background-color: #E9B258;
        border-color: #E9B258;
        color: #1a1a1a;
    }
    .pagination .page-item.disabled .page-link {
        background-color: #2a2a2a;
        border-color: rgba(255, 255, 255, 0.1);
        color: #6c757d;
    }
    .pagination .page-item .page-link:hover {
        background-color: #3f3f3f;
        border-color: rgba(255, 255, 255, 0.15);
    }

    .alert-info { 
        background-color: rgba(23, 162, 184, 0.1);
        border-color: rgba(23, 162, 184, 0.2);
        color: #0c5460;
    }
</style>
@endpush

@section('content')
<div class="container mt-4 admin-tickets-container">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1>Tickets de Suporte</h1>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if ($tickets->isEmpty())
        <div class="alert alert-info">
            Nenhum ticket de suporte encontrado.
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>Assunto</th>
                        <th>Enviado por</th>
                        <th>E-mail</th>
                        <th>Status</th>
                        <th>Data</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tickets as $ticket)
                        <tr>
                            <td>#{{ $ticket->id }}</td>
                            <td>{{ Str::limit($ticket->subject, 40) }}</td>
                            <td>{{ $ticket->name ?? ($ticket->user ? $ticket->user->name : 'N/A') }}</td>
                            <td><a href="mailto:{{ $ticket->email }}" style="color: #E9B258;">{{ $ticket->email }}</a></td>
                            <td>
                                <span class="status-badge status-{{ str_replace(' ', '_', strtolower($ticket->status)) }}">
                                    {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                                </span>
                            </td>
                            <td>{{ $ticket->created_at->format('d/m/Y H:i') }}</td>
                            <td>
                                <a href="{{ route('admin.support.tickets.show', $ticket->id) }}" class="btn btn-sm btn-action btn-action-view me-1" title="Visualizar Ticket">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.support.tickets.show', $ticket->id) }}#replyForm" class="btn btn-sm btn-action btn-action-reply" title="Responder Ticket">
                                    <i class="fas fa-reply"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="d-flex justify-content-center mt-4">
            {{ $tickets->links() }}
        </div>
    @endif
</div>
@endsection