@extends('layouts.admin_layout')

@section('Title')
    پنل مدیریت | چت های پشتیبانی
@endsection

@section('custom-css')
    <style>
        .active_contact_li {
            border: 1px solid #009fa3;
            background-color: #33383c !important;
        }

        .active_contact_li span {
            color: #009fa3 !important;
        }

        .light_version .active_contact_li {
            border: 2px solid #00ced1;
            background-color: #e4fdfd !important;
        }

        @media (max-width: 766px) {
            .my_chat_room {
                margin-right: 0;
            }
        }
    </style>
@endsection

@section('custom-js')
    <script>
        $(document).ready(function() {
            var messagesContainer = $('#my_chat_room_messages');
            messagesContainer.scrollTop(messagesContainer[0].scrollHeight);
        });

        function add_file_to_chat() {
            swal.fire({
                html: `
                <p>فایل مورد نظر خود را انتخاب کنید</p>
                <input type="file" id="file-input" class="" style="padding: 0;">
                <p id="file-name" style="margin-top: 10px;">هیچ فایلی انتخاب نشده است</p>`,
                showCancelButton: true,
                confirmButtonText: 'ارسال',
                cancelButtonText: 'لغو',
                preConfirm: () => {
                    const fileInput = document.getElementById('file-input');
                    if (!fileInput.files.length) {
                        Swal.showValidationMessage('لطفاً یک فایل انتخاب کنید!');
                        return false;
                    }
                    return fileInput.files[0];
                },
                icon: 'question',
            }).then((result) => {
                if (result.isConfirmed) {
                    const file = result.value;
                    if (file) {
                        const formData = new FormData();
                        formData.append('file', file);
                        formData.append('_token', '{{csrf_token()}}');

                        $.ajax({
                            url: '{{route('admin.chats.send_file', ['room_code' => $room_code])}}',
                            method: 'POST',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: (response) => {
                                Swal.fire({
                                    html: response.message,
                                    icon: response.error ? 'error' : 'success',
                                    showConfirmButton: false,
                                }).then(function () {
                                    location.reload()
                                })
                            },
                            error: (xhr) => {
                                Swal.fire('ارسال فایل با خطا مواجه شد.', '', 'error');
                            }
                        });
                    }
                }
            });

            $(document).on('change', '#file-input', function () {
                const fileName = this.files.length ? this.files[0].name : 'هیچ فایلی انتخاب نشده است';
                $('#file-name').text(fileName);
            });
        }

        function send_msg_to_chat() {
            let my_chat_room_input = $("#my_chat_room_input")
            if(!my_chat_room_input.val()) {
                Swal.fire({
                    html: ' متن پیام الزامی است ',
                    icon:'error',
                    showConfirmButton: false,
                    toast: true,
                    position:'top-left'
                })

                return false;
            }

            if(my_chat_room_input.val().length < 3) {
                Swal.fire({
                    html: ' متن پیام باید بیش از 2 کاراکتر باشد ',
                    icon:'error',
                    showConfirmButton: false,
                    toast: true,
                    position:'top-left'
                })

                return false;
            }

            const formData = new FormData();
            formData.append('msg', my_chat_room_input.val());
            formData.append('_token', '{{csrf_token()}}');

            $.ajax({
                url: '{{route('admin.chats.send_msg', ['room_code' => $room_code])}}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    Swal.fire({
                        html: response.message,
                        icon: response.error ? 'error' : 'success',
                        showConfirmButton: false,
                    }).then(function () {
                        location.reload()
                    })
                },
                error: (xhr) => {
                    Swal.fire('ارسال پیام با خطا مواجه شد.', '', 'error');
                }
            });
        }

        function send_msg_to_chat_by_enter(event) {
            console.log(event)
            if (event.keyCode === 13) {
                send_msg_to_chat();
            }
        }
    </script>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <div class="row clearfix">
                <div class="col-md-6 col-sm-12">
                    <h1>چت های پشتیبانی</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">پنل مدیریت</a></li>
                            <li class="breadcrumb-item active" aria-current="page">چت های پشتیبانی</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-12">
                <div class="card">
                    <div class="body m-0 p-0">
                        <div class="chatapp_list">
                            <form action="{{route('admin.chats.search')}}" method="post" class="input-group mb-3">
                                @csrf
                                <input name="user_mobile" type="text" class="form-control" placeholder="جستجو..."
                                       value="{{$search_filters['user_mobile'] ?? ''}}">
                                <button type="submit" class="input-group-append clear_btn p-0 m-0">
                                    <span class="input-group-text h-100">
                                        <i class="icon-magnifier"></i>
                                    </span>
                                </button>

                                @if($searched)
                                    <button type="button" class="input-group-append clear_btn p-0 m-0">
                                        <a href="{{route('admin.chats.index')}}"
                                           class="input-group-text text-danger h-100">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </button>
                                @endif
                            </form>

                            <!-- contacts -->
                            <ul class="right_chat list-unstyled mb-0">
                                @foreach ($rooms as $room)
                                    <li class="offline @if($room['code'] == $room_code) active_contact_li @endif">
                                        <a href="{{route('admin.chats.detail', ['room_code' => $room['code']])}}">
                                            <div class="media m-0">
                                                <div class="avtar-pic w35">
                                                    <img
                                                        src="{{ asset('admin/assets/images/placeholders/user_placeholder.png') }}"
                                                        class="w-100">
                                                </div>
                                                <div class="media-body">
                                                    <span class="name">
                                                        {{ $room['memberInfo']['mobile'] }}
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="row mt-2">
                                @if($rooms->currentPage() > 1)
                                    <div
                                        class="@if($rooms->lastPage() == $rooms->currentPage()) col-12 @else col-6 @endif">
                                        <a href="{{route('admin.chats.index', ['page' => $rooms->currentPage() - 1])}}"
                                           class="btn btn-sm btn-outline-info w-100">
                                            قبلی
                                        </a>
                                    </div>
                                @endif

                                @if($rooms->lastPage() != $rooms->currentPage())
                                    <div class="@if($rooms->currentPage() > 1) col-6 @else col-12 @endif">
                                        <a href="{{route('admin.chats.index', ['page' => $rooms->currentPage() + 1])}}"
                                           class="btn btn-sm btn-outline-info w-100">
                                            بعدی
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="my_chat_room">
                            <div class="my_chat_room_header">
                                <h5 class="p-0 m-0 h-100">{{$chat_room_info['userInfo']['mobile'] . ' ' . $chat_room_info['userInfo']['user_name']}}</h5>
                            </div>

                            <div id="my_chat_room_messages" class="my_chat_room_messages">
                                @foreach($messages as $message)
                                    <div class="clearfix">
                                        <div class="my_chat_room_msg @if($message['is_answer'] == 1) is_answer @endif">
                                            @if($message['ext'] === null)
                                                <p class="mb-3">
                                                    {{$message['content']}}
                                                </p>
                                            @else
                                                @if($message['type_id'] == 3)
                                                    <p class="mb-3">
                                                        <a target="_blank" href="{{asset($message['content'])}}">
                                                            <img src="{{asset($message['content'])}}" class="mw-100">
                                                        </a>
                                                    </p>
                                                @elseif($message['type_id'] == 2)
                                                   <div class="mb-3">
                                                       <audio class="mw-100" src="{{asset($message['content'])}}" controls="controls"></audio>
                                                   </div>
                                                @else
                                                    <a href="{{asset($message['content'])}}"
                                                       class="btn btn-sm btn-outline-info borderRadius15 fs-10pt py-4 px-4 d-block mb-3">
                                                        <i class="fa fa-download"></i>
                                                        دانلود فایل
                                                        <span class="d-block mb-0 fs-8px w-100 text-center mt-2">فرمت فایل: {{$message['ext']}} </span>
                                                    </a>
                                                @endif
                                            @endif

                                            <div class="text-right">
                                                <span dir="ltr" class="pl-2 d-inline-block">{{verta($message['created_at'])->format('H:i')}}</span>
                                                <span dir="ltr" class="d-inline-block">{{verta($message['created_at'])->format('Y/m/d')}}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="my_chat_room_send">
                                <button onclick="add_file_to_chat()" class="clear_btn">
                                    <i class="fa fa-paperclip"></i>
                                </button>
                                <input onkeyup="send_msg_to_chat_by_enter(event)" id="my_chat_room_input" type="text">
                                <button onclick="send_msg_to_chat()" class="clear_btn">
                                    <i class="fa fa-send"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection