@extends('admin.layout.admin')
@section('content')
    <div class="content-page">
        <!-- Start content -->
        <div class="content">

            <div class="container-fluid">
                <div class="page-title-box">

                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">Dashboard</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active">Welcome To KJH-Mining Admin Dashboard</li>
                                </ol>
                            </div>
                        </div>

                        {{--                        <div class="col-md-4">--}}
                        {{--                            <div class="float-right d-none d-md-block app-datepicker">--}}
                        {{--                                <input type="text" class="form-control" data-date-format="MM dd, yyyy"--}}
                        {{--                                       readonly="readonly" id="datepicker">--}}
                        {{--                                <i class="mdi mdi-chevron-down mdi-drop"></i>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                    </div>
                </div>
                <!-- end page-title -->

                <!-- start top-Contant -->
                <div class="row">
                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16">Properties</h5>
                                        <h4 class="text-info pt-1 mb-0">{{$properties}}</h4>
                                    </div>
                                    {{--                                    <div class="col-lg-6">--}}
                                    {{--                                        <div id="chart1"></div>--}}
                                    {{--                                    </div>--}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16 w-100">Sellers</h5>
                                        <h4 class="text-warning pt-1 mb-0">{{$sellers}}</h4>
                                    </div>
                                    {{--                                    <div class="col-lg-6">--}}
                                    {{--                                        <div id="chart2"></div>--}}
                                    {{--                                    </div>--}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-xl-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row align-items-center p-1">
                                    <div class="col-lg-10">
                                        <h5 class="font-16">Buyers</h5>
                                        <h4 class="text-primary pt-1 mb-0">{{$buyers}}</h4>
                                    </div>
                                    {{--                                    <div class="col-lg-6">--}}
                                    {{--                                        <div id="chart3"></div>--}}
                                    {{--                                    </div>--}}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- end top-Contant -->


                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="mt-0 header-title mb-4">New Properties</h4>
                                <div class="table-responsive">
                                    <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>Created At</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($propertiesData as $key => $property)
                                            <tr>
                                                <td>{{$key +1}}</td>

                                                <td> <img src="{{$property['property']->getFirstMediaUrl('property_images') ?? ''}}" class="img-fluid" width="30px"height="30px"></td>
                                                <td>{{$property['property']->name}}</td>
                                                <td>${{$property['property']->price}}</td>
                                                <td>{{Str::words($property['property']->description,'5')}}</td>
                                                <td>{{$property['property']->created_at->diffForHumans()}}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>

            </div>
            <!-- container-fluid -->

        </div>
        <!-- content -->

        <footer class="footer">
            © 2024 KJH-Mining <span class="d-none d-sm-inline-block"> - Copyright reserved. </span>.
        </footer>

    </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