@extends('layouts.app')

@section('title', 'Detalhes do Ticket de Suporte - Admin VagalumeTV')

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

    .admin-ticket-details-container h1, .admin-ticket-details-container h2, .admin-ticket-details-container h3 {
        color: #E9B258;
        font-weight: 600;
    }

    .ticket-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 1.5rem;
        padding: 15px;
        background-color: #343434;
        border-radius: 8px;
    }

    .ticket-info-grid p {
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

    .ticket-info-grid strong {
        color: #b9893a;
        display: block;
        margin-bottom: 2px;
    }

    .message-content-box {
        background-color: #343434;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .actions-bar {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        gap: 10px;
    }

    .status-badge {
        padding: 0.35em 0.65em;
        font-size: .85em;
        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-primary {
        background: linear-gradient(90deg, #E9B258, #CB9A4B);
        border: none;
        border-radius: 30px;
        padding: 8px 16px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #1a1a1a;
        transition: transform 0.2s ease;
    }
    .btn-primary:hover {
        transform: scale(1.01);
    }
    .btn-secondary {
        background: #2a2a2a;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 30px;
        padding: 8px 16px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #d1d1d1;
        transition: transform 0.2s ease;
    }
    .btn-secondary:hover {
        transform: scale(1.01);
        background: #343434;
    }
    .form-control, .form-select {
        background: #2a2a2a !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #d1d1d1;
        font-size: 0.9rem;
        padding: 0.75rem;
    }
    .form-control:focus, .form-select:focus {
        border-color: #E9B258;
        box-shadow: 0 0 0 0.2rem rgba(233, 178, 88, 0.25);
        background: #2a2a2a !important;
        color: #d1d1d1;
    }
</style>
@endpush

@section('content')
<div class="container mt-4 admin-ticket-details-container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Detalhes do Ticket #{{ $ticket->id }}</h1>
        <a href="{{ route('admin.support.tickets.index') }}" class="btn btn-secondary">Voltar para Lista</a>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="filter: none;"></button>
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="ticket-info-grid">
        <div>
            <p><strong>Enviado por:</strong> {{ $ticket->name ?? ($ticket->user ? $ticket->user->name : 'N/A') }}</p>
            <p><strong>E-mail:</strong> <a href="mailto:{{ $ticket->email }}" style="color: #E9B258;">{{ $ticket->email }}</a></p>
            @if($ticket->user)
            <p><strong>ID do Usuário:</strong> {{ $ticket->user_id }}</p>
            @endif
        </div>
        <div>
            <p><strong>Data de Envio:</strong> {{ $ticket->created_at->format('d/m/Y H:i:s') }}</p>
            <p><strong>Última Atualização:</strong> {{ $ticket->updated_at->format('d/m/Y H:i:s') }}</p>
            <p><strong>Status:</strong>
                <span class="status-badge status-{{ str_replace(' ', '_', strtolower($ticket->status)) }}">
                    {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                </span>
            </p>
        </div>
    </div>

    <div class="mb-4">
        <h3>Assunto: {{ $ticket->subject }}</h3>
    </div>

    <div class="mb-4">
        <h3>Mensagem Original:</h3>
        <div class="message-content-box">
            {!! nl2br(e($ticket->message)) !!}
        </div>
    </div>

    <div class="mb-4">
        <h3>Histórico de Respostas:</h3>
        @if($ticket->replies && $ticket->replies->count() > 0)
            @foreach($ticket->replies as $reply)
                <div class="message-content-box mb-3" style="background-color: #3f3f3f;"> {{-- Cor ligeiramente diferente para respostas --}}
                    <p><strong>Respondido por:</strong> {{ $reply->user->name ?? 'Equipa de Suporte' }}</p>
                    <p><small>Em: {{ $reply->created_at->format('d/m/Y H:i:s') }}</small></p>
                    <hr style="border-color: rgba(255,255,255,0.1);">
                    {!! nl2br(e($reply->message)) !!}
                </div>
            @endforeach
        @else
            <div class="alert alert-secondary" role="alert" style="background-color: #3a3a3a; border-color: #4a4a4a; color: #c0c0c0;">
                Nenhuma resposta registrada ainda.
            </div>
        @endif
    </div>

    <div class="mb-4" id="replyForm">
        <h3>Responder / Atualizar Status:</h3>
        <form action="{{ route('admin.support.tickets.reply', $ticket->id) }}" method="POST">
            @csrf 
            
            <div class="mb-3">
                <label for="replyMessage" class="form-label">Sua Resposta:</label>
                <textarea class="form-control" id="replyMessage" name="reply_message" rows="5" placeholder="Digite sua resposta aqui..." required></textarea>
            </div>
            <div class="mb-3">
                <label for="ticketStatus" class="form-label">Atualizar Status do Ticket:</label>
                <select class="form-select" id="ticketStatus" name="ticket_status">
                    <option value="novo" @if($ticket->status == 'novo') selected @endif>Novo</option>
                    <option value="em_atendimento" @if($ticket->status == 'em_atendimento') selected @endif>Em Atendimento</option>
                    <option value="respondido" @if($ticket->status == 'respondido') selected @endif>Respondido</option>
                    <option value="fechado" @if($ticket->status == 'fechado') selected @endif>Fechado</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Enviar Resposta e Atualizar Status</button>
        </form>
    </div>

    <div class="actions-bar">
        <a href="{{ route('admin.support.tickets.index') }}" class="btn btn-secondary">Voltar para Lista</a>
    </div>

</div>
@endsection