@extends('layouts.admin.main')

@section('title')
    <title>{{ adminPageTitle('Feedback List') }}</title>
@endsection

@section('page-specific-styles')
<!-- datatable css -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.dataTables.css') }}">
<!-- responsive bootstrap css -->
<link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/responsive.bootstrap4.min.css') }}">
@endsection
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Feedbacks</h1>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content feedback-wrapper">
            <div class="container-fluid">
                <div class="card-body table-responsive-md">
                    <table class="table table-bordered dt-responsive nowrap vertical_middle" id="feedbackTable">
                        <thead class="thead-light">
                          <tr>
                            <th scope="col" width="5%">Sno.</th>
                            <th scope="col" width="20%">User Name</th>
                            <th scope="col" width="20%">Email</th>
                            <th scope="col" width="10%">Device Type</th>
                            <th scope="col" width="40%">Description</th>
                            <th scope="col" width="5%">Action</th>
                          </tr>
                        </thead>
                        <tbody>
                            @foreach($feedbacks as $key => $feedback)    
                          <tr>
                            <th scope="row">{{ ++$key }}</th>
                            <td>{{ $feedback->user_name }}</td>
                            <td>{{ $feedback->email }}</td>
                            <td>{{ $feedback->device_type }}</td>
                            @if(strlen($feedback->description) < 50)
                                <td>{{ $feedback->description }}</td>          
                            @else
                                <td>{{ substr($feedback->description, 0, 20)."..." }}<a href="javascript:;" data-toggle="tooltip" title="{{ $feedback->description }}" data-bs-html="true">Read More</a></td>          
                            @endif
                            <!-- <td>
                                {{ strlen($feedback->description) > 10 ? substr($feedback->description, 0, 10)."...."  : $feedback->description  }}
                                <a type="button" class="read-more-btn btn-sm" data-toggle="modal" data-user_name="{{ $feedback->user_name }}" data-email="{{ $feedback->email }}" data-description="{{ $feedback->description }}" data-device_type="{{ $feedback->device_type }}" data-target="#readMore">
                                    Read More
                                </a>
                            </td> -->
                            <td>                                
                                <button type="button" class="btn btn-warning read-modal-btn" data-toggle="modal" data-reply="{{ $feedback->reply }}" data-url="{{ route('admin.feedback.reply',['id' => $feedback->id ]) }}" data-target="#replyModal">
                                    Reply
                                </button>
                            </td>  
                          </tr>
                        @endforeach  
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- View Feedback Modal -->
    <div class="modal fade" id="readMore" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">View Feedback</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{-- <div class="form-group">
                            <label for="">Name</label>
                            <input type="text" class="form-control" id="userName" value="" readonly>
                        </div>
                        <div class="form-group">
                            <label for="">Email</label>
                            <input type="text" class="form-control" id="userEmail" value="" readonly>
                        </div> --}}
                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea type="text" class="form-control" id="userDescription" value="" readonly rows="10"></textarea>
                        </div>
                        {{-- <div class="form-group">
                            <label for="">Device Type: </label>
                            <span id="userDeviceType"></span>
                        </div> --}}
                    </div>
            </div>
        </div>
    </div>

    <!-- Reply Feedback Modal -->
    <div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <input type="hidden" id="replyUrl" url="">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">View Feedback</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="">Reply</label>
                        <textarea type="text" class="form-control" id="userReply" value=""></textarea>
                        <span class="text-danger" id="userReplyError"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary reply-btn">Send</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-scripts')
<!-- datatable cdn -->
<script type="text/javascript" charset="utf8" src="{{ asset('js/jquery.dataTables.js') }}"></script>
<!-- sweetalert cdn -->
<script type="text/javascript" charset="utf8" src="{{ asset('js/sweetalert.min.js') }}"></script>
<!-- Responsive datatable -->
<script type="text/javascript" charset="utf8" src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
<script type="text/javascript" charset="utf8" src="{{ asset('js/responsive.bootstrap4.min.js') }}"></script>
<script>
$(document).ready( function () {
    // $('#feedbackTable').DataTable();

    $('#feedbackTable').DataTable({
        dom: '<"top"i>rt<"bottom"flp><"clear">',
        searching: false,
        bInfo : false,
        language: {
            paginate: {
              next: '»', // or '→'
              previous: '«' // or '←' 
            }
        }
    });

    $(document).on('click','.read-more-btn',function(){
        clearReadMoreFunction();
        let userName = $(this).data('user_name');
        let email = $(this).data('email');
        let description = $(this).data('description');
        let deviceType = $(this).data('device_type');
        fillReadMoreForm(description,userName,email,deviceType);
    }); 
    
    $(document).on('click','.read-modal-btn',function(){
        clearReadMoreFunction();
        let reply = $(this).data('reply');
        let url = $(this).data('url');
        $('#replyUrl').attr('url',url);
        $('#userReply').val(reply);
    });    

    $(document).on('click','.reply-btn',function(e){
        $('#userReplyError').text('');
        $(this).prop('disabled', true);
        e.preventDefault();
        let url = $('#replyUrl').attr('url');
        let reply = $('#userReply').val();
        let data = {
            '_method': 'PUT',
            'reply': reply,
        };
        $.ajax({
           type:'POST',
           url:url,
           timeout: 30000,
           data:data,
           success:function(data){
              if(data.success){
                $('button').prop('disabled', false);
                $('#replyModal').modal('hide');
                swal("success","Reply mail sended successfully");
              } else {
                
                $('#userReplyError').text(data.data.reply[0]);
                $('button').prop('disabled', false);

              }
              
           }
        });
    });    
});

function clearReadMoreFunction() {
    $('#userDescription').val('');
    $('#userName').val('');
    $('#userEmail').val('');
    $('#userDeviceType').text('');
    $('#userReply').val('');
    $('#replyUrl').attr('url','');
    $('#userReplyError').text('');
}

function fillReadMoreForm(description,userName,email,deviceType) {
    $('#userDescription').val(description);
    $('#userName').val(userName);
    $('#userEmail').val(email);
    $('#userDeviceType').text(deviceType);
}
</script>
@endsection