@extends('website.layout.master')

@section('title')
    Properties
@endsection

@php
    use Illuminate\Support\Str;
@endphp

@section('content')
    <style>
        .nice-select .option.disabled {
            color: #000;
        }

        .form-remember-forget {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .select-has-icon .common-input {
            padding-right: 30px !important;
        }

        .select-has-icon select {
            background-image: none;
            -webkit-appearance: none;
            padding: 20px 24px;
            font-size: 18px;
        }

        .property-filter {
            margin-bottom: clamp(1.5rem, -1.239rem + 5.705vw, 3.75rem);
        }

        .common-input {
            border-radius: 5px;
            font-weight: 400;
            outline: none;
            width: 100%;
            padding: 17px 24px;
            background-color: transparent !important;
            line-height: 1;
            font-size: 1.0625rem;
            border: 1px solid white;
            color: white;
        }

        .flx-between {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .property-filter__bottom {
            margin-top: clamp(1.25rem, .489rem + 1.585vw, 1.875rem);
        }

        .gap-2 {
            gap: .5rem !important;
        }

        .common-pagination {
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 60px;
        }

        .common-pagination .page-item .page-link {
            border: 0;
            margin: 0 5px;
            border-radius: 5px;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            padding: 0;
            font-size: 1.25rem;
            color: #bbbbbb;
        }

        common-pagination .page-item .page-link:before, .common-pagination .page-item .page-link:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: -1;
            transition: .2s linear;
            border-radius: inherit;
            background-color: #1a150e;
            color: black;
        }

        .body-bg .common-pagination .page-item .page-link {

            box-shadow: 0 4px 4px -6px #1310221a, 0 4px 13px -2px #1310220f;
        }

        .flx-between {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .property-item.style-shaped .property-item__bottom {
            order: -2;
            border-top: 0;
            padding-top: 0;
            margin-top: 0;
        }

        .amenities-list__item {
            gap: 10px;
            font-size: .75rem;
            opacity: .8;
            font-weight: 300;
        }

        .flx-align, .common-radio, .common-check {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding-left: 0px;
        }

        .amenities-list {
            gap: 20px;
        }

        .property-item.style-two .amenities-list__item .text {
            color: grey;
            font-weight: 500;
        }

        .input-icon--left {
            left: 20px;
            right: auto;
        }

        .common-input {
            margin-bottom: 10%;
        }

    </style>
    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{ URL::asset('website/images/backgrounds/property.jpg')}})">
        </div>
        <div class="page-header__overly"></div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route("home")}}">Home</a></li>
                    <li><span>/</span></li>
                    <li>Properties</li>
                </ul>
                <h2>Properties</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->
    <section class="apartments-page" style="background-color: black">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-3">
                    <div class="property-filter">
                        <form action="{{ route('property') }}" method="get">
                            @csrf
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="position-relative">
                                    <input type="text" name="title" value="{{ ($request) ? $request->title : '' }}"
                                           class="common-input common-input--withLeftIcon pill text-gray-800"
                                           placeholder="Search By Title">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="position-relative">
                                    <input type="text" name="reference_number"
                                           value="{{ ($request) ? $request->reference_number : '' }}"
                                           class="common-input common-input--withLeftIcon pill text-gray-800"
                                           placeholder="Search By Reference Number">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="position-relative">
                                    <input type="text" name="location"
                                           value="{{ ($request) ? $request->location : '' }}"
                                           class="common-input common-input--withLeftIcon pill text-gray-800"
                                           placeholder="Search By Location">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="position-relative">
                                    <input type="number" name="minimum_rent"
                                           value="{{ ($request) ? $request->minimum_rent : '' }}" min="1"
                                           class="common-input common-input--withLeftIcon pill text-gray-800"
                                           placeholder="Minimum Rent">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="position-relative">
                                    <input type="number" name="maximum_rent"
                                           value="{{ ($request) ? $request->maximum_rent : '' }}" min="1"
                                           class="common-input common-input--withLeftIcon pill text-gray-800"
                                           placeholder="Maximum Rent">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button class="btn btn-success w-100 p-3">Filter Properties</button>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-3">
                                <a href="{{ route('property') }}" class="btn btn-danger w-100 p-3">Reset Filter</a>
                            </div>
                        </form>

                    </div>
                </div>


                <div class="col-xl-9 col-lg-9">

                    <div class="row">

                        @forelse($properties as $property)
                            <div class="col-xl-6 col-lg-6 col-md-6 wow fadeInUp animated" data-wow-delay="100ms"
                                 style="visibility: visible; animation-delay: 100ms; animation-name: fadeInUp;">
                                <div class="apartment-two__single">
                                    <div class="apartment-two__img">
                                        <img
                                            src="{{URL::asset('admin/assets/uploads/properties/'.$property->main_image)}}"
                                            alt="" style="width:100%;height:240px">

                                    </div>
                                    <div class="apartment-two__content">
                                        <h3 class="apartment-two__title"><a href="{{ route('propertydetails',[$property->slug]) }}">{{ Str::limit($property->name,30) }}</a>
                                        </h3>

                                        <div class="property-item__content"><h5 class="property-item__price">
                                                £{{ $property->rent }} Rent</h5>
                                            <p class="property-item__location d-flex gap-2"><span
                                                    class="icon text-gradient"> <i
                                                        class="fas fa-map-marker-alt"></i></span>{{ Str::limit($property->location,30) }}
                                            </p>
                                            <div class="property-item__bottom flx-between gap-2">
                                                <ul class="amenities-list flx-align">
                                                    @if(isset($property->bedrooms) && !empty($property->bedrooms))
                                                        <li class="amenities-list__item flx-align"><span
                                                                class="icon text-gradient"><i
                                                                    class="fas fa-bed"></i></span><span class="text">{{ $property->bedrooms }} Beds</span>
                                                        </li>
                                                    @endif
                                                    @if(isset($property->bathrooms) && !empty($property->bathrooms))
                                                        <li class="amenities-list__item flx-align"><span
                                                                class="icon text-gradient"><i
                                                                    class="fas fa-bath"></i></span><span class="text"> {{ $property->bathrooms }} Baths </span>
                                                        </li>
                                                        @endforelse
                                                </ul>
                                            </div>
                                            <a class="simple-btn text-gradient fw-semibold"
                                               href="{{ route('propertydetails',[$property->slug]) }}">View Now<span class="icon-right"> <i
                                                        class="fas fa-arrow-right"></i> </span></a></div>
                                    </div>

                                </div>
                            </div>
                        @empty
                        @endforelse

                    </div>

                </div>
            </div>
            <nav aria-label="Page navigation example">

                @if ($properties->lastPage() > 1)
                    <ul class="pagination common-pagination">
                        <li class="{{ ($properties->currentPage() == 1) ? ' disabled' : '' }} page-item">
                            @if($properties->currentPage() == 1)
                                <a style="cursor: not-allowed" disabled="" class="page-link"><span
                                        class="fa fa-long-arrow-left"></span></a>
                            @else
                                <a href="{{ $properties->url(1) }}" class="page-link"><span
                                        class="fa fa-long-arrow-left"></span></a>
                            @endif
                        </li>
                        @for ($i = 1; $i <= $properties->lastPage(); $i++)
                            <li class="{{ ($properties->currentPage() == $i) ? ' active' : '' }} page-item">
                                <a href="{{ $properties->url($i) }}" class="page-link">{{ $i }}</a>
                            </li>
                        @endfor
                        <li class="{{ ($properties->currentPage() == $properties->lastPage()) ? ' disabled' : '' }} page-item">
                            @if($properties->currentPage() == $properties->lastPage())
                                <a style="cursor: not-allowed" disabled="" class="page-link"><span
                                        class="fa fa-long-arrow-right"></span></a>
                            @else
                                <a href="{{ $properties->url($properties->currentPage()+1) }}" class="page-link"><span
                                        class="fa fa-long-arrow-right"></span></a>
                            @endif
                        </li>
                    </ul>
                @endif
            </nav>
        </div>
    </section>
@endsection