@extends('crm.layouts.master')
@section('title','Chat with AI')
@section('page-css')
<style>
    #response {
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
        border-radius: 8px;
        height: 500px;
    }

    .chat-message {
        display: flex;
        margin-bottom: 10px;
    }

    .user-message {
        justify-content: flex-end;
    }

    .ai-message {

        justify-content: flex-start;
    }

    .message-text {
        font-size: 16px;
        padding: 10px;
        border-radius: 15px;
        max-width: 60%;
    }

    .user-message .message-text {
        background-color: #3671e9;
        color: #f4f6f5;
    }

    .ai-message .message-text {
        background-color: #ffffff;
        color: #4d4646;
    }

</style>
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>Chat with AI</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="row ">
        <div class=" mx-auto col-md-8 mb-4">
            <div class="card text-left">
                <div class="card-body">
                    <div id="response" style="height: 400px"></div>

                    <form class="row" id="send_message_to_ai">

                        <div class="col-12 my-2">
                            <label class="custom-font mb-2" for="text">Type message:</label><br>
                            <textarea name="text" id="message" rows="5" cols="50" required class="w-100 p-2 rounded"></textarea>
                        </div>
                        <br><br>
                        <div class="text-center">
                            <button type="submit" id="send_message_btn" class="p-2 px-4 rounded-5 border-0 btn btn-dark text-white" >Send</button>
                        </div>
                    </form>

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

@section('page-js')
<script>
    $("#message").keypress(function(event) {
        if (event.which == 13 && !event.shiftKey) {
            event.preventDefault();
            $("#send_message_to_ai").submit();
        }
    });
</script>
@endsection