@extends("layouts.user.master")
@section('title')
    Find home
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"
          type="text/css"/> {{-- Sweet alert popup--}}
@endsection
@section('content')
    <div class="card-body border border-dashed border-end-0 border-start-0">
        <form method="POST">
            <div class="row g-3">
                <div class="col-xxl-5 col-sm-6">
                    <div class="search-box">
                        <input type="text" class="form-control search"
                               placeholder="Search for order ID, customer, order status or something...">
                        <i class="ri-search-line search-icon"></i>
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-2 col-sm-6">
                    <div>
                        <input type="text" class="form-control" data-provider="flatpickr" data-date-format="d M, Y"
                               data-range-date="true" id="demo-datepicker" placeholder="Select date">
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-2 col-sm-4">
                    <div>
                        <select class="form-control" data-choices data-choices-search-false
                                name="choices-single-default" id="idStatus">
                            <option value="">Status</option>
                            <option value="all" selected>All</option>
                            <option value="Pending">Pending</option>
                            <option value="Inprogress">Inprogress</option>
                            <option value="Cancelled">Cancelled</option>
                            <option value="Pickups">Pickups</option>
                            <option value="Returns">Returns</option>
                            <option value="Delivered">Delivered</option>
                        </select>
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-2 col-sm-4">
                    <div>
                        <select class="form-control" data-choices data-choices-search-false
                                name="choices-single-default" id="idPayment">
                            <option value="">Select Payment</option>
                            <option value="all" selected>All</option>
                            <option value="Mastercard">Mastercard</option>
                            <option value="Paypal">Paypal</option>
                            <option value="Visa">Visa</option>
                            <option value="COD">COD</option>
                        </select>
                    </div>
                </div>
                <!--end col-->
                <div class="col-xxl-1 col-sm-4">
                    <div>
                        <button type="button" class="btn btn-secondary w-100" onclick="SearchData();"><i
                                class="ri-equalizer-fill me-1 align-bottom"></i>
                            Filters
                        </button>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->
        </form>
    </div>
    <!--end card-filter-->


    <div class="row">
        @foreach($propertiesRequest as $propertyRequest)
            <div class="col-xxl-3 col-sm-6 project-card">
                <div class="card card-height-100">
                    <div class="card-body">
                        <div class="d-flex flex-column h-100">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted mb-4">{{ $propertyRequest->updated_at }}</p>
                                </div>
                                <div class="flex-shrink-0">
                                    <div class="d-flex gap-1 align-items-center">
                                        <p>@lang('index.layout'): {{ $propertyRequest->layout }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex mb-2">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm">
                                    <span class="avatar-title bg-warning-subtle rounded p-2">
                                        @switch($propertyRequest->category)
                                            @case('apartment')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/apartment.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @case('house')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/house.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @case('commercial')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/commercial.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @case('land')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/land.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @case('condo')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/other.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @case('other')
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/other.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                                @break
                                            @default
                                                <img
                                                    src="{{ URL::asset('build/images/properties/categories/default.svg') }}"
                                                    alt="" class="img-fluid p-1">
                                        @endswitch
                                    </span>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-1 fs-15"><a
                                            href="{{ route('show-property-request', $propertyRequest->id) }}"
                                            class="text-body">{{ limitWords($propertyRequest->title, 5) }}</a>
                                    </h5>
                                    <p class="text-muted text-truncate-two-lines mb-3">{!! limitWords($propertyRequest->additional_requests, 7) !!}</p>
                                </div>
                            </div>
                            <div class="mt-auto">
                                <div class="d-flex mb-2">
                                    <div class="flex-grow-1">
                                        <div>{{ $propertyRequest->city }}</div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        @if($propertyRequest->type == 'residential')
                                            <div>
                                                <i class="ri-home-heart-fill align-bottom me-1 text-muted"></i>@lang('index.residential')
                                            </div>
                                        @elseif($propertyRequest->type == 'commercial')
                                            <div>
                                                <i class="ri-building-4-fill align-bottom me-1 text-muted"></i>@lang('index.commercial')
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="progress progress-sm animated-progress">
                                    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="34"
                                         aria-valuemin="0"
                                         aria-valuemax="100" style="width: 100%;">
                                    </div><!-- /.progress-bar -->
                                </div><!-- /.progress -->
                            </div>
                        </div>

                    </div>
                    <!-- end card body -->
                    <div class="card-footer bg-transparent border-top-dashed py-2">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <div class="text-muted">
                                    @if($propertyRequest->property_status == 'for sale')
                                        <i class="ri-price-tag-3-fill"></i> @lang('index.sale')
                                    @elseif($propertyRequest->property_status == 'for rent')
                                        <i class="ri-hand-heart-fill "></i> @lang('index.rent')
                                    @elseif($propertyRequest->property_status == 'both')
                                        <i class="ri-file-paper-fill "></i> @lang('index.rent-or-sell')
                                    @endif
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="text-muted">
                                    <i class="ri-calendar-event-fill me-1 align-bottom"></i> {{ $propertyRequest->created_at }}
                                </div>
                            </div>

                        </div>

                    </div>
                    <!-- end card footer -->
                </div>
                <!-- end card -->
            </div>
            <!-- end col -->
        @endforeach
    </div>
    <!-- end row -->
    <!-- Pagination links -->

    {{ $propertiesRequest->links('vendor.pagination.bootstrap-5') }}

@endsection
@section('script')

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script src="{{ asset('build/js/custom/search-properties.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/user-profile/sweetalert.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            @if (session('success'))
            const success = @json(session('success'));
            updateProfile(success);
            @elseif (session('error'))
            const error = @json(session('error'));
            updateProfileError(error);
            @endif
        });
    </script>
    <script src="{{ URL::asset('build/js/app.js') }}"></script>

@endsection