@extends('superadmin.layouts.app')
@section('content')
<section>
    <h2 class="main-heading">News</h2>
    <div class="row">
        <div class="col-12 ">
            <div class="border-box">
                <div class="bg-box p-0">
                    <div class="messagepage_section">
                        <div class="Allchat_main">
                            <div>
                                <ul class="promote-main-tab hstack justify-between chat_btn">
                                    <li class="promote-tab">
                                        <input type="radio" id="tab1" name="tab-group" checked>
                                        <label for="tab1">
                                            <p>All Chats</p>
                                        </label>
                                    </li>
                                    <li class="promote-tab">
                                        <input type="radio" id="tab2" name="tab-group">
                                        <label for="tab2">
                                            <p>Issues Raised</p>
                                        </label>
                                    </li>
                                </ul>
                                <div class="search_input position">
                                    <input type="text" placeholder="Search...">
                                    <div class="search_icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
                                            <path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
                                            </path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <div class="user_details_main">
                                <a class="user_chat_details active">
                                    <div class="user_details">
                                        <div class="user-chat-profile-box">
                                            <img src="{{ asset('cc/superadmin/images/selinaG.png') }}" alt="">
                                        </div>
                                        <div class="username">
                                            <h4>Selina Gomsmith</h4>
                                            <div class="hstack justify-between">
                                                <p>Lorem ipsum dolor sit amet, elit</p>
                                                <ul class="time">
                                                    <li>1h</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="#" class="user_chat_details unread">
                                        <div class="user_details">
                                            <div class="user-chat-profile-box">
                                                <img src="{{ asset('cc/superadmin/images/roxen.png') }}" alt="">
                                            </div>
                                            <div class="username">
                                                <h4>Selina Gomsmith</h4>
                                                <div class="hstack justify-between">
                                                    <p>4+ new messages</p>
                                                    <ul class="time">
                                                        <li>1h</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="#" class="user_chat_details active-now">
                                        <div class="user_details">
                                            <div class="user-chat-profile-box">
                                                <img src="{{ asset('cc/superadmin/images/brintha1.png') }}" alt="">
                                            </div>
                                            <div class="username">
                                                <h4>Brintha</h4>
                                                <p>Lorem ipsum dolor sit amet, elit</p>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="#" class="user_chat_details typing">
                                        <div class="user_details">
                                            <div class="user-chat-profile-box">
                                                <img src="{{ asset('cc/superadmin/images/selina.png') }}" alt="">
                                            </div>
                                            <div class="username">
                                                <h4>Selina</h4>
                                                <div class="hstack justify-between">
                                                    <p>Lorem ipsum dolor sit amet, elit</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="#" class="user_chat_details send">
                                        <div class="user_details">
                                            <div class="user-chat-profile-box">
                                                <img src="{{ asset('cc/superadmin/images/vishwa.png') }}" alt="">
                                            </div>
                                            <div class="username">
                                                <h4>Vishwa</h4>
                                                <div class="hstack justify-between">
                                                    <p>Lorem ipsum dolor sit amet, elit</p>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="#" class="user_chat_details">
                                        <div class="user_details">
                                            <div class="user-chat-profile-box">
                                                <img src="{{ asset('cc/superadmin/images/roxen.png') }}" alt="">
                                            </div>
                                            <div class="username">
                                                <h4>Roxen</h4>
                                                <div class="hstack justify-between">
                                                    <p>Lorem ipsum dolor sit amet, elit</p>
                                                    <ul class="time">
                                                        <li>1h</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                            </div>
                        </div>
                        <div class="chat_main">
                            <div class="user-chat-border">
                                <div class="active_user_details">
                                    <div class="active_users">
                                        <a href="#" class="left-arrow-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                                            </svg>
                                        </a>
                                        <div class="user-chat-profile-box">

                                            <img src="{{ asset('cc/superadmin/images/selinaG.png') }}" alt="">
                                        </div>
                                        <h4>Selina Gomsmith</h4>
                                        <span>Active</span>
                                    </div>
                                    <div class="search_input position">
                                        <input type="text" placeholder="Search...">
                                        <div class="search_icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30">
                                                <path d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
                                                </path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <ul class="user_status">
                                    <li>
                                        <span>Issue raised on:</span>
                                        <h6>24, 10, 2024</h6>
                                    </li>
                                    <li>
                                        <span>Issue Ticket No:</span>
                                        <h6>12324</h6>
                                    </li>
                                    <li>
                                        <span>Status:</span>
                                        <h6>Unresolved</h6>
                                    </li>
                                </ul>
                            </div>

                            <div class="user-chats-main">
                                <ul class="users_chats">
                                    <li>
                                        <div class="user-chat-profile-box">
                                            <img src="{{ asset('cc/superadmin/images/selinaG.png') }}" alt="">
                                        </div>
                                        <div>
                                            <div class="selina-name">
                                                <h5>Selina Gomsmith</h5>
                                                <span>2:00 Am</span>
                                            </div>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="users_chats">
                                    <li>
                                        <div>
                                            <div class="selina-name">
                                                <h5>You</h5>
                                                <span>2:00 Am</span>
                                            </div>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="users_chats">
                                    <li>
                                        <div class="user-chat-profile-box">
                                            <img src="{{ asset('cc/superadmin/images/selinaG.png') }}" alt="">
                                        </div>
                                        <div>
                                            <div class="selina-name">
                                                <h5>Mellisa Gomsmith</h5>
                                                <span>2:00 Am</span>
                                            </div>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="users_chats">
                                    <li>
                                        <div>
                                            <div class="selina-name">
                                                <h5>You</h5>
                                                <span>2:00 Am</span>
                                            </div>
                                            <h6 class="chat-box"> Lorem Ipsum has been the industry's standard
                                                dummy
                                                text ever since the 1500s, when an unknown printer took a galley
                                                of type
                                                and scrambled it to make a type specimen book.</h6>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="users_chats">
                                    <li>
                                        <div class="user-chat-profile-box">
                                            <img src="{{ asset('cc/superadmin/images/selinaG.png') }}" alt="">
                                        </div>
                                        <div>
                                            <div class="selina-name">
                                                <h5>Mellisa Gomsmith</h5>
                                                <span>2:00 Am</span>
                                            </div>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                            <h6 class="chat-box">Lorem ipsum dolor sit amet, elit</h6>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="chat-send-box">
                                <input type="text" placeholder="Type message">
                                <div class="file-icon">
                                    <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 12.75C7.99424 12.749 8.94747 12.3535 9.65051 11.6505C10.3535 10.9475 10.749 9.99424 10.75 9V4C10.75 3.00544 10.3549 2.05161 9.65165 1.34835C8.94839 0.645088 7.99456 0.25 7 0.25C6.00544 0.25 5.05161 0.645088 4.34835 1.34835C3.64509 2.05161 3.25 3.00544 3.25 4V9C3.25103 9.99424 3.64645 10.9475 4.34949 11.6505C5.05253 12.3535 6.00576 12.749 7 12.75ZM4.5 4C4.5 3.33696 4.76339 2.70107 5.23223 2.23223C5.70107 1.76339 6.33696 1.5 7 1.5C7.66304 1.5 8.29893 1.76339 8.76777 2.23223C9.23661 2.70107 9.5 3.33696 9.5 4V9C9.5 9.66304 9.23661 10.2989 8.76777 10.7678C8.29893 11.2366 7.66304 11.5 7 11.5C6.33696 11.5 5.70107 11.2366 5.23223 10.7678C4.76339 10.2989 4.5 9.66304 4.5 9V4ZM7.625 15.2188V17.125C7.625 17.2908 7.55915 17.4497 7.44194 17.5669C7.32473 17.6842 7.16576 17.75 7 17.75C6.83424 17.75 6.67527 17.6842 6.55806 17.5669C6.44085 17.4497 6.375 17.2908 6.375 17.125V15.2188C4.8341 15.062 3.40607 14.3393 2.36707 13.1907C1.32806 12.042 0.751903 10.5489 0.75 9C0.75 8.83424 0.815848 8.67527 0.933058 8.55806C1.05027 8.44085 1.20924 8.375 1.375 8.375C1.54076 8.375 1.69973 8.44085 1.81694 8.55806C1.93415 8.67527 2 8.83424 2 9C2 10.3261 2.52678 11.5979 3.46447 12.5355C4.40215 13.4732 5.67392 14 7 14C8.32608 14 9.59785 13.4732 10.5355 12.5355C11.4732 11.5979 12 10.3261 12 9C12 8.83424 12.0658 8.67527 12.1831 8.55806C12.3003 8.44085 12.4592 8.375 12.625 8.375C12.7908 8.375 12.9497 8.44085 13.0669 8.55806C13.1842 8.67527 13.25 8.83424 13.25 9C13.2481 10.5489 12.6719 12.042 11.6329 13.1907C10.5939 14.3393 9.1659 15.062 7.625 15.2188Z" fill="white" />
                                    </svg>
                                    <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.875 0.125H2.125C1.79348 0.125 1.47554 0.256696 1.24112 0.491116C1.0067 0.725537 0.875 1.04348 0.875 1.375V12.625C0.875 12.9565 1.0067 13.2745 1.24112 13.5089C1.47554 13.7433 1.79348 13.875 2.125 13.875H15.875C16.2065 13.875 16.5245 13.7433 16.7589 13.5089C16.9933 13.2745 17.125 12.9565 17.125 12.625V1.375C17.125 1.04348 16.9933 0.725537 16.7589 0.491116C16.5245 0.256696 16.2065 0.125 15.875 0.125ZM15.875 1.375V9.40234L13.8383 7.36641C13.7222 7.2503 13.5844 7.1582 13.4327 7.09537C13.281 7.03253 13.1185 7.00019 12.9543 7.00019C12.7901 7.00019 12.6276 7.03253 12.4759 7.09537C12.3242 7.1582 12.1864 7.2503 12.0703 7.36641L10.5078 8.92891L7.07031 5.49141C6.83592 5.25716 6.5181 5.12558 6.18672 5.12558C5.85534 5.12558 5.53752 5.25716 5.30312 5.49141L2.125 8.66953V1.375H15.875ZM2.125 10.4375L6.1875 6.375L12.4375 12.625H2.125V10.4375ZM15.875 12.625H14.2055L11.393 9.8125L12.9555 8.25L15.875 11.1703V12.625ZM10.25 4.8125C10.25 4.62708 10.305 4.44582 10.408 4.29165C10.511 4.13748 10.6574 4.01732 10.8287 3.94636C11 3.87541 11.1885 3.85684 11.3704 3.89301C11.5523 3.92919 11.7193 4.01848 11.8504 4.14959C11.9815 4.2807 12.0708 4.44775 12.107 4.6296C12.1432 4.81146 12.1246 4.99996 12.0536 5.17127C11.9827 5.34257 11.8625 5.48899 11.7083 5.592C11.5542 5.69502 11.3729 5.75 11.1875 5.75C10.9389 5.75 10.7004 5.65123 10.5246 5.47541C10.3488 5.2996 10.25 5.06114 10.25 4.8125Z" fill="white" />
                                    </svg>
                                </div>
                                <div class="sent-icon">
                                    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M15.4898 7.9061L2.36484 0.414695C2.1436 0.29059 1.88983 0.236734 1.63726 0.260281C1.38468 0.283828 1.14525 0.383664 0.950762 0.546528C0.756276 0.709391 0.615943 0.927571 0.548407 1.17209C0.48087 1.4166 0.489325 1.67588 0.57265 1.91548L2.99452 8.98345C2.99421 8.98604 2.99421 8.98866 2.99452 8.99126C2.99409 8.99384 2.99409 8.99648 2.99452 8.99907L0.57265 16.0827C0.50592 16.2711 0.485375 16.4729 0.512739 16.6709C0.540103 16.869 0.614578 17.0576 0.729913 17.2209C0.845248 17.3842 0.998077 17.5175 1.17557 17.6095C1.35307 17.7016 1.55005 17.7497 1.74999 17.7499C1.96692 17.7493 2.18004 17.6928 2.36874 17.5858L15.4867 10.0819C15.6802 9.97349 15.8414 9.81556 15.9537 9.62431C16.066 9.43306 16.1254 9.21536 16.1258 8.99357C16.1262 8.77178 16.0676 8.55388 15.956 8.36222C15.8443 8.17057 15.6837 8.01206 15.4906 7.90298L15.4898 7.9061ZM1.74999 16.4999V16.4928L4.10468 9.62485H8.62499C8.79075 9.62485 8.94973 9.559 9.06694 9.44179C9.18415 9.32458 9.24999 9.16561 9.24999 8.99985C9.24999 8.83409 9.18415 8.67512 9.06694 8.55791C8.94973 8.4407 8.79075 8.37485 8.62499 8.37485H4.11093L1.75468 1.50923L1.74999 1.49985L14.875 8.98657L1.74999 16.4999Z" fill="white" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $(".user_chat_details").click(function() {
            $(".chat_main").addClass("showbox");
            return false;
        });

        $(".left-arrow-icon").click(function() {
            $(".chat_main").removeClass("showbox");
        });
    });

</script>

<script>
    $(document).ready(function() {
        $('#myTable').DataTable();
        $(".post-menu").click(function() {
            $(this).toggleClass("show");
        });
        $(".hide-content-li").click(function() {
            $(".post-bio").hide();
            $(this).hide();
            $(".unhide-content-li").show();
        })
        $(".unhide-content-li").click(function() {
            $(".post-bio").show();
            $(this).hide();
            $(".hide-content-li").show();
        })
        $(".trash").click(function() {
            $("body").addClass("bodyscrolling");
            $(".delete-post-modal").fadeIn(300);
        })
        $(".close-modal").click(function() {
            $("body").removeClass("bodyscrolling");
            $(".delete-post-modal").fadeOut(300);
        })
        $(".promote").click(function() {
            $("body").addClass("bodyscrolling");
            $(".promot-post-modal").fadeIn(300);
        })
        $(".close-modal").click(function() {
            $("body").removeClass("bodyscrolling");
            $(".promot-post-modal").fadeOut(300);
        })
        $(".hide").click(function() {
            $(this).parent().addClass("hide-icon");
        });
        $(".unhide").click(function() {
            $(this).parent().removeClass("hide-icon");
        });
        $(".table-filter").click(function() {
            $(".table-filter .hstack").toggleClass("show")
        })
    });

</script>
@endsection