@extends("app")
@section('head_title', 'Compare Projects'.' | '.getcong('site_name') )
@section('head_url', Request::url())
@section('canonical_url', config('app.url').'compare-projects')
@section("content")
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
	.c_heading{font-family: 'Playfair Display';font-style: normal;font-weight: 700;font-size: 35px;line-height: 44px;letter-spacing: -0.02em;color: #000000;}
	.pt-28{padding-top:28px !important;}
	.pb-28{padding-bottom:28px !important;}
	.pt-36{padding-top:36px;}
	.pb-27{padding-bottom:27px;}
	.pt-87 {padding-top: 92px;}
	.select2-container{z-index: 99999;}
	.border-radius{border: 1px solid #E2E2E2;border-radius: 8px 8px 8px 8px;}
	.bold{font-style: normal;font-weight: 500;color: #000000;}
	.fs-24{font-size: 24px;line-height: 32px;}
	.item-p{padding: 24px 19px !important;}
	.pb-16{padding-bottom:16px;}
	.fs-20{font-style: normal;font-weight: 400;font-size:19px !important;line-height: 30px;color: #333333;}
	.del_compaire_item{position: absolute;right: 1px;top: 4px;}
	.mh-138{min-height:138px;overflow: overlay;}
	.mh-341{min-height: 365px;}
	.select2-container{width:100% !important;}
	.select2-container--default .select2-selection--multiple {
    background-color: transparent !important;}
	.select2-container .select2-search--inline .select2-search__field{margin-top:0px !important;}
	.compair .even, .compair .odd {padding: 25px 20px;max-height: 80px;}
	.compair .odd {background: #F7F7F775;border-top: 1px solid #E2E2E2;border-bottom: 1px solid #E2E2E2;}
	.verticle-center{margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);width: 100%;}
	.citem_img{background-position: top;background-size: auto;filter: drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1)) drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06));border-radius: 6px;min-height: 220px;max-height: 220px;}
	.select2-container--classic .select2-selection--multiple {background-color: unset !important;padding-bottom: 10px;}
	.hide,#show_compair{display:none;}
		#valid-msg {
	  color: #00c900;font-size: 12px;
	}
	#error-msg {
	 font-size: 12px;
    color: #950505;
	}
	@media only screen and (min-width:1400px) {
		.mh-341 {min-height:365px;}
	}
	@media only screen and (max-width: 768px){
.citem_img{min-height: 162px !important; max-height: 162px !important;background-size: cover;}
}

	</style>
<div class="container-xx bg-white pb-27"> 
 <div class="container p-0 compair">
  <div class="row pt-36">
	<div class="col-8 pl-0 pr-0">
		<h1 class="mp-5 c_heading pb-27">Compare the Projects</h1>
	</div>
	<!--
	<div class="col-4 text-end text-right">
		<a class="link" href="#">Download PDF</a>
		<button class="btn btn-outline"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M3 9V15C3 15.3978 3.15804 15.7794 3.43934 16.0607C3.72064 16.342 4.10218 16.5 4.5 16.5H13.5C13.8978 16.5 14.2794 16.342 14.5607 16.0607C14.842 15.7794 15 15.3978 15 15V9M12 4.5L9 1.5M9 1.5L6 4.5M9 1.5V11.25" stroke="#545454" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
			</svg> share
		</button>
	</div>-->
  </div>
      <div class="row border-radius">
                      @if(!empty($properties))
                                @endif
          <div class="col-6 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-xxl-3 p-0 {{($cp > 1)? 'm-hide' : ''}}">
               <div class="border-end">
                  <div class="w-100 border-bottom pt-36 pb-45 text-center mh-341 relative">
					  <div class="verticle-center">
                      <strong class="pb-24 block">Select a Project<br /> to Compare</strong>
                      <div class="clearfix"></div>
                      <!--<button data-bs-toggle="modal" data-bs-target="#add_to_compair" class="btn bg-black text-white pl-15 pr-15"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Add Project</button>-->
                      <a href="{{url('/new-projects-in-dubai')}}" class="btn bg-black text-white pl-15 pr-15"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Add Project</a>
                  </div>
				  </div>
                  <div class="even block pt-28 pb-28"><div class="fs-16">Price</div></div>
                  <div class="odd pt-28 pb-28 mmh-106"><div class="fs-16">Bedrooms</div></div>
				  <div class="even pt-28 pb-28 mh-138 mmh-190"><div class="fs-16">Unit Types</div></div>
                  <div class="odd pt-28 pb-28"><div class="fs-16">Total Areas</div></div>
                  <div class="even mh-138 mmh-200 pt-28 pb-28"><div class="fs-16">Amenities</div></div>
                  <div class="odd pt-28 pb-28 mh-138 mmh-190"><div class="fs-16">Developers</div></div>
				  <div class="even pt-28 pb-28"><div class="fs-16">&nbsp;</div></div>
              </div>
          </div>
          <div class="{{($cp > 1)? 'col-12' : 'col-6'}} col-sm-9 col-md-9 col-lg-9 col-xl-9 col-xxl-9 p-0">
                <div class="row">
                    @if(!empty($properties))
                                        <div class="{{($cp > 2)? 'compair_slide owl-carousel owl-theme' : 'row'}} m-0 p-0">
                        @foreach($properties as $it => $property)