@extends('admin.layouts.master')

@section('title', $title)

@section('contents')
<div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">{{ $title }}</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.home') }}">{{ trans('Home') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('projects.index') }}">{{ trans('Projects') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('projects.show', $project->uuid) }}">{{ $project->title }}</a>
                            </li>
                            <li class="breadcrumb-item active">{{ trans('Messages') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-body">
        <section id="project-messages">
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
                            <h4 class="card-title m-0">
                                <i class="fa fa-comments mr-1"></i>
                                {{ trans('Conversations for') }}: <strong>{{ $project->title }}</strong>
                            </h4>
                            <a href="{{ request('from') ? urldecode(request('from')) : route('projects.index') }}" class="btn btn-sm btn-outline-secondary">
                                <i class="fa fa-arrow-left"></i> {{ trans('Back to Projects') }}
                            </a>
                        </div>
                    </div>

                    @forelse($chats as $chat)
                        <div class="card mt-1">
                            <div class="card-header position-relative" style="background-color: #f8f9fa;">
                                <div class="d-flex align-items-center">
                                    <i class="fa fa-user-circle fa-lg mr-2 text-primary"></i>
                                    <div>
                                        <strong>{{ trans('Owner') }}:</strong>
                                        {{ $chat->owner->name ?? trans('Unknown') }}
                                        <span class="text-muted small">({{ $chat->owner->email ?? '' }})</span>
                                        &nbsp;&nbsp;
                                        <i class="fa fa-exchange mx-1 text-muted"></i>
                                        &nbsp;&nbsp;
                                        <strong>{{ trans('Freelancer') }}:</strong>
                                        {{ $chat->freelancer->name ?? trans('Unknown') }}
                                        <span class="text-muted small">({{ $chat->freelancer->email ?? '' }})</span>
                                    </div>
                                </div>
                                <span class="badge badge-info" style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);">
                                    {{ $chat->messages->count() }} {{ __('Messages') }}
                                </span>
                            </div>

                            <div class="card-body p-0">
                                @if($chat->messages->isEmpty())
                                    <p class="text-muted text-center py-3 mb-0">{{ trans('No messages in this conversation.') }}</p>
                                @else
                                    <div style="max-height: 450px; overflow-y: auto; padding: 1rem;">
                                        @foreach($chat->messages->sortBy('created_at') as $message)
                                            @php
                                                $isOwner = $message->sender_id == $chat->owner_id;
                                            @endphp
                                            <div class="d-flex mb-3 {{ $isOwner ? 'justify-content-start' : 'justify-content-end' }}">
                                                <div style="max-width: 70%;">
                                                    <div class="small text-muted mb-1 {{ $isOwner ? 'text-left' : 'text-right' }}">
                                                        <strong>{{ $message->sender->name ?? trans('Unknown') }}</strong>
                                                        &mdash;
                                                        <span title="{{ $message->created_at->format('Y-m-d H:i:s') }}">
                                                            {{ $message->created_at->diffForHumans() }}
                                                        </span>
                                                        @if($message->is_read)
                                                            <i class="fa fa-check-circle text-success ml-1" title="{{ trans('Read') }}"></i>
                                                        @else
                                                            <i class="fa fa-circle text-secondary ml-1" title="{{ trans('Unread') }}"></i>
                                                        @endif
                                                    </div>
                                                    <div class="p-2 rounded {{ $isOwner ? 'bg-light border' : 'text-white msg-bubble-freelancer' }}">
                                                        @if($message->message)
                                                            <p class="mb-0" style="white-space: pre-wrap; word-break: break-word;">{{ is_array($message->message) ? implode(' ', $message->message) : (string) $message->message }}</p>
                                                        @endif

                                                        @php
                                                            $attachments = $chat->getMedia('chats')
                                                                ->filter(fn($m) => (int) data_get($m->custom_properties, 'message_id') === (int) $message->id);
                                                        @endphp
                                                        @if($attachments->isNotEmpty())
                                                            <div class="mt-2">
                                                                @foreach($attachments as $file)
                                                                    @php
                                                                        $mime = (string) $file->mime_type;
                                                                        $fileName = (string) $file->file_name;
                                                                        $isImage = str_starts_with($mime, 'image/')
                                                                            || preg_match('/\.(jpe?g|png|gif|webp|bmp|svg)$/i', $fileName);
                                                                        $isAudio = str_starts_with($mime, 'audio/')
                                                                            || preg_match('/\.(webm|ogg|mp3|m4a|wav|aac|opus)$/i', $fileName);
                                                                    @endphp
                                                                    @if($isImage)
                                                                        <a href="{{ $file->getUrl() }}" target="_blank">
                                                                            <img src="{{ $file->getUrl() }}" alt="{{ $file->file_name }}"
                                                                                 style="max-width: 200px; max-height: 150px; border-radius: 4px; margin-top: 4px;">
                                                                        </a>
                                                                    @elseif($isAudio)
                                                                        <div class="audio-message mt-1">
                                                                            <audio controls controlsList="nodownload" src="{{ $file->getUrl() }}"></audio>
                                                                        </div>
                                                                    @else
                                                                        <a href="{{ $file->getUrl() }}" target="_blank"
                                                                           class="btn btn-sm btn-outline-{{ $isOwner ? 'secondary' : 'light' }} mt-1">
                                                                            <i class="fa fa-paperclip"></i> {{ $file->file_name }}
                                                                        </a>
                                                                    @endif
                                                                @endforeach
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="card mt-1">
                            <div class="card-body text-center py-5">
                                <i class="fa fa-comments fa-3x text-muted mb-3"></i>
                                <p class="text-muted mb-0">{{ trans('No conversations found for this project.') }}</p>
                            </div>
                        </div>
                    @endforelse

                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('css')
<style>
    .msg-bubble-freelancer { background-color: #4a90d9; }
    .audio-message audio { max-width: 100%; min-width: 200px; vertical-align: middle; }
</style>
@endsection