@extends('admin.layouts.master')


@section('title')
    شاشة الدردشة
@endsection

@section('css')
@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">شاشة الدردشة </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">شاشة الدردشة</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    @include('admin.messages')
    <section style="background-color: #eee;">
        <div class="container py-5" id="reloadableSection">
            @include('admin.clients.comments')
            <div class="row">

                <div class="col-md-12 col-lg-12 col-xl-12">
                    <div class="row">
                        <div class="col-3">
                            <p class="h4">{{ $data->name }}</p>
                        </div>

                        <div class="col-3">
                            {{ $data->phone }}
                        </div>
                        <div class="col-3">
                            {{ $data->status->name }}
                        </div>

                        <div class="col-3">
                            <a class="dropdown-item" href="#" data-toggle="modal"
                                data-target="#changeStatus{{ $data->uuid }}"> <i
                                    class="fa fa-venus-mars text-info mr-2"></i> تغير حاله العميل </a>
                            @include('admin.clients.changeStatus2')
                        </div>

                    </div>
                    <hr>
                    <ul class="list-unstyled">

                        <div id="chatContainer" class="list-unstyled" style="max-height: 500px; overflow-y: auto;">

                            @foreach ($data->messages as $sender)
                                @if ($sender->type == 'sender_messages')
                                    <li class="d-flex justify-content-between mb-4">
                                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
                                            class="rounded-circle d-flex align-self-start me-3 shadow-1-strong"
                                            width="60">
                                        <div class="card w-100">
                                            <div class="card-header d-flex justify-content-between p-3">
                                                <p class="fw-bold mb-0">
                                                    @if (auth('web')->check())
                                                        {{ auth('web')->user()->name }}
                                                    @elseif(auth('subscriber')->check())
                                                        {{ auth('subscriber')->user()->name }}
                                                    @else
                                                        {{ auth('employee')->user()->name }}
                                                    @endif
                                                </p>
                                                <p class="text-muted small mb-0"><i class="far fa-clock"></i>
                                                    { {{ $sender->created_at->format('d-m-Y (g:i A)') }}</p>

                                                <p class="fw-bold mb-0">
                                                    {{ $sender->type_messages == 'boot' ? '(البوت)' : '(المودريتور)' }}</p>
                                            </div>
                                            <div class="card-body">
                                                <p class="mb-0">
                                                    {{ $sender->messages }}
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                @else
                                    <li class="d-flex justify-content-between mb-4">
                                        <div class="card w-100">
                                            <div class="card-header d-flex justify-content-between p-3">
                                                <p class="fw-bold mb-0">{{ $data->name }}</p>
                                                <p class="text-muted small mb-0">
                                                    <i class="far fa-clock">

                                                    </i>
                                                    { {{ $sender->created_at->format('d-m-Y (g:i A)') }}
                                                </p>

                                            </div>
                                            <div class="card-body">
                                                <p class="mb-0">
                                                    {{ $sender->messages }}
                                                </p>
                                            </div>
                                        </div>

                                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
                                            class="rounded-circle d-flex align-self-start ms-3 shadow-1-strong"
                                            width="60">
                                    </li>
                                @endif
                            @endforeach


                        </div>
                        <input type="hidden" value="{{ $data->uuid }}" id="id_client_id">
                        <li class="bg-white mb-3">
                            <div class="form-outline">
                                <textarea class="form-control" id="textAreaExample2" required rows="4"></textarea>
                            </div>
                        </li>
                        <button id="sendMessageBtn" class="btn btn-info btn-rounded float-end">
                            ارسال رساله خاصه
                        </button>


                    </ul>

                </div>

            </div>

        </div>
    </section>
@endsection


@section('js')
    <script>
        $(document).ready(function() {
            $('#sendMessageBtn').click(function() {
                var message = $('#textAreaExample2').val();
                var id = $('#id_client_id').val();

                if (message === '') {
                    alert('يجب إدخال قيمة في حقل النص.');
                    return;
                }

                // تعطيل الزر أثناء عملية الإرسال لتجنب تكرار الإرسال
                $('#sendMessageBtn').attr('disabled', 'disabled');

                $.ajax({
                    url: '{{ route('sendMessages') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        message: message
                    },
                    success: function(response) {
                        alert('تم الارسال');
                        location.reload();

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('حدث خطأ أثناء الإرسال');

                        // إعادة تفعيل الزر بعد حدوث خطأ
                        $('#sendMessageBtn').removeAttr('disabled');
                    }
                });
            });
        });
    </script>



    <script>
        var chatContainer = document.getElementById("chatContainer");


        function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }


        window.onload = scrollToBottom;


        var sendMessageBtn = document.getElementById("sendMessageBtn");
        sendMessageBtn.addEventListener("click", scrollToBottom);
    </script>


    <script>
        $(document).ready(function() {
            $('#add_new_replay').click(function() {
                var client_id = $('#client_id').val();
                var name_client = $('#name_client').val();

                if (name_client === '') {
                    alert('يجب إدخال قيمة في حقل النص.');
                    return;
                }

                // تعطيل الزر أثناء عملية الإرسال لتجنب تكرار الإرسال
                $('#add_new_replay').attr('disabled', 'disabled');

                $.ajax({
                    url: '{{ route('updateNameClient') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: client_id,
                        message: name_client
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'عمليه ناجحة',
                            text: 'تم تعديل اسم العميل بشكل صحيح',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('حدث خطأ أثناء الإرسال');

                        // إعادة تفعيل الزر بعد حدوث خطأ
                        $('#add_new_replay').removeAttr('disabled');
                    }
                });
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            $('#add_new_date_tracking').click(function() {
                var client_id = $('#client_id').val();
                var name_client = $('#date_client').val();

                if (name_client === '') {
                    alert('يجب إدخال قيمة في حقل النص.');
                    return;
                }

                // تعطيل الزر أثناء عملية الإرسال لتجنب تكرار الإرسال
                $('#add_new_date_tracking').attr('disabled', 'disabled');

                $.ajax({
                    url: '{{ route('updateDateTrackingClient') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: client_id,
                        message: name_client
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'عمليه ناجحة',
                            text: 'تم تعين تاريخ متابعه العميل بشكل صحيح',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('حدث خطأ أثناء الإرسال');

                        // إعادة تفعيل الزر بعد حدوث خطأ
                        $('#add_new_date_tracking').removeAttr('disabled');
                    }
                });
            });
        });
    </script>



    <script>
        $(document).ready(function() {
            $('#add_new_date_notes').click(function() {
                var client_id = $('#client_id').val();
                var name_client = $('#notes_clients').val();

                if (name_client === '') {
                    alert('يجب إدخال قيمة في حقل النص.');
                    return;
                }

                // تعطيل الزر أثناء عملية الإرسال لتجنب تكرار الإرسال
                $('#add_new_date_notes').attr('disabled', 'disabled');

                $.ajax({
                    url: '{{ route('updateNotesClient') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: client_id,
                        message: name_client
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'عمليه ناجحة',
                            text: 'تم  اضافه الملاحظه بشكل صحيح',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('حدث خطأ أثناء الإرسال');

                        // إعادة تفعيل الزر بعد حدوث خطأ
                        $('#add_new_date_notes').removeAttr('disabled');
                    }
                });
            });
        });
    </script>



    <script>
        $(document).ready(function() {
            $('#add_new_classification').click(function() {
                var client_id = $('#client_id').val();
                var name_client = $('#classification_id').val();

                if (name_client === null || name_client === '') {
                    alert('يجب اختيار قيمة من القائمة.');
                    return;
                }

                // تعطيل الزر أثناء عملية الإرسال لتجنب تكرار الإرسال
                $('#add_new_classification').attr('disabled', 'disabled');

                $.ajax({
                    url: '{{ route('updateclassificationClient') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: client_id,
                        message: name_client
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'عمليه ناجحة',
                            text: 'تم  اضافه الملاحظه بشكل صحيح',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        location.reload();

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('حدث خطأ أثناء الإرسال');

                        // إعادة تفعيل الزر بعد حدوث خطأ
                        $('#add_new_date_notes').removeAttr('disabled');
                    }
                });
            });
        });
    </script>
@endsection