@extends('dashboard.layouts.base')

@section('content')
<style>
.chat-box {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    max-height: 500px;
    overflow-y: auto;
    background: #fafafa;
}
.message {
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    display: inline-block;
    max-width: 70%;
    word-wrap: break-word;
}
.message.sender {
    background-color: #007bff;
    color: white;
    text-align: right;
    float: right;
    clear: both;
}
.message.receiver {
    background-color: #e9ecef;
    color: black;
    text-align: left;
    float: left;
    clear: both;
}
.message.reported {
    border: 2px solid red;
}
</style>

<div class="col-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center w-100" style="direction: rtl;">
            <h3 class="card-title mb-0">الدردشة رقم #{{ $chat->id }}</h3>

            {{-- زر الحظر --}}
            @if($reportedUser)
                <form action="{{ route('dashboard.users.block', $reportedUser->id) }}" method="POST"
                      onsubmit="return confirm('هل أنت متأكد ؟');">
                    @csrf
                    @if($reportedUser->is_blocked)
                        <button type="submit" class="btn btn-success">
                            ✅ رفع الحظر عن {{ $reportedUser->name }}
                        </button>
                    @else
                        <button type="submit" class="btn btn-danger">
                            🚫 حظر {{ $reportedUser->name }}
                        </button>
                    @endif
                </form>
            @endif
        </div>

        <div class="card-body">
            <div class="mb-3">
                <strong>المُبلّغ:</strong>
                @if($reporter)
                    <a href="{{ route('dashboard.users.show', $reporter->id) }}" class="text-success">
                        {{ $reporter->name }}
                    </a>
                @else
                    <span class="text-muted">غير محدد</span>
                @endif
                <br>
                <strong>المُبلّغ عنه:</strong>
                @if($reportedUser)
                    <a href="{{ route('dashboard.users.show', $reportedUser->id) }}" class="text-danger">
                        {{ $reportedUser->name }}
                    </a>
                @else
                    <span class="text-muted">غير محدد</span>
                @endif
            </div>

            <div class="chat-box">
                @forelse($chat->messages as $message)
                    @php
                        $isSender = $message->sender_id == $chat->user_one_id;
                        $isReporter = $reporter && $message->sender_id == $reporter->id;
                        $isReportedUser = $reportedUser && $message->sender_id == $reportedUser->id;
                    @endphp

                    <div class="message {{ $isSender ? 'sender' : 'receiver' }} {{ $isReportedUser ? 'reported' : '' }}">
                        <strong>{{ $message->sender?->name ?? 'غير معروف' }}</strong><br>
                        {{ $message->body }}
                        <br>
                        <small class="text-muted">{{ $message->created_at }}</small>
                    </div>
                @empty
                    <p class="text-muted text-center">لا توجد رسائل في هذه الدردشة.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection