@extends("admin.template")
@php
use App\Models\Enums\DayNameType;    
@endphp

@section("content")
  <div class="row">
    <div class="col-md-12">
      <h1 class="page-title">Working Day Times</h1>
    </div>
  </div>

  <div class="portlet light bordered">
    <div class="portlet-body">
      <div class="table-responsive">
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <th width="70px">Day</th>
            <th width="120px">Time Start</th>
            <th>Time End</th>
            <th width="50px">Action</th>
          </tr>
          </thead>
          <tbody>
          @foreach($working_day_time as $w)
            <tr>
              <td>{{ DayNameType::$values[$w->day] }}</td>
              <td>{{ ViewHelper::formatTime($w->time_start) }}</td>
              <td>{{ ViewHelper::formatTime($w->time_end) }}</td>
              <td>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editWorkingDay" onclick="edit({{$w->working_day_time_id}},'{{$w->time_start}}','{{$w->time_end}}','{{DayNameType::$values[$w->day]}}')">
                  Edit
                </button>
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
        
      </div>
    </div>
  </div>


  
<!-- Modal -->
<div class="modal fade" id="editWorkingDay" tabindex="-1"  data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="editWorkingDayLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      
    <form method="POST">
      {!! csrf_field() !!}
      <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="editWorkingDayLabel">Edit Working Day - <b id="day_name"></b></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="hidden" name="working_day_time_id" id="working_day_time_id" >
            <table class="table table-bordered no-margin-btm" id="preferred_slot">
                <thead>
                <tr>
                    <th width="33%">Start Time</th>
                    <th width="33%">End Time</th>
                </tr>
                </thead>
                <tbody>
                  <td>
                      <input class="form-control timepicker start_time" name="time_start" type="time">
                  </td>
                  <td>
                      <input class="form-control timepicker end_time" name="time_end" type="time">
                  </td>
                </tbody>
            </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      </form>
    </div>
  </div>
@endsection

@section('script')

<script src="{{asset('assets/js/jquery-ui.js')}}"></script>
<link rel="stylesheet" href="{{asset('assets/css/jquery.timepicker.min.css')}}"/>
<script src="{{asset('assets/js/jquery.timepicker.min.js')}}"></script>
<script>
   $(document).ready(function() {

   });

   function edit(id,start_time,end_time,dayname){
     start_time = start_time.length>5?start_time.substr(0,5):start_time;
     $('.start_time').val(start_time);
     $('.end_time').val(end_time);
    $('#working_day_time_id').val(id);
    $('#day_name').html(dayname);
   }

</script>
@endsection