@extends('template')
@section('main')
<main id="site-content" role="main" ng-controller="cancel_reservation">
  @include('common.subheader') 
  <div class="container my-4 my-md-5">
     <div class="row">
        <div class="col-12 col-md-3 side-nav">
          @include('common.sidenav')
        </div>
        <div class="col-12 col-md-9 mt-3 mt-md-0">
      <div class="card mb-5">     
          <div class="card-header">
            <h1>
            {{ trans('messages.header.add_new_recurring_tasks') }}
          </h1>
        </div>
     <div class="card-body">
       {!! Form::open(['action' => 'RecurringTaskController@saveRecurringTasks', 'id' => 'addNewTaskForm', 'accept-charset' => 'UTF-8' , 'novalidate' => 'true']) !!}
       <div class="row">
        <label class="col-md-4">
          {{ trans('messages.contactus.property') }}
          <em class="text-danger">*</em>
        </label>
        <div class="col-md-8">    
          <select class="form-control" id="recurringProperty" name="property">
            <option value="" selected="selected">{{ trans('messages.lys.select') }} Property</option>
            @foreach($results as $res)
             <option value="{{ $res->id }}"> {{ $res->name }}</option>
            @endforeach
          </select>
        </div>
      </div>
        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.recurring_task_name') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
             {!! Form::text('task_name', '', ['class' => 'form-control', 'id' => 'task_name', 'placeholder' => 'Recurring Task Name']) !!} 
          </div>
        </div>
        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.task_status') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
            <select class="form-control" name="status">
            <option value="" selected="selected">{{ trans('messages.lys.select') }} Status</option>
             <option value="Not scheduled"> Not scheduled </option>
             <option value="Past Due"> Past Due </option>
             <option value="On Schedule"> On Schedule </option>
             <option value="Completed"> Completed </option>                
          </select>
          </div>
        </div>

         <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.task_description') }}
          </label>
          <div class="col-md-8">    
            {!! Form::textarea('description', '', ['class' => 'form-control', 'id' => 'description', 'placeholder' => 'Recurring Task Description', 'rows' => 5]) !!}
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.filter_type') }}
          </label>
          <div class="col-md-8">    
            {!! Form::text('filter_type', '', ['class' => 'form-control', 'id' => 'filter_type', 'placeholder' => 'Filter Type']) !!}
          </div>
        </div>

         <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.date_of_last_service') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
            {!! Form::date('last_service_date', '', ['class' => 'form-control', 'id' => 'last_service_date', 'placeholder' => 'Date of Last Service']) !!}
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.cleaning_frequency') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8" id="frequencySelect">    
            <select class="form-control" name="frequency" id="frequency">
            <option value="" selected="selected">{{ trans('messages.lys.select') }}</option>
            <option value="Every Week"> Every Week </option>
            <option value="Every Month"> Every Month </option> 
            <option value="Twice a Month"> Twice a Month </option>  
            <option value="Every Other month"> Every Other month </option> 
            <option value="Every Quarter"> Every Quarter </option> 
            <option value="Once a Year"> Once a Year </option>                
            <option value="Twice a Year"> Twice a Year </option>   
            </select>
          </div>
          <div class="col-md-4" id="daySelect">
            <select class="form-control" name="days">
            <option value="" selected="selected">{{ trans('messages.lys.select') }}</option>
            <option value="Sunday"> Sunday </option>
            <option value="Monday"> Monday </option> 
            <option value="Tuesday"> Tuesday </option>  
            <option value="Wednesday"> Wednesday </option> 
            <option value="Thursday"> Thursday </option> 
            <option value="Friday"> Friday </option>                
            <option value="Saturday"> Saturday </option>   
            </select>
          </div>
          <div class="col-md-4" id="dateSelect">
            {!! Form::date('frequency_date', '', ['class' => 'form-control', 'id' => 'frequency_date', 'placeholder' => 'Select Date']) !!}
            {!! Form::date('additional_frequency_date', '', ['class' => 'form-control', 'id' => 'selectDate', 'placeholder' => 'Select Date']) !!} 
            <div class="custom-tooltip ml-2">
              <i class="tooltip-frequency-date icon icon-question" id="" data-id=""></i>
              <div class="clean-tooltip-frequency-date tooltip-wrap tool-arrow-bottom" id="" role="tooltip">
                <div class="tooltip-info">
                 <span>
                   The date on which employee need to perform cleaning activity.
                 </span>
               </div>
             </div>
           </div> 
          </div>

        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.start_time') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
            {!! Form::time('start_time', '', ['class' => 'form-control', 'id' => 'start_time', 'placeholder' => 'Task Start Time']) !!}
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.end_time') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
            {!! Form::time('end_time', '', ['class' => 'form-control', 'id' => 'end_time', 'placeholder' => 'Task End Time']) !!}
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.employee_name') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-8">    
            <select class="form-control" name="employee" disabled id="recurringEmployee">
            <option value="" selected="selected">{{ trans("messages.lys.select") }}</option>
          </select>
          </div>
        </div>

         <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.comment') }}
          </label>
          <div class="col-md-8">    
            {!! Form::textarea('comment', '', ['class' => 'form-control', 'id' => 'comment', 'placeholder' => 'Comment', 'rows' => 4]) !!}
          </div>
        </div>

        <div class="row mt-3">
          <label class="col-md-4">
            {{ trans('messages.rooms.display_task') }}
            <em class="text-danger">*</em>
          </label>
          <div class="col-md-7">    
            <select class="form-control" name="display_task">
            <option value="" selected="selected">{{ trans('messages.lys.select') }}</option>
             <option value="1"> Yes </option>
             <option value="0"> No </option>              
          </select>
          </div>
          <div class="col-md-1 custom-tooltip mt-2">
              <i class="tooltip-display-task icon icon-question" id="" data-id=""></i>
              <div class="clean-tooltip-display-task tooltip-wrap tool-arrow-bottom" id="" role="tooltip">
                <div class="tooltip-info">
                 <span>
                   Display the task to employees. If want to stop recurring it select No.
                 </span>
               </div>
             </div>
           </div>
        </div>

      <div class="row mt-4">
        <label class="col-md-3"></label>
        <div class="col-md-9 text-right">
          {!! Form::submit( trans('messages.account.create') , ['class' => 'contact_submit btn btn-primary w-auto'])  !!}
          {!! Form::close() !!}
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</main>
@stop

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
  var freq=$('#frequencySelect').attr('class');

  $('#daySelect').hide();
  $('#dateSelect').hide();


  $("#frequency").change(function(){
    if($(this).val() == 'Every Week'){
      $('#frequencySelect').attr('class', 'col-md-4');
      $('#daySelect').show();
      $('#dateSelect').hide();
    }else if($(this).val() == ''){
      $('#frequencySelect').attr('class', 'col-md-8');
        $('#daySelect').hide();
        $('#dateSelect').hide();
    }else if($(this).val() == 'Twice a Month' || $(this).val() == 'Twice a Year'){
      $('#frequencySelect').attr('class', 'col-md-4');
      $('#daySelect').hide();
       $('#dateSelect').show();
      $('#selectDate').show();
    }
    else{
      $('#frequencySelect').attr('class', 'col-md-4');
      $('#daySelect').hide();
      $('#dateSelect').show();
      $('#selectDate').hide();
    }   
  });

  $('#recurringProperty').change(function(){
    $('#recurringEmployee option').remove();
    var property_id=$(this).val();
    $.ajax({
            url: "get-recurring-employees",
            type: 'GET',
            dataType:"json",
            data: {property_id:property_id},
            success:function(response)
            {

              if(response.length > 0)
              {
                $('#recurringEmployee').append('<option value="" selected="selected">{{ trans("messages.lys.select") }}</option>');
                $.each(response, function(key, value){
                  $('#recurringEmployee').append('<option value="'+value.id+'">'+value.employee_firstname+'</option>');
                });
              }
              else
              {
                  $('#recurringEmployee').append('<option value="" selected="selected">{{ trans("messages.lys.select") }}</option>');
              }
               

              $('#recurringEmployee').removeAttr('disabled');

            },
        });
  })
});
</script>
@endpush