@extends('layout.app')

@section('content')

    <ol class="breadcrumb bc-3">
        <li><a href="#"><i class="fa-home"></i>Home</a></li>
        <li class="active"><strong>Properties</strong></li>
    </ol>

    <br/>
    <div class="row">
        <div class="col-md-6"><h3>Properties</h3></div>
        <div class="col-md-6 text-right">
            <a href="{{ route('property.create') }}" class="btn btn-primary">
                <i class="fa fa-plus"></i> Add Property
            </a>
        </div>
    </div>
    <br/>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-bordered datatable" id="properties-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>Address</th>
            <th>Type</th>
            <th>Borough</th>
            <th>Beds</th>
            <th>Baths</th>
            <th>Rent Max</th>
            <th>Rent Min</th>
            <th>sqft</th>
            <th>Available</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @forelse($properties as $p)
            <tr>
                <td><code>{{ $p->_id }}</code></td>
                <td>{{ $p->address }}</td>
                <td>{{ $p->type }}</td>
                <td>{{ $p->borough }}</td>
                <td>{{ $p->bedrooms }}</td>
                <td>{{ $p->bathrooms }}</td>
                <td>${{ number_format($p->rent_max) }}</td>
                <td>${{ number_format($p->rent_min) }}</td>
                <td>{{ $p->sqft }}</td>
                <td>
                    @if($p->available)
                        <span class="label label-success">Yes</span>
                    @else
                        <span class="label label-danger">No</span>
                    @endif
                </td>
                <td>
                    <a href="{{ route('property.edit', $p->_id) }}"
                       class="btn btn-xs btn-info">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    <form action="{{ route('property.destroy', $p->_id) }}"
                          method="POST" style="display:inline;"
                          onsubmit="return confirm('Delete this property?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-xs btn-danger">
                            <i class="fa fa-trash"></i> Delete
                        </button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="11" class="text-center text-muted">No properties found.</td>
            </tr>
        @endforelse
        </tbody>
    </table>

@endsection

@push('scripts')
    <link rel="stylesheet" href="https://demo.neontheme.com/assets/js/datatables/datatables.css">
    <script src="https://demo.neontheme.com/assets/js/datatables/datatables.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('#properties-table').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                columnDefs: [
                    { targets: '_all', defaultContent: '—' },
                    { targets: [10], orderable: false }
                ]
            });
        });
    </script>
@endpush