@extends('tenant.layouts.client')

{{--Tilte Section--}}
@section('title', 'Chats')

{{--Style Section--}}
@section('style')
    <style>
        .ap {
            width: 100% !important;
            height: 60%;
        }
        .ap__ring {
            stroke: hsla(var(--hue),10%,10%,0.15);
            transition: stroke 0.3s;
        }
        .ap__worm1,
        .ap__worm2 {
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        .ap__worm1 {
            animation-name: worm1;
        }
        .ap__worm2 {
            animation-name: worm2;
            visibility: hidden;
        }

        /* Dark theme */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: hsl(var(--hue),10%,10%);
                --fg: hsl(var(--hue),10%,90%);
            }
            .ap__ring {
                stroke: hsla(var(--hue),10%,90%,0.1);
            }
        }

        /* Animtions */
        @keyframes worm1 {
            from {
                animation-timing-function: ease-in-out;
                stroke-dashoffset: -87.96;
            }
            20% {
                animation-timing-function: ease-in;
                stroke-dashoffset: 0;
            }
            60% {
                stroke-dashoffset: -791.68;
                visibility: visible;
            }
            60.1%,
            to {
                stroke-dashoffset: -791.68;
                visibility: hidden;
            }
        }
        @keyframes worm2 {
            from,
            60% {
                stroke-dashoffset: -87.96;
                visibility: hidden;
            }
            60.1% {
                animation-timing-function: cubic-bezier(0,0,0.5,0.75);
                stroke-dashoffset: -87.96;
                visibility: visible;
            }
            77% {
                animation-timing-function: cubic-bezier(0.5,0.25,0.5,0.88);
                stroke-dashoffset: -340;
                visibility: visible;
            }
            to {
                stroke-dashoffset: -669.92;
                visibility: visible;
            }
        }



        .listed-data{
            color: black;
            font-size: 13px;
            /*font-family: sans-serif;*/
        }

        .icons{
            /*position: relative;*/
            /*background-image: linear-gradient(to bottom, #02a34e , #abc959);*/
            color: white;
            border-radius: 25%;
            opacity: .4;
            /*padding: 4px;*/
            display: inline-block;
            cursor: pointer;
        }

        .icons-2{
            cursor: pointer;
            background: white;
            color: #818181;
            border:solid 1px darkgray;
            border-radius: 25%;
            margin-top: 1px;
            padding: 2px 4px;
            display: inline-block;
        }

        .icons.active{
            opacity: 1;
        }

        .list-filter{
            overflow-x: auto;
            white-space: nowrap;
            /*margin: -10px -12px -9px -12px;*/

        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .list-filter-icons{
            padding-top: 13px;
            height: 51px;
        }

        .counter{
            right: -25px;
            font-size: 7px;
        }

        .reply .col-auto .card{
            background-image: linear-gradient(to right, #02a34e , #abc959);
            color: white;
        }

        .reply .col-auto {
            font-size: 13px;
        }

        .col-auto {
            font-size: 13px;
        }

        .sendMessage{
            background-image: linear-gradient(to bottom, #02a34e , #abc959);
            color: white;
            border-radius: 50%;
            border: #14e714;
        }

        .chat-active{
            background: #02a34e;
            color: white !important;
            border-radius: 13px;

        }

        .chat-active-text{
            color: white !important;
        }

        .accordion-item{
            border: 0;
            /*border-bottom: 1px solid #cccccc;*/
        }

        .history-button{
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header{
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow:white;
        }

        .form-label{
            font-size: 13px;
            font-weight: 600;
        }

        .form-select{
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input{
            padding: 0px 0px;
            font-size: 12px;
            border: none;
            color: black;
        }

        ul.dropdown-menu.show {
            position: absolute;
            left: -3px !important;
            padding: 3px 0;
        }

        @media (min-width: 992px){
            .col-lg-3-custom {
                flex: 0 0 auto;
                width: 28%;
            }

            .col-lg-6-custom {
                flex: 0 0 auto;
                width: 43%;
            }

            .col-lg-9-custom{
                flex: 0 0 auto;
                width: 71%;
            }
        }

        @media (min-width: 992px){
            .col-lg-4-filter {
                flex: 0 0 auto;
                width: 30%;
            }

            .col-lg-8-filter {
                flex: 0 0 auto;
                width: 70%;
            }
        }
        .chat-active  .rounded-circle{
            background: WHITE;
            padding: 5PX;
        }

        .agent-name{
            display: block;background: #bcf2d6;color: black;padding: 2px;font-size: 7px;border-radius: 20px;width: 151%;text-align: center;    margin: 5px 0;
        }
        .agent-name.active{display: block;background: #ffffff;color: black;padding: 2px;font-size: 7px;border-radius: 20px;width: 151%;text-align: center;    margin: 5px 0;}

        hr{
            margin: 18px -17px;
            color: #02813d;
        }

        .form-control:disabled {
            background-color: #ffffff;
            opacity: 1;
        }
        .w-95 {
            width: 95%!important;
        }
        .mt-10{
            margin-top: 10px;
        }
        .w-px-200{
            width: 200px!important;
        }
        .mt-35{
            margin-top: 35px;
        }
        .md-header{
            background:background: rgb(5,177,48);
            background: linear-gradient(90deg, rgba(5,177,48,1) 0%, rgba(3,153,39,1) 57%, rgba(195,223,0,1) 100%);
            color:white;
        }
        .rounded-top-4{
            border-top-left-radius: 1rem;
            border-top-right-radius:1rem;

        }
        .md-header_delete{
            background: rgb(254,0,0);
            background: -moz-linear-gradient(90deg, rgba(254,0,0,1) 0%, rgba(255,63,63,1) 32%, rgba(247,75,75,1) 53%, rgba(255,85,85,1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(254,0,0,1) 0%, rgba(255,63,63,1) 32%, rgba(247,75,75,1) 53%, rgba(255,85,85,1) 100%);
            background: linear-gradient(90deg, rgba(254,0,0,1) 0%, rgba(255,63,63,1) 32%, rgba(247,75,75,1) 53%, rgba(255,85,85,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fe0000",endColorstr="#ff5555",GradientType=1);

        }
        .but{
            padding-left: 50px;
            padding-right: 50px;
            border-radius: 5px;
            border-color: #e0f4ea;
            background-color: #e0f4ea;
            border: 2px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: auto;
        }
        .form-check-input:checked {
            background-color:  #00a34e;
            border-color: #00a34e;
        }
        .md-top-mar{
            --bs-modal-margin: 11.75rem;
        }
        .header-dotes.dropdown-menu.show {
            left: -137px !important;
            top: 8px !important;
        }

        button[title] {
            position: relative;
        }

        button[title]:hover::before {
            /*content: attr(title);*/

            position: absolute;
            bottom: -40px; /* Adjust the value to control the distance between the button and tooltip */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            white-space: nowrap;
        }
    </style>
@endsection

{{--Content Section--}}
@section('content')
    <div class="container-fluid px-3" id="chatPage" >
        <livewire:tenant.supervisor.chat.header />
        <livewire:tenant.supervisor.chat.content />
    </div>
@endsection

{{--Script Section--}}
@section('script')
    <script type="module">

        window.addEventListener('close-modal-filter', event => {
            document.getElementById('closeModalFilter').click();
        });

        window.addEventListener('closeModalNote', event => {
            document.getElementById('closeModalNote').click();
        });

        window.addEventListener('closeModalGroup', event => {
            document.getElementById('closeModalGroup').click();
        });

        window.addEventListener('inbox-scroll-down', event => {
            document.getElementById('inbox-inbox').scrollTo({top: 10000000000,left: 100,behavior: "smooth"})
        });


    </script>
    <script type="application/javascript">
        function conversationReplyState() {
            return {
                attach () {
                    document.getElementById('file_upload_id').click();
                },
                submit () {
                    this.$refs.submit.click()
                }
            }
        }
    </script>
    <script type="module">
        import 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'
        import insertText from 'https://cdn.jsdelivr.net/npm/insert-text-at-cursor@0.3.0/index.js'

        window.addEventListener('showEmoji', event => {
            document.querySelector('emoji-picker').addEventListener('emoji-click', e => {
                insertText(document.querySelector('#adsssdE'), e.detail.unicode)
            })
        });

    </script>
    <script>
        document.addEventListener('click', function(event) {
            var cannedresponce = document.getElementById('cannedresponce');
            if (!cannedresponce.contains(event.target)) {
                Livewire.emit('closeShowCanned')
            }
        });
        document.addEventListener('click', function(event) {
            var emojy = document.querySelector('emoji-picker');if (!emojy.contains(event.target)) {
                Livewire.emit('closeEmoji')
            }
        });
    </script>

@endsection