@extends('admin.layouts.admin')
@section('content') 
    <div class="container-fluid"> 
        <div class="table-block-common"> 
            <!-- Card header -->
            <div class="top-title-block-table">
                <div class="top-title-block-table-left common-btn-admin">
                   <h2>Contact Requests</h2>
                </div>
            </div>
            <div class="table-common-block">
            <div class="table-responsive">
                <table class="table table-flush" id="datatable-basic">
                    <thead class="thead-light">
                        <tr> 
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Name
                            </th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Email
                            </th> 
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Date of contact
                            </th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Message
                            </th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Status
                            </th>
                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>  
                    </tbody>
                </table>
            </div>
            </div>
        </div>   
    </div>  

@endsection

@push('js') 
<script> 
    var oTable = $('#datatable-basic').DataTable({
        "pageLength": 10,
        processing: false,
        searching: true,
        serverSide: true,  
        language: {
            searchPlaceholder: "Search",
            sEmptyTable: "No contacts match.", 
            info: "_START_ - _END_ of _MAX_",  
        },
        "ajax": { 
            "url": "{!! $module_route.'/datatable' !!}", 
        },
        columns: [  
            {
                data: 'name',
                name: 'name',  
            },
            {
                data: 'email',
                address: 'email', 
            },
            { data: 'added_date', searchable: false, name: 'created_at'},
            {
                data: 'message',
                name: 'message', 
                "width": "30%",
                "orderable": false, 
                name: 'message',  
            },  
            {   data:  null,
                "orderable": false,
                "searchable": false,
                "render":function(o){
                    if(o.status=='1') 
                    {
                        return '<lable class="btn btn-default solved-label">Solved</lable>';
                    }
                    else
                    {
                        return '<lable class="btn btn-primary unsolved-label">Unsolved</lable>';
                    }
                    
                }
            },
            {   data:  null,
                "orderable": false,
                class: 'center-block',
                "searchable": false,
                "render":function(o){ 
                        var str = "";
                        str += '<div class="custom-dropdwon-table"><div class="d-flex"><div class="dropdown"><button class="btn dost-icon-btn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></button><div class="dropdown-menu" aria-labelledby="dropdownMenu2">';
                        str += '<button class="dropdown-item" type="button"><a href="javascript:void(0);" class="updateRecord" val="' + o.id + '">';
                    if(o.status=="0"){ 
                        str += "Mark as Solved";} 
                        else{ 
                        str += "Mark as Unsolved";} 
                        str += '</a></button></div></div></div></div>'; 
                        return str;
                }
            } 
        ],
        order: [[2, "DESC"]],
        drawCallback: function(data) {  
            if(this.fnSettings().fnRecordsTotal() == 0)
            {
                $("#datatable-basic_info").html('');
            } 
        },
    });  
    //update Record
    jQuery(document).on('click','.updateRecord',function(){ 
        var id = $(this).attr('val');
        $.ajax({
               type:'GET',
               url: "{{ url('admin/contacts') }}/" + id + "/contacts-supdate",
               data:'_token = <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /var/www/html/resources/views/admin/laravel/contact/index.blade.php:125
Stack trace:
#0 {main}
  thrown in <b>/var/www/html/resources/views/admin/laravel/contact/index.blade.php</b> on line <b>125</b><br />