@extends('layouts.app-common')

@section('main-content')

<link href="{{ asset('assets/custom/css/style.css') }}" rel="stylesheet">

<main class="app-main main-background">


    <div class="container">

        <div class="container-chatbox rounded-top sticky-bottom bg-transparent border-transparent">
            <div class="card bg-primary activity_box_message" style="display: none">
                <div class="card-header bg-transparent border-primary text-white">
                    CHAT
                    <div class="card-tools"> 
                        <button type="button" class="btn btn-tool buttons-message" data-lte-toggle="card-collapse"> 
                            <i data-lte-icon="expand" class="bi bi-plus-lg "></i> 
                            <i data-lte-icon="collapse" class="bi bi-dash-lg minus"></i> 
                        </button> 
                        <button type="button" class="btn btn-tool buttons-message" data-lte-toggle="card-remove"> 
                            <i class="bi bi-x-lg"></i> 
                        </button> 
                    </div>
                </div>
                <div class="card-body text-primary scrollbar" id="style-2">
                    <span id="chatDetails"></span>
                    <div class="chat-content">
                        <ul>
                            
                        </ul>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-primary">
                    <div class="row align-items-end">
                        <div class="col-md-11">
                            <div class="textarea-container" style="max-height: 200px; overflow-y: auto;">
                                <textarea id="chatInput" name="replied" class="form-control" placeholder="Enter your text.." rows="1" style="resize: none; width: 100%;"></textarea>
                                <input type="hidden" id="vid" name="videoid" value='{{ Auth::user()->id }}'>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <a type="button" id="btnSent" class="btn btn-primary-dark" style="color:white; margin-top: 5px; border-color: transparent;"><i class="fa fa-paper-plane"></i> </a>
                        </div>
                    </div>
                </div>



            </div>
            
            <div>
                <a type="button" id="newMessage" class="btn btn-primary rounded-circle" style="color:white;" 
                    data-bs-toggle="tooltip" data-bs-placement="top" 
                    data-bs-custom-class="custom-tooltip" 
                    data-bs-title="New Message"  >
                    <i class="fas fa-comment"></i> 
                </a>
            </div>  
        </div>

        <div id="msg_alert" class="row">
            @if(session('msg_success'))
                <div class="alert alert-success">
                    <strong>Success:</strong>
                    {{ session('msg_success') }}
                </div>
            @endif
        </div>
    </div>

</main>





@endsection('main-content')