@extends('admin.layouts.layout')

@section('title', 'SMS Inbox')

@section('content')
<div class="row" style="height: calc(100vh - 200px);">
    {{-- Conversation list --}}
    <div class="col-md-4 border-end overflow-auto h-100">
        <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
            <strong>Conversations</strong>
            <a href="{{ route('communications.sms-metrics') }}" class="btn btn-sm btn-outline-secondary">Metrics</a>
        </div>
        @if(isset($conversations))
        @foreach($conversations as $conv)
        <a href="{{ route('communications.sms-thread', $conv->id) }}"
           class="d-block p-3 border-bottom text-decoration-none text-dark hover-bg {{ isset($conversation) && $conversation->id === $conv->id ? 'bg-light' : '' }}">
            <div class="d-flex justify-content-between">
                <strong>{{ $conv->external_number }}</strong>
                @if($conv->unread_count > 0)
                    <span class="badge bg-primary">{{ $conv->unread_count }}</span>
                @endif
            </div>
            <div class="small text-muted text-truncate">
                {{ $conv->messages->first()?->body ?? 'No messages yet' }}
            </div>
            <div class="small text-muted">{{ $conv->last_message_at?->diffForHumans() }}</div>
        </a>
        @endforeach
        @endif
    </div>

    {{-- Thread pane --}}
    <div class="col-md-8 d-flex flex-column h-100">
        @if(isset($conversation))
        <div class="p-3 border-bottom">
            <strong>{{ $conversation->external_number }}</strong>
        </div>
        <div class="flex-grow-1 overflow-auto p-3" id="sms-thread">
            @foreach($messages as $msg)
            @include('admin.communications.partials.sms-message', ['msg' => $msg])
            @endforeach
        </div>
        <div class="p-3 border-top">
            <form id="sms-reply-form" class="d-flex gap-2">
                @csrf
                <input type="hidden" name="to_number" value="{{ $conversation->external_number }}">
                <input type="hidden" name="entity_type" value="{{ $conversation->entity_type }}">
                <input type="hidden" name="entity_id" value="{{ $conversation->entity_id }}">
                <textarea name="body" class="form-control" rows="2" placeholder="Type a message..." required></textarea>
                <button type="submit" class="btn btn-primary px-4">Send</button>
            </form>
        </div>
        @else
        <div class="flex-grow-1 d-flex align-items-center justify-content-center text-muted">
            Select a conversation to view messages.
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).on('submit', '#sms-reply-form', function (e) {
    e.preventDefault();
    var form = $(this);
    $.ajax({
        url: '{{ route("communications.sms-send") }}',
        method: 'POST',
        data: form.serialize(),
        success: function (res) {
            if (res.status === 1) {
                form.find('textarea').val('');
                location.reload();
            } else {
                alert(res.message || 'Failed to send.');
            }
        },
        error: function (xhr) {
            var msg = xhr.responseJSON?.message || 'Failed to send.';
            alert(msg);
        }
    });
});
</script>
@endpush