@extends('mainlayout.layout')


@section('title')
@endsection

@push('css')
@endpush


@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Plots For <a href="/property/show/@encrypt($property->id)"
                    style="color:#0B5E42;"> {{$property->name}}</a> </h4>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <form method="GET" class="portal-filter-bar mb-3">
                    <label class="portal-search-field"><i class="bx bx-search"></i><input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search plot number"></label>
                    <select name="status"><option value="">All statuses</option>@foreach(['available','booked','reserved','purchased','sold','unavailable'] as $status)<option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>{{ ucfirst($status) }}</option>@endforeach</select>
                    <select name="land_use"><option value="">All land uses</option>@foreach($landUses as $landUse)<option value="{{ $landUse->id }}" @selected(($filters['land_use'] ?? '') == $landUse->id)>{{ $landUse->use_en }}</option>@endforeach</select>
                    <select name="per_page">@foreach([25,50,100] as $size)<option value="{{ $size }}" @selected(($filters['per_page'] ?? 25) == $size)>{{ $size }} per page</option>@endforeach</select>
                    <button class="btn btn-mlk-primary" type="submit">Filter</button><a class="btn btn-mlk-outline" href="{{ url()->current() }}">Clear</a>
                </form>
                <p class="text-muted"><b>{{ $plots->total() }}</b> Results found</p>

                <div class="table-responsive">

                    <table class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">

                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Plot Number</th>
                                <th>Area</th>
                                <th>Land Use</th>

                                <th>Status Description</th>

                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($plots as $index => $p)
                            <tr>
                                <th scope="row">{{ $plots->firstItem() + $index }}</th>
                                <td>{{$p->plotnumber}}</td>
                                <td>{{$p->area_size}} </td>
                                <td>{{ optional($p->landuse)->use_en ?: '—' }}</td>
                                <td>{{$p->status_description}}</td>

                                <td>{{$p->created_at->format('Y-m-d')}}</td>


                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">{{ $plots->links() }}</div>

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

@endsection