@extends('layouts.mainlayout')
@section('title', 'Shift')
@section('main')
<!-- Form validation -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold"> Create/Edit Shift</h5>
    </div>
    <div class="card-body">
        @if(isset($shift))
        <form class="form-validate-jquery" action="{{ route('shift.update',$shift->id) }}" method="POST">
            <input type="hidden" name="_method" value="PATCH"/>
        @else
        <form class="form-validate-jquery" action="{{ route('shift.store') }}" method="POST">
        @endif
            @csrf
            <fieldset class="mb-3">
                <legend class="text-uppercase font-size-sm font-weight-bold"> Shift</legend>
                <!-- Basic text input -->
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Shift Name: <i class="bi bi-info-circle-fill text-primary ms-1" data-bs-toggle="tooltip" data-bs-placement="right"
       title="Enter a unique name for the shift, such as 'Morning Shift' or 'Night Shift'."></i><span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" name="shift" class="form-control @error('shift') is-invalid @enderror" required placeholder="Shift Name"
                               @if(isset($shift)) value="{{$shift->shift}}" autofocus @endif />
                        @error('shift')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Start Time (hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="The scheduled time when the shift starts."></i></label>
                    <div class="col-md-9">
                        <div class="input-group" >
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i></span>
                        </span>
                                                        <input type="text" name="start_time" id="anytime-time" class="form-control @error('start_time') is-invalid @enderror"  data-date-format="{{ config('settings.time_format_js') }}"   @if(isset($shift)) value="{{$shiftStartTime}}" autofocus @endif/>
                            @error('start_time')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">End Time (hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="The scheduled time when the shift ends."></i></label>
                    <div class="col-md-9">
                        <div class="input-group">
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i></span>
                        </span>
                                                        <input type="text" name="end_time" id="anytime-time-endshift" class="form-control @error('end_time') is-invalid @enderror" data-date-format="{{ config('settings.time_format_js') }}"  @if(isset($shift)) value="{{$shiftEndTime}}" autofocus @endif/>
                            @error('end_time')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Checkin Buffer (hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
                    title="The grace period (in hh:mm) allowed after the shift start time to still consider a check-in as on time."></i></label>
                    <div class="col-md-9">
                        <div class="input-group">
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i></span>
                        </span>
                            
                            <input type="text" name="buffer_on_checkin" id='anytime-time-buffer' class="form-control @error('buffer_on_checkin') is-invalid @enderror"   @if(isset($shift)) value="{{substr($shift->buffer_on_checkin, 0, -3)}}" autofocus @endif/>
                            @error('buffer_on_checkin')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Early Check-out Buffer(hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="How much earlier (in hh:mm) a user is allowed to check out before the shift ends."></i></label>
                    <div class="col-md-9">
                        <div class="input-group">
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i>

</span>
                        </span>
                            
                            <input type="text" name="buffer_on_checkout" id="checkout-time-buffer" class="form-control @error('buffer_on_checkout') is-invalid @enderror"   @if(isset($shift)) value="{{substr($shift->buffer_on_checkout, 0, -3)}}" autofocus @endif/>
                            @error('buffer_on_checkout')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                 <div class="form-group row">
                    <label class="col-form-label col-md-3">Early Check-In Buffer (hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="How early (in hh:mm) a user can check in before the scheduled shift start time."></i></label>
                    <div class="col-md-9">
                        <div class="input-group">
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i></span>
                        </span>
                            
                            <input type="text" name="range_buffer_on_checkin" id="range-checkin-time-buffers" class="form-control @error('range_buffer_on_checkin') is-invalid @enderror"   @if(isset($shift)) value="{{substr($shift->range_buffer_on_checkin, 0, -3)}}" autofocus @endif/>
                            @error('range_buffer_on_checkin')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Check-Out Buffer(hh/mm):   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="How much later (in hh:mm) a user can check out after the shift ends."></i></label>
                    <div class="col-md-9">
                        <div class="input-group">
                        <span class="input-group-addon mr-2">
                        <span class="input-group-text"><i class="icon-watch2"></i></span>
                        </span>
                            
                            <input type="text" name="range_buffer_on_checkout" id="range-checkout-time-buffers" class="form-control @error('range_buffer_on_checkout') is-invalid @enderror"   @if(isset($shift)) value="{{substr($shift->range_buffer_on_checkout, 0, -3)}}" autofocus @endif/>
                            @error('range_buffer_on_checkout')
                            <span class="invalid-feedback" role="alert">
                                <strong class="ml-4">{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <!-- <div class="form-group row">                     <label class="col-form-label col-md-3">Buffer On:</label>
                    <select  name ="buffer_on_id" required class="form-control required col-md-9 @error('buffer_on_id') is-invalid @enderror">
                        @if(isset($buffersEdits))
                            <option></option>
                            @foreach ($buffersEdits as $buffersEdit)
                                <option  value="{{$buffersEdit->id}}"
                                    @if(isset($bufferArr))
                                    @if ( $bufferArr->buffer_on_id == $buffersEdit->id){{ 'selected="selected"' }} @endif @endif >
                                    {{ $buffersEdit->buffer_on }}
                                </option>
                            @endforeach
                            @else
                            <option></option>
                            @foreach ($buffers as $buffer)
                                <option  value="{{$buffer->id}}">{{ $buffer->buffer_on }}</option>
                            @endforeach
                        @endif
                    </select>
                    @error('buffer_on_id')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div> -->
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Weekend Definition:   <i class="bi bi-info-circle-fill text-primary" data-bs-toggle="tooltip" data-bs-placement="right"
       title="Select the days considered as weekends. Users are not expected to work on these days unless specified."></i></label>
                    <div class="col-md-9">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Mon</th>
                                        <th>Tue</th>
                                        <th>Wed</th>
                                        <th>Thu</th>
                                        <th>Fri</th>
                                        <th>Sat</th>
                                        <th>Sun</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="monday"
                                                  @if(isset($shift)) @if(optional($shift->weekend)->monday == 1) checked="checked" value="1"  autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="tuesday"
                                                    @if(isset($shift)) @if(optional($shift->weekend)->tuesday == 1) checked="checked" value="1" autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="wednesday"
                                                   @if(isset($shift)) @if(optional($shift->weekend)->wednesday == 1) checked="checked" value="1"  autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="thursday"
                                                    @if(isset($shift)) @if(optional($shift->weekend)->thursday == 1) checked="checked" value="1"  autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="friday"
                                                   @if(isset($shift)) @if(optional($shift->weekend)->friday == 1) checked="checked" value="1" autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="saturday"
                                                   @if(isset($shift)) @if(optional($shift->weekend)->saturday == 1) checked="checked" value="1" autofocus @endif @endif value="0" />
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="weekend form-check-input-styled-primary" name="sunday"
                                                    @if(isset($shift)) @if(optional($shift->weekend)->sunday == 1) checked="checked" value="1" autofocus @endif @endif value="0"/>
                                            </label>
                                        </div>
                                    </td>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /basic text input -->
            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
                <button type="submit" class="btn btn-primary ml-3">@if(isset($shift)) {{ 'Update' }} @else {{ 'Save' }}
                    @endif<i class="icon-paperplane ml-2"></i>
                </button>
                <a class="btn btn-default btn-close btn-danger ml-3" href="{{ route('shift.index') }}">Cancel</a>
            </div>
        </form>
    </div>
</div>
<!-- /form validation -->
@endsection

@section('js')
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">


    <script>
        $(document).ready(function(){
            $(".weekend").on("click",function(){
                if($(this).prop("checked")){
                    $(this).val(1);
                }
                else{
                    $(this).val(0);
                    $(this).removeAttr("checked");
                }
            });
        });
   document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
    </script>
@endsection