@extends("layouts.app")
@section('extra_css')
<style type="text/css">
.custom{
min-width: 50px;
left: -70px !important;
right: 0;
}
</style>
@endsection
@section("breadcrumb")
<li class="active">@lang('fleet.serviceItems')</li>
@endsection
@section('content')
   <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">
                  @lang('fleet.serviceItems')
                  </h3>
                  <a href="{{ route('service-item.create')}}" class="btn btn-success">@lang('fleet.add_service_item')</a>
                </div>

                <div class="box-body table-responsive">
                    <table class="table" id="data_table">
  <thead class="thead-inverse">
    <tr>
      <th>@lang('fleet.description')</th>
      <th>@lang('fleet.service_interval')</th>
      <th>@lang('fleet.create_reminder')</th>
      <th>@lang('fleet.action')</th>
    </tr>
  </thead>
  <tbody>
    @foreach($services as $service)
    <tr>
      <td>
        {{$service->description}}
      </td>
      <td>
        {{$service->overdue_time}} {{$service->overdue_unit}}
        @if($service->overdue_meter != null)
        @lang('fleet.or') {{$service->overdue_meter}} {{Hyvikk::get('dis_format')}}
        @endif
      </td>
      <td>
        {{$service->duesoon_time}} {{$service->duesoon_unit}} @lang('fleet.before_due')
      </td>
      <td>
        <div class="btn-group">

          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="fa fa-gear"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu custom" role="menu">
            <li><a href="{{ url("service-item/".$service->id."/edit")}}"> <span aria-hidden="true" class="glyphicon glyphicon-pencil" style="color: #f0ad4e;"></span>@lang('fleet.edit')</a></li>
            <li><a href="javascript:document.form_{{$service->id}}.submit();"> <span aria-hidden="true" class="glyphicon glyphicon-trash" style="color: #dd4b39"></span>@lang('fleet.delete')</a></li>

          </ul>
        </div>
        {!! Form::open(['url' => 'service-item/'.$service->id,'method'=>'DELETE','class'=>'form-horizontal','name'=>'form_'.$service->id]) !!}

        {!! Form::hidden("id",$service->id) !!}

        {!! Form::close() !!}
      </td>

    </tr>
    @endforeach
  </tbody>
  </table>

                </div>
            </div>
        </div>
    </div>

<!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">@lang('fleet.delete')</h4>
        </div>
        <div class="modal-body">
          <p>@lang('fleet.confirm_delete')</p>
        </div>
        <div class="modal-footer">



          <button id="del_btn" class="btn btn-danger" type="button" data-submit="">@lang('fleet.delete')</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>
      </div>

    </div>
  </div>

<!-- Modal -->

@endsection


@section('script')
<script type="text/javascript">
  $("#del_btn").on("click",function(){
    var id=$(this).data("submit");
    $("#form_"+id).submit();
  });
   $('#myModal').on('show.bs.modal', function(e) {
  var id = e.relatedTarget.dataset.id;
  $("#del_btn").attr("data-submit",id);
    });
</script>
@endsection