@extends('layouts.admin')

@section('content')
    <div class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('tickets') }}">Tickets</a>
                                </li>
                                <li class="breadcrumb-item" aria-current="page">Chat</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">#{{ $ticket->ticketNumber }} </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body pt-2">
                            @include('include.flash-message')

                            <div class="dropdown">
                                <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    Details
                                </button>
                                <div class="dropdown-menu border p-5 table-responsive" aria-labelledby="dropdownMenuButton1">
                                    <table class="table">
                                        <tr>
                                            <td>Ticket No.</td>
                                            <td>{{ $ticket->ticketNumber }}</td>
                                        </tr>
                                        <tr>
                                            <td>Priority</td>
                                            <td>{{ $ticket->priority }}</td>
                                        </tr>
                                        <tr>
                                            <td>Regarding</td>
                                            <td>{{ $ticket->regarding }}</td>
                                        </tr>
                                        <tr>
                                            <td>User</td>
                                            <td>
                                                @isset($ticket->user)
                                                    {{ $ticket->user->firstName . ' ' . $ticket->user->lastName }}
                                                @endisset
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Subject</td>
                                            <td>{{ $ticket->subject }}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <a href="{{ route('ticket-details', ['ticket' => $ticket->id]) }}" data-bs-toggle="tooltip" data-bs-original-title="Click for more information.">more</a>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>


                            <div class="mt-4">
                                <form id="chat-form" action="{{ route('add-ticket-chat') }}" method="post">
                                    @csrf
                                    <div class="input-group">
                                        <input id="chat-input" type="text" class="form-control" name="message" placeholder="Your reply...">
                                        <input type="hidden" id="alsoClose" name="alsoClose" value="0">
                                        <input type="hidden" name="ticketId" value="{{ $ticket->id }}">
                                        <button class="btn btn-outline-secondary" onclick="send(0)">Send</button>
                                        <button class="btn btn-outline-secondary" onclick="send(1)">Send & Close</button>
                                    </div>
                                </form>
                            </div>

                            <div id="chat-div" class="my-3">
                                @if (count($chat) > 0)
                                    @foreach ($chat as $item)
                                        @if ($myId == $item->userId)
                                            <div class="my-2 border rounded-3 px-2">
                                                <div class="row">
                                                    <div class="col-md-6 p-3">
                                                        <strong>You</strong>
                                                    </div>
                                                    <div class="col-md-6 d-flex justify-content-end text-muted border-0 p-3 f-14 text-lowercase">
                                                        {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 p-3">
                                                        {{ $item->message }}
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="mb-3 border rounded-3 px-2">
                                                <div class="row">
                                                    <div class="col-md-6 p-3">
                                                        <strong>
                                                            @isset($item->sender)
                                                                {{ $item->sender->firstName . ' ' . $item->sender->lastName }}
                                                            @endisset
                                                        </strong>
                                                    </div>
                                                    <div class="col-md-6 d-flex justify-content-end text-muted p-3 border-0 f-14 text-lowercase">
                                                        {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 p-3">
                                                        {{ $item->message }}
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var page = '{{ $page }}';
        var ticketId = '{{ $ticket->id }}';

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() + window.innerHeight == $(document).height()) {
                    let url = "{{ route('ticket-chat', ['ticket' => 'arg1']) }}";

                    url = url.replace('arg1', '{{$ticket->id}}');

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            page: Number(page),
                            ajax: 'yes'
                        },
                        success: function(result) {
                            page++;
                            $('#chat-div').append(result)
                        }
                    })
                }
            });

            $("#chat-input").on("keypress", function(e){
                if(e.which == 13){
                    alert()
                }
            });
        });

        function send(flag) {
            if (flag == 1) {
                $('#alsoClose').val(1);
            }

            $('#chat-form').submit();
        }
    </script>

@endsection