@extends('layouts/mainLayout')
@section('title', "UGAF Home Care: Issues Tracker")
@include('sideMenu',['page_title' => 'View Issue','sub_page_title' => 'dashboard'])
@section('styles')
<link rel="stylesheet" href="{{URL::asset('assets/libs/swiper/swiper-bundle.min.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}"/>
@endsection
@section('mainContent')
<div class="page-content dark:bg-zinc-700">
    <div class="container-fluid px-[0.625rem]">
        <div class="grid grid-cols-1 mb-5">
            <div class="flex items-center justify-between">
                <h4 class="mb-sm-0 text-lg font-semibold grow text-gray-800 dark:text-gray-100">View Issue</h4>
                <nav class="flex" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
                        <li class="inline-flex items-center">
                            <a href="#" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                                Issues
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <a href="#" class="ltr:ml-1 rtl:mr-1 text-sm font-medium text-gray-500 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">View Issue</a>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class=" grid grid-cols-1">
            <div class="card dark:bg-zinc-800 dark:border-zinc-600">
                <div class="card-body">
                    <div class="flex items-center mb-3">
                       
                        <div class="flex-shrink-0">
                            <div class="mb-4">
                                <h4 class="float-end text-16 text-gray-600 dark:text-gray-100">Issue #{{$issue['id']}}</h4>
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="mb-1 text-gray-700 dark:text-zinc-100">{{$issue['message']}}</p>
                        <hr class="my-5 border-gray-100 dark:border-zinc-600">
                    </div>
                    @if(strlen($issue['files'] > 3))
                    <div>
                        <h4 class="float-end text-16 text-gray-600 dark:text-gray-100">Attachments</h4>
                        @php
                        $issue_files = explode(',',$issue['files']);
                        @endphp
                        @foreach ($issue_files as $file)
                        @if(strlen($file) > 2)
                        <a href="/download/{{$file}}" target="_blank">{{$file}}</a> <br/>
                        @endif
                        @endforeach
                       
                        <hr class="my-5 border-gray-100 dark:border-zinc-600">
                    </div>
                    @endif

                    <div class="grid grid-cols-12">
                        <div class="col-span-4 md:col-span-4">
                            <h6 class="text-15 text-gray-700 mb-3 dark:text-gray-100">Assigned To:</h6>
                            <p class="mb-1 text-gray-600 dark:text-zinc-100">{{$issue['client_name']}}</p>
                            
                        </div>
                        <div class="col-span-4 md:col-span-4">
                            <h5 class="text-15 mb-2 text-gray-700 dark:text-gray-100">Issue Date:</h5>
                            <p class="text-gray-600 dark:text-zinc-100">{{date('F j, Y g:i a',strtotime($issue['date_created']))}}</p>
                        </div>
                        <div class="col-span-4 md:col-span-4">
                            <div class="my-4">
                                <h5 class="text-15 text-gray-700 mb-1 dark:text-gray-100">Member Details:</h5>
                                <p class="mb-1 text-gray-600 dark:text-zinc-100">
                                Name: {{$issue['member_name']}}  | DOB: {{$issue['dob']}}</p>
                            </div>
                        </div>
                    </div>

                    <div class="py-2 mt-3">
                        @if(count($issue['message_thread']) > 0)
                        <h5 class="text-15 text-gray-700 dark:text-gray-100">Message Thread</h5>
                        <div class="card mt-3 dark:border-zinc-600">
                            <div class="p-6">
                                <table class="w-full">
                                    <thead class="border-b border-gray-50 dark:border-zinc-600 ">
                                        <th class="p-3 w-28 text-start text-gray-700 dark:text-gray-100">Send By</th>
                                        <th class="text-start p-3 text-gray-700 dark:text-gray-100">Message</th>
                                        <th class="text-end p-3 w-32 text-gray-700 dark:text-gray-100">Date Sent</th>
                                    </thead>
                                    <tbody>
                                        @foreach ($issue['message_thread'] as $msg)
                                        <tr class="border-b border-gray-50 dark:border-zinc-600 "> 
                                            <td class="text-start p-3 text-gray-700 dark:text-gray-100">{{$msg['client_name']}}</td>
                                            <td class="p-3">
                                                <p class="text-13 text-gray-500 dark:text-zinc-100 mb-0">
                                                    {{$msg['message']}}
                                                </p>
                                            </td>
                                            <td class="text-13 text-gray-500 dark:text-zinc-100 mb-0">
                                               {{$msg['date_added']}}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endif
                    </div>

                    <div>
                        <div class="float-right pb-5 space-x-2">
                            <button type="button" class="btn bg-violet-500 border-violet-500 text-white hover:bg-violet-600 focus:ring ring-violet-50focus:bg-violet-600" data-tw-toggle="modal" data-tw-target="#modal-id_form">Add Reply</button>
                            @if($issue['status'] !='1')
                            <a href="#" class="btn bg-green-500 border-green-500 text-white w-30 shadow-md shadow-green-100 dark:shadow-zinc-600">Mark Completed</a>
                            @endif
                            @if($issue['status'] =='1')
                            <a href="#" class="btn bg-blue-500 border-blue-500 text-white w-30 shadow-md shadow-blue-100 dark:shadow-zinc-600">Reopen</a>
                            @endif
                            <a href="#" class="btn bg-red-500 border-transparent text-white shadow-md shadow-green-200 dark:shadow-zinc-600" title="Delete Issue"><i class="fa fa-trash"></i></a>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal relative z-50 hidden" id="modal-id_form" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 z-50 overflow-y-auto">
        <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity modal-overlay"></div>
        <div class="animate-translate p-4 sm:max-w-lg mx-auto">
            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-zinc-600">
                <div class="bg-white dark:bg-zinc-700">
                    <button type="button" class="absolute top-3 right-2.5 text-gray-400 border-transparent hover:bg-gray-50/50 hover:text-gray-900 dark:text-gray-100 rounded-lg text-sm px-2 py-1 ltr:ml-auto rtl:mr-auto inline-flex items-center dark:hover:bg-zinc-600" data-tw-dismiss="modal">
                        <i class="mdi mdi-close text-xl text-gray-500 dark:text-zinc-100/60"></i>
                    </button>
                     <div class="p-5">
                         
                         <form class="space-y-4" action="#">
                             <div>
                                <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-100 ltr:text-left rtl:text-right">Reply</label>
                                <input type="hidden" id="issue_id" value="{{$issue['id']}}">
                                <textarea name="reply" id="reply" class="bg-gray-800/5 border border-gray-100 text-gray-900 dark:text-gray-100 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-700/50 dark:border-zinc-600 dark:placeholder-gray-400 dark:placeholder:text-zinc-100/60 dark:text-" required></textarea>
                            </div>                                                 
                            <div class="text-sm font-medium text-gray-500 dark:text-zinc-100/60 dark:text-gray-300 mt-4">
                                <a href="#" class="btn text-blue-700 hover:underline dark:text-blue-500" onclick="return addReply();">Send</a>
                            </div>
                         </form>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="{{URL::asset('assets/js/app.js')}}"></script>
<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{URL::asset('js/sweetalert2.all.min.js')}}"></script>
    <script type="text/javascript">
        function deleteIssue(opvalue){
            var id_user = opvalue.id;
            var token = "{{ csrf_token() }}";
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                  if (result) {
                    $.post("/deleteIssue", {action: 'delete', '_token': token, id_user: id_user}, function(message){
                        $("li#" + id_user).remove()
                        Swal.fire('Issue Deleted',message.result,'success');
                    });
                  }
                });
            
            return false;
        } 
        function addReply(){
            var issue_id = $('input#issue_id').val();
            var reply = $('textarea#reply').val();
            console.log(reply);
            var token = "{{ csrf_token() }}";
            $.post("/deleteIssue", {action: 'reply', '_token': token, id_user: issue_id, message: reply}, function(message){
                window.location.href = "/issues/view/" + issue_id;
            });
            return false;
        } 
        </script>
    @endpush