@extends('backEnd.layouts.master')
@section('title', 'Conversation')

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0 fw-bold">{{ $conversation->customer->display_name }}</h4>
            <small class="text-muted">
                <span class="badge bg-{{ $conversation->channel === 'whatsapp' ? 'success' : 'primary' }}">{{ ucfirst($conversation->channel) }}</span>
                · {{ str_replace('_', ' ', $conversation->status) }}
            </small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.support.inbox') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left me-1"></i> Inbox</a>
            <form action="{{ route('admin.support.conversations.resolve', $conversation->id) }}" method="POST" class="d-inline">
                @csrf
                <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-check me-1"></i> Resolve</button>
            </form>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 mb-3" style="height:420px; overflow-y:auto" id="supportThread">
                <div class="card-body">
                    @foreach($conversation->messages as $msg)
                    <div class="mb-3 d-flex {{ $msg->direction === 'outbound' ? 'justify-content-end' : 'justify-content-start' }}">
                        <div class="p-2 rounded {{ $msg->direction === 'outbound' ? 'bg-primary text-white' : 'bg-light border' }}" style="max-width:75%">
                            <div class="small opacity-75 mb-1">{{ $msg->sender_type === 'moderator' ? ($conversation->moderator?->name ?? 'Moderator') : $conversation->customer->display_name }}</div>
                            <div>{{ $msg->content }}</div>
                            <div class="small opacity-75 mt-1">{{ $msg->received_at->format('d M, h:i A') }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <form action="{{ route('admin.support.conversations.reply', $conversation->id) }}" method="POST">
                        @csrf
                        <div class="mb-2">
                            <textarea name="message" class="form-control" rows="3" placeholder="Type your reply..." required maxlength="4000"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-paper-plane me-1"></i> Send Reply</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-transparent fw-semibold">Customer Info</div>
                <div class="card-body">
                    <p class="mb-1"><strong>Name:</strong> {{ $conversation->customer->display_name }}</p>
                    <p class="mb-1"><strong>Phone:</strong> {{ $conversation->customer->phone ?: '—' }}</p>
                    <p class="mb-1"><strong>Priority:</strong> {{ ucfirst($conversation->customer->priority) }}</p>
                    <p class="mb-0"><strong>Conversations:</strong> {{ $conversation->customer->total_conversations }}</p>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-transparent fw-semibold">Assign Moderator</div>
                <div class="card-body">
                    <form action="{{ route('admin.support.conversations.assign', $conversation->id) }}" method="POST">
                        @csrf
                        <select name="moderator_id" class="form-select form-select-sm mb-2">
                            <option value="">Unassigned</option>
                            @foreach($moderators as $m)
                            <option value="{{ $m->id }}" @selected($conversation->assigned_moderator_id == $m->id)>{{ $m->name }}</option>
                            @endforeach
                        </select>
                        <button type="submit" class="btn btn-outline-primary btn-sm">Update</button>
                    </form>
                </div>
            </div>

            <div class="card shadow-sm border-0">
                <div class="card-header bg-transparent fw-semibold">Internal Notes</div>
                <div class="card-body">
                    <form action="{{ route('admin.support.customers.notes', $conversation->customer->id) }}" method="POST">
                        @csrf
                        <select name="priority" class="form-select form-select-sm mb-2">
                            <option value="normal" @selected($conversation->customer->priority === 'normal')>Normal</option>
                            <option value="vip" @selected($conversation->customer->priority === 'vip')>VIP</option>
                            <option value="blocked" @selected($conversation->customer->priority === 'blocked')>Blocked</option>
                        </select>
                        <textarea name="notes" class="form-control form-control-sm mb-2" rows="3" placeholder="Internal notes...">{{ $conversation->customer->notes }}</textarea>
                        <button type="submit" class="btn btn-outline-secondary btn-sm">Save Notes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('supportThread')?.scrollTo(0, 99999);
</script>
@php $supportConversationId = $conversation->id; @endphp
@include('backEnd.support.partials.realtime')
@endpush