@extends('frontend.layouts.app-dashboard')

@section('content')

<div class="mymsg-page-sec user-dashboard">
    <div class="container">
        <div class="row">
           
            <div class="col-lg-9 col-md-8">
                <div id="sucessMessageRead"></div>
                <div class="post-sub-sec">
                    <div class="msg-title">
                        <h5>Showing Message</h5>
                    </div>
                    <div class="msg-table">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col" class="category">Category</th>
                                    <th scope="col" class="adName">Ad Name</th>
                                    <th scope="col" class="name">Name</th>
                                    <th scope="col" class="phone">Phone</th>
                                    <th scope="col" class="email">Email</th>
                                    <th scope="col" class="message">Message</th>
                                    <th scope="col" class="status">Status</th>
                                    <th scope="col" class="action">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if( isset($messages)  && count( $messages ) > 0 )
                                    
                                    @foreach( $messages as $message )

                                        @php 
                                            $messageJson = json_decode($message->message)
                                        @endphp
                                        <tr>
                                            <td class="category">{{$message->module->title ?? 'N/A'}}</td>
                                            <td class="ad-name">{{$message->ad->title ?? 'N/A'}}</td>
                                            <td class="name">{{$messageJson->first_name ?? ''}} {{$messageJson->last_name ?? ''}}</td>
                                            <td class="phone"> {{$messageJson->phone_number ?? ''}}</td>
                                            <td class="email">{{$messageJson->email ?? ''}}</td>
                                            <td class="message">
                                                <div class="showonlymobile"><span><b>Name:</b>{{$messageJson->first_name ?? ''}} {{$messageJson->last_name ?? ''}}</span><span><b>Phone:</b>{{$messageJson->phone_number ?? ''}}</span><span><b>Email:</b>{{$messageJson->email ?? ''}}</span> 
                                                </div> {{$messageJson->message ?? ''}}
                                            </td>
                                            <td>
                                                @if($message->status == 1)
                                                    <span class="badge badge-success">Read</span>
                                                @else
                                                    <a href="javascript:void(0);" class="badge badge-danger unread-status" data-id="{{$message->id}}">Unread</a>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)" data-alpha="{!!$message->id!!}" class="remvoeMessageModal btn btn-danger"><i class="fa fa-trash"></i></a>
                                            </td>
                                        </tr>

                                    @endforeach

                                 @else
                                    
                                    <tr>
                                        <td colspan="8"> No Message Available!</td>
                                    </tr>

                                @endif
                               
                            </tbody>
                        </table>
                    </div>
                </div>
               <!--  <nav aria-label="..." class="pagination-section">
                    <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <span class="page-link">Previous</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active">
                        <span class="page-link">
                        2
                        <span class="sr-only">(current)</span>
                        </span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                    </ul>
                </nav> -->
            </div>

            <div class="col-lg-3 col-md-4">
                <div class="user-filter-cat">
                    <div class="filter-title">
                        <h5 class=""> Filter Message </h5>
                    </div>
                    <div class="filter-content">

                        <form action="{{\Request::url()}}" method="GET" id="sidebarFilter">
                            
                            @include('frontend.user.sidebar.filter')

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="remove-message-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    <form action="{{route('user.send.message.delete')}}" method="POST" id="formMessageRemove">
      
      <div class="modal-body">
        
            @csrf
            <input type="hidden" name="alpha">
            <p>Are you sure to remove message?</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-warning">Delete</button>
      </div>
    </form>
    </div>
  </div>
</div>

@endsection

@section('scripts')

<script type="text/javascript">
    
    $(".remvoeMessageModal").on('click',function(){


        var data = $(this).attr('data-alpha');

        $("#formMessageRemove input[name=alpha]").val(data);

        $("#remove-message-modal").modal('show');
    });

    $('input[name=module]').on('click',function(){

        $('input[name=module]').prop('checked',false);

        var checkedModule = $(this).prop('checked',true);

        if( checkedModule )
        {
            $("#sidebarFilter").submit();    
        }
        

    })
   
    $('.unread-status').on('click',function(){

        var elem     = $(this);

        var messageId = elem.attr('data-id');

        $.ajax({
            url: "{{route('user.my.message.status')}}",
            method: 'get',
            data: {message_id:messageId},
            success: function(data)
            {
                if(data.code == 200)
                {
                    elem.removeClass('badge-danger');
                    elem.addClass('badge-success');
                    elem.text('Read');
                    $("#sucessMessageRead").text(data.message);
                }
            }
        });

    });

</script>

@endsection