@extends('member') @section('page-title') @section('content') @if (isset($status))
<div class="pad margin no-print">
    <div class="alert alert-{{$status['code']}} alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4><i class="icon fa fa-ban"></i> {{ $status['header'] }}</h4>
        <ul>
            @foreach ($status['messages'] as $m)
            <li>{{$m}}</li>
            @endforeach
        </ul>
    </div>
</div>
@endif
<div class="row">
    <div class="col-xs-12">

        <div class="panel panel-inverse">
            <div class="panel-heading"> @lang('modules.leaves.assignLeave')</div>
            <div class="panel-wrapper collapse in" aria-expanded="true">
                <div class="panel-body">
                {!! Form::model($leave, ['id'=>'createLeave','class'=>'','method' => isset($leave) && $leave->id ? 'put' : 'post','files' => 'true']) !!}
                    


                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-body">
                        <input type="hidden" value="{{$_leaveTypes}}" id="leaveTypes" />
                        <div class="row hide manager_name">
                            <div class="col-md-4">
                                <label for="manager_name">Manager</label>
                                <div id="manager_name"></div>
                                <br />
                            </div>

                        </div>
                    </div>
                        </div>
                        <div class="col-md-12 ">
                            <div class="form-group {{{ $errors->has('user_id') ? 'has-error' : '' }}}">
                                        <label class="required">ChooseMember</label>
                                        <select class="form-control select2" name="user_id" id="user_id" onchange="getMangerName(); getLeaveType();">
                                            <option value=" ">None</option>
                                            @foreach($employees as $employee)
                                                <option value="{{ $employee->id }}">{{ ucwords($employee->name) }} ({{$employee->employee_code}})</option> 
                                            @endforeach
                                        </select>
                                    </div>
                                    {!! $errors->first('user_id', '<label class="control-label" for="user_id">:message</label>')!!}

                        </div>
                     
                         <div class="col-md-12 ">
                            <div class="form-group">
                                <label class="required">Leave Type</label>
                                <select class="select2 form-control" name="leave_type_id" id="leave_type_id" onchange="getBalance();">
                                </select> {!! $errors->first('leave_type_id', '<label class="control-label" for="leave_type_id">:message</label>')!!}
                            </div>
                         </div>
                        
                        <div class="row dashboard-stats front-dashboard mb-15">
                                <div class="col-md-3 col-sm-6">
                                <div class="white-box">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div>
                                                <span class="bg-info-gradient"><i class="icon-layers"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <span class="widget-title"> Total Leaves</span><br>
                                            <span class="counter" id="t_leaves">0</span>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                <div class="white-box">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div>
                                                <span class="bg-warning-gradient"><i class="icon-layers"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <span class="widget-title">Total Approved</span><br>
                                            <span class="counter" id="t_approved">0</span>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                <div class="white-box">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div>
                                                <span class="bg-danger-gradient"><i class="icon-layers"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <span class="widget-title">Pending</span><br>
                                            <span class="counter" id="t_pending">0</span>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                <div class="white-box">
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div>
                                                <span class="bg-success-gradient"><i class="icon-layers"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <span class="widget-title">Balanced</span><br>
                                            <span class="counter" id="t_balanced">0</span>
                                        </div>
                                    </div>
                                </div>
                                </div>
                        </div>

                        

                        <div class="col-xs-12">
                            <div class="form-group">
                                <label class="required">@lang('modules.leaves.selectDuration')</label>
                                <div class="radio-list">
                                    <label class="radio-inline p-0">
                                        <div class="radio radio-info" onclick="elsehandleHalfDay()">
                                            <input type="radio" name="duration" id="duration_single" checked value="single">
                                            <label for="duration_single">@lang('modules.leaves.single')</label>
                                        </div>
                                    </label>
                                    <label class="radio-inline">
                                        <div class="radio radio-info" onclick="elsehandleHalfDay()">
                                            <input type="radio" name="duration" id="duration_multiple" value="multiple">
                                            <label for="duration_multiple">@lang('modules.leaves.multiple')</label>
                                        </div>
                                    </label>
                                    <!-- <label class="radio-inline">
                                        <div class="radio radio-info" onclick="handleHalfDay()">
                                            <input type="radio" name="duration" id="duration_half_day" value="half day">
                                            <label for="duration_half_day">@lang('modules.leaves.halfDay')</label>
                                        </div>
                                    </label> -->
                                    <label class="radio-inline" onclick="handleHalfDay()">
                                        <div class="radio radio-info">
                                            <input type="radio" name="duration" id="first_half_day" value="first half day">
                                            <label for="first_half_day">First Half Day</label>
                                        </div>
                                    </label>

                                    <label class="radio-inline" onclick="handleHalfDay()"> 
                                        <div class="radio radio-info">
                                            <input type="radio" name="duration" id="second_half_day" value="second half day">
                                            <label for="second_half_day">Second Half Day</label>
                                        </div>
                                    </label>

                                </div>
                                <div class="half_day hide">
                                    
                                </div>

                            </div>
                        </div>

                    </div>
                    <!--/row-->

                    

                    <div class="row">
                    <div class="col-md-3" id="single-date">
                            <label class="required">Date <span style="color: red">*</span></label>
                            <div class="form-group">
                                <input type="text" class="form-control" name="leave_date" id="single_date" autocomplete="off" value="{{ Carbon\Carbon::today()->format('Y-m-d')}}"> {!! $errors->first('single_date', '<label class="control-label" for="single_date">:message</label>')!!}
                            </div>
                        </div>

                        <div id="multi-date" style="display: none">
                            <div class="col-md-3">
                                <label class="required">From Date <span style="color: red">*</span></label>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="leave_from_date" id="leave_from_date" autocomplete="off" value="{{ Carbon\Carbon::today()->format('Y-m-d')}}"> {!! $errors->first('single_date', '<label class="control-label" for="single_date">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="required">To Date <span style="color: red">*</span></label>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="leave_to_date" id="leave_to_date" autocomplete="off" value="{{ Carbon\Carbon::today()->format('Y-m-d')}}"> {!! $errors->first('single_date', '<label class="control-label" for="single_date">:message</label>')!!}
                                </div>
                            </div>

                        </div>

                    </div>
                    <!--/span-->

                    <div class="row ml hide">
                        <div class="col-md-6">
                            <label>Leave Attachment Doc</label>
                            <div class="form-group">
                                <input type="file" name="files" name="attachment" multiple/>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <label >@lang('modules.leaves.reason') <span style="color: red">*</span></label>
                            <div class="form-group">
                                <textarea name="reason" id="reason" class="form-control" cols="30" rows="5"></textarea> {!! $errors->first('reason', '<label class="control-label" for="reason">:message</label>')!!}
                            </div>
                        </div>

                        <div class="col-md-6" style="display: none">
                            <label>Remark</label>
                            <div class="form-group">
                                <textarea name="remark" id="remark" class="form-control" cols="30" rows="5"></textarea> {!! $errors->first('remark', '<label class="control-label" for="remark">:message</label>')!!}
                            </div>
                        </div>

                        <!-- <div class="col-md-6">
                    <label>@lang('app.status')</label>
                    <div class="form-group">
                        <select class="select2" data-style="form-control" name="leave_status" id="leave_status">
                                            <option value="approved">@lang('app.approved')</option>
                                            <option value="pending">@lang('app.pending')</option>
                                        </select> {!! $errors->first('leave_status', '<label class="control-label" for="leave_status">:message</label>')!!}
                    </div>
                </div> -->

                    </div>

                    <div class="form-actions">
                    <button type="submit" id="save-form" class="btn btn-success"><i class="fa fa-check"></i>
                        @lang('app.save')
                    </button>

                </div>
                </div>
               
                {!! Form::close() !!}
            </div>

        </div>
    </div>
</div>
</div>

<!-- .row -->

 @endsection @push('footer-script')
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<style type="text/css">
    .alert.alert-error.alert-dismissible.fade.in {
    background-color: #f13e3e;
    color: white;
}
span.select2.select2-container.select2-container--default {
    width: 100% !important;
}
label.control-label {
    color: red;
}
label.control-label.error {
    color: red;
}
</style>
<script>
var date = new Date();
var startDate = new Date(date.getFullYear(), date.getMonth(), 1);
var endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);

    $(".select2").select2({
        formatNoMatches: function() {
            return "{{ __('messages.noRecordFound') }}";
        }
    });

    jQuery('#multi_date').datepicker({
         multidate: true,
         autoclose: true,
         startDate: startDate,
         format: 'yyyy-mm-dd',
    });

    jQuery('#single_date').datepicker({
    autoclose: true,
    startDate: startDate,
    format: 'yyyy-mm-dd',
    });

    jQuery('#leave_from_date').datepicker({
    autoclose: true,
    startDate: startDate,
    format: 'yyyy-mm-dd',
    });

    
    $("#leave_to_date").datepicker({ 
        autoclose: true,
        format: 'yyyy-mm-dd',
        onSelect: function(selected) {
           $("#leave_from_date").datepicker("option","maxDate", selected)
        }
    });
    

    $("input[name=duration]").click(function() {
        if ($(this).val() == 'multiple') {
            $('#multi-date').show();
            $('#single-date').hide();
        } else {
            $('#multi-date').hide();
            $('#single-date').show();
        }
    })

    $('#createLeave').on('click', '#addLeaveType', function() {
        var url = "{{ route('leaveType.create',['alias'=>$alias])}}";
        $('#modelHeading').html('Manage Leave Type');
        $.ajaxModal('#projectCategoryModal', url);
    })

    $('#save-form-2').click(function() {
        $.easyAjax({
            url: "{{route('member.leaves.store',['alias'=>$alias])}}",
            container: '#createLeave',
            type: "POST",
            redirect: true,
            data: $('#createLeave').serialize()
        })
    });



    function handleHalfDay() {
        $(".half_day").removeClass('hide');
    }

    function elsehandleHalfDay() {
        $(".half_day").addClass('hide');
    }

    function getMangerName() {
        $(".manager_name").addClass('hide');
        $.ajax({
            url: "/members/manager?id=" + $("#user_id").val(),
            type: "GET",
            data: {
                _token: '{{ csrf_token() }}',
            },
            dataType: 'json',
            success: function(dataResult) {
                $(".manager_name").removeClass('hide');
                $("#manager_name").html(dataResult.hod.name);

            }
        });
    }

    function getLeaveType() {
        $.ajax({
            url: "/admin/memberajaxleavetype?id=" + $("#user_id").val(),
            type: "GET",
            data: {
                _token: '{{ csrf_token() }}',
            },
            dataType: 'json',
            success: function(result) {
                $('#leave_type_id').html('<option value="">Select Type</option>'); 
$.each(result.leavetype,function(key,value){
$("#leave_type_id").append('<option value="'+value.id+'">'+value.type_name+'</option>');
});

            }
        });
    }


    function getBalance() {

        var data = {
            leave_type_id: $("#leave_type_id").val(),
            leave_type_name: $("#leave_type_id option:selected").text(),
            id: $("#user_id").val(),
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/member/{!! $alias !!}/leave/balance',
            type: 'POST',
            data: data,
            success: function(data) {
                $("#t_leaves").html(data.t_leaves);
                $("#t_approved").html(data.t_approved);
                $("#t_pending").html(data.t_pending);
                $("#t_balanced").html(data.t_balanced);
                if(data.is_attachment=='1'){
                    $('.ml').removeClass('hide');
                }else{
                    $('.ml').addClass('hide');
                }
            }
        });
    }
</script>
@endpush