@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')
    <section style="background-color: #eee;">
        <div class="container py-5">

            <div class="row">

                <div class="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">

                    <h5 class="font-weight-bold mb-3 text-center text-lg-start">الاعضاء داخل القناه</h5>

                    <div class="card">
                        <div class="card-body">

                            <ul class="list-unstyled mb-0" style="max-height: 400px; overflow-y: auto;">
                                @foreach($data as  $row)
                                    <li class="p-2 border-bottom">
                                        <a href="{{route('get_channels_messages',[$row->uuid,$id_cahnel])}}" class="d-flex justify-content-between">
                                        <div class="d-flex flex-row">
                                                <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
                                                     alt="avatar"
                                                     class="rounded-circle d-flex align-self-center me-3 shadow-1-strong"
                                                     width="60">
                                                <div class="pt-1">
                                                    <p class="fw-bold mb-0">{{$row->name}}</p>
                                                    <p class="fw-bold mb-0">{{$row->phone}}</p>
                                                </div>
                                            </div>
                                            <div class="pt-1">
                                                <span class="badge bg-danger float-end">{{$row->messages_count_noTread()}}</span>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach


                            </ul>

                        </div>
                    </div>

                </div>

                <div class="col-md-6 col-lg-5 col-xl-8">

                    @isset($data_messages)
                        <x-input-label>{{$data_messages->name}}</x-input-label>
                        <x-input-label></x-input-label>
                        <x-input-label>{{$data_messages->phone}}</x-input-label>
                        <ul class="list-unstyled" style="max-height: 500px; overflow-y: auto;" >

                            @foreach($data_messages->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_messages->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



                            <input type="hidden" value="{{$data_messages->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>
                    @endisset


                </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>
@endsection