@extends('layouts.layout')
 @section('content')
<div class="container-fluid" style="min-height:620px">
<div class="fixedElement">
  <br>
<form class="search_filter" onsubmit="return shifttypeadd()" >
    <div class="row">
<div class="col-md-1">
</div>
      <div class="col-md-3">
        <label>Sfift titles</label>
        <div class="form-group ">
          <input  style="width:100%" type="text" autocomplete="off" id="s_title" class="form-control" placeholder="Sfift title" >
          </div>
      </div>

            <div class="col-md-3">
            <label>In Time * (hh:mm am)</label>
            <div class="form-group bootstrap-timepicker timepicker">
                      <input  style="width:100%"  id="fromtime" type="text" placeholder="HH:MM AM" class="form-control">
              </div>
            </div>
            <div class="col-md-3">
            <label>Out Time * (hh:mm pm)</label>
            <div class="form-group bootstrap-timepicker timepicker">
                      <input  style="width:100%"  id="totime" type="text" placeholder="HH:MM PM" class="form-control">
              </div>
            </div>

        <div class="col-md-1">
<span></span>
          <br>
          <button style="margin-top:12px" type="submit" data-toggle="tooltip" title="Submit" class="theme_color" ><i class="fa fa-plus" aria-hidden="true"></i></button>
            </div>

    </div>
    </form>
    </div>
    <div class="card">
        <div class="card-body">
            <!-- Start Page Content -->

            <div >
            <div class="table-responsive" >
                <table  id="myTable" class="myTable  data-table table table-bordered table-striped">
                    <thead>
                        <tr>
                            <!-- <th style="width:5%">#</th> -->
                            <th>Si</th>
                            <th>Shift title</th>
                            <th>In time</th>
                            <th >Out time</th>
                            <th  >Action</th>
                        </tr>
                    </thead>


<tbody>
  @if($shift_type!="" && count($shift_type)>0)
  @php
  $i=0;
  @endphp
  @foreach($shift_type as $shift_typelist)
  @php
  $i++;
  $shift_timing=$shift_typelist->shift_timing;
  $shift_timing1=explode("-",$shift_timing);
  @endphp
  <tr>
    <td width="50px">
{{$i}}
    </td>
    <td width="150px">
      <input  style="width:100%" value="{{$shift_typelist->name}}"  id="s_title_{{$shift_typelist->id}}" type="text" placeholder="Shift title" class="form-control">
    </td>
    <td width="120px">
      <div class="form-group bootstrap-timepicker timepicker">
                <input  style="width:100%" value="{{$shift_timing1[0]}}"  id="fromtime_{{$shift_typelist->id}}" type="text" placeholder="HH:MM AM" class="form-control timepic">
        </div>
    </td>
    <td width="120px">
      <div class="form-group bootstrap-timepicker timepicker">
                <input  style="width:100%" value="{{$shift_timing1[1]}}"  id="totime_{{$shift_typelist->id}}" type="text" placeholder="HH:MM AM" class="form-control timepic">
        </div>
    </td>
    <td width="50px">
      <button type="button" onclick="updateshift_time({{$shift_typelist->id}})" class="btn btn-default"  data-toggle="tooltip" title="Update">
<i class="fa fa-check" aria-hidden="true"></i>
      </button>
    </td>
  </tr>
  @endforeach
  @endif
</tbody>
                </table>
            </div>
            <!-- End PAge Content -->
        </div>
    </div>

</div>

<div class="modal fade" id="loadermodal" role="dialog" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <!-- Modal Header -->
        <center><img src="{{asset('images/kalimark_loader.gif')}}" width="220px"></center>
    </div>
</div>
</div>
</div>

@endsection