@extends('layouts.site')


@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('assets/custom_css/custom_radio_buttons.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/custom_css/vote.css')}}">






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 @php  $start_date= Session::get('start_date') ;    
		   $end_date= date('y-m-d', strtotime(Session::get('end_date')));    
 @endphp 
<!---------------------------------------------------------------->

<!--start date picker-->
<script type="text/javascript">
    
    $(function() {
        var dtToday = new Date();

        var month = dtToday.getMonth() + 1;
        var day = dtToday.getDate();
        var year = dtToday.getFullYear();
        if (month < 10)
            month = '0' + month.toString();
        if (day < 10)
            day = '0' + day.toString();

        var maxDate = year + '-' + month + '-' + day;
         //alert(maxDate);
         //alert();
        $('#start_date').attr('min', maxDate);
         $('#end_date').attr('min', maxDate);
        $('#start_date').val(maxDate);
        $('#end_date').val(maxDate);
        
          $('#start_date').attr('min', maxDate);
        

    });
   
    
    
    $("#end_date").onClose(function() {
       
        var start_date = document.getElementById("start_date").value;
        var end_date = document.getElementById("end_date").value;

        if ((Date.parse(end_date) <= Date.parse(start_date))) {
            alert("End date should be greater than Start date");
            document.getElementById("end_date").value = "";
        }
    });

</script>
<!--end date picker-->

<!---------------------------------------------------------------->
@php
list($currency_code,$curr_symbol, $exchange_rate,$name,$slug,$detail)= getData();
  
 @endphp
<!---------------------------------------------------------------->
  <!-- breadcrumb start -->
  <div class="breadcrumb-area bg-overlay-2 direction" style="background-image:url({{asset('assets/front/img/property.png')}}">

         <div class="container">
            <div class="breadcrumb-inner">
                <div class="section-title">
                    <h2 class="page-title"> تفاصيل العقار </h2>
                    <ul class="page-list">
                        <li><a href="index.html">الرئيسية/</a></li>
                        <li>  @isset($advertisment)

                     
{{  $advertisment->category -> $name }} /
 {{$advertisment->name_ar}}
@endisset</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="property-page-area pd-top-120 pd-bottom-90 " style="background-image: url(assets/img/about-style3-bg.jpg)" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1200">
        <div class="container">
            <div class="property-details-top pd-bottom-70">
                <div class="property-details-top-inner direction">
                    <div class="row">
                       
                        <div class="col-lg-6 text-lg-right">
                        <h4><i class="fas fa-money-check"></i>
                            {{$price_now=(round($advertisment['discount_price']/$exchange_rate,2)  ?? round($advertisment['price']/$exchange_rate,2)) }}    {{$curr_symbol}}
 				 

                  @if($advertisment -> discount_price)
                                                     
                   
                    <del>{{round($advertisment['price']/$exchange_rate,2) }} {{$curr_symbol}}</del>
                                                          
                                                 @endif
                            </h4>
                             <ul>
                             <li><i class="fas fa-user"></i>  {{  $advertisment->advertiser -> name }}   </li>
                                    <li><i class="fas fa-eye"></i> 30 </li>
                                    <li><i class="far fa-calendar-alt"></i> Marce 9 , 2020</li>
                            </ul>
                         </div>
                         <div class="col-lg-4 text-right">
                            <div class="blog-share">
                                   <ul>
                                                  <span class="mt-2 sspan"><i class="fas fa-share"></i> مشاركة</span>
                                                <li><a href="javascript:fbShare('#',520,360)"><i class="fab fa-facebook-f contact-side" aria-hidden="true"></i></a></li>
                                                <li><a href="javascript:twitterShare('#',520,360)"><i class="fab fa-twitter contact-side" aria-hidden="true"></i></a></li>
                                                <li><a href="javascript:instagramShare('#',520,360)"><i class="fab fa-instagram contact-side" aria-hidden="true"></i></a></li>
                                                <li><a href="javascript:whatsappShare('#',520,360)"><i class="fab fa-whatsapp contact-side" aria-hidden="true"></i></a></li>
                                            </ul>
                                        </div>
                        </div>
                        <div class="col-lg-2 text-lg-right">
                             <a class="btn btn-base radius-btn" href="favorite.html"><i class="far fa-heart"></i> اضف للمفضلة</a>
                        </div>
                         
                    </div>
                </div>
                <div class="product-thumbnail-wrapper">
                    <div class="single-thumbnail-slider">
                       <!--  <div class="slider-item">
                            <img src="{{asset('assets/front/img/property-details/img1.png')}}" alt="img">
                        </div>
                       <div class="slider-item">
                            <img src="{{asset('assets/front/img/property-details/img2.png')}}" alt="img"  width="1250px;" height="638px;">
                        </div> -->
                        <div class="slider-item">
                            <img src="{{asset('assets/images/advertisments/'.$advertisment->img )   ?? ''}}" alt="img"  width="1250px;" height="638px;">
                        </div>
                        
                                @isset($advertisment-> images)
                                                @foreach($advertisment-> images as $image)  
                                                <div class="slider-item">
                            <img src="{{$image->img    ?? ''}}" alt="img" width="1250px;" height="638px;">
                        </div>
                                                @endforeach
                                                @endisset
                       
                    </div>
                    <div class="product-thumbnail-carousel">
                        <!-- <div class="single-thumbnail-item">
                            <img src="{{asset('assets/front/img/property-details/img1.png')}}" alt="img" width="210px;" height="107px;">
                        </div>
                        <div class="single-thumbnail-item">
                            <img src="{{asset('assets/front/img/property-details/img2.png')}}" alt="img" width="210px;" height="107px;">
                        </div> -->
                        <div class="single-thumbnail-item">
                            <img src="{{asset('assets/images/advertisments/'.$advertisment->img )   ?? ''}}" alt="img" width="210px;" height="107px;">
                        </div>
                        
                                @isset($advertisment-> images)
                                                @foreach($advertisment-> images as $image)  
                                                <div class="single-thumbnail-item">
                            <img src="{{$image->img    ?? ''}}" alt="img"  width="210px;" height="107px;">
                        </div>
                                                @endforeach
                                                @endisset
                       
                         
                    </div>
                </div>
            </div>
            <div class="row direction">
                <div class="col-lg-8">
                    
                    <div class="single-property-details-inner">
                        <h4>غرفة مزدوجة في شقة جميلة</h4>
                        <p > 
                             
                        {!! $advertisment-> details_ar !!}
                         </p>
                        <div class="single-property-grid">
                            <h4>تفاصيل الشقة</h4>
                            <div class="row">
                                <div class="col-md-3">
                                <p class="prop-first"><i class="fas fa-bed"></i> 3 سرير</p>
                                </div>
                                <div class="col-md-4">
                                    <p class="prop-first"><i class="fas fa-shower"></i> 2 حمام</p>
                                </div>
                                <div class="col-md-5">
                                    <p class="prop-first"> <i class="fas fa-home"></i> قد يشارك المضيف أو آخرون البيت </p> 
                                 </div>
                            </div>
                        </div>                         <div class="single-property-grid">
                            <h4>{{__('Available Services')}}      </h4>
                            <div class="row">
                             
                                @if($i == 0)
                              
                                <div class="col-md-4">
                                    <ul>
                                   @endif 
                                    @foreach($advertisment_options as $advertisment_option)
                                    @if($advertisment_option!="") 
                                 @php       
                                     $option_all = \App\models\Option::where('id', $advertisment_option) -> select('id','img','name_'.app()->getLocale() )->first();
                                         $i++;
 
                                    @endphp
                                             <li><i class="fa fa-check"></i>    {{$option_all->$name}}      </li>
                                        
                                       
<!--                                         <img class="img-fluid image-secondary"     src= {{asset('assets/images/options/'. $option_all->img )}}  alt=""  width="20" height="20">
 -->
 
                                        @if($i%3 == 0) 
                                
                                                </ul> </div> <div class="col-md-4">
                                    <ul>
                                                            
                            
                                            @endif 
    
                                        
                                    @endif
                                    @endforeach
                                        
                                        
                                     </ul>
                                </div>
                                
                                
                                
                            </div>
                        </div>
                        
                         
                        <div class="single-property-grid">
                            <h4>{{__('Location')}}        </h4>
                            

                            <div class="property-map">
                                <iframe src="{{$advertisment->google_map}}"></iframe> 
                            </div>
                        </div>
                        
                        <div class="single-property-grid">
                            <h4>فيديو توضيحى</h4>
                            <div class="property-video text-center" style="background: url(assets/img/property-details/img1.png);">
                                <a class="play-btn" href="https://www.youtube.com/embed/Wimkqo8gDZ0" data-effect="mfp-zoom-in"><i class="fa fa-play" aria-hidden="true"></i></a>
                            </div>
                        </div>
                        
                        <div class="single-property-grid">
                            <h4>التعليقات </h4>
                            <div class="media single-review-inner">
                                <div class="media-left">
                                    <div class="thumb">
                                        <img src="assets/img/say1.png" alt="img">
                                    </div>
                                </div>
                                <div class="media-body align-self-center">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h5>اسم الشخص</h5>
                                            <p>الشقة لطيفة جدًا ومريحة ، وعلى بعد خطوات قليلة توجد الحافلة وفي غضون 20 دقيقة أنت في وسط ميلانو. الشقة أفضل من الصور. المنطقة جيدة جدًا ويمكنك الحصول على تجربة إيطالية جدًا في الحانات والمطاعم المحلية.</p>
                                        </div>
                                        <div class="col-md-4 text-md-right">
                                            <p class="ratting-title"><span>5</span> تقييم</p>
                                            <div class="ratting-inner">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="media single-review-inner">
                                <div class="media-left">
                                    <div class="thumb">
                                        <img src="assets/img/say2.png" alt="img">
                                    </div>
                                </div>
                                <div class="media-body align-self-center">
                                    <div class="row">
                                       <div class="col-md-8">
                                            <h5>اسم الشخص</h5>
                                            <p>الشقة لطيفة جدًا ومريحة ، وعلى بعد خطوات قليلة توجد الحافلة وفي غضون 20 دقيقة أنت في وسط ميلانو. الشقة أفضل من الصور. المنطقة جيدة جدًا ويمكنك الحصول على تجربة إيطالية جدًا في الحانات والمطاعم المحلية.</p>
                                        </div>
                                        <div class="col-md-4 text-md-right">
                                            <p class="ratting-title"><span>5</span> تقييم</p>
                                            <div class="ratting-inner">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="media single-review-inner">
                                <div class="media-left">
                                    <div class="thumb">
                                        <img src="assets/img/say1.png" alt="img">
                                    </div>
                                </div>
                                <div class="media-body align-self-center">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h5>اسم الشخص</h5>
                                            <p>الشقة لطيفة جدًا ومريحة ، وعلى بعد خطوات قليلة توجد الحافلة وفي غضون 20 دقيقة أنت في وسط ميلانو. الشقة أفضل من الصور. المنطقة جيدة جدًا ويمكنك الحصول على تجربة إيطالية جدًا في الحانات والمطاعم المحلية.</p>
                                        </div>
                                        <div class="col-md-4 text-md-right">
                                            <p class="ratting-title"><span>5</span> تقييم</p>
                                            <div class="ratting-inner">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <form class="single-property-comment-form" action="#" method="post">
                            <div class="single-property-grid back-comment pdd-20">
                                <div class="single-property-form-title">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h4>اضف تعليقك</h4>
                                        </div>
                                        <div class="col-md-4 text-md-right">
                                            <div class="ratting-inner">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label class="single-input-inner style-bg">
                                            <span class="label">الاسم</span>
                                            <input type="text" name="name1" placeholder=" " required>
                                        </label>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="single-input-inner style-bg">
                                            <span class="label">البريد الالكترونى</span>
                                            <input type="text" name="name2" placeholder="">
                                        </label>
                                    </div>
                                    <div class="col-12">
                                        <label class="single-input-inner style-bg">
                                            <span class="label">اكتب تعليقك</span>
                                            <textarea name="name3" placeholder="اكتب تعليقك هنا ......"></textarea>
                                        </label>
                                    </div>
                                    <div class="col-12 mb-4">
                                        <button class="btn btn-base radius-btn" type="submit">ارسال تعليقك</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4">
                    <aside class="sidebar-area">
                        
                         <div class="widget widget-author text-center">
                            <h4 class="widget-title">تفاصيل الحجز</h4>
                             <div class="details">
                             <form id="form_reservation" action=" {{ route('site.checkout')}}" method="POST">
                            @csrf
                            <input type="hidden" name="advertisment_id" value="{{$advertisment-> id }}" >
                            <input type="hidden" name="price_now" value="{{$price_now}}"> </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                               <p class="mo-ney"><i class="fas fa-money-check"></i> 5000 S.R</p>
                            </div>
                            <div class="col-md-6 mb-4">
                               <p class="ratting-title mo-ney"><span>5</span> تقييم</p>
                                            <div class="ratting-inner">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                            </div>
                            <div class="col-md-6"> 
                            <p class="arrive">  {{__('Reservation Start')}}الوصول <span>  
                            <input type="date" id="start_date" class="form-control" name="start_date" placeholder="dd-mm-yyyy"      value="" min="2023-05-01" max="2050-12-31" required>

<!--                             <input type="date" id="start_date" class="form-control" name="start_date" placeholder="dd-mm-yyyy"      value="" min="2023-05-01" max="2050-12-31" required>
 --></span></p>
                            </div>
                                <div class="col-md-6">
                             <p class="arrive"> {{__('Reservation End')}} المغادرة 
                                <span>   
                                <input type="date" id="end_date" class="form-control" name="end_date"   value=" { $end_date}} " required>


 <!-- <input type="text" id="end_date" class="form-control" name="end_date"     value="" min="2023-05-01" max="2050-12-31"
    onfocus="(this.type='date')" onblur="(this.type='text')"> --></span>
                            </p>
                                </div>
                            
                                <div id="reservation-error-message" class="col-md-12">
                                           
                                           </div>
                            
                            <!-- <div class="col-md-12">
                                <label class="single-input-inner style-bg-border">
                                    <span class="label">الضيوف</span>
                                    <input type="number" name="name1" placeholder=" ">
                                </label>
                            </div> -->
                             <div class="col-12 mb-2">
                                
<button value="check" class="btn btn-base width call-btn"    id="call-btn" data-advertisment-id="{{$advertisment-> id}}"  >
     Check</button> 

<!--                                 <button class="btn btn-base width" tybe="submit">احجز الان</button>
 -->                            </div>
     
                            <div class="col-12 mb-4">
                            <p>لن نخصم رسوم الحجز في هذه المرحلة</p>
                            
                            <table id="table">
                                <tbody>
                                
  <tr>
    <td><span>5</span> ليالى <span>200 S.R</span></td>
    <td>570 S.R</td>
   </tr>
  <tr>
     <td>رسوم تنظيف</td>
    <td>22 S.R</td>
  </tr>
                                    <tr>
     <td>رسوم خدمة</td>
    <td>18 S.R</td>
  </tr>
                                    </tbody>
                                <tfoot>
                                 <tr>
    <th>المجموع قبل الضرائب</th>
     <th>570 S.R</th>
  </tr>
                                
                                </tfoot>
                                
                            </table>
                            </div>
                        </div>
                    </form>
                           
                            </div>        
                        </div>
    
                          <div class="widget widget-author text-center">
                            <h4 class="widget-title">نبذة عنا </h4>
                            <div class="thumb">
                                <img src="assets/img/bout.png" alt="img">
                            </div> 
                            <div class="details">
                                <h5>اسم الشخص</h5>
                              
                                <div class="text-right">
                                <p><i class="fas fa-graduation-cap side-data"></i>درست في:<span> Politecnico di Milano</span></p>
                                  <p><i class="fas fa-briefcase side-data"></i>عملي:<span> مهندس ديكور</span></p>
                                      <p><i class="fas fa-map-marker-alt side-data"></i> مكان الإقامة:<span> ميلان, إيطاليا</span></p>
                                     <p><i class="fas fa-globe side-data"></i> اللغات:<span> العربية، الإيطالية</span></p>
                                </div>
                               <ul class="social-area style-2">
                                <li><a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
                            </ul>
                            </div>        
                        </div>
                        <div class="widget widget-category">
                            <h5 class="widget-title">نوع العقار</h5>
                            <ul>
                                <li><a href="property.html">شقة <span>26</span></a></li>
                                <li><a href="property.html">بيت عائلى <span>20</span></a></li>
                                <li><a href="property.html">بيت <span>21</span></a></li>
                                <li><a href="property.html">فيلا  <span>31</span></a></li>
                                <li><a href="property.html">فندق <span>12</span></a></li>
                             </ul>
                        </div>
                        <div class="widget widget-place">
                            <h5 class="widget-title">اماكن</h5>
                            <ul>
                                <li>جدة <span>26</span></li>
                                <li>تبوك <span>20</span></li>
                                <li>القصيم <span>21</span></li>
                             </ul>
                        </div>
                         
                    </aside>
                </div>
            </div>
        </div>
    </div>
 
@include('front.includes.not-logged')
@include('front.includes.alert')
<!-- we can use only one with dynamic text -->
@include('front.includes.alert2')
@stop

@section('scripts')
 
<script>

$.ajaxSetup({
   headers: {
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }
}); </script>

<script type="text/javascript">
$(document).ready(function() {
   
    $(".call-btn").click(function(e){
      e.preventDefault();
    // alert('You have successfully call the function!'); 
     
     var advertisment_id=$(this).attr('data-advertisment-id');
    var start_date=$('#start_date').val();
    var end_date=$('#end_date').val();
    if ((Date.parse(end_date) < Date.parse(start_date))) {
            alert("End date should be greater than Start date");
            document.getElementById("end_date").value = "";
             return ;
        }
     
            alert(end_date);
            $.ajax({
            type:'POST',
            data:{ 
            advertisment_id:advertisment_id ,
            start_date : start_date ,  
            end_date : end_date,    
            
            },
                url: "{{url('advertisments/check-Reservations')}}",

       success: function (data) {
        //alert("success"+data.message);
        if(data.message!=""){
       
        $('#reservation-error-message').html("<span style='color:brown;font-weight:bold'>"+data.message+"</span>");
        if(data.status==true){ 
            
        // window.location = "{{-- route('site.cart.add',$advertisment-> id)--}}"
           $('#form_reservation').trigger( "submit" );
        }
    }
                },
                error:function () {
                alert('Error');
                }
                });

    });
});
</script> 
 
 

@stop