@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection
            @php
                  $seo = SEO\Models\Page::where('path',URL::full())->first();
            @endphp
@section('title')
<title>@lang('site.rent_archive')</title>
@endsection
@section('metatags')
 @if(!empty($seo))
    <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
    <meta name="keywords" content="{{ $seo->meta_keywords }}">
 <meta name="description" content="{{ $seo->description ?? '' }}">
 @endif
<link rel="canonical" href="{{str_replace('public/','',url()->current())}}">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
 href="@if(app()->getLocale() == 'en' && str_contains(url()->current(),'/en/')){{str_replace('/en/','/ar/',str_replace('public/','',url()->current()))}}@else{{str_replace('/ar/','/en/',str_replace('public/','',url()->current()))}}@endif">
<link rel="alternate" hreflang="@if(app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif" href="{{str_replace('public/','',url()->current())}}">
@endsection
@section('content')
<div class="d-none">
    {{ Breadcrumbs::render('Rent Archive') }}
</div>
{!! $breadcrumbSchema !!}
    <div class="bg-f9f9f9">
        <div class="evaluateBackground d-flex flex-column justify-content-center align-items-center">
            <h1 class="SF30_36Bold SF60_71Bold-lg text-white text-uppercase text-center col-lg-6 mx-auto">@lang('site.rent_archive')
            </h1>
        </div>
    </div>
    <div class="mx-auto bg-f9f9f9 py-4">
        <div class="customWidth">
            @if(!empty($titleIntro))
                <p class="my-4 text-707070">{{ $titleIntro }}</p>
            @endif
            <div class="owl-carousel property_types pt-3 mb-3 customBorder">
                @foreach ($properties as $index => $p)
                    <button id="{{ 'tab_' . $index }}"
                        class="rounded-3 SF16_19Bold py-2 px-3 @if ($loop->iteration == 1) bg-blue text-white border-0 @else border border-d1d1d1 text-707070 bg-cwhite bg-lg-f9f9f9 @endif"><small>{{ App\PropertyType::where('id', $index)->first()->label }}</small></button>
                @endforeach
            </div>
            <div class="filterBar">
                <h2>@lang('site.Filter Bar')</h2>
                <form class="row px-2" action="{{route('site.rentArchive')}}" method="get">
                    <div class="col-12 row px-0 mx-auto align-items-center">
                        <div class="col-lg-2 col-md-6 col-12 my-2 px-1">
                            <select class="form-control mb-10 border-707070" name="governorate" autocomplete="off">
                                <option value="" disabled selected>@lang('site.Governorate')</option>
                                @foreach (App\Governorate::orderBy('governorate_name_en')->get() as $governorate)
                                    <option value="{{ $governorate->id }}">{{ $governorate->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-6 col-12 my-2 px-1">
                            <select class="form-control mb-10 border-707070" id="city_select" name="city" autocomplete="off">
                                <option value="" disabled selected>@lang('site.City')</option>
                            </select>
                        </div>
                        <div id="district_div" class="col-lg-2 col-md-6 col-12 px-1 my-2">
                            <select id="district_select" class="form-control border-707070 select2 mb-10" data-placeholder="@lang('site.District')" data-live-search="true" name="district" autocomplete="off">
                                <option value="" disabled selected>@lang('site.District')</option>
                                @foreach (App\District::get() as $district)
                                    <option value="{{ $district->id }}">{{ $district->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="compound_div" class="col-lg-2 col-md-6 col-12 px-1 my-2">
                            <select id="compound_select" class="form-control border-707070 select2 mb-10" data-placeholder="@lang('site.Compound')" data-live-search="true" name="compound" autocomplete="off">
                                <option value="" disabled selected>@lang('site.compound')</option>
                                @foreach (App\Compound::get() as $compound)
                                    <option value="{{ $compound->id }}">{{ $compound->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="text-center col-12 col-lg-1">
                            <button type="submit" class="search_button SF16_19BoldImportant text-uppercase">
                                @lang('site.filter')
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div>
                @foreach ($properties as $index => $props)
                    <div class="{{ 'form_' . $index }} tab_content @if ($loop->iteration != 1) d-none @endif">
                        <p class="d-lg-none time_text text-707070">
                            {!! __('Showing') !!}
                            <span class="fw-semibold">{{ $props->firstItem() }}</span>
                            {!! __('to') !!}
                            <span class="fw-semibold">{{ $props->lastItem() }}</span>
                            {!! __('of') !!}
                            <span class="fw-semibold">{{ $props->total() }}</span>
                            {!! __('results') !!}
                        </p>
                        <div class="d-lg-none">
                            @foreach ($props as $property)
                                <div class="rounded-3 py-2 px-3 border border-d1d1d1 my-2">
                                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                                        <p class="text-red SFBold14_16 mt-2 mb-1">
                                            @lang('site.Property Link')
                                        </p>
                                        <div class="col-12">
                                            @php $property->property_for == 'Rent' ? $for = 'Rent' : $for = 'Sale'; @endphp
                                            <a href="https://nileestate.com/{{app()->getLocale()}}/{{ $for }}/{{ $property->slug }}"
                                                target="_blank" class="text-blue time_font">{{ $property->slug }}</a>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                                        <p class="text-red SFBold14_16 my-2">
                                            @lang('site.Price')
                                        </p>
                                        <p class="text-3b3b3b SFBold14_16 my-2 price-commas">
                                            {{ $property->site_price . ' ' . $property->site_currency }}
                                        </p>
                                    </div>
                                    <div class="d-flex flex-wrap justify-content-between align-items-center">
                                        <p class="text-red SFBold14_16 my-2">
                                            @lang('site.Sale Date')
                                        </p>
                                        <p class="text-3b3b3b time_text my-2">
                                            {{ date('d-m-Y',strtotime($property->sold_date)) }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="d-none d-lg-block border border-d1d1d1 rounded-3 bg-fcfcfc">
                            <div class="d-flex justify-content-around align-items-center text-red SF22_30Bold p-3">
                                <p class="col-6 my-0">@lang('site.Property Link')</p>
                                <p class="col-3 my-0 text-center">@lang('site.Price')</p>
                                <p class="col-3 my-0 text-center">@lang('site.Sale Date')</p>
                            </div>
                            @foreach ($props as $property)
                                <div class="d-flex justify-content-around align-items-center p-3">
                                    @php $property->property_for == 'Rent' ? $for = 'Rent' : $for = 'Sale'; @endphp
                                    <p class="mb-3 col-6 SF16_19Regular"><a href="https://nileestate.com/{{app()->getLocale()}}/{{ $for }}/{{ $property->slug }}" tratget="_blank" class="text-blue">{{ $property->slug }}</a></p>
                                    <p class="mb-3 col-3 SF16_19Bold text-center price-commas">{{ $property->site_price . ' ' . $property->site_currency }}</p>
                                    <p class="mb-3 col-3 SF16_19Regular text-center">{{ date('d-m-Y',strtotime($property->sold_date)) }}</p>
                                </div>
                            @endforeach
                            <div class="my-3 px-3 overflow-auto">
                                {{ $props->appends(request()->query())->links() }}
                            </div>
                        </div>
                        <div class="d-lg-none my-lg-3 overflow-auto">
                            {{ $props->appends(request()->query())->links() }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $('[name="governorate"]').on('change',function(){
            let gover = $('[name="governorate"]').val();
            $.ajax({
                //url:  "{{ route('site.getgovernoratecities') }}" + '/' + gover,
                url: "{{route('site.getgovernoratecities')}}",
                type: 'Get',
                data:{
                    gover:gover
                },
                dataType: 'json',
                success: function(res) {
                    var len = 0;
                        if (res != null){
                            len = res.length;
                        }
                        $('#city_select').empty();
                        $('#city_select').append('<option value=""></option>');
                        if(len > 0){
                            for(var i=0 ; i<len ; i++){
                                var id = res[i].id;
                                var name = res[i].name;
                                var option = "<option value="+id+">"+name+"</option>";
                                $('#city_select').append(option);
                            }
                        }
                }
            });
        });
        $('[name="city"]').on('change',function(){
            let city = $('[name="city"]').val();
            console.log(city);
            $.ajax({
                url: "{{route('site.getcitydistricts')}}",
                type: 'Get',
                data:{
                    city:city
                },
                dataType: 'json',
                success: function(res) {
                    var len = 0;
                        if (res != null){
                            len = res.length;
                        }
                        $('#district_select').empty();
                        $('#district_select').append('<option value=""></option>');
                        if(len > 0){
                            for(var i=0 ; i<len ; i++){
                                var id = res[i].id;
                                var name = res[i].name;
                                var option = "<option value="+id+">"+name+"</option>";
                                $('#district_select').append(option);
                            }
                        }
                }
            });
        });
        $('[name="city"]').on('change',function(){
            let city = $('[name="city"]').val();
            console.log(city);
            $.ajax({
                url: "{{route('site.getcitycompounds')}}",
                type: 'Get',
                data:{
                    city:city
                },
                dataType: 'json',
                success: function(res) {
                    var len = 0;
                        if (res != null){
                            len = res.length;
                        }
                        $('#compound_select').empty();
                        $('#compound_select').append('<option value=""></option>');
                        if(len > 0){
                            for(var i=0 ; i<len ; i++){
                                var id = res[i].id;
                                var name = res[i].name;
                                var option = "<option value="+id+">"+name+"</option>";
                                $('#compound_select').append(option);
                            }
                        }
                }
            });
        });
        $(document).ready(function() {
            var mydir = $("html").attr("dir");

            if (mydir == 'rtl') {
                $(".property_types").owlCarousel({
                    rtl: true,
                    autoWidth: true,
                    margin: 10,
                    // nav: true,
                    // navText: ['<i class="fa fa-angle-right"></i>', '<i class="fa fa-angle-left"></i>']
                });
            } else {
                $(".property_types").owlCarousel({
                    rtl: false,
                    autoWidth: true,
                    margin: 10,
                    // nav: true,
                    // navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
                });
            }
            $(".owl-carousel").owlCarousel();
        });
    </script>
    @foreach ($properties as $index => $props)
        <script>
            $('[id^=tab_]').on("click", function() {
                id = $(this).attr('id');
                $('[id^=tab_]').removeClass('bg-blue text-white border-0');
                $('[id^=tab_]').addClass('text-707070 border border-d1d1d1 bg-cwhite bg-lg-f9f9f9');
                $('#'+id).removeClass('text-707070 border border-d1d1d1 bg-cwhite bg-lg-f9f9f9');
                $('#'+id).addClass('bg-blue text-white border-0');
                $('[class^=form_]').addClass('d-none');
                text = id.replace('tab', 'form');
                $('.'+text).removeClass('d-none');
            });
        </script>
    @endforeach
@endsection