@extends('vendor-dashboard.layouts.app')

@section('contents')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Ticket: {{ $ticket->title }}</h3>
        <a href="{{ route('vendor.tickets.index') }}" class="btn btn-secondary">
            <i class="ti ti-arrow-left"></i> Back to Tickets
        </a>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <div class="chat-container border rounded p-3 mb-4"
                    style="max-height: 500px; overflow-y: auto; background: #f8f9fa;">
                    @foreach($ticket->messages as $message)
                    <div class="message-bubble mb-3 {{ $message->sender_type === 'vendor' ? 'text-end' : '' }}">
                        <div class="badge {{ $message->sender_type === 'admin' ? 'bg-primary' : ($message->sender_type === 'vendor' ? 'bg-success' : 'bg-info') }} text-white p-2"
                            style="display: inline-block; max-width: 75%; text-align: left;">
                            <small class="d-block text-uppercase">
                                @if($message->sender_type === 'admin')
                                Admin Support
                                @elseif($message->sender_type === 'vendor')
                                You
                                @elseif($message->sender_type === 'user')
                                Customer
                                @endif
                            </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>Send a Message</h5>
                <form action="{{ route('vendor.tickets.message.store', $ticket) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <textarea name="message" rows="3" class="form-control @error('message') is-invalid @enderror"
                            placeholder="Type your message..." 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 Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection