@extends('layouts.app')

@section('content')

<style>
    body {
        background-color: #000;
        color: white;
        display: flex;
        flex-direction: column;
        height: 100vh;
        margin: 0;
    }
    .messages-wrapper {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }
    .message-container {
        display: flex;
        margin-bottom: 10px;
    }
    .message-left, .message-right {
        background-color: #333;
        color: white;
        border-radius: 8px;
        padding: 10px;
        max-width: 60%;
    }
    .message-left {
        align-self: flex-start;
        margin-right: auto;
    }
    .message-right {
        align-self: flex-end;
        margin-left: auto;
    }
    .message-form {
        background-color: #222;
        padding: 10px;
        bottom: 0;
        width: 100%;
    }
    .alert {
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .alert-danger {
        color: white;
        background-color: red;
    }
</style>

<!-- Exibir mensagem de erro se houver -->
@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<h1>Mensagens -> {{ $job->titulo }}</h1>
<h2>Job {{ $job->id }}</h2>

<div class="messages-wrapper">
    @if($messages->isEmpty())
        <p>Não há mensagens para este job.</p>
    @else
        @foreach($messages as $message)
            <div class="message-container">
                @if($message->from_id === auth()->user()->id)
                    <div class="message-right">
                        <strong>De:</strong> Você para {{ '@' . $message->receiver->name }} <br>
                        <strong>Mensagem:</strong> {{ $message->body }}
                        @if($message->seen)
                            <span style="color: green;">&#10003;</span>
                        @endif
                        <br>
                    </div>
                @else
                    <div class="message-left">
                        <strong>De:</strong> {{ $message->sender->name }} para {{ '@' . $message->receiver->name }} <br>
                        <strong>Mensagem:</strong> {{ $message->body }}
                        @if($message->seen)
                            <span style="color: green;">&#10003;</span>
                        @endif
                        <br>
                    </div>
                @endif
            </div>
        @endforeach
    @endif
</div>

<!-- Formulário para enviar novas mensagens -->
<div class="message-form">
    <form method="POST" action="{{ route('messages.store') }}">
        @csrf
        <div class="form-group">
            <label for="recipient">Escolher Destinatário:</label>
            <select id="recipient" name="to_id" class="form-control" required>
                <option value="">Selecione um destinatário</option>
                @foreach($users as $user)
                    @if($user->id !== auth()->id())
                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                    @endif
                @endforeach
            </select>
        </div>
        <div class="form-group">
            <label for="message">Enviar Mensagem:</label>
            <textarea id="message" name="message" class="form-control" rows="3" ></textarea>
        </div>
        <input type="hidden" name="job_id" value="{{ $job->id }}">
        <button type="submit" class="btn btn-primary mt-2">Enviar</button>
    </form>
</div>

@endsection