@extends('web.layouts.main')
@section('content')

<main>
        <!--Start heading-pg-->
        <div class="heading-pg">
            <div class="container">
                <div class="inner">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                          <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a></li>
                          <li class="breadcrumb-item active" aria-current="page">   {{__('web.book_date')}} </li>
                        </ol>
                    </nav>
                    <h2> {{__('web.book_date')}} </h2>
                </div>
            </div>
            <img src="{{url('')}}/assets/web/images/line-heading-pg.png" alt="" class="line">
        </div>
        <!--Start booking-pg-->
        <section class="booking-pg">
            <div class="container">
                <form method="post" onsubmit="savedate(this)" action="{{url(getCurrentLocale().'/book')}}">
                    @CSRF
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="heading-t heading-t-r">
                                <p id="date"></p>
                                <h3 id="time_date"> <span ><small><b></b></small></span></h3>
                                
                            </div>
                            <div class="form-wrapper">
                                <div class="form-group">
                                    <select name="reason_id" id="reason_id" class="form-control" autocomplete="off" autofocus >
                                       
                                        @foreach($reasons as $row)
                                        <option value="{{$row->id}}">{{reasonname($row->id)}}</option>
                                        @endforeach
                                        
                                    </select>
                                    <label class="floating-label"> {{__('web.reason')}}  </label>
                                </div>
                                <div class="form-group">
                                    <input type="text" name="name" id="name" class="form-control" autocomplete="off" autofocus  />
                                    <label class="floating-label"> {{__('web.name')}} </label>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" id="email" class="form-control" autocomplete="off" autofocus  />
                                    <label class="floating-label"> {{__('web.email')}}   </label>
                                </div>
                                <div class="form-group">
                                    <input type="number" name="phone" id="phone" class="form-control" autocomplete="off" autofocus  />
                                    <label class="floating-label">  {{__('web.phone')}} </label>
                                </div>
                                
                                <button class="submit-btn mt-5"><i class="fab fa-telegram-plane"></i>  {{__('web.sure')}} </button>

                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="heading-t">
                                <h3>{{ date( "F")}}, <span>{{ date( "Y")}}</span></h3>
                            </div>
                            <div class="table-responsive">
                                <table class="table">
                                    <tr>
                                        @php for($i=0 ;$i < 7; $i++){ 
                                                    
                                                    @endphp
                                                   <th>{{ date( "D", strtotime( "+$i days" ) )}} <span>{{ date( "m/d", strtotime( "+$i days" )) }}</span></th>
                                        @php } @endphp
                                       
                                    </tr>
                                     @php for($k=0 ;$k < contdates(date('Y-m-d')); $k++){  @endphp
                                    <tr>
                                       
                                       @php for($i=0 ;$i < 7; $i++){  @endphp
                                          @if(datesget(date( "Y-m-d", strtotime( "+$i days" )),$k))
                                          
                                          @if(!is_null(timedates(date( "Y-m-d", strtotime( "+$i days" )),$k)))
                                        <td>
                                            <div class="radio-card">
                                                <label>
                                                    <input type="radio"onclick="changetime(this)" name="date" value='{{timedatesid(date( "Y-m-d", strtotime( "+$i days" )),$k)}}' class="card-input-element" />
                                                    <div class="panel panel-default card-input">
                                                        <h6 >{{date('g:i a',strtotime(timedates(date( "Y-m-d", strtotime( "+$i days" )),$k)))}}</h6>
                                                    </div>
                                                </label>
                                            </div>
                                        </td>
                                        @endif
                                        @else
                                        <td></td>
                                        @endif
                                        @php } @endphp

                                        
                                       
                                    </tr>
                                   @php } @endphp
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
         <div class="modal fade modal_login" id="modal_fail" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4>{{__('web.fill_inputs')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade modal_login" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/checked.svg" alt="">
                        </div>
                        <h4 style="background-color:#d4edd9">{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>
    </main>
@push('js')
<script>
  function savedate(elem){
          event.preventDefault();
   
         let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
          success:function(data)
          {
            
            $("#modal_success").modal('show');
            window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
              $('#modal_fail').modal('show');
              $('.is-invalid').removeClass('is-invalid');
   $.each(data.responseJSON.errors, function(key,value) {
     
     $('#'+key).addClass('is-invalid');
     
 }); 
 
 
 
}
        })


    }
    function changetime(elem){
        let id = $(elem).val();
       
       
       
     
      $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/dates/')) !!}+'/'+id,
          type: 'GET',              
          data: 'dataform',        
          dataType: 'json',
         
          success:function(data)
          {
              
              $('#date').html(data.date);
            $('#time_date').html(data.date_time+', <span >'+data.time+' <small><b>'+data.type+'</b></small></span>');
            
               }
          
        })


    }
</script>
@endpush
@stop