@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Time Slot')
@section('body-class', 'menu-position-side menu-side-left full-screen with-content-panel')

@section('breadcrumbs')
  <li class="breadcrumb-item">
    <span>TimeSlot</span>
  </li>
@endsection

@push('asset-top')
    
@endpush

@section('content')
  <div class="element-wrapper">
    <h6 class="element-header">
      Delivery Time Slot
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route('setting.timeslot.store')}}">
        @csrf
        <h5 class="form-header">
          TimeSlot
        </h5>
        <div class="form-desc">
          <!-- Discharge best employed your phase each the of shine. Be met even reason consider logbook redesigns. Never a turned interfaces among asking -->
        </div>
        <div class="form-check">
          <label for=""> Delivery Time</label>
          <label class="form-check-label"> 
            <div class="os-toggler-w {{(count($slots))?'on':''}}">
              <div class="os-toggler-i">
                <div class="os-toggler-pill"></div>
              </div>
            </div>
            <input class="form-check-input" id="delivery-check" type="checkbox" value="1" name="delivery_time" {{(count($slots))?'checked':''}}  style="display: none;">
          </label>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <div class="form-group">
              <label for=""> Select Day</label>
              <select id="day" class="form-control">
                <option value="">Select</option>
                <option>Sunday</option>
                <option>Monday</option>
                <option>Tuesday</option>
                <option>Wednesday</option>
                <option>Thursday</option>
                <option>Friday</option>
                <option>Saturday</option>
              </select>
              @error('day')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for=""> Every minute</label>
              <input type="text" class="form-control" id="minute">
              @error('minute')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for=""> From time</label>
              <input type="time" class="form-control" id="from">
              @error('from')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for=""> To time</label>
              <input type="time" class="form-control" id="to">
              @error('to')
                  <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
              @enderror
            </div>
          </div>
        </div>
        <div class="form-buttons-w">
          <button class="btn btn-primary" type="button" id="create-slot"> Create time slots</button>
          <button class="btn btn-danger" type="button" id="cancel"> Cancel</button>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label>Minimum required time to process orders (Hours)</label>
              <input type="text" name="minimum_time" class="form-control" value="{{(count($slots))?$slots[0]['minimum_time']:''}}">
            </div>
          </div>
          <div class="col-sm-4">
            <div class="form-group">
              <label>Calendar Limit(in days)</label>
              <input type="text" name="calendar_limit" class="form-control" value="{{(count($slots))?$slots[0]['calendar_limit']:''}}">
            </div>
          </div>
        </div>
            
        <!-- Media -->
        <fieldset class="form-group">
          <legend><span>Slots</span></legend>
          <div class="row">
            <div class="col-sm-2">
              
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for=""> Select Day</label>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group">
                <label for=""> Start Time</label>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group">
                <label for=""> End Time</label>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-2" style="margin-top:10px;">
              <div class="row">
                <div class="col-sm-7 offset-5">
                  <div class="form-check">
                    <label class="form-check-label"> 
                      <div class="os-toggler-w on">
                        <div class="os-toggler-i">
                          <div class="os-toggler-pill"></div>
                        </div>
                      </div>
                      <input class="form-check-input global-show" id="global-check" type="checkbox" value="1" checked style="display: none;">
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <select class="form-control global-day">
                  <option value="">Select</option>
                  <option>Sunday</option>
                  <option>Monday</option>
                  <option>Tuesday</option>
                  <option>Wednesday</option>
                  <option>Thursday</option>
                  <option>Friday</option>
                  <option>Saturday</option>
                </select>
                @error('day')
                    <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>
            <div class="col-sm-3" style="display:none;">
              <div class="form-group">
                <input type="time" class="form-control start" >
                @error('start')
                    <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>
            <div class="col-sm-3" style="display:none;">
              <div class="form-group">
                <input type="time" class="form-control end" >
                @error('end')
                    <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                @enderror
              </div>
            </div>
          </div>  
          <fieldset class="form-group sub-block">
            <div class="row main-row" style="display:none;">
                <div class="col-2" style="margin-top:10px;">
                  <div class="row">
                    <div class="col-sm-5">
                      <div class="form-group row-actions" style="margin-top:0">
                        <a href="#" onclick="return removeRow(this)" class="remove-row"><i class="os-icon os-icon-x"></i></a>
                        <a href="#" onclick="return addRow(this)" class="add-row"><i class="os-icon os-icon-plus"></i></a>
                      </div>
                    </div>
                    <div class="col-sm-7">
                      <div class="form-check">
                        <label class="form-check-label"> 
                          <div class="os-toggler-w on">
                            <div class="os-toggler-i">
                              <div class="os-toggler-pill"></div>
                            </div>
                          </div>
                          <input class="form-check-input show" type="checkbox" value="1" checked style="display: none;">
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <select class="form-control day">
                      <option value="">Select</option>
                      <option>Sunday</option>
                      <option>Monday</option>
                      <option>Tuesday</option>
                      <option>Wednesday</option>
                      <option>Thursday</option>
                      <option>Friday</option>
                      <option>Saturday</option>
                    </select>
                    @error('day')
                        <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <input type="time" class="form-control start" >
                    @error('start')
                        <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    <input type="time" class="form-control end" >
                    @error('end')
                        <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
              </div>
            @if(count($slots))
              @foreach($slots as $slot)
                <input type="hidden" name="row[{{$slot->id}}][id]" value="{{$slot->id}}">
                <div class="row main-row" >
                  <div class="col-2" style="margin-top:10px;">
                    <div class="row">
                      <div class="col-sm-5">
                        <div class="form-group row-actions" style="margin-top:0">
                          <a href="#" onclick="return removeRow(this)" class="remove-row"><i class="os-icon os-icon-x"></i></a>
                          <a href="#" onclick="return addRow(this)" class="add-row"><i class="os-icon os-icon-plus"></i></a>
                        </div>
                      </div>
                      <div class="col-sm-7">
                        <div class="form-check">
                          <label class="form-check-label"> 
                            <div class="os-toggler-w {{($slot->show==1)?'on':''}}">
                              <div class="os-toggler-i">
                                <div class="os-toggler-pill"></div>
                              </div>
                            </div>
                            <input class="form-check-input show" name="row[{{$slot->id}}][show]" type="checkbox" value="1" {{($slot->show==1)?'checked':''}}  style="display: none;">
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="form-group">
                      <select class="form-control day" name="row[{{$slot->id}}][day]">
                        <option value="">Select</option>
                        <option {{($slot->day=='Sunday')?'selected':''}}>Sunday</option>
                        <option {{($slot->day=='Monday')?'selected':''}}>Monday</option>
                        <option {{($slot->day=='Tuesday')?'selected':''}}>Tuesday</option>
                        <option {{($slot->day=='Wednesday')?'selected':''}}>Wednesday</option>
                        <option {{($slot->day=='Thursday')?'selected':''}}>Thursday</option>
                        <option {{($slot->day=='Friday')?'selected':''}}>Friday</option>
                        <option {{($slot->day=='Saturday')?'selected':''}}>Saturday</option>
                      </select>
                      @error('day')
                          <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <input type="time" class="form-control start" name="row[{{$slot->id}}][start]" value="{{$slot->start}}">
                      @error('start')
                          <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <input type="time" class="form-control end" name="row[{{$slot->id}}][end]" value="{{$slot->end}}">
                      @error('end')
                          <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                      @enderror
                    </div>
                  </div>
                </div>
              @endforeach
            @endif
          </fieldset>
        </fieldset>
        
        <div class="form-buttons-w">
          <button class="btn btn-primary" type="submit"> Submit</button>
        </div>
      </form>
    </div>
  </div>
@endsection
@push('asset-bottom')
  <script type="text/javascript">
    jQuery('#create-slot').click(function(e){
      e.preventDefault();
      $day = jQuery('#day').val();
      $minute = jQuery('#minute').val();
      $from = jQuery('#from').val();
      $to = jQuery('#to').val();

      $more = true;
      $i = 1;
      // $j = {{(count($slots))?($slot->id)+1:0}};

      start = end = '';
      while($more){
        if($i==1)
          start = $from;
        else
          start = end;

        end = moment.utc(start,'hh:mm').add($minute,'minutes').format('HH:mm');
        
        cloned = jQuery('.sub-block .main-row:last').clone();
        name = cloned.find('.start').attr('name');
        
        if(name=='undefined' || name==''){
          $j=0;
        } else {
          name = name.split('row[');
          name = name.split('][start]');
          name = name.replace(/,/g,'');
          
          $j = parseInt(name)+1;
        }
        
        cloned.find('.start').attr('name',"row["+$j+"][start]")
        cloned.find('.start').val(start);
        cloned.find('.end').attr('name',"row["+$j+"][end]");
        cloned.find('.end').val(end);
        cloned.find('.day').attr('name',"row["+$j+"][day]");
        cloned.find('.day').val($day);
        cloned.find('.show').attr('name',"row["+$j+"][show]");
        cloned.find('.show').prop('checked', true);
        cloned.find('.os-toggler-w').addClass('on');
        cloned.show();
        cloned.appendTo('.sub-block');
        if($to==end)
          $more=false;

        $i++;$j++;
      }
    });

    jQuery('body').on('click','.global-show', function(){
      checked = jQuery(this).is(':checked');
      jQuery('.show').each(function(){
        if(checked){
          jQuery(this).prop('checked', true);
          jQuery(this).closest('.form-check').find('.os-toggler-w').addClass('on');                
        } else {
          jQuery(this).prop('checked', false);
          jQuery(this).closest('.form-check').find('.os-toggler-w').removeClass('on');
        }        
      });      
    });

    jQuery('body').on('change','.global-day', function(){
      day = jQuery(this).val();
      if(day==''){
        jQuery('.main-row').show();
        if(jQuery('.main-row:first .day').val()==''){
          jQuery('.main-row:first').hide();
        }
      } else{
        jQuery('.day').each(function(){
          if(jQuery(this).val()==day){
            jQuery(this).closest('.main-row').show();
          } else {
            jQuery(this).closest('.main-row').hide();
          }       
        });      
      }
    });
  </script>
@endpush