@extends('layouts.admin')

@section('title', 'Support Ticket #' . ($ticket->id ?? ''))

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.support') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Tickets
        </a>
        <h1 class="page-title">Ticket #{{ $ticket->id ?? '' }}: {{ $ticket->subject ?? '' }}</h1>
    </div>
</div>

<div class="grid-3-1">
    <div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Conversation</h3>
            </div>
            <div class="card-body">
                <div class="conversation-thread">
                    @forelse($ticket->messages ?? [] as $msg)
                    <div class="conversation-message {{ ($msg->user_id ?? $msg->sender_id) === $ticket->user_id ? 'conversation-message-user' : 'conversation-message-staff' }}">
                        <div class="conversation-avatar">
                            <div class="avatar avatar-sm">
                                <span>{{ strtoupper(substr($msg->sender->name ?? 'S', 0, 1)) }}</span>
                            </div>
                        </div>
                        <div class="conversation-body">
                            <div class="conversation-header">
                                <span class="text-semibold">{{ $msg->sender->name ?? 'Staff' }}</span>
                                @if($msg->is_internal ?? false)
                                <span class="badge badge-blue">Internal Note</span>
                                @endif
                                <span class="text-muted text-sm">{{ $msg->created_at->diffForHumans() }}</span>
                            </div>
                            <div class="conversation-text">{!! nl2br(e($msg->message ?? $msg->body ?? '')) !!}</div>
                        </div>
                    </div>
                    @empty
                    <div class="empty-state-sm">
                        <p>No messages yet. Start the conversation.</p>
                    </div>
                    @endforelse
                </div>

                <form method="POST" action="{{ route('admin.support.reply', $ticket->id) }}" style="margin-top: 1.5rem;">
                    @csrf
                    @method('POST')
                    <div class="form-group">
                        <label for="message" class="form-label">Reply</label>
                        <textarea id="message" name="message" class="form-input @error('message') is-invalid @enderror" rows="4" required placeholder="Type your reply..."></textarea>
                        @error('message')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" name="is_internal" value="1">
                            <span>Internal Note (not visible to customer)</span>
                        </label>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8l12-5-5 12-2-5-5-2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            Send Reply
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Ticket Info</h3>
            </div>
            <div class="card-body">
                <div class="info-list">
                    <div class="info-item">
                        <span class="info-label">Status</span>
                        <span class="info-value">
                            <span class="badge badge-{{ $ticket->status === 'open' ? 'orange' : ($ticket->status === 'resolved' ? 'green' : 'blue') }}">{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Priority</span>
                        <span class="info-value">{{ ucfirst($ticket->priority ?? 'Normal') }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Category</span>
                        <span class="info-value">{{ ucfirst($ticket->category ?? 'General') }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Customer</span>
                        <span class="info-value">
                            <a href="{{ route('admin.customers.show', $ticket->user_id) }}">{{ $ticket->user->name ?? 'N/A' }}</a>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Assigned To</span>
                        <span class="info-value">{{ $ticket->assignedTo->name ?? 'Unassigned' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Created</span>
                        <span class="info-value">{{ $ticket->created_at->format('M d, Y H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin-top: 1rem;">
            <div class="card-header">
                <h3 class="card-title">Actions</h3>
            </div>
            <div class="card-body">
                <div class="btn-group-vertical" style="width: 100%;">
                    @if($ticket->status !== 'in_progress')
                    <form method="POST" action="{{ route('admin.support.status', $ticket->id) }}" class="inline">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="in_progress">
                        <button type="submit" class="btn btn-outline btn-blue" style="width: 100%;">Mark In Progress</button>
                    </form>
                    @endif
                    @if($ticket->status !== 'resolved')
                    <form method="POST" action="{{ route('admin.support.status', $ticket->id) }}" class="inline">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="resolved">
                        <button type="submit" class="btn btn-outline btn-green" style="width: 100%; margin-top: 0.5rem;" onclick="return confirm('Mark as resolved?')">Mark Resolved</button>
                    </form>
                    @endif
                    @if($ticket->status !== 'closed')
                    <form method="POST" action="{{ route('admin.support.status', $ticket->id) }}" class="inline">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="closed">
                        <button type="submit" class="btn btn-outline btn-orange" style="width: 100%; margin-top: 0.5rem;" onclick="return confirm('Close this ticket?')">Close Ticket</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>

        <div class="card" style="margin-top: 1rem;">
            <div class="card-header">
                <h3 class="card-title">Assign Staff</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('admin.support.assign', $ticket->id) }}">
                    @csrf
                    @method('PATCH')
                    <div class="form-group">
                        <select name="staff_id" class="form-select">
                            <option value="">Select Staff</option>
                            @foreach($staffList ?? [] as $staff)
                            <option value="{{ $staff->id }}" {{ ($ticket->assigned_to ?? null) == $staff->id ? 'selected' : '' }}>{{ $staff->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm" style="width: 100%;">Assign</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection