@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.rooms.select_property_for_recurring_task') }}
       </h1>

     </div>
     <div class="card-body">
       {!! Form::open(['action' => 'RecurringTaskController@displayRecurringTasks', 'id' => 'propertySelectionForm', 'accept-charset' => 'UTF-8' , 'novalidate' => 'true']) !!}
       <div class="row">
        <label class="col-md-3">
          {{ trans('messages.contactus.property') }}
          <em class="text-danger">*</em>
        </label>
        <div class="col-md-9">    
          <select class="form-control" id="property" 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>
          @if ($errors->has('property'))  
          <span class="text-danger">
            {{ $errors->first('property') }}
          </span>
          @endif
        </div>
      </div>
      
   
     <div class="row mt-4">
      <label class="col-md-3"></label>
      <div class="col-md-9 text-right">
        {!! Form::submit( trans('messages.rooms.view_reurring_task') , ['class' => 'contact_submit btn btn-primary w-auto'])  !!}
        {!! Form::close() !!}
      </div>
    </div>
  </div>
</div>
   
</div>
</div>
 <div id="historyTable" class="row table-responsive"> 
       <table class="table table-bordered yajra-datatable" >
        <thead>
            <tr>
                <th>Id</th>
                <th>Property Id</th>
                <th>Task Name</th>
                <th>Employee Name</th>
                <th>Date of service scheduled</th>
                <th>Date of service completed</th>
                <th>Status</th>
                <th>Created at</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
</div>
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to delete one track, this procedure is irreversible.</p>
                    <p>Do you want to proceed?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default confirm-delete_cancel" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok confirm-delete">Delete</a>
                </div>
            </div>
        </div>
</div>
</main>
@stop

@push('scripts')
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

 <style>
    div.dataTables_wrapper div.dataTables_length select {
      width: auto !important;
      display: inline-block !important;
    }
    .selectboxit-container {  
      display: none !important;
    }
  </style>

<script type="text/javascript">
  $(document).ready(function(){
    $('#historyTable').hide();
    $('#property').on('change', function() {
    var property = $(this).val();
      $('#historyTable').show();
     //$('#historyTable').dataTable().fnClearTable();
      $('.yajra-datatable').dataTable().fnDestroy();
      history_datatable(property);
    });
    $('#confirm-delete').on('show.bs.modal', function(e) {
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        $(".confirm-delete").on('click',function(){
           $(".confirm-delete").attr("disabled", "disabled")
        });
     });

  });
  function history_datatable(property)
  {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,

        ajax:  {
            url: "{{ route('history-datatable') }}",
            type: 'POST',
            data: {property:property},
        },
        columns: [
              {data: 'id', name: 'id'},
              {data: 'property_id', name: 'property_id'},
              {data: 'task_name', name: 'task_name'},
              {data: 'employee_firstname', name: 'employee_firstname'},
              {data: 'date_of_service_scheduled', name: 'date_of_service_scheduled'},
              {data: 'date_of_service_completed', name: 'date_of_service_completed'},
              {data: 'status', name: 'status'},
              {data: 'created_at', name: 'created_at'},
              {
                  data: 'action', 
                  name: 'action', 
                  orderable: true, 
                  searchable: true
              },
        ]
      });
  }
</script>
@endpush