@extends('admin.layouts.master')

@section('title','Showing Request Edit')

@section('content')
        <h2 class="text-center" id="request_showLabel">Schedule a Showing</h2>
        <form action="{{ route('admin.showing.update',$showing->id) }}" class="text-center" method="POST">
          @csrf
          @method('PUT')
          <h5>When Are You Available?</h5>
          <input type="hidden" id="gtokenSH2" name="gToken">
          <div class="form-group d-flex" @if(app()->getLocale() == "ar") dir="ltr" @endif>
              <button id="left" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-left"></i>
              </button>
              <div id="request_showing_carousel" class="col-11 my-1 owl-carousel owl-theme" data-toggle="buttons">
                @for ($i=1;$i<15;$i++)
                <div id="{{ $i }}" class="post mx-2 px-2 border
                @if(date('d',strtotime($showing->date)) == date('d',strtotime(today().'+ '.$i.' day')) && date('M',strtotime($showing->date)) == date('M',strtotime(today().'+ '.$i.' day')))
                old
                @endif
                ">
                  <p class="p-0 m-0">@lang('site.'.date('l',strtotime(today()."+ ".$i." day")))</p>
                  <p class="h2 p-0 m-0">{{ date('d',strtotime(today()."+ ".$i." day")) }}</p>
                  <p class="p-0 m-0">@lang('site.'.date('M',strtotime(today()."+ ".$i." day")))</p>
                </div>
                @endfor
              </div>
              <button id="right" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-right"></i>
              </button>
          </div>
          <input id='date' name="date" type="text" value="{{$showing->date}}" hidden readonly>
          <div class="form-group d-flex" @if(app()->getLocale() == "ar") dir="ltr" @endif>
            <button id="left2" type="button" class="bg-transparent border-0">
              <i class="fa fa-angle-left"></i>
            </button>
              <div id="request_time_carousel" class="col-11 my-1 owl-carousel owl-theme" data-toggle="buttons">
                @for ($j=10;$j<14;$j++)
                  @php if(!isset($noon)) $noon = false; if($j == 12 && $noon == false) $noon = true; @endphp
                  @php if($j == 11 && $noon == true) break; @endphp
                  @php if($j == 13) $j = 1; @endphp
                    @if($noon == true)
                      @php $t = __('site.pm'); @endphp
                    @else
                      @php $t = __('site.am'); @endphp
                    @endif
                  <div id="{{ $j }}" class="postTime mx-2 px-2 border
                    @if($showing->time == $j.' '.$t)
                        old
                    @endif
                  ">
                    
                    <p class="p-0 m-0">{{ $j.' '.$t }}</p>
                  </div>
                @endfor
              </div>
              <button id="right2" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-right"></i>
              </button>
          </div>
          <input id='time' name="time" type="text" value="{{$showing->time}}" hidden readonly>
          <h5>Are You Available For Another Time?</h5>
          <div class="form-group d-flex" @if(app()->getLocale() == "ar") dir="ltr" @endif>
              <button id="left3" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-left"></i>
              </button>
              <div id="request_showing_carousel2" class="col-11 my-1 owl-carousel owl-theme" data-toggle="buttons">
                @for ($i=2;$i<15;$i++)
                <div id="{{ $i }}" class="post2 mx-2 px-2 border
                @if(date('d',strtotime($showing->date2)) == date('d',strtotime(today().'+ '.$i.' day')) && date('M',strtotime($showing->date2)) == date('M',strtotime(today().'+ '.$i.' day')))
                old
                @endif
                ">
                  <p class="p-0 m-0">@lang('site.'.date('l',strtotime(today()."+ ".$i." day")))</p>
                  <p class="h2 p-0 m-0">{{ date('d',strtotime(today()."+ ".$i." day")) }}</p>
                  <p class="p-0 m-0">@lang('site.'.date('M',strtotime(today()."+ ".$i." day")))</p>
                </div>
                @endfor
              </div>
              <button id="right3" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-right"></i>
              </button>
          </div>
          <input id='date2' name="date2" type="text" value="{{$showing->date2}}" hidden readonly>
          <div class="form-group d-flex" @if(app()->getLocale() == "ar") dir="ltr" @endif>
            <button id="left4" type="button" class="bg-transparent border-0">
              <i class="fa fa-angle-left"></i>
            </button>
              <div id="request_time_carousel2" class="col-11 my-1 owl-carousel owl-theme" data-toggle="buttons">
                @for ($a=10;$a<14;$a++)
                  @php if(!isset($noon2)) $noon2 = false; if($a == 12 && $noon2 == false) $noon2 = true; @endphp
                  @php if($a == 11 && $noon2 == true) break; @endphp
                  @php if($a == 13) $a = 1; @endphp
                    @if($noon2 == true)
                      @php $c = __('site.pm'); @endphp
                    @else
                      @php $c = __('site.am'); @endphp
                    @endif
                  <div id="{{ $a }}" class="postTime2 mx-2 px-2 border
                    @if($showing->time2 == $a.' '.$c)
                        old
                    @endif
                  ">
                    <p class="p-0 m-0">{{ $a.' '.$c }}</p>
                  </div>
                @endfor
              </div>
              <button id="right4" type="button" class="bg-transparent border-0">
                <i class="fa fa-angle-right"></i>
              </button>
          </div>
          <input id='time2' name="time2" type="text" value="{{$showing->time2}}" hidden readonly>
          <div class="d-flex justify-content-around align-items-center">
            <div id="first" class="postMethod border py-1 px-3 d-flex align-items-center" @if($showing->method == 'in person') style="color:#fff;background-color:#d85252;" @endif>
              <input type="radio" name="method" value="in person" @if($showing->method == 'in person') checked @endif><i class="mx-2 fa fa-home"></i>@lang('site.in_person')
            </div>
            <div id="second" class="postMethod border py-1 px-3 d-flex align-items-center" @if($showing->method == 'virtual') style="color:#fff;background-color:#d85252;" @endif>
              <input type="radio" name="method" value="virtual" @if($showing->method == 'virtual') checked @endif><i class="mx-2 fa fa-mobile"></i>@lang('site.virtual')
            </div>
          </div>
          <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="agent_id" value="{{ $showing->agent_id }}">
          <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="property_id" value="{{ $showing->property_id }}">
          <input class="my-2 col-11 mx-auto form-control" placeholder="@lang('site.Name')" type="text" name="name" value="{{ $showing->name }}">
          <input class="my-2 col-11 mx-auto form-control" placeholder="@lang('site.Email')" type="text" name="email" value="{{ $showing->email }}">
          <input class="my-2 col-11 mx-auto form-control" placeholder="@lang('site.Mobile')" type="text" name="mobile" value="{{ $showing->mobile }}">
          <div class="d-none form-group col-11 px-0 my-2 mx-auto selectvert">
            <select class="mx-auto form-control" name="methodType">
                <option value="" disabled selected>Virtual Method</option>
                <option value="FaceTime" @if($showing->methodType == 'FaceTime') selected @endif>FaceTime</option>
                <option value="Google Meet" @if($showing->methodType == 'Google Meet') selected @endif>Google Meet</option>
                <option value="Skype" @if($showing->methodType == 'Skype') selected @endif>Skype</option>
                <option value="Zoom" @if($showing->methodType == 'Zoom') selected @endif>Zoom</option>
                <option value="WhatsApp" @if($showing->methodType == 'WhatsApp') selected @endif>WhatsApp</option>
            </select>
          </div>
          <div class="d-none form-group col-11 px-0 my-2 mx-auto selectvertData">
          </div>
          <textarea class="my-2 col-11 p-1 ckeditor" name="message" id="message" cols="50" rows="5" placeholder="{{ __('site.notes') }}">{{ $showing->message }}</textarea>
            @foreach($errors->showing->all() as $error)
              <p class="text-danger">{{ $error }}</p>
            @endforeach
          <div class="modal-footer">
            <a onclick="Captcha('gtokenSH2')" class="bg-danger btn btn-danger" style="font-size: 14px;">{{__('site.Send')}}</a>
            <button hidden type="submit" id="doSubmitWithCaptchagtokenSH2"></button>
          </div>
        </form>
@endsection
@section('js')a
<script>
    $(document).ready(function() {
        let oldData= $(".old").map(function() { return this; }).get();
        oldData.forEach(e=>{
            e.click();
        });
    });
    if('<br />
<b>Warning</b>:  Undefined variable $showing in <b>/home/nilecp/public_html/resources/views/admin/pages/showing/edit.blade.php</b> on line <b>157</b><br />
<br />
<b>Warning</b>:  Attempt to read property "method" on null in <b>/home/nilecp/public_html/resources/views/admin/pages/showing/edit.blade.php</b> on line <b>157</b><br />
' == 'virtual'){
        $('.selectvert').removeClass('d-none');
        $('.selectvertData').removeClass('d-none');
        $('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" value="{{ $showing->methodTypeData }}" type="text" name="methodTypeData">`);
    }
  $('.modal').modal('show');
  $('#right').on("click",function(){
    $('.owl-next').first().click();
  });
  $('#left').on("click",function(){
    $('.owl-prev').first().click();
  });
  $('#right2').on("click",function(){
    $('.owl-next').eq(1).click();
  });
  $('#left2').on("click",function(){
    $('.owl-prev').eq(1).click();
  });
  $('#right3').on("click",function(){
    $('.owl-next').eq(2).click();
  });
  $('#left3').on("click",function(){
    $('.owl-prev').eq(2).click();
  });
  $('#right4').on("click",function(){
    $('.owl-next').eq(3).click();
  });
  $('#left4').on("click",function(){
    $('.owl-prev').eq(3).click();
  });
  $('.post').on("click", function(e) {
    let x= $(".post").map(function() { return this; }).get();
    x.forEach(e=>{
     e.style = "background-color:#fff;";
     let ch = e.children;
     Object.values(ch).forEach(c=>{
       c.style = "color:#37404d;";
     });
    });
    let int = $(this).attr('id');
    const divelement = this.children;
    this.style = "background-color:#d85252;";
    Object.values(divelement).forEach(dive=>{
    dive.style = "color:#fff;";
    });
    const date = new Date();
    const wd =  new Date()
    wd.setDate(date.getDate() + parseInt(int))
    let day = wd.getDate();
    let month = wd.getMonth()+1;
    let year = wd.getFullYear();
    let Dt = `${day}-${month}-${year}`;
    $('#date').val(Dt);
  });
  $('.post2').on("click", function(e) {
    let x= $(".post2").map(function() { return this; }).get();
    x.forEach(e=>{
     e.style = "background-color:#fff;";
     let ch = e.children;
     Object.values(ch).forEach(c=>{
       c.style = "color:#37404d;";
     });
    });
    let int = $(this).attr('id');
    const divelement = this.children;
    this.style = "background-color:#d85252;";
    Object.values(divelement).forEach(dive=>{
    dive.style = "color:#fff;";
    });
    const date = new Date();
    const wd =  new Date()
    wd.setDate(date.getDate() + parseInt(int))
    let day = wd.getDate();
    let month = wd.getMonth()+1;
    let year = wd.getFullYear();
    let Dt = `${day}-${month}-${year}`;
    $('#date2').val(Dt);
  });
  $('.postTime').on("click", function(e) {
    let x= $(".postTime").map(function() { return this; }).get();
    x.forEach(e=>{
     e.style = "background-color:#fff;";
     let ch = e.children;
     Object.values(ch).forEach(c=>{
       c.style = "color:#37404d;";
     });
    });
    let int = $(this).attr('id');
    const divelement = this.children;
    this.style = "background-color:#d85252;";
    divelement[0].style = "color:#fff;";
    console.log($('#time').val());
    $('#time').val($(this).text());
    console.log($('#time').val());
  });
  $('.postTime2').on("click", function(e) {
    let x= $(".postTime2").map(function() { return this; }).get();
    x.forEach(e=>{
     e.style = "background-color:#fff;";
     let ch = e.children;
     Object.values(ch).forEach(c=>{
       c.style = "color:#37404d;";
     });
    });
    let int = $(this).attr('id');
    const divelement = this.children;
    this.style = "background-color:#d85252;";
    divelement[0].style = "color:#fff;";
    console.log($('#time').val());
    $('#time2').val($(this).text());
    console.log($('#time2').val());
  });
  $('.postMethod').on("click", function(e) {
    let x= $(".postMethod").map(function() { return this; }).get();
    x.forEach(e=>{
     e.style = "background-color:#fff;color:#37404d;";
    });
    this.style = "background-color:#d85252;color:#fff;";
    let h = $(this).attr('id');
    $('#'+h+' input:radio').prop('checked', true);
    if ($('#' + h + ' input:radio').val() == 'virtual') {
        $('.selectvert').removeClass('d-none');
        $('.selectvertData').removeClass('d-none');
    }else{
        $('.selectvert').addClass('d-none');
        $('.selectvertData').addClass('d-none');
    }
  });
  $('[name="methodType"]').on('change',function(){
        console.log($('.selectvertData'));
        if($(this).val() == 'FaceTime')$('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" placeholder="Mobile number or Apple ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`);
        if($(this).val() == 'Google Meet') $('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" placeholder="Google Meet Mobile number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`);
        if($(this).val() == 'Skype') $('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" placeholder="Skype ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`);
        if($(this).val() == 'Zoom') $('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" placeholder="Email" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`);
        if($(this).val() == 'WhatsApp') $('.selectvertData').html(`<input class="my-2 col-12 mx-auto form-control" placeholder="WhatsApp number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`);
    });
</script>
@endsection