@extends('admin.layout.admin')
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link href="https://cdn.datatables.net/2.0.5/css/dataTables.bootstrap5.css">

    <div class="content-page p-4">
        <div class="content">

        <table id="example" class="table table-striped" style="width:100%">
            <thead>
            <tr>
                <th>Sno</th>
                <th>Image</th>
                <th>Property Name</th>
                <th>Price</th>
                <th>Description</th>
                <th>Updated At</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>

            @foreach($properties as $key => $property)
                <tr>
                    <td>{{$key +1}}</td>

                    <td> <img src="{{$property['property']->getFirstMediaUrl('property_images') ?? 'Null'}}" class="img-fluid" width="39px"height="39px"></td>
                    <td>{{$property['property']->name ?? 'Null'}}</td>
                    <td>${{$property['property']->price ?? 'Null'}}</td>
                    <td>{{Str::words($property['property']->description,'5') ?? 'Null'}}</td>
                    <td>{{$property['property']->updated_at->diffForHumans() ?? 'Null'}}</td>
                    <td><div class="btn-group">
                            <button type="button" class="btn btn-info btn-group-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                Action
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{route('admin.property.show',$property->property_id)}}">Read More</a></li>
                            </ul>
                        </div></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.0.5/js/dataTables.bootstrap5.js"></script>
    <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
    </script>
@endsection