@extends('host.layout.master')

@section('title')
    {{ __('language.chat') }}
@endsection

@section('content')

    <main class="nxl-container apps-container apps-chat">
        <div class="nxl-content without-header nxl-full-content">
            <!-- [ Main Content ] start -->
            <div class="main-content d-flex">
                <!-- [ Content Sidebar ] start -->
                <div class="content-sidebar content-sidebar-xl" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-sidebar-header bg-white sticky-top hstack justify-content-between">
                        <h4 class="fw-bolder mb-0">Chat</h4>
                        <a href="javascript:void(0);" class="app-sidebar-close-trigger d-flex">
                            <i class="feather-x"></i>
                        </a>
                    </div>
                    <div class="content-sidebar-body">
                        <div class="py-0 px-4 d-flex align-items-center justify-content-between border-bottom">
                            <input type="search" class="py-3 px-0 border-0" id="chattingSearch" placeholder="Search...">
                        </div>
                        <div class="content-sidebar-items">
                            <div class="p-4 d-flex position-relative border-bottom c-pointer single-item">
                                <div class="bg-success text-white avatar-text">N</div>
                                <div class="ms-3 item-desc">
                                    <div class="w-100 d-flex align-items-center justify-content-between">
                                        <a href="javascript:void(0);" class="hstack gap-2 me-2">
                                            <span>Norman Byrd</span>
                                            <div class="wd-5 ht-5 rounded-circle opacity-75 me-1 bg-danger"></div>
                                            <span class="fs-10 fw-medium text-muted text-uppercase d-none d-sm-block">5 min ago</span>
                                        </a>
                                    </div>
                                    <p class="fs-12 fw-semibold text-dark mt-2 mb-0 text-truncate-2-line">
                                        User@gmail.com</p>
                                </div>
                            </div>
                            <div class="p-4 d-flex position-relative border-bottom c-pointer single-item">
                                <div class="bg-success text-white avatar-text">N</div>
                                <div class="ms-3 item-desc">
                                    <div class="w-100 d-flex align-items-center justify-content-between">
                                        <a href="javascript:void(0);" class="hstack gap-2 me-2">
                                            <span>Norman Byrd</span>
                                            <div class="wd-5 ht-5 rounded-circle opacity-75 me-1 bg-danger"></div>
                                            <span class="fs-10 fw-medium text-muted text-uppercase d-none d-sm-block">5 min ago</span>
                                        </a>
                                    </div>
                                    <p class="fs-12 fw-semibold text-dark mt-2 mb-0 text-truncate-2-line">
                                        User@gmail.com</p>
                                </div>
                            </div>
                            <div class="p-4 d-flex position-relative border-bottom c-pointer single-item">
                                <div class="bg-success text-white avatar-text">N</div>
                                <div class="ms-3 item-desc">
                                    <div class="w-100 d-flex align-items-center justify-content-between">
                                        <a href="javascript:void(0);" class="hstack gap-2 me-2">
                                            <span>Norman Byrd</span>
                                            <div class="wd-5 ht-5 rounded-circle opacity-75 me-1 bg-danger"></div>
                                            <span class="fs-10 fw-medium text-muted text-uppercase d-none d-sm-block">5 min ago</span>
                                        </a>
                                    </div>
                                    <p class="fs-12 fw-semibold text-dark mt-2 mb-0 text-truncate-2-line">
                                        User@gmail.com</p>
                                </div>
                            </div>
                            <div class="p-4 d-flex position-relative border-bottom c-pointer single-item">
                                <div class="bg-success text-white avatar-text">N</div>
                                <div class="ms-3 item-desc">
                                    <div class="w-100 d-flex align-items-center justify-content-between">
                                        <a href="javascript:void(0);" class="hstack gap-2 me-2">
                                            <span>Norman Byrd</span>
                                            <div class="wd-5 ht-5 rounded-circle opacity-75 me-1 bg-danger"></div>
                                            <span class="fs-10 fw-medium text-muted text-uppercase d-none d-sm-block">5 min ago</span>
                                        </a>
                                    </div>
                                    <p class="fs-12 fw-semibold text-dark mt-2 mb-0 text-truncate-2-line">
                                        User@gmail.com</p>
                                </div>
                            </div>
                            <div class="p-4 d-flex position-relative border-bottom c-pointer single-item">
                                <div class="bg-success text-white avatar-text">N</div>
                                <div class="ms-3 item-desc">
                                    <div class="w-100 d-flex align-items-center justify-content-between">
                                        <a href="javascript:void(0);" class="hstack gap-2 me-2">
                                            <span>Norman Byrd</span>
                                            <div class="wd-5 ht-5 rounded-circle opacity-75 me-1 bg-danger"></div>
                                            <span class="fs-10 fw-medium text-muted text-uppercase d-none d-sm-block">5 min ago</span>
                                        </a>
                                    </div>
                                    <p class="fs-12 fw-semibold text-dark mt-2 mb-0 text-truncate-2-line">
                                        User@gmail.com</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- [ Content Sidebar  ] end -->
                <!-- [ Main Area  ] start -->
                <div class="content-area" data-scrollbar-target="#psScrollbarInit">
                    <div class="content-area-header sticky-top">
                        <div class="page-header-left hstack gap-4">
                            <a href="javascript:void(0);" class="app-sidebar-open-trigger">
                                <i class="feather-align-left fs-20"></i>
                            </a>
                            <a href="javascript:void(0);" class="d-flex align-items-center justify-content-center gap-3"
                               data-bs-toggle="offcanvas" data-bs-target="#userProfileDetails">
                                <div class="avatar-image">
                                    <img src="{{ URL::asset('admin/assets/images/avatar/1.png') }}" class="img-fluid"
                                         alt="image">
                                </div>
                                <div class="d-none d-sm-block">
                                    <div class="fw-bold d-flex align-items-center">Alexandra Della</div>
                                    {{--                                    <div class="d-flex align-items-center mt-1">--}}
                                    {{--                                        <span class="wd-7 ht-7 rounded-circle opacity-75 me-2 bg-success"></span>--}}
                                    {{--                                        <span class="fs-9 text-uppercase fw-bold text-success">Active Now</span>--}}
                                    {{--                                    </div>--}}
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="content-area-body">
                        <div class="single-chat-item">
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <a href="javascript:void(0)" class="avatar-image">
                                    <img src="{{ URL::asset('admin/assets/images/avatar/1.png') }}"
                                         class="img-fluid rounded-circle"
                                         alt="image">
                                </a>
                                <div class="d-flex align-items-center gap-2">
                                    <a href="javascript:void(0);">Alexandra Della</a>
                                    <span class="wd-5 ht-5 bg-gray-400 rounded-circle"></span>
                                    <span class="fs-11 text-muted">10:32 PM</span>
                                </div>
                            </div>
                            <div class="wd-500 p-3 rounded-5 bg-gray-200">
                                <p class="py-2 px-3 rounded-5 bg-white">Hi,</p>
                            </div>
                        </div>
                        <div class="single-chat-item">
                            <div class="d-flex flex-row-reverse align-items-center gap-3 mb-3">
                                <a href="javascript:void(0)" class="avatar-image">
                                    <img src="{{ URL::asset('admin/assets/images/avatar/2.png') }}"
                                         class="img-fluid rounded-circle"
                                         alt="image">
                                </a>
                                <div class="d-flex flex-row-reverse align-items-center gap-2">
                                    <a href="javascript:void(0);">Green Cute</a>
                                    <span class="wd-5 ht-5 bg-gray-400 rounded-circle"></span>
                                    <span class="fs-11 text-muted">10:35 PM</span>
                                </div>
                            </div>
                            <div class="wd-500 p-3 rounded-5 bg-gray-200 ms-auto">
                                <p class="py-2 px-3 rounded-5 bg-white">Hello Alex!!! Welcome to Live Chat!!!</p>
                            </div>
                        </div>
                        <div class="single-chat-item">
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <a href="javascript:void(0)" class="avatar-image">
                                    <img src="{{ URL::asset('admin/assets/images/avatar/1.png') }}"
                                         class="img-fluid rounded-circle"
                                         alt="image">
                                </a>
                                <div class="d-flex align-items-center gap-2">
                                    <a href="javascript:void(0);">Alexandra Della</a>
                                    <span class="wd-5 ht-5 bg-gray-400 rounded-circle"></span>
                                    <span class="fs-11 text-muted">10:32 PM</span>
                                </div>
                            </div>
                            <div class="wd-500 p-3 rounded-5 bg-gray-200">
                                <p class="py-2 px-3 rounded-5 bg-white">Hi,</p>
                            </div>
                        </div>
                        <div class="single-chat-item">
                            <div class="d-flex flex-row-reverse align-items-center gap-3 mb-3">
                                <a href="javascript:void(0)" class="avatar-image">
                                    <img src="{{ URL::asset('admin/assets/images/avatar/2.png') }}"
                                         class="img-fluid rounded-circle"
                                         alt="image">
                                </a>
                                <div class="d-flex flex-row-reverse align-items-center gap-2">
                                    <a href="javascript:void(0);">Green Cute</a>
                                    <span class="wd-5 ht-5 bg-gray-400 rounded-circle"></span>
                                    <span class="fs-11 text-muted">10:35 PM</span>
                                </div>
                            </div>
                            <div class="wd-500 p-3 rounded-5 bg-gray-200 ms-auto">
                                <p class="py-2 px-3 rounded-5 bg-white">Hello Alex!!! Welcome to Live Chat!!!</p>
                            </div>
                        </div>
                    </div>
                    <!--! BEGIN: Message Editor !-->
                    <div class="d-flex align-items-center justify-content-between border-top border-gray-5 bg-white sticky-bottom">
{{--                        <div class="d-flex align-center">--}}
{{--                            <div class="dropdown border-end border-gray-5">--}}
{{--                                <a href="javascript:void(0)" data-bs-toggle="dropdown">--}}
{{--                                    <div class="wd-60 d-flex align-items-center justify-content-center"--}}
{{--                                         data-bs-toggle="tooltip" data-bs-trigger="hover" title="Upload Attachments"--}}
{{--                                         style="height: 59px">--}}
{{--                                        <i class="feather-link"></i>--}}
{{--                                    </div>--}}
{{--                                </a>--}}
{{--                                <ul class="dropdown-menu">--}}
{{--                                    <li>--}}
{{--                                        <a href="javascript:void(0)" class="dropdown-item" id="uploadTrigger">--}}
{{--                                            <i class="feather-image me-3"></i>Upload Images--}}
{{--                                        </a>--}}
{{--                                        <input type="file" id="fileInput" style="display: none;" accept="image/*">--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <input class="form-control border-0 emoji-picker" placeholder="Type your message here...">
                        <div class="border-start border-gray-5 send-message">
                            <a href="javascript:void(0)" class="wd-60 d-flex align-items-center justify-content-center"
                               data-bs-toggle="tooltip" data-bs-trigger="hover" title="Send Message"
                               style="height: 59px"><i class="feather-send"></i></a>
                        </div>
                    </div>
                    <!--! END: Message Editor !-->
                </div>
                <!-- [ Content Area ] end -->
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </main>

@endsection
@section('script')
    <script>
        // JavaScript to trigger file upload
        document.getElementById('uploadTrigger').addEventListener('click', function () {
            document.getElementById('fileInput').click();
        });

        document.getElementById('fileInput').addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                console.log('File selected:', file.name);
                // Optionally, send the file to the server using AJAX
                uploadFile(file);
            }
        });

        function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);

            // Replace URL with your file upload endpoint
            fetch('/upload-endpoint', {
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Upload successful:', data);
                })
                .catch(error => {
                    console.error('Upload error:', error);
                });
        }
    </script>
@endsection