<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <i class="fa fa-file-text-o"></i> {!! trans('property::property.name') !!} <small> {!! trans('app.manage') !!} {!! trans('property::property.names') !!}</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! guard_url('/') !!}"><i class="fa fa-dashboard"></i> {!! trans('app.home') !!} </a></li>
            <li class="active">{!! trans('property::property.names') !!}</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
    <div id='property-property-entry'>
    </div>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                    <li class="{!!(request('status') == '')?'active':'';!!}"><a href="{!!guard_url('property/property')!!}">{!! trans('property::property.names') !!}</a></li>
                    <li class="{!!(request('status') == 'archive')?'active':'';!!}"><a href="{!!guard_url('property/property?status=archive')!!}">Archived</a></li>
                    <li class="{!!(request('status') == 'deleted')?'active':'';!!}"><a href="{!!guard_url('property/property?status=deleted')!!}">Trashed</a></li>
                    <li class="pull-right">
                    <span class="actions">
                    <!--   
                    <a  class="btn btn-xs btn-purple"  href="{!!guard_url('property/property/reports')!!}"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-sm hidden-xs"> Reports</span></a>
                    @include('property::admin.property.partial.actions')
                    -->
                    @include('property::admin.property.partial.filter')
                    @include('property::admin.property.partial.column')
                    </span> 
                </li>
            </ul>
            <div class="tab-content">
                <table id="property-property-list" class="table table-striped data-table">
                    <thead class="list_head">
                        <th style="text-align: right;" width="1%"><a class="btn-reset-filter" href="#Reset" style="display:none; color:#fff;"><i class="fa fa-filter"></i></a> <input type="checkbox" id="property-property-check-all"></th>
                        <th data-field="refno">{!! trans('property::property.label.refno')!!}</th>
                    <th data-field="contact_id">{!! trans('property::property.label.contact_id')!!}</th>
                    <th data-field="agent_id">{!! trans('property::property.label.agent_id')!!}</th>
                    <th data-field="district_id">{!! trans('property::property.label.district_id')!!}</th>
                    <th data-field="city_id">{!! trans('property::property.label.city_id')!!}</th>
                    <th data-field="location_id">{!! trans('property::property.label.location_id')!!}</th>
                    <th data-field="category_id">{!! trans('property::property.label.category_id')!!}</th>
                    <th data-field="title">{!! trans('property::property.label.title')!!}</th>
                    <th data-field="price">{!! trans('property::property.label.price')!!}</th>
                    <th data-field="rent_frequency">{!! trans('property::property.label.rent_frequency')!!}</th>
                    <th data-field="bedrooms">{!! trans('property::property.label.bedrooms')!!}</th>
                    <th data-field="bathrooms">{!! trans('property::property.label.bathrooms')!!}</th>
                    <th data-field="land_area">{!! trans('property::property.label.land_area')!!}</th>
                    <th data-field="landarea_type">{!! trans('property::property.label.landarea_type')!!}</th>
                    <th data-field="furnishing">{!! trans('property::property.label.furnishing')!!}</th>
                    <th data-field="zip_code">{!! trans('property::property.label.zip_code')!!}</th>
                    <th data-field="hot">{!! trans('property::property.label.hot')!!}</th>
                    <th data-field="expire_date">{!! trans('property::property.label.expire_date')!!}</th>
                    <th data-field="source">{!! trans('property::property.label.source')!!}</th>
                    <th data-field="property_for">{!! trans('property::property.label.property_for')!!}</th>
                    <th data-field="prop_status">{!! trans('property::property.label.prop_status')!!}</th>
                    <th data-field="build_status">{!! trans('property::property.label.build_status')!!}</th>
                    <th data-field="created_at">{!! trans('property::property.label.created_at')!!}</th>
                    </thead>
                </table>
            </div>
        </div>
    </section>
</div>

<script type="text/javascript">

var oTable;
var oSearch;
$(document).ready(function(){
    app.load('#property-property-entry', '{!!guard_url('property/property/0')!!}');
    oTable = $('#property-property-list').dataTable( {
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            'className': 'dt-body-center',
            'render': function (data, type, full, meta){
                return '<input type="checkbox" name="id[]" value="' + data.id + '">';
            }
        }], 
        
        "responsive" : true,
        "order": [[1, 'asc']],
        "bProcessing": true,
        "sDom": 'R<>rt<ilp><"clear">',
        "bServerSide": true,
        "sAjaxSource": '{!! guard_url('property/property') !!}',
        "fnServerData" : function ( sSource, aoData, fnCallback ) {

            $.each(oSearch, function(key, val){
                aoData.push( { 'name' : key, 'value' : val } );
            });
            app.dataTable(aoData);
            $.ajax({
                'dataType'  : 'json',
                'data'      : aoData,
                'type'      : 'GET',
                'url'       : sSource,
                'success'   : fnCallback
            });
        },

        "columns": [
            {data :'id'},
            {data :'refno'},
            {data :'contact_id'},
            {data :'agent_id'},
            {data :'district_id'},
            {data :'city_id'},
            {data :'location_id'},
            {data :'category_id'},
            {data :'title'},
            {data :'price'},
            {data :'rent_frequency'},
            {data :'bedrooms'},
            {data :'bathrooms'},
            {data :'land_area'},
            {data :'landarea_type'},
            {data :'furnishing'},
            {data :'zip_code'},
            {data :'hot'},
            {data :'expire_date'},
            {data :'source'},
            {data :'property_for'},
            {data :'prop_status'},
            {data :'build_status'},
            {data :'created_at'},
        ],
        "pageLength": 25
    });

    $('#property-property-list tbody').on( 'click', 'tr td:not(:first-child)', function (e) {
        e.preventDefault();

        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        var d = $('#property-property-list').DataTable().row( this ).data();
        $('#property-property-entry').load('{!!guard_url('property/property')!!}' + '/' + d.id);
    });

    $('#property-property-list tbody').on( 'change', "input[name^='id[]']", function (e) {
        e.preventDefault();

        aIds = [];
        $(".child").remove();
        $(this).parent().parent().removeClass('parent'); 
        $("input[name^='id[]']:checked").each(function(){
            aIds.push($(this).val());
        });
    });

    $("#property-property-check-all").on( 'change', function (e) {
        e.preventDefault();
        aIds = [];
        if ($(this).prop('checked')) {
            $("input[name^='id[]']").each(function(){
                $(this).prop('checked',true);
                aIds.push($(this).val());
            });

            return;
        }else{
            $("input[name^='id[]']").prop('checked',false);
        }
        
    });


    $(".reset_filter").click(function (e) {
        e.preventDefault();
        $("#form-search")[ 0 ].reset();
        $('#form-search input,#form-search select').each( function () {
          oTable.search( this.value ).draw();
        });
        $('#property-property-list .reset_filter').css('display', 'none');

    });


    // Add event listener for opening and closing details
    $('#property-property-list tbody').on('click', 'td.details-control', function (e) {
        e.preventDefault();
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });

});
</script>