@extends('layouts.app')

@section('style')
<!-- <link rel="stylesheet" type="text/css" href="{{URL::asset('profile/profile-2.min.css')}}"> -->
<link href="{{URL::asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" rel="stylesheet" type="text/css" />

<style type="text/css">
    .padding {
        padding: 0px;
    }
</style>
@endsection
@section('content')
    <div class="row">

        <div class="portlet light bg-inverse" id="form_holy_day" style="min-height: 100%;">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase">@lang('layout.EditEmployeeLeave') </span>

                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">

                </div>
            </div>
            <div class="portlet-body form" id="app" style="margin-bottom:50%;">
                <!-- BEGIN FORM-->
                {!! Form::model($leaves, ['method' => 'PATCH','class'=>'form-horizontal','route' => ['leaves.update',$leaves->id]]) !!}
                {{ csrf_field() }}
                <div class="form-body">

                <div class="row">

                    <div class="col-md-12"style="margin-right:35px;">
                                            
                        <div class="form-group">
                            <h4 class="caption-subject  bold uppercase">@lang('layout.EmployeeName'): {{$leaves->name}}- <span style="margin-right:2px;">{{$leaves->number}} </span></span> </h4>

                        </div>
                    </div>


                <div class="col-md-3">
                                            
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Code'):</label>
                            <div class="col-md-9">
                                <input type="text" name="code" class="form-control"value="{{$leaves->code}}" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                                            
                        <div class="form-group">
                            <label class="control-label col-md-3">@lang('layout.Date'):</label>
                            <div class="col-md-9">
                                <input type="text" name="date" value="{{convertDate($leaves->date)}}" class="form-control date" autocomplete="off">
                            </div>
                        </div>
                    </div>


                    <div class="col-md-3">
                        <div class="form-group">
                        <label class="control-label col-md-3">@lang('layout.Type'):</label>
                        <div class="col-md-9">
                        <select name="type" v-model="type" class="form-control">
                            <option value="Hourly"  >@lang('type.Hourly')</option>
                            <option value="Daily">@lang('type.Daily')</option>
                        </select>
                    </div>
                    </div>
                    </div>

                    <div class="col-md-3" v-show="type == 'Hourly' || !type">
                        <div class="form-group">
                        <label class="control-label col-md-3">@lang('layout.FromHour')</label>

                        <div class="col-md-9"> 
                            
                            <input type="text" value="{{$leaves->from_hour}}"  class="form-control timepicker timepicker-no-seconds"  ref="time_input" name="from_hour">
                            
                        </div>
                    </div>
                    </div>


                    <div class="col-md-3" v-show="type == 'Hourly' || !type">

                        <div class="form-group">
                        <label class="control-label col-md-3">@lang('layout.ToHour')</label>

                        <div class="col-md-9"> 
                            
                            <input type="text"value="{{$leaves->to_hour}}" class="form-control timepicker timepicker-no-seconds"  ref="time_input" name="to_hour">
                            
                        </div>
                    </div>
                </div>


                <div class="col-md-3">
                                            
                <div class="form-group">
                    <label class="control-label col-md-3">@lang('layout.Description'):</label>
                    <div class="col-md-9">
                        <textarea name="description" class="form-control" id="" cols="30" rows="1">{{$leaves->description}}</textarea>
                    </div>
                </div>
            </div>


                <div class="col-md-3" v-show="type == 'Daily'">
                    
                    <div class="form-group">
                        <label class="control-label col-md-3">@lang('layout.FromDate'):</label>
                        <div class="col-md-9">
                            <input type="text" name="from_date"value="{{convertDate($leaves->from_date)}}" class="form-control date" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    
                    <div class="form-group" v-show="type == 'Daily'">
                        <label class="control-label col-md-3">@lang('layout.ToDate'):</label>
                        <div class="col-md-9">
                            <input type="text" name="to_date"value="{{convertDate($leaves->to_date)}}" class="form-control date" autocomplete="off">
                        </div>
                    </div>
                </div>
                </div>
               
                </div>
                <div class="col-xs-12 col-sm-10 col-md-11 text-center">
                    <button type="button" onclick="regForm(this)" class="btn green">@lang('layout.Submit')</button>
                    <a href="{{route('employeeLeaves.index')}}" class="btn default"><i
                                class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                </div>
                {!! Form::close() !!}
            </div>
            <!-- END FORM-->
        </div>
    </div>
@endsection

@push('scripts')
    
<script src="{{URL::asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
<script src="{{URL::asset('assets/pages/scripts/components-date-time-pickers.min.js')}}" type="text/javascript"></script>

<script>

var leaves = {!! $leaves !!};
new Vue({
    el: '#form_holy_day',
    data: {
        type: 'Daily',
    },
    computed: {

    },
    mounted() {
            if (leaves.type) {
                this.type = leaves.type;
            }
        },
    methods: {
       
    }

});

</script>

@endpush