@extends('layouts.admin.main')

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

@section('page-specific-styles')
@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="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body table-responsive-sm">
                                <table class="table table-bordered dt-responsive nowrap vertical_middle " id="feedbackTable" width="100%" cellspacing="0">
                                    <thead class="thead-light">
                                    <tr>
                                        {{-- <th class="no-visible"></th> --}}
                                        <th scope="col">Sno.</th>
                                        <th scope="col">User Name</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Mobile Number</th>
                                        <th scope="col">Device Type</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">Reply</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($feedbacks as $key => $feedback)    
                                    <tr>
                                        {{-- <td></td> --}}
                                        <td>{{ ++$key }}</td>
                                        <td>{{ $feedback->user_name }}</td>
                                        <td><a href="mailto:{{ $feedback->email }}">{{ $feedback->email }}</a></td>
                                        <td><a href="tel:{{ $feedback->mobile_no }}">{{ $feedback->mobile_no }}</a></td>
                                        <td>{{ $feedback->device_type }}</td>
                                        @if(strlen($feedback->description) < 50)
                                            <td>{{ $feedback->description }}</td>          
                                        @else
                                            <td>{{ substr($feedback->description, 0, 20)."..." }}<a class="read-more-text" href="javascript:;" data-toggle="tooltip" title="{{ $feedback->description }}" data-bs-html="true" data-placement="top">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>
                                            @if(isset($feedback->reply))
                                                <a class="read-more-text" href="javascript:;" data-toggle="tooltip" title="{{ $feedback->reply }}" data-bs-html="true" data-placement="top">View Reply</a>
                                            @endif
                                        </td>
                                        <td>     
                                            <!-- <a href="javascript:;" class="edit-btn-table" data-toggle="modal" data-reply="{{ $feedback->reply }}" data-url="{{ route('admin.feedback.reply',['id' => $feedback->id ]) }}" data-target="#replyModal" title="Reply">   -->
                                            <a href="javascript:;" class="edit-btn-table" data-toggle="modal" data-reply="{{ $feedback->reply }}" data-url="{{ route('admin.feedback.reply',['id' => $feedback->id ]) }}"  title="Reply" onclick="openReplyModel({{ $feedback->id }}, `{{ $feedback->reply }}`)">  
                                                <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-reply">
                                                    <path d="M6.598 5.013a.144.144 0 0 1 .202.134V6.3a.5.5 0 0 0 .5.5c.667 0 2.013.005 3.3.822.984.624 1.99 1.76 2.595 3.876-1.02-.983-2.185-1.516-3.205-1.799a8.74 8.74 0 0 0-1.921-.306 7.404 7.404 0 0 0-.798.008h-.013l-.005.001h-.001L7.3 9.9l-.05-.498a.5.5 0 0 0-.45.498v1.153c0 .108-.11.176-.202.134L2.614 8.254a.503.503 0 0 0-.042-.028.147.147 0 0 1 0-.252.499.499 0 0 0 .042-.028l3.984-2.933zM7.8 10.386c.068 0 .143.003.223.006.434.02 1.034.086 1.7.271 1.326.368 2.896 1.202 3.94 3.08a.5.5 0 0 0 .933-.305c-.464-3.71-1.886-5.662-3.46-6.66-1.245-.79-2.527-.942-3.336-.971v-.66a1.144 1.144 0 0 0-1.767-.96l-3.994 2.94a1.147 1.147 0 0 0 0 1.946l3.994 2.94a1.144 1.144 0 0 0 1.767-.96v-.667z"/>
                                                </svg>    
                                            </a>                     
                                        <!-- <button type="button" class="btn btn-warning read-modal-btn reply-btn-table" 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>
                    </div>
                </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 modal-dialog-centered" 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">
                            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M493.297,159.693c-12.477-30.878-31.231-59.828-56.199-84.792c-24.965-24.969-53.917-43.723-84.795-56.2
                                C321.421,6.22,288.611,0,255.816,0c-32.747,0-65.495,6.249-96.311,18.744c-30.813,12.491-59.693,31.244-84.603,56.158
                                c-24.915,24.911-43.668,53.792-56.158,84.607C6.249,190.324,0,223.072,0,255.822c0,32.794,6.222,65.602,18.701,96.485
                                c12.477,30.877,31.231,59.828,56.2,84.792c24.964,24.967,53.914,43.722,84.792,56.199c30.882,12.48,63.69,18.701,96.484,18.703
                                c32.748,0,65.497-6.249,96.315-18.743c30.814-12.49,59.695-31.242,84.607-56.158c24.915-24.912,43.668-53.793,56.158-84.608
                                c12.494-30.817,18.743-63.565,18.744-96.315C512,223.383,505.778,190.575,493.297,159.693z M461.611,339.66
                                c-10.821,26.683-27.018,51.648-48.659,73.292c-21.643,21.64-46.608,37.837-73.291,48.659
                                c-26.679,10.818-55.078,16.241-83.484,16.241c-28.477,0-56.947-5.406-83.688-16.214c-26.744-10.813-51.76-27.008-73.441-48.685
                                C77.37,391.27,61.174,366.255,50.363,339.51c-10.808-26.741-16.214-55.212-16.213-83.689c-0.001-28.405,5.423-56.802,16.24-83.482
                                c10.821-26.683,27.018-51.648,48.659-73.291c21.643-21.64,46.607-37.837,73.289-48.659c26.678-10.818,55.075-16.242,83.48-16.242
                                c28.478,0,56.95,5.405,83.691,16.213c26.745,10.811,51.762,27.007,73.445,48.686c21.678,21.682,37.873,46.697,48.685,73.441
                                c10.808,26.741,16.214,55.211,16.214,83.688C477.852,284.582,472.429,312.98,461.611,339.66z"/>
                        </g>
                    </g>
                    <g>
                        <g>
                            <path d="M279.627,256.001l82.693-82.693c6.525-6.525,6.525-17.102,0-23.627c-6.524-6.524-17.102-6.524-23.627,0L256,232.375
                                l-82.693-82.693c-6.525-6.524-17.102-6.524-23.627,0c-6.524,6.524-6.524,17.102,0,23.627l82.693,82.693l-82.693,82.693
                                c-6.524,6.523-6.524,17.102,0,23.627c6.525,6.524,17.102,6.524,23.627,0L256,279.628l82.693,82.693
                                c6.525,6.524,17.102,6.524,23.627,0c6.525-6.524,6.525-17.102,0-23.627L279.627,256.001z"/>
                        </g>
                    </g>
                </svg>
                        </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 modal-dialog-centered" 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">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M493.297,159.693c-12.477-30.878-31.231-59.828-56.199-84.792c-24.965-24.969-53.917-43.723-84.795-56.2
                                C321.421,6.22,288.611,0,255.816,0c-32.747,0-65.495,6.249-96.311,18.744c-30.813,12.491-59.693,31.244-84.603,56.158
                                c-24.915,24.911-43.668,53.792-56.158,84.607C6.249,190.324,0,223.072,0,255.822c0,32.794,6.222,65.602,18.701,96.485
                                c12.477,30.877,31.231,59.828,56.2,84.792c24.964,24.967,53.914,43.722,84.792,56.199c30.882,12.48,63.69,18.701,96.484,18.703
                                c32.748,0,65.497-6.249,96.315-18.743c30.814-12.49,59.695-31.242,84.607-56.158c24.915-24.912,43.668-53.793,56.158-84.608
                                c12.494-30.817,18.743-63.565,18.744-96.315C512,223.383,505.778,190.575,493.297,159.693z M461.611,339.66
                                c-10.821,26.683-27.018,51.648-48.659,73.292c-21.643,21.64-46.608,37.837-73.291,48.659
                                c-26.679,10.818-55.078,16.241-83.484,16.241c-28.477,0-56.947-5.406-83.688-16.214c-26.744-10.813-51.76-27.008-73.441-48.685
                                C77.37,391.27,61.174,366.255,50.363,339.51c-10.808-26.741-16.214-55.212-16.213-83.689c-0.001-28.405,5.423-56.802,16.24-83.482
                                c10.821-26.683,27.018-51.648,48.659-73.291c21.643-21.64,46.607-37.837,73.289-48.659c26.678-10.818,55.075-16.242,83.48-16.242
                                c28.478,0,56.95,5.405,83.691,16.213c26.745,10.811,51.762,27.007,73.445,48.686c21.678,21.682,37.873,46.697,48.685,73.441
                                c10.808,26.741,16.214,55.211,16.214,83.688C477.852,284.582,472.429,312.98,461.611,339.66z"/>
                        </g>
                    </g>
                    <g>
                        <g>
                            <path d="M279.627,256.001l82.693-82.693c6.525-6.525,6.525-17.102,0-23.627c-6.524-6.524-17.102-6.524-23.627,0L256,232.375
                                l-82.693-82.693c-6.525-6.524-17.102-6.524-23.627,0c-6.524,6.524-6.524,17.102,0,23.627l82.693,82.693l-82.693,82.693
                                c-6.524,6.523-6.524,17.102,0,23.627c6.525,6.524,17.102,6.524,23.627,0L256,279.628l82.693,82.693
                                c6.525,6.524,17.102,6.524,23.627,0c6.525-6.524,6.525-17.102,0-23.627L279.627,256.001z"/>
                        </g>
                    </g>
                </svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="" class="mdl-lbl">Reply</label>
                        <textarea type="text" class="form-control" id="userReply" value="" onkeyup="hideError('userReplyError')"></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')
<script src="{{asset('admin/js/pages/feedback.js')}}"></script>

@endsection