@extends('layouts.default_module')



@section('css')
<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
@endsection



@section('module_name')
Contact Us
@stop

@section('table-properties')
width="400px" style="table-layout:fixed;"
@endsection


<style>
	td {
		white-space: nowrap;
		overflow: hidden;
		width: 30px;
		height: 30px;
		text-overflow: ellipsis;
	}
</style>
@section('table')
{{-- {!! Form::open(['method' => 'post', 'route' => ['doctor.search'], 'files'=>true]) !!}
@include('admin.doctor.partial.searchfilters')
{!!Form::close() !!} --}}
{{-- @stop --}}
<table id="userTable" style="opacity: 0">
<thead>
	<tr>
	   <th>Name</th>
	   <th>Email</th>
	   <th>Phone</th>
	   <th>Message</th>
	   <th>Message</th>
	</tr>
</thead>
<tbody>
</tbody>
</table>

@section('pagination')
{{-- <span class="pagination pagination-md pull-right">{!! $contact_us->render() !!}</span> --}}
<div class="col-md-3 pull-left">
    <div class="form-group text-center">
        <div>
            {!! Form::open(['method' => 'get', 'route' => ['dashboard']]) !!}
			{!! Form::submit('Cancel', ['class' => 'btn btn-default btn-block btn-lg btn-parsley']) !!}
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endsection

<div class="modal modal_msg_detail" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog modal-mg ">
        <div class="modal-content" id="confirm">
            <div class="modal-header">
                <h4 class="modal-title">Message</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12 set_msg_modal">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@stop

@section('app_jquery')

<script>

$(document).ready(function(){

    fetchRecords(0);

    function fetchRecords(id){

       $.ajax({
         url: '{!!asset("public/admin/contact_us/get_users/'+id")!!},
         type: 'get',
         dataType: 'json',
         success: function(response){
            $("#userTable").css("opacity",1);
           var len = response['data'].length;;


              for(var i=0; i<len; i++){

                var id = response['data'][i].id;
                var name = response['data'][i].name;
                var email = response['data'][i].email;
                var phone = response['data'][i].phone;
                var message = response['data'][i].message;

                var button = `<button onclick="set_msg_modal('`+message+`')" class="btn btn-info modal_msg" data-toggle="modal" data-target=".modal_msg_detail">Message</button>`


                var tr_str = "<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + phone + "</td>" +
                    "<td>" + message + "</td>" +
                    "<td>" + button + "</td>" +
                "</tr>";

                 $("#userTable tbody").append(tr_str);
                }
                $('#userTable').DataTable();
        }
       });
    }

});

function set_msg_modal(msg){
        $('.set_msg_modal').html(msg);
    }





</script>
@endsection