@extends('admin.layout')
@section('content')
<style>
    #watermarked::before {
	position: fixed;
	top: -75%;
	left: -75%;
	display: block;
	width: 300%;
	height: 300%;
	transform: rotate(-45deg);
	content: attr(data-watermark);
	font-size: 30px;
	opacity: 0.15;
	line-height: 4em;
	letter-spacing: 2px;
	color: #ff0523;
	z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">
        <section class="content-header">
            <h1> {{ trans('Shift Management') }} <small> {{ trans('Add Shift ') }}...</small> </h1>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i>
                        {{ trans('labels.breadcrumb_dashboard') }}</a></li>
                <li class="active"> {{ trans('Schedule') }}</li>
                <li class="active"> {{ trans('Add Shift') }}</li>
            </ol>
        </section>
        @php
        $getUserRoleData = userRoleData();
        $schedules = explode(",",$getUserRoleData->schedules);
        @endphp
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-body">

                            <div class="col-xs-12">
                                <div class="row">
                                    @if(session()->has('message'))
                                    <div class="alert alert-success alert-dismissible">
                                        <button aria-hidden="true" data-dismiss="alert" class="close"
                                            type="button">×</button>
                                        <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
                                        {{ session()->get('message') }}
                                    </div>
                                    @endif
                                    @if (!$errors->isEmpty())
                                    <div class="alert alert-warning alert-dismissible">
                                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                                            <strong>Warning!</strong>
                                    
                                            @foreach ($errors->all() as $error)
                                                {{ $error }}<br/>
                                            @endforeach
                                        
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="clearfix"></div>

                            <div class="row" style="margin-top: 10px;">
                                <div class="col-xs-12 ">
                                @if(in_array("View",$schedules ))
                                {!! Form::open(array('url' =>'admin/update-shift/'.$result->shift_id, 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'shift_add', 'enctype'=>'multipart/form-data')) !!}

                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 col-md-3 control-label">Shift Name<span
                                                    class="red_star">*</span></label>
                                            <div class="col-sm-10 col-md-4 leave-date">
                                                <input type="text" class="form-control  form-control-sm float-right"
                                                    name="shift_name" id="shift_name" value="{{old('shift_name', $result->shift_name)}}" autocomplete="off">


                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="name" class="col-xs-12 col-md-3 control-label">Shift Time <span
                                                    class="red_star">*</span></label>
                                            <div class="col-xs-6 col-md-2 shift-time" >
                                                <input type="time" class="form-control  form-control-sm float-right"
                                                        name="shift_time_in" id="shift_time_in" value="{{old('shift_time_in', date('H:i', strtotime($result->shift_in)))}}" autocomplete="off">

                                                
                                            </div>
                                            <div class="col-xs-6 col-md-2 shift-time" >
                                                <input type="time" class="form-control  form-control-sm float-right"
                                                        name="shift_time_out" id="shift_time_out" value="{{old('shift_time_out', date('H:i', strtotime($result->shift_out)))}}"  autocomplete="off">

                                                
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                                <a href="{{URL::to('admin/shifts')}}" class="btn btn-default">{{ trans('Back') }}</a>
                                                    
                                            </div>
                                        </div>
                                    {!!Form::close()!!}
                                    @else
                                    <p> <strong>Please contact with SuperAdmin</strong></p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                    </div>
            
                </div>
            </div>
        </section>
    </div>
</div>
<style>
    .shift-time{
        Position:relative;

    }
    .input-group-prepend{
        position: absolute;
        top: 6px;
        left: 14px;
    }
    .shift-time input{
        padding-left:20px;
    }
    </style>
    <script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script type="text/javascript">
     
	$( "#shift_add" ).validate( {
            rules: {
                shift_name: {
                    required: true,
                },
                
                shift_time_in: {
                    required: true,
                },
                shift_time_out: {
                    required: true,
                   
                },	
        
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                // Add `has-feedback` class to the parent div.form-group
                // in order to add icons to inputs
                element.parents( ".col-sm-5" ).addClass( "has-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }

                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !element.next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                }
            },
            success: function ( label, element ) {
                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !$( element ).next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
                $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
            },
            unhighlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
                $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
            }
        });
    // })
   
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
		el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
	});
</script>
@endsection