@extends('admin.layout')

<style>
    .chat-container {
        background: #f8f9fa;
        height: 70vh;
        overflow-y: auto;
        padding: 20px;
    }

    .chat-bubble {
        max-width: 70%;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 5px;
        font-size: 0.9rem;
        position: relative;
    }

    /* Left Bubble (User) */
    .bubble-left {
        background: #ffffff;
        color: #2F2B3DB2;
        float: left;
        clear: both;
        padding: 10px 16px;
        border-radius: 4px 8px 8px 8px;
        max-width: 70%;
        word-wrap: break-word;
        box-shadow: 0px 1px 6px 0px #2F2B3D1A;
        margin-bottom: 10px;
    }

    .bubble-right {
        background: #1a99d5;
        color: #fff;
        float: right;
        clear: both;
        padding: 10px 16px;
        border-radius: 8px 4px 8px 8px;
        max-width: 70%;
        word-wrap: break-word;
        box-shadow: 0px 1px 6px 0px #2F2B3D1A;
        margin-bottom: 10px;
    }


    .chat-time {
        font-size: 0.75rem;
        color: #999;
        margin-bottom: 15px;
        clear: both;
    }

    .chat-time-right {
        text-align: right;
    }

    .chat-footer {
        border-top: 1px solid #eee;
        padding: 15px;
        background: white;
    }

    .status-badge {
        font-size: 0.7rem;
        color: #888;
        display: block;
    }
</style>

@section('content')
    <div class="container-fluid mt-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center">

                 <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('admin.open_ticket') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
               View Chat
            </h5>
            </div>
            <button class="btn btn-danger btn-sm px-4">Close Chat</button>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-white py-3">
                <div class="d-flex align-items-center">
                    <img src="https://i.pravatar.cc/40" class="rounded-circle me-2" alt="Avatar">
                    <div>
                        <strong class="d-block">Felecia Rower</strong>
                        <span class="status-badge"><span class="text-success">●</span> Status Open</span>
                    </div>
                </div>
            </div>

            <div class="chat-container">
                <div class="bubble-right">How can we help? We're here for you!</div>
                <div class="chat-time chat-time-right">1:15 PM <i class="ti tabler-checks text-success"></i></div>

                <div class="bubble-left">Hey John, I am looking for the best admin template...</div>
                <div class="chat-time">1:15 PM</div>
                <div class="bubble-right">
                    Absolutely!<br>
                    This admin template is built with MUI!</div>
                <div class="chat-time chat-time-right">1:16 PM <i class="ti tabler-checks text-success"></i></div>
            </div>

            <div class="chat-footer">
                <div class="input-group">
                    <input type="text" class="form-control border-0" placeholder="Type your message here...">
                    <button class="btn btn-primary px-4" id="sendBtn">
                        Send <i class="ti tabler-send"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection