@push('styles')
    <style>
        .highlightTextarea{
            width: 100%;
        }
    </style>
@endpush
<div class="row" id="chatControls">
    <div class="col-lg-12">
        @if($inboxView == 0 || $pageName == 'contacts')
            @canany(['carbon-list', 'multi-number-list'])
                <div class="d-flex flex-column mb-3">
                    <label class="d-flex align-items-center fs-6 fw-semibold mb-2 required">Phone number</label>
                    <select class="form-select" data-control="select2" id="phoneNumberSID">
                        @foreach($phones as $phone)
                            <option value="{{ $phone['phone_key'] }}" data-status="{{$phone['status']}}">{{ $phone['phone'].$phone['append'] }} </option>
                        @endforeach
                    </select>
                </div>
            @endcanany
        @endif
        <div class="input-group flex-nowrap mb-3">
            @canany(['carbon-list', 'message-spam-score-list'])
                <div class="custom-uiverse-cls-2 mt-2 d-none">
                    <span class="custom-tooltip-cls-2 tooltiptext bg-fun">100% : no spam words detected</span>
                    <span class="bad_word_score_count text-gray-500">
                        <i class="fa fa-arrow-rotate-right fa-lg"></i>
                    </span>
                </div>
            @endcanany
            <textarea class="form-control resize-none message-body" rows="3" autocomplete="off" placeholder="Type a message..." name="messageBody" id="messageBody" disabled="true"></textarea>
            <input type="hidden" name="imageInput" id="imageInput">
            <button type="button" class="btn btn-primary" id="btnSendMessage" disabled="true">Send<br><div class="fs-10">(Ctrl + Enter)</div></button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="d-flex flex-stack">
            <div class="d-flex align-items-center me-2">
                <button class="btn btn-sm btn-light-warning btn-icon me-2 shadow-sm animate__animated animate__zoomIn" id="btnQuickResponse" data-bs-toggle="tooltip" title="Quick response" disabled="true" data-opration="true"><i class="fa fa-bolt fa-lg pe-1"></i></button>
                
                <button class="btn btn-sm btn-light-danger btn-icon me-2 shadow-sm animate__animated animate__zoomIn" id="btnAddImage" data-bs-toggle="tooltip" title="Add image" disabled="true" data-opration="true"><i class="fa fa-image fa-lg pe-1"></i></button>

                <button class="btn btn-sm btn-light-success btn-icon me-2 shadow-sm animate__animated animate__zoomIn" id="btnAddToCampaign" data-bs-toggle="tooltip" title="Add campaign" disabled="true" data-opration="true"><i class="fa fa-calendar-days fa-lg pe-1"></i></button>

                <button class="btn btn-sm btn-light-primary btn-icon me-2 shadow-sm animate__animated animate__zoomIn" id="btnAddToSchedule" data-bs-toggle="tooltip" title="Add to schedule" disabled="true" data-opration="true"><i class="fa fa-calendar-day fa-lg pe-1"></i></button>

                <button class="btn btn-sm btn-light-dark btn-icon me-2 shadow-sm emojiBtn animate__animated animate__zoomIn" id="btnEmoji" data-bs-toggle="tooltip" title="Emoji" disabled="true"><i class="far fa-face-smile fa-lg pe-1 emojiBtn"></i></button>
            </div>
            <span class="badge badge-warning fs-11"><strong>Segments&nbsp;:&nbsp;</strong><span id="segmentCount">0</span></span>
            <span class="badge badge-success fs-11"><strong>Characters&nbsp;:&nbsp;</strong><span id="charCount">0</span></span>
        </div>
    </div>
</div>