@extends('layouts.app')
@section('content')
<div class="main-header">
    <div class="admin-header">
        <div class="uk-grid">
            <div class="uk-width-1-2@m uk-text-center uk-text-left@l">
                <h1 class="main-heading">{{$title}}</h1>
            </div>
        </div>
    </div>
</div>
<div class="uk-overflow-auto">
    @include('partials.messages')
    <table class="uk-table uk-table-divider" id="buyer_request">
        <thead>
            <tr>  
                <th>View Detail</th>
                <th>ID</th>
                <th>Name</th>
                <th>Province</th>
                <th>Region</th>
                <th>Bedrooms</th>
                <th>Bathrooms</th>
                <th>Created Date</th>
            </tr>
        </thead>
    </table>
</div>    
@endsection
@section('footer-script')
<script>
    $('#buyer_request').DataTable({
        processing: true,
        pageLength: 100,
        responsive: true,
        serverSide: true,
        ordering: true,
        bPaginate: true,
        bLengthChange: false,
        bFilter: true,
        bInfo: false,
        bAutoWidth: false,
        language: {
            search: '',
            searchPlaceholder: 'Search'
        },
        // aaSorting: [[1, 'desc']],
        ajax: window.location.href, 
        columns: [
            { data: 'view_detail',orderable: false, name: 'view_detail',searchable: false, width: "8%" },
            { "data": "id", "name": "id",orderable: true ,searchable: true, width: "8%",
                fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span>"+'#B'+oData.id+"</span>");
                }
            },
            { data: 'user_name',orderable: true, name: 'user_name',searchable: true, width: "10%" },
            { data: 'province',orderable: true, name: 'province',searchable: true, width: "12%" },
            { data: 'region',orderable: true, name: 'region',searchable: true, width: "12%" },
            { data: 'bedrooms',orderable: true, name: 'bedrooms',searchable: true, width: "10%" },
            { data: 'bathrooms',orderable: true, name: 'bathrooms',searchable: true, width: "10%" },
            { data: 'created_at',orderable: true, name: 'created_at',"render": function (v,j,y) {
                return moment(v).format('MMM D, YYYY');
            },searchable: true, width: "22%" },
        ],
        order: [[ 7, "desc" ]]
    });
</script>
@endsection