<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inbox</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
    <!-- Bootstrap Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Main Styles -->
    <link rel="stylesheet" href="{{ asset('assets/style.css') }}">

</head>
</head>

<body class="color-dark-green">

    <div class="container-fluid">
        <div class="main-wrapper row">

            <!-- Sidebar -->
            <x-sidebar />
            <!-- End -->

            <!-- Header And Main Content Wrapper -->
            <div class="content-area position-relative bg-light-color">

                <!-- Header -->
                <x-header />
                <!-- End -->

                <!-- Main Content Area -->
                @yield('content')
                <!-- End -->

                <!-- Support and Chat Fixed Buttons -->
                <div class="chat-message-box position-fixed">


                    <!-- Chat Drop Down -->
                    <div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
                        <img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">

                        <div class="menu chat-menu">
                            <div id="chat-feature-widget" class="ui transition chat-feature-widget">
                                <div class="header d-flex justify-content-between align-items-center text-white">
                                    <p class="chat-popup-label text-light">Chats</p>
                                    <img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
                                </div>
                                <div class="item open-inbox">
                                    <div class="single-user-content d-flex">
                                        <div class="chat-user-img-box">
                                            <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                        </div>
                                        <div class="user-message-detail">
                                            <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                                adipiscing
                                                elit. In lorem est... </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item open-inbox">
                                    <div class="single-user-content d-flex">
                                        <div class="chat-user-img-box">
                                            <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                        </div>
                                        <div class="user-message-detail">
                                            <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                                adipiscing
                                                elit. In lorem est... </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item open-inbox">
                                    <div class="single-user-content d-flex">
                                        <div class="chat-user-img-box">
                                            <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                        </div>
                                        <div class="user-message-detail">
                                            <p class="recepient-message-detail">James <span>Sep 27</span></p>
                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
                                                adipiscing
                                                elit. In lorem est... </p>
                                        </div>
                                    </div>
                                </div>



                            </div>

                            <!-- User Inbox menu  -->
                            <div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
                                <div class="header d-flex align-items-center">
                                    <img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
                                    <p class="chat-popup-label text-light">James</p>
                                </div>
                                <div class="scrollhint">
                                    <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                                <p>👋 Hi there! How can I help?</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
                                                    est,
                                                    tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
                                                    mollis, pretium augue vel, feugiat risus.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                                <p>Typing...</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="outer-message-input-box">
                                    <div class="inner-message-input d-flex align-items-center justify-content-between ">
                                        <input type="text" class="border-0" placeholder="Type a reply">
                                        <p class="input-action d-flex align-items-center ">
                                            <img src="{{ asset('images/icons/gif.png') }}" alt="Gif">
                                            <img src="{{ asset('images/icons/emoji.png') }}" alt="Gif">
                                            <img src="{{ asset('images/icons/attachment.png') }}" alt="Gif">
                                        </p>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <!-- End -->



                    <!-- Support Drop down -->
                    <div class="ui floating bg-dark-green-color support-widget-wrapper  icon dropdown button ">
                        <img src="images/icons/support.svg" alt="Support Icon">
                        <div class="menu support-widget">
                            <div class="header support-header mt-0 text-center">
                                <h2 class="color-dark-green">Help & Support</h2>
                            </div>
                            <div class="support-facilities-box d-flex justify-content-between flex-wrap">
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/faq-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">FAQ</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">Using Kundo</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/launch-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Launching Kundo</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/setting-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Technical Settings</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green ">Integration</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Privacy & Policy</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/news-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">News & Updates</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green ">Training</p>
                                </div>
                            </div>

                            <div class="header contact-us-header text-center">
                                <h2 class="color-dark-green">Contact Us</h2>
                            </div>

                            <div class="contact-us-box d-flex justify-content-center">
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Technical Questions</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">About Kundo</p>
                                </div>
                            </div>


                        </div>
                    </div>
                    <!-- End -->

                </div>
                <!-- End -->
            </div>
        </div>
    </div>

    <!-- Jquery -->
    <!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> -->

    <!-- Bootstrap scripts -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script> -->

    <!-- Fomantic Ui Scripts -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script> -->

    <!-- Main Custom Js -->
    <script src="{{ asset('assets/script.js') }}"></script>
</body>

</html>