@extends('layouts.master')
@section('content')
    <div class="row">
        <div class="col-md-12 p-3">
            <div class="card card-outline card-info">
                <div class="card-header">
                    Visitors Comments
                </div>

                <div class="card-body">
                    <table class="table w-100" id="comments_table">
                        <thead class="bg-gradient-light">
                            <th>S/N</th>
                            <th>Status</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Subject</th>
                            {{-- <th>Comment</th> --}}
                            <th>Received</th>
                            <th>Action</th>
                        </thead>

                        <tbody>
                            @foreach ($comments as $item)
                            <tr>
                                <td>{{$loop->index+1}}</td>
                                @if($item->status == "unchecked")
                                <td><i class="fas fa-fw fa-circle text-primary text-xs"></i></td>
                                @else
                                <td><i class="fas fa-fw fa-circle text-success text-xs"></i></td>
                                @endif
                                <td>{{$item->full_name}}</td>
                                <td>{{$item->email}}</td>
                                <td>{{Str::limit($item->subject,15,$end='...')}}</td>
                                {{-- <td>{{$item->message}}</td> --}}
                                <td>{{Carbon\Carbon::parse($item->created_at)->diffForHumans()}}</td>
                                <td>
                                    <button class="preview btn btn-sm bg-gradient-primary" id="{{$item->id}}"><i class="fas fa-fw fa-eye"></i></button>&nbsp;&nbsp;
                                    <button class="delete btn btn-sm bg-gradient-danger" id="{{$item->id}}"><i class="fas fa-fw fa-trash"></i></button>
                                </td>
                            </tr>
                            @endforeach     
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
  
    <!-- Modal -->
    <div class="modal fade" id="commentsModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                
                    <div class="modal-header bg-gradient-primary">
                            <h5 class="modal-title">Modal title</h5>
                                <button id="closeBtn2" type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                                </button>
                        </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <form id="commentsForm">
                            
                            <input type="hidden" name="hidden_data" id="hidden_data">
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Email:</label>
                                        <input type="text" class="form-control" readonly name="email" id="email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Name:</label>
                                        <input type="text" class="form-control" readonly name="name" id="name">
                                    </div>
                                </div>
                            </div>
                               
                            <div class="form-group">
                                <label for="">Subject:</label>
                                <input type="text" class="form-control" readonly name="subject" id="subject">
                            </div>

                            <div class="form-group">
                                <label for="">Message:</label>
                                <textarea name="message" id="message" class="form-control" readonly rows="5"></textarea>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="closeBtn1" class="btn bg-gradient-warning" data-dismiss="modal">Close &nbsp;<i class="fas fa-fw fa-times-circle"></i></button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

    <script>
        $("document").ready(function(){

            //datatables
            $('#comments_table').DataTable({
                processing:true,
                responsive:true,
                serverSide:false,
                stateSave: true,
            })

            //viewing comment
            $(document).on('click','.preview',function(event){
                event.preventDefault();

                var preview_id = $(this).attr('id');
                
                $.ajax({
                    url: "/comments/" + preview_id + "/edit",
                    dataType: "JSON",
                    success:function(data){
                        $('.modal-title').text(data.result.full_name + " - Comment");
                        $('#email').val(data.result.email);
                        $('#hidden_data').val(preview_id);
                        $('#name').val(data.result.full_name);
                        $('#subject').val(data.result.subject);
                        $('#message').val(data.result.message);
                        $('#commentsModal').modal('show');
                    }
                })

                 //updating status
                $('#closeBtn1,#closeBtn2').on('click',function(){
                    var data_url = "{{route('comments.previewed')}}";

                    $.ajax({
                        url: data_url,
                        method: "POST",
                        dataType: "JSON",
                        data: {
                            comment: preview_id
                        },
                        success:function(data){
                            if(data.success){
                                //refreshing page
                                setTimeout(function () {
                                    window.location = "{{url('comments')}}";
                                }, 10);
                            }
                        }
                    })
                })
            })

           

            //deletion
            $(document).on('click', '.delete', function (event) {
                event.preventDefault();
                var delete_id = $(this).attr('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, keep it'

                }).then((result) => {
                    if (result.value) {

                        $.ajax({
                            url: "/comments/destroy/" + delete_id,
                            success: function (data) {

                                if(data.success){
                                     //alerting
                                     var result =data.success;
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: result,
                                        icon: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });

                                     //refreshing page
                                    setTimeout(function () {
                                        window.location = "{{url('comments')}}";
                                    }, 2000);
                                }

                                if(data.errors){

                                    var result = data.errors;
                                    Swal.fire({
                                        title: 'Notification!',
                                        text: result,
                                        icon: 'warning',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });
                                }
                            }

                        });

                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: 'Information!',
                            text: 'Comment Reserved.',
                            icon: 'info',
                            timer: 2000,
                            showCancelButton: false,
                            showConfirmButton: false,
                        })
                    }
                })

            });
        })
    </script>
@endsection