@extends('layouts.menu')

@section('tittle')
    COMENTARIOS IT
@endsection

@section('contenido')
    <style>
        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            width: 5px;
            background: #f5f5f5;
        }

        ::-webkit-scrollbar-thumb {
            width: 1em;
            background-color: #ddd;
            outline: 1px solid slategrey;
            border-radius: 1rem;
        }

        .text-small {
            font-size: 0.9rem;
        }

        .messages-box,
        .chat-box {
            height: 510px;
            overflow-y: scroll;
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        input::placeholder {
            font-size: 0.9rem;
            color: #999;
        }

        .chatBox-overflow {
            overflow: hidden;
        }

        #messageBox {
            overflow: auto;
        }
    </style>

    <div class="row">
        <div class="col-lg-12">
            <div class="card card-table comman-shadow shadow-lg bg-comentarios">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3>COMENTARIO TICKET</h3>
                        </div>
                    </div>
                    <br>
                    <div class="card-body rounded-lg" style="background: rgba(0, 0, 0, 0.063)">
                        <div class="row p-1">
                            @foreach ($ticketData as $ticket)
                                <input type="hidden" id="secuencia_id" value="{{ $ticket->id_secuencia }}">
                                <div class="col-lg-5 shadow">
                                    <div class="row asuntoSection">
                                        <div class="form-group">
                                            <label for="" class="col-form-label" for="asuntoBox">Asunto:</label>
                                            <input type="text" class="form-control form-control-sm" name="asuntoBox"
                                                id="asuntoBox" value="{{ $ticket->asunto }}" readonly>
                                        </div>
                                    </div>
                                    <div class="row descripcionSection">
                                        <div class="form-group">
                                            <label for="" class="col-form-label"
                                                for="descripcionBox">Descripcion:</label>
                                            <textarea style="height: 440px" name="descripcionBox" id="descripcionBox" class="form-control" cols="8"
                                                rows="15" readonly>{{ $ticket->descripcion }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <div class="col-lg-7 shadow chatBox-overflow">
                                @foreach ($ticketData as $ticket)
                                    <div class="py-2 px-4 border-bottom d-none d-lg-block">
                                        <div class="d-flex align-items-center py-1">
                                            <div class="position-relative">
                                                <img src="{{ URL::asset('/assets/img/profiles/avatar-01.png') }}"
                                                    class="rounded-circle mr-1" alt="Profile Picture" width="40"
                                                    height="40">
                                            </div>
                                            <div class="flex-grow-1 pl-3">
                                                @if ($ticket->id_creado_por == Session::get('user_id'))
                                                    <strong>{{ $ticket->fullName_asignado_por }}</strong>
                                                @else
                                                    <strong>{{ $ticket->fullName_creado_por }}</strong>
                                                @endif
                                            </div>
                                            <div>

                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="px-4 py-5 chat-box bg-white" id="messagesBox">

                                    @if (count($commentsData) != 0)
                                        @foreach ($commentsData as $comment)
                                            @if ($comment->id_enviado_por == Session::get('user_id'))
                                                <!-- Sender Message-->
                                                <div class="media w-100 mb-2 d-flex justify-content-end">
                                                    <div class="media-body ml-3">
                                                        <div class="bg-light rounded py-2 px-3 mb-2">
                                                            <p class="text-small mb-0 text-black">{{ $comment->comentario }}
                                                            </p>
                                                        </div>
                                                        <small
                                                            class="form-text text-muted d-flex justify-content-end">{{ $comment->fecha_hora_creado }}</small>
                                                    </div>
                                                </div>
                                            @else
                                                <!-- Reciever Message-->
                                                <div class="media w-100 ml-auto mb-2 d-flex justify-content-start">
                                                    <div class="media-body">
                                                        <div class="bg-primary rounded py-2 px-3 mb-2">
                                                            <p class="text-small mb-0 text-black">{{ $comment->comentario }}
                                                            </p>
                                                        </div>
                                                        <small
                                                            class="form-text text-muted d-flex justify-content-start">{{ $comment->fecha_hora_creado }}</small>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @else
                                        <div class="media w-100 ml-auto mb-2 d-flex justify-content-center">
                                            <div class="media-body">
                                                <div class="bg-primary rounded py-2 px-3 mb-2">
                                                    <p class="text-small mb-0 text-black">No hay ningún comentario!</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                </div>

                                <!-- Typing area -->
                                <div id="messageArea">
                                    @foreach ($ticketData as $ticket)
                                        @if ($ticket->estado == 2 or $ticket->estado == 3 or $ticket->estado == 4)
                                            <div
                                                class="card-footer text-muted d-flex justify-content-start align-items-end p-3">
                                                <textarea class="form-control form-control-lg comentarioBox" id="comentarioBox" placeholder="Escribe un comentario..."
                                                    rows="3"></textarea>
                                                <a class="ms-3 btn btn-primary" id="btnComment" href="#"><i
                                                        class="fas fa-paper-plane"></i></a>
                                            </div>
                                        @else
                                            <div class="card-footer text-muted d-flex align-items-center p-3">
                                                <p class="text-center"><b>Ya no puedes realizar comentarios a esta
                                                        Solicitud!</b></p>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            scrollDownChat();

            $(document).on("click", "#btnComment", function(e) {
                e.preventDefault();

                var secuencia_id = $('#secuencia_id').val();
                var comment = $('#comentarioBox').val();
                /* POST COMMENT */
                if (!$.trim($("#comentarioBox").val())) {} else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr('content'));
                                }
                            },
                            url: "{{ url('/api/saveComment') }}",
                            type: "POST",
                            data: {
                                secuencia_id: secuencia_id,
                                comment: comment
                            },
                            success: function(data) {
                                console.log(data.disponibilidad);
                                if (data.disponibilidad == "disponible") {
                                    $('#comentarioBox').val('');
                                    $('#messagesBox').load(" #messagesBox");

                                    scrollDownChat();

                                    try {
                                        $.ajax({
                                            beforeSend: function(xhr, type) {
                                                if (!type.crossDomain) {
                                                    xhr.setRequestHeader(
                                                        'X-CSRF-Token',
                                                        $(
                                                            'meta[name="csrf-token"]'
                                                        )
                                                        .attr('content'));
                                                }
                                            },
                                            url: "{{ url('/api/notification/comment') }}",
                                            type: "POST",
                                            data: {
                                                secuencia_id: secuencia_id,
                                                comment: comment
                                            },
                                            success: function(data) {},
                                        });
                                    } catch (error) {
                                        Swal.fire("", "Error: " + error, "error");
                                    }
                                } else {
                                    Swal.fire("",
                                        "Ya no puedes realizar comentarios a esta solicitud!",
                                        "warning");
                                    $('#messageArea').load(" #messageArea");
                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }

            });

            /* SCROLL DOWN CHAT AUTOMATIC */
            function scrollDownChat() {
                $('#messagesBox').scrollTop($('#messagesBox')[0].scrollHeight);
            }

            /* (function foo() {
                $('#messagesBox').load(" #messagesBox");
                scrollDownChat();
                setTimeout(foo, 5000);
            })(); */
        });
    </script>
@endsection