@extends('voyager::master')

@section('page_title', __('voyager::generic.view').' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i> {{ __('voyager::generic.viewing') }} {{ ucfirst($dataType->getTranslatedAttribute('display_name_singular')) }}
        &nbsp;

        @can('edit', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
                <i class="glyphicon glyphicon-pencil"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
            </a>
        @endcan
        @can('delete', $dataTypeContent)
            @if($isSoftDeleted)
                <a href="{{ route('voyager.'.$dataType->slug.'.restore', $dataTypeContent->getKey()) }}"
                   title="{{ __('voyager::generic.restore') }}" class="btn btn-default restore"
                   data-id="{{ $dataTypeContent->getKey() }}" id="restore-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.restore') }}</span>
                </a>
            @else
                <a href="javascript:;" title="{{ __('voyager::generic.delete') }}" class="btn btn-danger delete"
                   data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                </a>
            @endif
        @endcan
        @can('browse', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
                <i class="glyphicon glyphicon-list"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.return_to_list') }}</span>
            </a>
        @endcan
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('css')
    <style>
        .chat-box {
            width: 100%;
            margin: auto;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .chat-header {
            background: #222;
            color: white;
            padding: 15px;
            text-align: center;
        }
        .chat-messages {
            height: 400px;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }
        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 10px;
            max-width: 80%;
        }
        .sent {
            background: #0b93f6;
            color: white;
            align-self: flex-end;
        }
        .received {
            background: #e5e5ea;
            align-self: flex-start;
        }
        .chat-input {
            display: flex;
            border-top: 1px solid #ddd;
        }
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: none;
        }
        .chat-input button {
            padding: 10px;
            background: #0b93f6;
            color: white;
            border: none;
        }
        .loading {
            text-align: center;
            display: none;
        }
    </style>
@endsection

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered" style="padding-bottom:5px;">
                    <!-- form start -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.user1_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->user1->name }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.user2_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->user2->email }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-body" style="padding-top:20px;">
                        <div class="chat-box">
                        <!-- Conversation Title -->
                        <div class="chat-header">
                            <h3><i class="fa fa-comments"></i> {{ __('voyager::generic.conversation_messages') }}</h3>
                        </div>

                        <!-- Message List -->
                        <div id="chat-messages" class="chat-messages">
                            <div id="loading" class="loading">Loading...</div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"><i
                            class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}
                        ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="{{ __('voyager::generic.delete_confirm') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    @if ($isModelTranslatable)
        <script>
            $(document).ready(function () {
                $('.side-body').multilingual();
            });
        </script>
    @endif
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                // Save form action initial value
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });

    </script>

    <script>
        let conversationId = '{{ $dataTypeContent->id }}';
        let nextPageUrl = "/admin-panel/conversations/" + conversationId + "/messages";
        let chatBox = document.getElementById("chat-messages");

        function loadMessages() {
            if (!nextPageUrl) return;

            document.getElementById("loading").style.display = "block";

            fetch(nextPageUrl)
                .then(response => response.json())
                .then(data => {
                    let messagesHTML = "";
                    data.messages.reverse().forEach(msg => {
                        messagesHTML += `<div class="message ${msg.sender_id == {{ $dataTypeContent->user1_id }} ? 'sent' : 'received'}">
                        <p>${msg.message}</p>
                        <span>${new Date(msg.created_at).toLocaleTimeString()}</span>
                    </div>`;
                    });

                    chatBox.innerHTML = messagesHTML + chatBox.innerHTML;

                    nextPageUrl = data.next_page_url;
                    document.getElementById("loading").style.display = "none";
                });
        }

        chatBox.addEventListener("scroll", function () {
            if (chatBox.scrollTop === 0) {
                loadMessages();
            }
        });

        loadMessages();
    </script>
@stop