@extends('backoffice.layout.master')
@section('setSectionTitle', __('Messaggi con') . ' ' . $organization->name)
@section('setSectionButton')
    <a href="{{ route('administrator.messages') }}" class="btn btn-sm btn-secondary">
        <i class="bi bi-arrow-left"></i> {{ __('Indietro') }}
    </a>
@endsection

@section('setContent')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <!-- Organization Info -->
                    <div class="alert alert-outline-primary mb-4">
                        <div class="d-flex align-items-center">
                            <div>
                                <strong>{{ $organization->name }}</strong>
                                <br>
                                <small>{{ $organization->type === 'COMPANY' ? __('Azienda') : __('Ente Formativo') }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Messages Area -->
                    <div class="messages-container mb-4" style="max-height: 500px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; padding: 20px; background-color: #f8f9fa;">
                        @if($messages->isEmpty())
                            <div class="text-center  py-5">
                                <i class="bi bi-chat-dots" style="font-size: 3rem;"></i>
                                <p class="mt-3">{{ __('Nessun messaggio ancora. Inizia la conversazione!') }}</p>
                            </div>
                        @else
                            @foreach($messages as $message)
                                <div class="message-item mb-3 d-flex {{ $message->sender_type === 'ADMINISTRATOR' ? 'justify-content-end' : 'justify-content-start' }}">
                                    <div class="message-bubble {{ $message->sender_type === 'ADMINISTRATOR' ? 'bg-success' : 'bg-primary' }}"
                                         style="max-width: 70%; padding: 12px 16px; border-radius: 12px; {{ $message->sender_type === 'ADMINISTRATOR' ? 'border-bottom-right-radius: 4px;' : 'border-bottom-left-radius: 4px;' }}">
                                        <div class="message-header text-light mb-1">
                                            <small class="{{ $message->sender_type === 'ADMINISTRATOR' ? '' : '' }}">
                                                <strong>{{ $message->sender_type === 'ADMINISTRATOR' ? __('Tu') : $organization->name }}</strong>
                                                <span class="ms-2">{{ \Carbon\Carbon::parse($message->created_at)->format('d/m/Y H:i') }}</span>
                                            </small>
                                        </div>
                                        <div class="message-content text-light">
                                            {{ $message->message_content }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <!-- Send Message Form -->
                    <form method="POST" action="{{ route('administrator.messages.send', ['organization_id' => $organization->id]) }}">
                        @csrf
                        <div class="mb-3">
                            <label for="message" class="form-label">{{ __('Scrivi un messaggio') }}:</label>
                            <textarea class="form-control" id="message" name="message" rows="4" required placeholder="{{ __('Scrivi qui il tuo messaggio...') }}"></textarea>
                            @error('message')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-send"></i> {{ __('Invia Messaggio') }}
                        </button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Auto scroll to bottom on page load
    document.addEventListener('DOMContentLoaded', function() {
        const messagesContainer = document.querySelector('.messages-container');
        if (messagesContainer) {
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
    });
</script>

@endsection