@push('modal-script')
<script src="{{asset('assets/js/modal/chat-popup.js')}}"></script>
@endpush

<div class="chat-popup-wrapper d-none" id="chat_popup">
    <div class="chat-header">
        <div class="chat-brand-wrapper">
            <div class="chat-brand">
                <img src="{{asset('assets/imgs/chat-brand.png')}}">
            </div>
            <label class="chat-brand-label">Quintessence Team</label>
        </div>
        <button class="btn btn-primary btn-rounded talk-agency-btn d-none" id="talk_agency_btn">
            <i class="fa-regular fa-envelope me-2"></i>
            <span class="agency-btn-label">Aesthetic Concierge</span>
        </button>
        <button class="close-chat-popup-btn btn-close"></button>
    </div>
    <div class="chat-body">
        <div class="message-wrapper">
            <div class="message-content">
                <img class="type-animation invisible" src="{{ asset('assets/imgs/type-animation.gif') }}">
            </div>
        </div>
        <div class="typing-wrapper">
            <form id="message_form">
                <div class="d-flex gap-2">
                    <textarea type="text" class="form-control" placeholder="Enter message" id='chat_message' rows="1"></textarea>
                    <button class="btn btn-primary" type="submit" id="send_message">
                        <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.8639 1.86642L8.94696 11.1091M2.53978 4.89844L19.737 1.26483C20.7961 1.04106 21.6464 2.13747 21.1662 3.10754L13.3683 18.86C12.8341 19.9392 11.2453 19.7698 10.9506 18.6023L9.17943 11.5861C9.09097 11.2357 8.86019 10.9381 8.5428 10.7653L2.18789 7.30426C1.13041 6.72833 1.36166 5.14736 2.53978 4.89844Z" stroke="white" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
        <div class="ask-agency-form d-none">
            <button class="talk-agency-btn close-talk-agency-btn btn-primary btn-rounded"><i class="fa-solid fa-xmark"></i></button>
            <form id="support_form">
                <div class="chat-support-error-msg text-danger fs-14 mb-4 text-center d-none">The message must be at least 20 characters long.</div>
                <input type="text" class="form-control mb-3" id="contact_name" placeholder="Name">
                <input type="email" class="form-control mb-3" id="contact_email" placeholder="Enter your email for assistance*" value="{{Auth::check() ? ( Auth::user()->email ? Auth::user()->email : '') : ''}}" required>
                <textarea  class="form-control mb-4" rows="10" id="contact_message" required placeholder="Describe your issue here*"></textarea>
                <button class="btn btn-lg btn-primary w-100" type="submit" id="support_submit_btn">
                    Submit
                    <i class="fas fa-spinner fa-spin ms-2 d-none"></i>
                </button>
            </form>
            <div class="show-result d-none">
                Your question has been received. <br>We will respond with support details via email within 24 hours.
            </div>
        </div>
    </div>
</div>