@extends('wallet.layouts.master')
@section('title','Support Tickets')
@section('page-css')

@endsection
@section('content')
    <div class="pt-24">
            <h2 class='fw-bold fs-2 col-lg-9 mx-auto'>Support Tickets</h2>
        </div>
        <div class="mt-32">
            <div class="shadow col-lg-9 mx-auto messagesBox bg-inf">
                <div class="chat-header">
                    <div class="d-flex align-items-center justify-content-between">
                        @if(Auth::user()->hasRole("Company"))
                        <div class="left">
                            <h5>{{ $ticket->user->fname ?? '' }} {{ $ticket->user->lname ?? '' }}</h5>
                            <p><small class="fs-12 text-clr">{{ $ticket->user->email ?? '' }}</small></p>
                        </div>
                        <div class="right-block d-flex gap-2 align-items-center">
                            <div>
                                @if ($ticket['status'] == 0)
                                    <button class="btn btn-primary rounded-5 d-flex align-items-center justify-content-center" title="Open this Ticket" id="update_ticket_status" onclick="update_ticket_status(`{{ $ticket['id'] }}`,1)"><span class="material-symbols-outlined">lock_open</span></button>
                                @else
                                    <button class="btn btn-primary rounded-5 d-flex align-items-center justify-content-center" title="Close this Ticket" id="update_ticket_status" onclick="update_ticket_status(`{{ $ticket['id'] }}`,0)"><span class="material-symbols-outlined">lock</span></button>
                                @endif
                            </div>
                            <div class="ms-2 dropdown">
                                <button title="Click to see more" class="dropdown-toggle bg-black d-flex align-items-center justify-content-center" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                    <span class="material-symbols-outlined">more_vert</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end py-0 rounded-4 overflow-hidden shadow-lg" style="min-width: 13rem;">
                                    <li><a class="dropdown-item bg-black">Ticket No. <b>{{$ticket['id']}}</b></a></li>
                                    <li><a class="dropdown-item bg-black">Subject: <b>{{$ticket['subject']}}</b></a></li>
                                    <li>
                                        <span title="{{$ticket->status ? 'To close this ticket click on Lock.' : 'To open this ticket click on Lock.'}}" class="{{$ticket->status ? 'bg-green' : 'bg-danger'}} py-1 pb-2 px-3 w-100 text-white d-block">Status: <b>{{$ticket->status ? 'Open' : 'Close'}}</b></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        @else
                        <div class="right-block ms-auto">
                            <div class="ms-2 dropdown">
                                <button title="Click to see more" class="dropdown-toggle bg-black d-flex align-items-center justify-content-center" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                    <span class="material-symbols-outlined">more_vert</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end py-0 rounded-4 overflow-hidden shadow-lg" style="min-width: 13rem;">
                                    <li><a class="dropdown-item bg-black">Ticket No. <b>{{$ticket['id']}}</b></a></li>
                                    <li><a class="dropdown-item bg-black">Subject: <b>{{$ticket['subject']}}</b></a></li>
                                    <li>
                                        <span title="{{$ticket->status ? 'To close this ticket click on Lock.' : 'To open this ticket click on Lock.'}}" class="{{$ticket->status ? 'bg-green' : 'bg-danger'}} py-1 pb-2 px-3 w-100 text-white d-block">Status: <b>{{$ticket->status ? 'Open' : 'Close'}}</b></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="row g-0 mainChat">
                    <div class="col-12">
                        <div class="position-relative p-20 pb-0">
                            <div class="chat-messages p-4">
                                @foreach ($ticket_messages as $chat)
                                @php
                                    $createdAt = \Carbon\Carbon::parse($chat['created_at']);
                                @endphp
                                @if ( $chat['sender'] == Auth::user()->id)
                                    <div class="chat-message-right pb-3 ms-auto">
                                        <div class="d-flex flex-column">
                                            <div class="text-secondary fs-12 text-nowrap text-end pb-1">
                                                <span class="fw-bold pe-1 text-light">You: </span><span>{{ $createdAt }}</span>
                                            </div>
                                            <div class="flex-shrink-1 mr-3 actualMsg">
                                                @if($chat['type'] == 'file')
                                                    @php
                                                        $file_name=explode('_',$chat['message']);
                                                        if(isset($file_name[1])){
                                                            $file_name=$file_name[1];
                                                        }else{
                                                            $file_name='';
                                                        }
                                                    @endphp
                                                    <a href="{{asset($chat['message'])}}" target="_blank">{{$file_name}} <i class="fa fa-paperclip"></i></a>
                                                @elseif($chat['type'] == 'image')
                                                    <a href="{{asset($chat['message'])}}" target="_blank"><img class="rounded" height="100px" width="100px" style="object-fit: contain" src="{{asset($chat['message'])}}"></a>
                                                @else
                                                    {{ $chat['message']}}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @else
                                    <div class="chat-message-left pb-3">
                                        <div class="d-flex flex-column">
                                            <div class="text-secondary fs-12 text-nowrap text-start pb-1">
                                                @if (Auth::user()->hasRole('User'))
                                                <span class="fw-bold pe-1 text-light">Support: </span>
                                                @else
                                                <span class="fw-bold pe-1 text-light">{{ $chat->sender_user->fname }}: </span>
                                                @endif
                                                <span>{{$createdAt}}</span>
                                            </div>
                                            <div class="flex-shrink-1 mr-3 actualMsg">
                                                @if($chat['type'] == 'file')
                                                    <a href="{{asset($chat['message'])}}" target="_blank"><i class="fa fa-paperclip"></i> view file</a>
                                                @elseif($chat['type'] == 'image')
                                                    <a href="{{asset($chat['message'])}}" target="_blank"><img class="rounded" height="100px" width="100px" style="object-fit: contain" src="{{asset($chat['message'])}}"></a>
                                                @else
                                                    {{ $chat['message']}}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="chatPrompt">
                            <form id="send_ticket_message">
                                <div class="input-group">
                                    <input type="hidden" value="{{ $ticket->id }}" id="ticket_id">
                                    @if (Auth::user()->hasRole('User'))
                                    <input type="hidden" value="{{ Auth::user()->company_id }}" id="to_user_id">
                                    @else
                                    <input type="hidden" value="{{ $ticket->user_id }}" id="to_user_id">
                                    @endif
                                    <div class=" w-100 d-flex align-items-center justify-content-between gap-2">
                                        <div class="file-uploader m-0 border-0 w-100">
                                            <div class="">
                                                <div class="d-flex align-items-end gap-2 chat_input_wrapper">
                                                    <textarea type="text" rows="1" id="message" required class="border-0 w-100" placeholder="Write a message"></textarea>
                                                    <button type="submit" class="" id="send_message_btn">
                                                        <span class="material-symbols-outlined">send</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!------Modals------>
        <div class="modal fade" id="add_ticket_modal" tabindex="-1" aria-labelledby="add_ticket_modalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content p-8">
                    <div class="modal-header border-0 pb-2">
                        <h6 class="modal-title fw-bold" id="add_ticket_modalLabel">Create new ticket</h6>
                        <button type="button" class="btn-close invert" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <div>
                            <div class="col-12">
                                <form id="save_ticket">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" required name="subject" id="subject">
                                                <label for="subject">Subject</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <select id="urgency">
                                                    <option value="Low">Low</option>
                                                    <option value="Medium">Medium</option>
                                                    <option value="High">High</option>
                                                </select>
                                                <label for="urgency">Urgency</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="floating-input">
                                                <textarea rows="6" id="message"></textarea>
                                                <label for="message">Message</label>
                                            </div>
                                        </div>
                                    </div>
                                    <button class='button w-100 px-5' id="save_ticket_btn" type='submit'>Submit</button>
                                </form>
                                <p class="mt-2">Please note that support tickets are usually answered within 24 hours,
                                    depending on the urgency of the ticket.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('script')
<script>
    $(function () {
        var ChatDiv = $('.chat-messages');
        var height = ChatDiv[0].scrollHeight;
        ChatDiv.scrollTop(height);
    });
    
    $(document).ready(function () {
        var maxRows = 4;
        var lineHeight = parseInt($(".chat_input_wrapper #message").css('line-height'));
        $(".chat_input_wrapper #message").on('input', function () {
            this.style.height = 'auto';
            var rows = this.value.split("\n").length;
            if (rows <= maxRows) {
                this.style.height = (this.scrollHeight) + 'px';
            } else {
                this.style.height = (lineHeight * maxRows) + 'px';
            }
        });
    });

</script>
@endsection