@extends('admin.layouts.app')

@section('contents')
<div class="container-xl">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>Ticket: {{ $ticket->title }}</h3>
                    <div class="card-actions">
                        <a href="{{ route('admin.tickets.index') }}" class="btn btn-secondary">Back to Tickets</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <strong>Title:</strong> {{ $ticket->title }}
                            </div>
                            <div class="mb-3">
                                <strong>Description:</strong>
                                <p>{{ $ticket->description }}</p>
                            </div>
                            <div class="mb-3">
                                <strong>User:</strong>
                                @if($ticket->user)
                                {{ $ticket->user->name }} ({{ $ticket->user->email }})
                                @else
                                <span class="text-muted">N/A</span>
                                @endif
                            </div>
                            <div class="mb-3">
                                <strong>Vendor:</strong>
                                @if($ticket->vendor)
                                {{ $ticket->vendor->name }} ({{ $ticket->vendor->email }})
                                @else
                                <span class="text-muted">N/A</span>
                                @endif
                            </div>
                            <div class="mb-3">
                                <strong>Status:</strong>
                                @switch($ticket->status)
                                @case('open')
                                <span class="badge bg-warning">{{ $ticket->status }}</span>
                                @break
                                @case('in_progress')
                                <span class="badge bg-info">{{ $ticket->status }}</span>
                                @break
                                @case('resolved')
                                <span class="badge bg-success">{{ $ticket->status }}</span>
                                @break
                                @case('closed')
                                <span class="badge bg-secondary">{{ $ticket->status }}</span>
                                @break
                                @endswitch
                            </div>
                            <div class="mb-3">
                                <strong>Created:</strong> {{ $ticket->created_at->format('M d, Y H:i') }}
                            </div>
                        </div>
                        <div class="col-md-8">
                            <h4>Conversation</h4>
                            <div class="chat-container border rounded p-3"
                                style="max-height: 400px; overflow-y: auto; background: #f8f9fa;">
                                @foreach($ticket->messages as $message)
                                <div
                                    class="message-bubble mb-3 {{ $message->sender_type === 'admin' ? 'text-end' : '' }}">
                                    <div class="badge {{ $message->sender_type === 'admin' ? 'bg-primary' : 'bg-success' }} text-white p-2"
                                        style="display: inline-block; max-width: 80%; text-align: left;">
                                        <small class="d-block text-uppercase">{{ $message->sender_type === 'admin' ?
                                            'Admin' : ucfirst($message->sender_type) }}</small>
                                        <p class="mb-0 mt-1">{{ $message->message }}</p>
                                        <small class="d-block mt-1 opacity-75">{{ $message->created_at->format('M d, Y
                                            h:i A') }}</small>
                                    </div>
                                </div>
                                @endforeach
                            </div>

                            <h5 class="mt-4">Send Reply</h5>
                            <form action="{{ route('admin.tickets.message.store', $ticket->id) }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <textarea name="message" rows="3"
                                        class="form-control @error('message') is-invalid @enderror"
                                        placeholder="Type your reply..." required>{{ old('message') }}</textarea>
                                    @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-send"></i> Send Reply
                                </button>
                            </form>

                            <h5 class="mt-4">Update Status</h5>
                            <form action="{{ route('admin.tickets.update', $ticket->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="mb-3">
                                    <select name="status" class="form-select">
                                        <option value="open" {{ $ticket->status == 'open' ? 'selected' : '' }}>Open
                                        </option>
                                        <option value="in_progress" {{ $ticket->status == 'in_progress' ? 'selected' :
                                            '' }}>In Progress</option>
                                        <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : ''
                                            }}>Resolved</option>
                                        <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : ''
                                            }}>Closed</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-success">Update Status</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection